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.

41 files changed, 662 insertions, 107 deletions

diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
index dc3f505..dc3f505 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml
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/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
index 2ba488d..d3cb045 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml
@@ -6,5 +6,5 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"/>
+        src="../../shared/pics/trash.png"/>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
index 9a364c5..257686f 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml
@@ -6,12 +6,12 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"/>
+        src="../../shared/pics/cancel.png"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"/>
+        src="../../shared/pics/ok.png"/>
     <Text id="text"
         anchors.verticalCenter="{parent.verticalCenter}"
         anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
index 45ca19d..6d97db1 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml
@@ -18,7 +18,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        src="../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
index 68c1838..ddb3507 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml
@@ -18,7 +18,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        src="../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
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/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
index 7bfdd28..6d8bb9f 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml
@@ -2,7 +2,7 @@
     clip="true"
     width="230"
     height="30">
-    <RemoveButton1 id="removeButton"
+    <RemoveButton id="removeButton"
         anchors.right="{parent.right}"
         anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/>
     <Text id="fieldText"
@@ -12,7 +12,7 @@
         font.bold="true"
         color="black"
         text="123123"/>
-    <Image src="../shared/pics/phone.png"
+    <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/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
index 68c1838..ddb3507 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml
@@ -18,7 +18,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        src="../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
index 7ec3e4d..5f8ff51 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml
@@ -2,7 +2,7 @@
     clip="true"
     width="230"
     height="30">
-    <RemoveButton2 id="removeButton"
+    <RemoveButton id="removeButton"
         anchors.right="{parent.right}"
         anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
         expandedWidth="{contactField.width}"
@@ -14,7 +14,7 @@
         font.bold="true"
         color="black"
         text="123123"/>
-    <Image src="../shared/pics/phone.png"
+    <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/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
index d9ff4c5..e52bcbf 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml
@@ -24,7 +24,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        src="../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -34,7 +34,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -44,7 +44,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
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/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
index 2933437..cf6c657 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
@@ -11,19 +11,19 @@
         anchors.fill="{parent}"
         spacing="5"
         margin="5">
-        <ContactField3 id="labelField"
+        <ContactField id="labelField"
             anchors.left="{layout.left}" anchors.leftMargin="5"
             anchors.right="{layout.right}" anchors.rightMargin="5"
             label="Name"/>
-        <ContactField3 id="phoneField"
+        <ContactField id="phoneField"
             anchors.left="{layout.left}" anchors.leftMargin="5"
             anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
+            icon="../../shared/pics/phone.png"
             label="Phone"/>
-        <ContactField3 id="emailField"
+        <ContactField id="emailField"
             anchors.left="{layout.left}" anchors.leftMargin="5"
             anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
+            icon="../../shared/pics/email.png"
             label="Email"/>
     </VerticalLayout>
 </Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
index cef25ce..5748a81 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
@@ -4,15 +4,15 @@
     height="30">
     <properties>
         <Property name="label" value="Name"/>
-        <Property name="icon" value="../shared/pics/phone.png"/>
+        <Property name="icon" value="../../shared/pics/phone.png"/>
         <Property name="value"/>
     </properties>
-    <RemoveButton3 id="removeButton"
+    <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=''"/>
-    <FieldText3 id="fieldText"
+    <FieldText id="fieldText"
         width="{contactField.width-70}"
         anchors.right="{removeButton.left}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
index d09ad0b..8010ac0 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
@@ -34,13 +34,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="5"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
index d9ff4c5..e52bcbf 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -24,7 +24,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        src="../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -34,7 +34,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -44,7 +44,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
index e87ed60..2f4d540 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml
@@ -14,19 +14,19 @@
         anchors.fill="{parent}"
         spacing="5"
         margin="5">
-        <ContactField4 id="labelField"
+        <ContactField id="labelField"
             anchors.left="{layout.left}" anchors.leftMargin="5"
             anchors.right="{layout.right}" anchors.rightMargin="5"
             label="Name"/>
-        <ContactField4 id="phoneField"
+        <ContactField id="phoneField"
             anchors.left="{layout.left}" anchors.leftMargin="5"
             anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
+            icon="../../shared/pics/phone.png"
             label="Phone"/>
-        <ContactField4 id="emailField"
+        <ContactField id="emailField"
             anchors.left="{layout.left}" anchors.leftMargin="5"
             anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/email.png"
+            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/2_Reuse/4/ContactField.qml
index 819914c..819914c 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
index 191da52..0f2ef4e 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml
@@ -39,13 +39,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="5"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
index 991d6a0..14e5043 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        src="../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -48,7 +48,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
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/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
index 8290d35..8290d35 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/Button.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml
diff --git a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
index f620c25..293b3a5 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml
@@ -17,12 +17,12 @@
         <ContactField id="phoneField"
             anchors.left="{layout.left}" anchors.leftMargin="5"
             anchors.right="{layout.right}" anchors.rightMargin="5"
-            icon="../shared/pics/phone.png"
+            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"
+            icon="../../shared/pics/email.png"
             label="Email"/>
     </VerticalLayout>
 </Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
index 13ccbc0..819914c 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml
@@ -6,12 +6,12 @@
         <Property name="icon"/>
         <Property name="value"/>
     </properties>
-    <RemoveButton4 id="removeButton"
+    <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=''"/>
-    <FieldText4 id="fieldText"
+    <FieldText id="fieldText"
         width="{contactField.width-70}"
         anchors.right="{removeButton.left}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
index 6606094..d48aa02 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml
@@ -5,7 +5,7 @@
         <Property name="mouseGrabbed" value="false"/>
     </properties>
     <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
index 199270c..068590a 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml
@@ -39,13 +39,13 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0"/>
     <Image id="confirmIcon"
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
         anchors.left="{parent.left}" anchors.leftMargin="5"
diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
index 493ab7a..ad488c1 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml
@@ -28,7 +28,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/trash.png"
+        src="../../shared/pics/trash.png"
         opacity="1">
         <MouseRegion
             anchors.fill="{parent}"
@@ -38,7 +38,7 @@
         width="22" height="22"
         anchors.right="{parent.right}" anchors.rightMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/cancel.png"
+        src="../../shared/pics/cancel.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
@@ -48,7 +48,7 @@
         width="22" height="22"
         anchors.left="{parent.left}" anchors.leftMargin="4"
         anchors.verticalCenter="{parent.verticalCenter}"
-        src="../shared/pics/ok.png"
+        src="../../shared/pics/ok.png"
         opacity="0">
         <MouseRegion
             anchors.fill="{parent}"
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/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
index 97868e3..c72d9ce 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml
@@ -5,7 +5,7 @@
         <Property name="mouseGrabbed" value="false"/>
     </properties>
     <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <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>
@@ -55,7 +55,8 @@
     <Button id="cancelEditButton"
         anchors.top="{parent.top}" anchors.topMargin="5"
         anchors.right="{parent.right}" anchors.rightMargin="5"
-        icon="../shared/pics/cancel.png"/>
+        icon="../../shared/pics/cancel.png"
+        opacity="{mouseGrabbed ? 0 : 1}"/>
     <ListView id="contactListView"
         anchors.left="{parent.left}"
         anchors.right="{parent.right}"
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/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
index c15ece2..ec9ff57 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml
@@ -5,7 +5,7 @@
         <Property name="mouseGrabbed" value="false"/>
     </properties>
     <resources>
-        <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/>
+        <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>
@@ -60,7 +60,8 @@
     <Button id="cancelEditButton"
         anchors.top="{parent.top}" anchors.topMargin="5"
         anchors.right="{parent.right}" anchors.rightMargin="5"
-        icon="../shared/pics/cancel.png"/>
+        icon="../../shared/pics/cancel.png"
+        opacity="{mouseGrabbed ? 0 : 1}"/>
     <ListView id="contactListView"
         anchors.left="{parent.left}"
         anchors.right="{parent.right}"
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/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>