From 75e867d56b12626d3db13d21b6d55c5cebaf9858 Mon Sep 17 00:00:00 2001
From: Ian Walters <ian.walters@nokia.com>
Date: Tue, 28 Apr 2009 10:12:47 +1000
Subject: Reorg so that snippets are more readable.

Reorg not complete though.  May implement use of
namespace features in chapter 2 so that can reduce
duplicated files in chapter 3.
---
 .../1_Drawing_and_Animation/1/Removebutton.qml     |  4 +
 .../1_Drawing_and_animation.qml                    | 12 +--
 .../1_Drawing_and_Animation/2/RemoveButton.qml     | 10 +++
 .../1_Drawing_and_Animation/3/RemoveButton.qml     | 23 ++++++
 .../1_Drawing_and_Animation/4/RemoveButton.qml     | 65 +++++++++++++++
 .../1_Drawing_and_Animation/5/RemoveButton.qml     | 70 ++++++++++++++++
 .../contacts/1_Drawing_and_Animation/GroupBox.qml  | 12 ++-
 .../1_Drawing_and_Animation/RemoveButton1.qml      |  4 -
 .../1_Drawing_and_Animation/RemoveButton2.qml      | 10 ---
 .../1_Drawing_and_Animation/RemoveButton3.qml      | 23 ------
 .../1_Drawing_and_Animation/RemoveButton4.qml      | 65 ---------------
 .../1_Drawing_and_Animation/RemoveButton5.qml      | 70 ----------------
 .../tutorials/contacts/2_Reuse/1/ContactField.qml  | 18 ++++
 .../tutorials/contacts/2_Reuse/1/RemoveButton.qml  | 70 ++++++++++++++++
 .../tutorials/contacts/2_Reuse/2/ContactField.qml  | 20 +++++
 .../tutorials/contacts/2_Reuse/2/RemoveButton.qml  | 76 +++++++++++++++++
 .../tutorials/contacts/2_Reuse/2_Reuse.qml         | 12 +--
 .../tutorials/contacts/2_Reuse/3/Contact.qml       | 29 +++++++
 .../tutorials/contacts/2_Reuse/3/ContactField.qml  | 36 ++++++++
 .../tutorials/contacts/2_Reuse/3/FieldText.qml     | 91 ++++++++++++++++++++
 .../tutorials/contacts/2_Reuse/3/RemoveButton.qml  | 76 +++++++++++++++++
 .../tutorials/contacts/2_Reuse/4/Contact.qml       | 32 ++++++++
 .../tutorials/contacts/2_Reuse/4/ContactField.qml  | 35 ++++++++
 .../tutorials/contacts/2_Reuse/4/FieldText.qml     | 96 ++++++++++++++++++++++
 .../tutorials/contacts/2_Reuse/4/RemoveButton.qml  | 80 ++++++++++++++++++
 .../tutorials/contacts/2_Reuse/Contact3.qml        | 29 -------
 .../tutorials/contacts/2_Reuse/Contact4.qml        | 32 --------
 .../tutorials/contacts/2_Reuse/ContactField1.qml   | 18 ----
 .../tutorials/contacts/2_Reuse/ContactField2.qml   | 20 -----
 .../tutorials/contacts/2_Reuse/ContactField3.qml   | 36 --------
 .../tutorials/contacts/2_Reuse/ContactField4.qml   | 35 --------
 .../tutorials/contacts/2_Reuse/FieldText3.qml      | 91 --------------------
 .../tutorials/contacts/2_Reuse/FieldText4.qml      | 96 ----------------------
 .../tutorials/contacts/2_Reuse/GroupBox.qml        | 12 ++-
 .../tutorials/contacts/2_Reuse/RemoveButton1.qml   | 70 ----------------
 .../tutorials/contacts/2_Reuse/RemoveButton2.qml   | 76 -----------------
 .../tutorials/contacts/2_Reuse/RemoveButton3.qml   | 76 -----------------
 .../tutorials/contacts/2_Reuse/RemoveButton4.qml   | 80 ------------------
 .../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       | 28 +++++++
 .../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       | 69 ++++++++++++++++
 .../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       | 74 +++++++++++++++++
 .../contacts/3_Collections/3/FieldText.qml         | 96 ++++++++++++++++++++++
 .../contacts/3_Collections/3/RemoveButton.qml      | 80 ++++++++++++++++++
 .../contacts/3_Collections/3_Collections.qml       | 41 ++-------
 .../tutorials/contacts/3_Collections/Button.qml    | 38 ---------
 .../tutorials/contacts/3_Collections/Contact.qml   | 28 -------
 .../contacts/3_Collections/ContactField.qml        | 35 --------
 .../contacts/3_Collections/ContactView1.qml        | 28 -------
 .../contacts/3_Collections/ContactView2.qml        | 68 ---------------
 .../contacts/3_Collections/ContactView3.qml        | 73 ----------------
 .../tutorials/contacts/3_Collections/FieldText.qml | 96 ----------------------
 .../tutorials/contacts/3_Collections/GroupBox.qml  | 12 ++-
 .../contacts/3_Collections/RemoveButton.qml        | 80 ------------------
 66 files changed, 1883 insertions(+), 1328 deletions(-)
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
 create mode 100644 examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/Button.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/Contact.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
 delete mode 100644 examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml

diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
new file mode 100644
index 0000000..dc3f505
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
@@ -0,0 +1,4 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5"/>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
index 4ea77f3..31a95c6 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
@@ -1,9 +1,9 @@
 <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <VerticalLayout id="layout" width="{contents.width}" margin="5" spacing="5">
-        <GroupBox contents="RemoveButton1.qml" label="Rectangle Component"/>
-        <GroupBox contents="RemoveButton2.qml" label="Closed Remove Item Button"/>
-        <GroupBox contents="RemoveButton3.qml" label="Open Remove Item Button"/>
-        <GroupBox contents="RemoveButton4.qml" label="State Based Button"/>
-        <GroupBox contents="RemoveButton5.qml" label="Animated Button"/>
+    <VerticalLayout id="layout" width="{contents.width}">
+        <GroupBox contents="1/RemoveButton.qml" label="Rectangle Component"/>
+        <GroupBox contents="2/RemoveButton.qml" label="Closed Remove Item Button"/>
+        <GroupBox contents="3/RemoveButton.qml" label="Open Remove Item Button"/>
+        <GroupBox contents="4/RemoveButton.qml" label="State Based Button"/>
+        <GroupBox contents="5/RemoveButton.qml" label="Animated Button"/>
     </VerticalLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
new file mode 100644
index 0000000..d3cb045
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
@@ -0,0 +1,10 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
new file mode 100644
index 0000000..257686f
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
@@ -0,0 +1,23 @@
+<Rect id="removeButton"
+    width="230" height="30"
+    color="red"
+    radius="5">
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"/>
+    <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"/>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
new file mode 100644
index 0000000..6d97db1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
@@ -0,0 +1,65 @@
+<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>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
new file mode 100644
index 0000000..ddb3507
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/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/1_Drawing_and_Animation/GroupBox.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
index 01f26ee..77f7093 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
@@ -1,4 +1,4 @@
-<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
     <properties>
         <Property name="contents"/>
         <Property name="label"/>
@@ -14,4 +14,12 @@
     <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white">
         <Text x="5" id="text" text="{label}" font.bold="true"/>
     </Rect>
