From a9b976c3c68e246f1d6ab83d02715ab81fb4dd6a Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Tue, 28 Apr 2009 10:38:48 +1000
Subject: Use namespaces to reduce file duplication

Also add some alternate 'chapter 2, step 1' examples
to demonstrate loading by file name and using namespaces
---
 .../tutorials/contacts/2_Reuse/1a/ContactField.qml | 20 +++++
 .../tutorials/contacts/2_Reuse/1a/RemoveButton.qml | 70 ++++++++++++++++
 .../tutorials/contacts/2_Reuse/1b/ContactField.qml | 19 +++++
 .../contacts/2_Reuse/1b/lib/RemoveButton.qml       | 70 ++++++++++++++++
 .../tutorials/contacts/3_Collections/1/Button.qml  | 38 ---------
 .../tutorials/contacts/3_Collections/1/Contact.qml | 28 -------
 .../contacts/3_Collections/1/ContactField.qml      | 35 --------
 .../contacts/3_Collections/1/ContactView.qml       |  1 +
 .../contacts/3_Collections/1/FieldText.qml         | 96 ----------------------
 .../contacts/3_Collections/1/RemoveButton.qml      | 80 ------------------
 .../tutorials/contacts/3_Collections/2/Button.qml  | 38 ---------
 .../tutorials/contacts/3_Collections/2/Contact.qml | 28 -------
 .../contacts/3_Collections/2/ContactField.qml      | 35 --------
 .../contacts/3_Collections/2/ContactView.qml       |  1 +
 .../contacts/3_Collections/2/FieldText.qml         | 96 ----------------------
 .../contacts/3_Collections/2/RemoveButton.qml      | 80 ------------------
 .../tutorials/contacts/3_Collections/3/Button.qml  | 38 ---------
 .../tutorials/contacts/3_Collections/3/Contact.qml | 28 -------
 .../contacts/3_Collections/3/ContactField.qml      | 35 --------
 .../contacts/3_Collections/3/ContactView.qml       |  1 +
 .../contacts/3_Collections/3/FieldText.qml         | 96 ----------------------
 .../contacts/3_Collections/3/RemoveButton.qml      | 80 ------------------
 .../contacts/3_Collections/lib/Button.qml          | 38 +++++++++
 .../contacts/3_Collections/lib/Contact.qml         | 28 +++++++
 .../contacts/3_Collections/lib/ContactField.qml    | 35 ++++++++
 .../contacts/3_Collections/lib/FieldText.qml       | 96 ++++++++++++++++++++++
 .../contacts/3_Collections/lib/RemoveButton.qml    | 80 ++++++++++++++++++
 27 files changed, 459 insertions(+), 831 deletions(-)
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml

diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
new file mode 100644
index 0000000..ee860b0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml
@@ -0,0 +1,20 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <Item id="removeButton"
+        qml="RemoveButton.qml"
+        width="{qmlItem.width}" height="{qmlItem.height}"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
+    <Text id="fieldText"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="black"
+        text="123123"/>
+    <Image src="../../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
new file mode 100644
index 0000000..ddb3507
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
new file mode 100644
index 0000000..bff68b9
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml
@@ -0,0 +1,19 @@
+<?qtfx namespacepath:=lib ?> <!-- RemoveButton location -->
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
+    <Text id="fieldText"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        font.bold="true"
+        color="black"
+        text="123123"/>
+    <Image src="../../shared/pics/phone.png"
+        anchors.right="{fieldText.left}" anchors.rightMargin="10"
+        anchors.verticalCenter="{parent.verticalCenter}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
new file mode 100644
index 0000000..524bde2
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
@@ -0,0 +1,70 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="230"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
deleted file mode 100644
index 293b3a5..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
index d48aa02..5f9abc7 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -1,3 +1,4 @@
+<?qtfx namespacepath:=../lib ?>
 <Item id="contacts"
     width="240"
     height="230">
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
deleted file mode 100644
index 068590a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
deleted file mode 100644
index ad488c1..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
deleted file mode 100644
index 293b3a5..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
index c72d9ce..99d0bbb 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -1,3 +1,4 @@
+<?qtfx namespacepath:=../lib ?>
 <Item id="contacts"
     width="240"
     height="230">
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
deleted file mode 100644
index 068590a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
deleted file mode 100644
index ad488c1..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
-    <properties>
-        <Property name="icon"/>
-    </properties>
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
-    <Rect id="buttonRect"
-        anchors.fill="{parent}"
-        color="lightgreen"
-        radius="5">
-        <Image id="iconImage"
-            src="{button.icon}"
-            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
-            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
-        <MouseRegion id="buttonMouseRegion"
-            anchors.fill="{buttonRect}"
-            onClicked="button.clicked.emit()"/>
-        <states>
-            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
-                <SetProperty target="{buttonRect}" property="color" value="green"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="pressed">
-                <ColorAnimation duration="200"/>
-            </Transition>
-            <Transition fromState="pressed" toState="*">
-                <ColorAnimation duration="1000"/>
-            </Transition>
-        </transitions>
-    </Rect>
-    <opacity>
-        <Behaviour>
-            <NumericAnimation property="opacity" duration="250"/>
-        </Behaviour>
-    </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
deleted file mode 100644
index 293b3a5..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<Item id="contactDetails"
-    anchors.fill="{parent}">
-    <properties>
-        <Property name="contactid" value=""/>
-        <Property name="label" onValueChanged="labelField.value = label"/>
-        <Property name="phone" onValueChanged="phoneField.value = phone"/>
-        <Property name="email" onValueChanged="emailField.value = email"/>
-    </properties>
-    <VerticalLayout id="layout"
-        anchors.fill="{parent}"
-        spacing="5"
-        margin="5">
-        <ContactField id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField id="emailField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../../shared/pics/email.png"
-            label="Email"/>
-    </VerticalLayout>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    height="30">
-    <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        label="{contactField.label}"
-        text="{contactField.value}"/>
-    <Image
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="{contactField.icon}"/>
-    <states>
-        <State name="editingText" when="{fieldText.state == 'editing'}">
-            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
-            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="width,rightMargin" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
index ec9ff57..a8c5cd0 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -1,3 +1,4 @@
+<?qtfx namespacepath:=../lib ?>
 <Item id="contacts"
     width="240"
     height="230">
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
deleted file mode 100644
index 068590a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
+++ /dev/null
@@ -1,96 +0,0 @@
-<Rect id="fieldText"
-    height="30"
-    radius="5"
-    color="white">
-    <properties>
-        <Property
-            name="text"
-            value=""
-            onValueChanged="reset()"/>
-        <Property
-            name="label"
-            value=""/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function edit() {
-                if (!contacts.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contacts.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contacts.mouseGrabbed=false;
-            }
-        </Script>
-    </resources>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0"/>
-    <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        color="black"
-        font.bold="true"
-        readOnly="true"
-        wrap="false"
-        />
-    <Text id="textLabel"
-        x="5" width="{parent.width-10}"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        hAlign="AlignHCenter"
-        color="#505050"
-        font.italic="true"
-        text="{fieldText.label}"
-        opacity="{textEdit.text == '' ? 1 : 0}">
-        <opacity>
-            <Behaviour>
-                <NumericAnimation property="opacity" duration="250"/>
-            </Behaviour>
-        </opacity>
-    </Text>
-    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-    <MouseRegion
-        id="editRegion"
-        anchors.fill="{textEdit}"
-        onClicked="edit()"/>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
-            <SetProperty target="{textEdit}" property="focus" value="true"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
deleted file mode 100644
index ad488c1..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <properties>
-        <Property name="expandedWidth" value="230"/>
-    </properties>
-    <signals>
-        <Signal name="confirmed"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                print('removeButton.toggle()');
-                if (removeButton.state == 'opened') {
-                    removeButton.state = '';
-                    contacts.mouseGrabbed=false;
-                } else {
-                    if (!contacts.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contacts.mouseGrabbed=true;
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/trash.png"
-        opacity="1">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle()"/>
-    </Image>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
-        opacity="0">
-        <MouseRegion
-            anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
-    </Image>
-    <Text id="text"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
-        font.bold="true"
-        color="white"
-        hAlign="AlignHCenter"
-        text="Remove"
-        opacity="0"/>
-    <states>
-        <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
-            <SetProperty target="{text}" property="opacity" value="1"/>
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation properties="opacity,x,width" duration="200"/>
-        </Transition>
-    </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
@@ -0,0 +1,38 @@
+<Item id="button" width="30" height="30">
+    <properties>
+        <Property name="icon"/>
+    </properties>
+    <signals>
+        <Signal name="clicked"/>
+    </signals>
+    <Rect id="buttonRect"
+        anchors.fill="{parent}"
+        color="lightgreen"
+        radius="5">
+        <Image id="iconImage"
+            src="{button.icon}"
+            anchors.horizontalCenter="{buttonRect.horizontalCenter}"
+            anchors.verticalCenter="{buttonRect.verticalCenter}"/>
+        <MouseRegion id="buttonMouseRegion"
+            anchors.fill="{buttonRect}"
+            onClicked="button.clicked.emit()"/>
+        <states>
+            <State name="pressed" when="{buttonMouseRegion.pressed == true}">
+                <SetProperty target="{buttonRect}" property="color" value="green"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="pressed">
+                <ColorAnimation duration="200"/>
+            </Transition>
+            <Transition fromState="pressed" toState="*">
+                <ColorAnimation duration="1000"/>
+            </Transition>
+        </transitions>
+    </Rect>
+    <opacity>
+        <Behaviour>
+            <NumericAnimation property="opacity" duration="250"/>
+        </Behaviour>
+    </opacity>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
@@ -0,0 +1,28 @@
+<Item id="contactDetails"
+    anchors.fill="{parent}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
@@ -0,0 +1,35 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
@@ -0,0 +1,96 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                if (!contacts.mouseGrabbed) {
+                    fieldText.state='editing';
+                    contacts.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contacts.mouseGrabbed=false;
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
@@ -0,0 +1,80 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                    contacts.mouseGrabbed=false;
+                } else {
+                    if (!contacts.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        contacts.mouseGrabbed=true;
+                    }
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>
-- 
cgit v0.12