1 files changed, 74 insertions, 0 deletions
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
new file mode 100644
index 0000000..ec9ff57
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -0,0 +1,74 @@
+<Item id="contacts"
+    width="240"
+    height="230">
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <resources>
+        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../../shared/contacts.sqlite"/>
+        <SqlQuery id="contactList" connection="{contactDatabase}">
+            <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}" height="34">
+                <Text id="label"
+                    x="45" y="12"
+                    width="{parent.width-45}" 
+                    text="{model.label}"
+                    color="black"
+                    font.bold="true">
+                </Text>
+                <MouseRegion
+                    anchors.fill="{label}">
+                    <onClicked>
+                        Details.qml = 'Contact.qml';
+                        wrapper.state='opened';
+                    </onClicked>
+                </MouseRegion>
+                <Item id="Details"
+                    anchors.fill="{wrapper}"
+                    opacity="0">
+                    <Bind target="{Details.qmlItem}" property="contactid" value="{model.contactid}"/>
+                    <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/>
+                    <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/>
+                    <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/>
+                </Item>
+                <states>
+                    <State name='opened'>
+                        <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/>
+                        <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/>
+                        <SetProperty target="{contactListView}" property="locked" value="1"/>
+                        <SetProperty target="{label}" property="opacity" value="0"/>
+                        <SetProperty target="{Details}" property="opacity" value="1"/>
+                    </State>
+                </states>
+                <transitions>
+                    <Transition>
+                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
+                    </Transition>
+                </transitions>
+                <Connection sender="{cancelEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened') {
+                        wrapper.state = '';
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../../shared/pics/cancel.png"
+        opacity="{mouseGrabbed ? 0 : 1}"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{parent.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"
+        focus="true"/>
+</Item>