-</Item>
+    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
+        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Rect>
+</FocusRealm>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
deleted file mode 100644
index dc3f505..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
+++ /dev/null
@@ -1,4 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5"/>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
deleted file mode 100644
index 2ba488d..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
+++ /dev/null
@@ -1,10 +0,0 @@
-<Rect id="removeButton"
-    width="30" height="30"
-    color="red"
-    radius="5">
-    <Image id="trashIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"/>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
deleted file mode 100644
index 9a364c5..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
+++ /dev/null
@@ -1,23 +0,0 @@
-<Rect id="removeButton"
-    width="230" height="30"
-    color="red"
-    radius="5">
-    <Image id="cancelIcon"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"/>
-    <Image id="confirmIcon"
-        width="22" height="22"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"/>
-    <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"/>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
deleted file mode 100644
index 45ca19d..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
+++ /dev/null
@@ -1,65 +0,0 @@
-<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>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
deleted file mode 100644
index 68c1838..0000000
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
+++ /dev/null
@@ -1,70 +0,0 @@
-<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/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
new file mode 100644
index 0000000..6d8bb9f
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
@@ -0,0 +1,18 @@
+<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/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
new file mode 100644
index 0000000..ddb3507
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/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/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
new file mode 100644
index 0000000..5f8ff51
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
@@ -0,0 +1,20 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <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=''"/>
+    <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/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
new file mode 100644
index 0000000..e52bcbf
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
@@ -0,0 +1,76 @@
+<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 = '';
+                } 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(); 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/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 92afc0c..98fdb86 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,9 +1,9 @@
 <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
-    <VerticalLayout id="layout" width="{contents.width}" margin="5" spacing="5">
-        <GroupBox contents="ContactField1.qml" label="Loading Component"/>
-        <GroupBox contents="ContactField2.qml" label="Using properties"/>
-        <GroupBox contents="ContactField3.qml" label="Defining signals"/>
-        <GroupBox contents="Contact3.qml" label="Multiple Items"/>
-        <GroupBox contents="Contact4.qml" label="Mouse Grabbing"/>
+    <VerticalLayout id="layout" width="{contents.width}">
+        <GroupBox contents="1/ContactField.qml" label="Loading Component"/>
+        <GroupBox contents="2/ContactField.qml" label="Using properties"/>
+        <GroupBox contents="3/ContactField.qml" label="Defining signals"/>
+        <GroupBox contents="3/Contact.qml" label="Multiple Items"/>
+        <GroupBox contents="4/Contact.qml" label="Mouse Grabbing"/>
     </VerticalLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
new file mode 100644
index 0000000..cf6c657
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
@@ -0,0 +1,29 @@
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
+    <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/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
new file mode 100644
index 0000000..5748a81
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
@@ -0,0 +1,36 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <properties>
+        <Property name="label" value="Name"/>
+        <Property name="icon" value="../../shared/pics/phone.png"/>
+        <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/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
new file mode 100644
index 0000000..8010ac0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
@@ -0,0 +1,91 @@
+<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() {
+                fieldText.state='editing';
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+            }
+        </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/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
new file mode 100644
index 0000000..e52bcbf
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -0,0 +1,76 @@
+<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 = '';
+                } 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(); 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/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
new file mode 100644
index 0000000..2f4d540
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
@@ -0,0 +1,32 @@
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
+    <properties>
+        <Property name="mouseGrabbed" value="false"/>
+    </properties>
+    <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/2_Reuse/4/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/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/2_Reuse/4/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
new file mode 100644
index 0000000..0f2ef4e
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/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 (!contactDetails.mouseGrabbed) {
+                    fieldText.state='editing';
+                    contactDetails.mouseGrabbed=true;
+                }
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                contactDetails.mouseGrabbed=false;
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+                contactDetails.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/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
new file mode 100644
index 0000000..14e5043
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/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 = '';
+                    contactDetails.mouseGrabbed=false;
+                } else {
+                    if (!contactDetails.mouseGrabbed) {
+                        removeButton.state = 'opened';
+                        contactDetails.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/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
deleted file mode 100644
index 2933437..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
+++ /dev/null
@@ -1,29 +0,0 @@
-<Item id="contactDetails"
-    width="230"
-    height="{layout.height}">
-    <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">
-        <ContactField3 id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField3 id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField3 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/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
deleted file mode 100644
index e87ed60..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
+++ /dev/null
@@ -1,32 +0,0 @@
-<Item id="contactDetails"
-    width="230"
-    height="{layout.height}">
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <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">
-        <ContactField4 id="labelField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            label="Name"/>
-        <ContactField4 id="phoneField"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
-            label="Phone"/>
-        <ContactField4 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/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
deleted file mode 100644
index 7bfdd28..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton1 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/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
deleted file mode 100644
index 7ec3e4d..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
+++ /dev/null
@@ -1,20 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <RemoveButton2 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <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/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
deleted file mode 100644
index cef25ce..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-<Item id="contactField"
-    clip="true"
-    width="230"
-    height="30">
-    <properties>
-        <Property name="label" value="Name"/>
-        <Property name="icon" value="../shared/pics/phone.png"/>
-        <Property name="value"/>
-    </properties>
-    <RemoveButton3 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText3 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/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
deleted file mode 100644
index 13ccbc0..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.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>
-    <RemoveButton4 id="removeButton"
-        anchors.right="{parent.right}"
-        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
-        expandedWidth="{contactField.width}"
-        onConfirmed="print('Clear field text'); fieldText.text=''"/>
-    <FieldText4 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/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
deleted file mode 100644
index d09ad0b..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ /dev/null
@@ -1,91 +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() {
-                fieldText.state='editing';
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-            }
-        </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/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
deleted file mode 100644
index 191da52..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.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 (!contactDetails.mouseGrabbed) {
-                    fieldText.state='editing';
-                    contactDetails.mouseGrabbed=true;
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                contactDetails.mouseGrabbed=false;
-                fieldText.confirmed.emit();
-            }
-            function reset() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                contactDetails.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/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
index 01f26ee..77f7093 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
@@ -1,4 +1,4 @@
-<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
     <properties>
         <Property name="contents"/>
         <Property name="label"/>
@@ -14,4 +14,12 @@
     <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white">
         <Text x="5" id="text" text="{label}" font.bold="true"/>
     </Rect>
-</Item>
+    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
+        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Rect>
+</FocusRealm>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
deleted file mode 100644
index 68c1838..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
+++ /dev/null
@@ -1,70 +0,0 @@
-<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/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
deleted file mode 100644
index d9ff4c5..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
+++ /dev/null
@@ -1,76 +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 = '';
-                } 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(); 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/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
deleted file mode 100644
index d9ff4c5..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
+++ /dev/null
@@ -1,76 +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 = '';
-                } 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(); 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/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
deleted file mode 100644
index 991d6a0..0000000
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.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 = '';
-                    contactDetails.mouseGrabbed=false;
-                } else {
-                    if (!contactDetails.mouseGrabbed) {
-                        removeButton.state = 'opened';
-                        contactDetails.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/1/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/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/1/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/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/1/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/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/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
new file mode 100644
index 0000000..d48aa02
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -0,0 +1,28 @@
+<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, label, email, phone FROM contacts ORDER BY label, recid</query>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Text
+                x="45" y="12"
+                width="{contactListView.width-45}"
+                height="30"
+                color="black"
+                font.bold="true"
+                text="{model.label}"/>
+        </Component>
+    </resources>
+    <ListView id="contactListView"
+        anchors.fill="{parent}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"
+        focus="true"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/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/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/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/2/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/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/2/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/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/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
new file mode 100644
index 0000000..c72d9ce
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -0,0 +1,69 @@
+<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="wrapper.state='opened'"/>
+                <Contact id="details"
+                    anchors.fill="{parent}"
+                    contactid="{model.contactid}"
+                    label="{model.label}"
+                    email="{model.email}"
+                    phone="{model.phone}"
+                    opacity="0"/>
+                <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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/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/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml
new file mode 100644
index 0000000..8290d35
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/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/3/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml
new file mode 100644
index 0000000..293b3a5
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/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/3/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml
new file mode 100644
index 0000000..819914c
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/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/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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml
new file mode 100644
index 0000000..068590a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/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/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml
new file mode 100644
index 0000000..ad488c1
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
index e1df10c..dcbbe57 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -1,37 +1,12 @@
 <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
+    <Bind id="currentItem" value="true"/>
+<!--
+    relies on the current focus behavior whereby setting focus=true on a
+    component removes focus from any previous element
+-->
     <GridLayout id="layout" width="{contents.width}" height="{contents.height}">
-        <FocusRealm id="realm1" focus="false" width="280" height="320">
-            <GroupBox contents="ContactView1.qml" label="something" anchors.fill="{parent}"/>
-            <Rect id="box1" color="black" anchors.fill="{parent}" opacity="0.3">
-                <MouseRegion anchors.fill="{parent}" onClicked="print('1'); realm1.focus=true; realm2.focus=false; realm3.focus=false; box1.opacity='0'; box2.opacity='0.3'; box3.opacity='0.3'"/>
-                <opacity>
-                    <Behaviour>
-                        <NumericAnimation property="opacity" duration="250"/>
-                    </Behaviour>
-                </opacity>
-            </Rect>
-        </FocusRealm>
-        <FocusRealm id="realm2" focus="false" width="280" height="320">
-            <GroupBox contents="ContactView2.qml" label="something" anchors.fill="{parent}"/>
-            <Rect id="box2" color="black" anchors.fill="{parent}" opacity="0.3">
-                <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=true; realm3.focus=false; box1.opacity='0.3'; box2.opacity='0'; box3.opacity='0.3'"/>
-                <opacity>
-                    <Behaviour>
-                        <NumericAnimation property="opacity" duration="250"/>
-                    </Behaviour>
-                </opacity>
-            </Rect>
-        </FocusRealm>
-        <FocusRealm id="realm3" focus="true" width="280" height="320">
-            <GroupBox contents="ContactView3.qml" label="something" anchors.fill="{parent}"/>
-            <Rect id="box3" color="black" anchors.fill="{parent}" opacity="0.3">
-                <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=false; realm3.focus=true; box1.opacity='0.3'; box2.opacity='0.3'; box3.opacity='0'"/>
-                <opacity>
-                    <Behaviour>
-                        <NumericAnimation property="opacity" duration="250"/>
-                    </Behaviour>
-                </opacity>
-            </Rect>
-        </FocusRealm>
+        <GroupBox contents="1/ContactView.qml" label="something"/>
+        <GroupBox contents="2/ContactView.qml" label="something"/>
+        <GroupBox contents="3/ContactView.qml" label="something"/>
     </GridLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml
deleted file mode 100644
index 8290d35..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/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/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
deleted file mode 100644
index f620c25..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/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/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
deleted file mode 100644
index 819914c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/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/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
deleted file mode 100644
index 6606094..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
+++ /dev/null
@@ -1,28 +0,0 @@
-<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, label, email, phone FROM contacts ORDER BY label, recid</query>
-        </SqlQuery>
-        <Component id="contactDelegate">
-            <Text
-                x="45" y="12"
-                width="{contactListView.width-45}"
-                height="30"
-                color="black"
-                font.bold="true"
-                text="{model.label}"/>
-        </Component>
-    </resources>
-    <ListView id="contactListView"
-        anchors.fill="{parent}"
-        clip="true"
-        model="{contactList}"
-        delegate="{contactDelegate}"
-        focus="true"/>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
deleted file mode 100644
index 97868e3..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
+++ /dev/null
@@ -1,68 +0,0 @@
-<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="wrapper.state='opened'"/>
-                <Contact id="details"
-                    anchors.fill="{parent}"
-                    contactid="{model.contactid}"
-                    label="{model.label}"
-                    email="{model.email}"
-                    phone="{model.phone}"
-                    opacity="0"/>
-                <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"/>
-    <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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
deleted file mode 100644
index c15ece2..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
+++ /dev/null
@@ -1,73 +0,0 @@
-<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"/>
-    <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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
deleted file mode 100644
index 199270c..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/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/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
index 01f26ee..77f7093 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
@@ -1,4 +1,4 @@
-<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
     <properties>
         <Property name="contents"/>
         <Property name="label"/>
@@ -14,4 +14,12 @@
     <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white">
         <Text x="5" id="text" text="{label}" font.bold="true"/>
     </Rect>
-</Item>
+    <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}">
+        <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/>
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Rect>
+</FocusRealm>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
deleted file mode 100644
index 493ab7a..0000000
--- a/examples/declarative/tutorials/contacts/3_Collections/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>
-- 
cgit v0.12