Use namespaces to reduce file duplication

Also add some alternate 'chapter 2, step 1' examples
to demonstrate loading by file name and using namespaces

20 files changed, 51 insertions, 423 deletions

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/3_Collections/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
index ad488c1..ddb3507 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml
@@ -2,24 +2,14 @@
     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;
-                    }
+                    removeButton.state = 'opened';
                 }
             }
         </Script>
@@ -52,7 +42,7 @@
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
+            onClicked="toggle()"/>
     </Image>
     <Text id="text"
         anchors.verticalCenter="{parent.verticalCenter}"
@@ -65,7 +55,7 @@
         opacity="0"/>
     <states>
         <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <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"/>
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/3_Collections/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
index ad488c1..524bde2 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml
@@ -2,24 +2,14 @@
     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;
-                    }
+                    removeButton.state = 'opened';
                 }
             }
         </Script>
@@ -28,7 +18,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/trash.png"
+        src="../../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/cancel.png"
+        src="../../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -48,11 +38,11 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../../shared/pics/ok.png"
+        src="../../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
-            onClicked="toggle(); removeButton.confirmed.emit()"/>
+            onClicked="toggle()"/>
     </Image>
     <Text id="text"
         anchors.verticalCenter="{parent.verticalCenter}"
@@ -65,7 +55,7 @@
         opacity="0"/>
     <states>
         <State name="opened">
-            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <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"/>
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/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/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/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
index 8290d35..8290d35 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
index 293b3a5..293b3a5 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
index 819914c..819914c 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
index 068590a..068590a 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml
index ad488c1..ad488c1 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml