Adding 'presentation' qml to tutorial steps.

Also changed background from black to white so to better match
screenshots within documentation.

18 files changed, 181 insertions, 109 deletions

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 181ee44..4ea77f3 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,14 +1,9 @@
-<Rect id="page" width="240" height="{layout.height}" color='white'>
-    <VerticalLayout id="layout" margin="5" spacing="5">
-        <Text x="5" width="230">Rectangle Component</Text>
-        <RemoveButton1 anchors.right="{parent.right}"/>
-        <Text x="5" width="230">Closed Remove Item Button</Text>
-        <RemoveButton2 anchors.right="{parent.right}"/>
-        <Text x="5" width="230">Open Remove Item Button</Text>
-        <RemoveButton3 anchors.right="{parent.right}"/>
-        <Text x="5" width="230">State Based Button</Text>
-        <RemoveButton4 anchors.right="{parent.right}"/>
-        <Text x="5" width="230">Animated Button</Text>
-        <RemoveButton5 anchors.right="{parent.right}"/>
+<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>
 </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
new file mode 100644
index 0000000..01f26ee
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
@@ -0,0 +1,17 @@
+<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+    <properties>
+        <Property name="contents"/>
+        <Property name="label"/>
+    </properties>
+    <Rect id="wrapper" x="5" y="10" radius="10"
+        width="{groupBox.width-20}" height="{groupBox.height-20}"
+        color="white" pen.color="black">
+        <Item id="subItem" qml="{groupBox.contents}"
+            anchors.top="{parent.top}" anchors.topMargin="10"
+            anchors.right="{parent.right}" anchors.rightMargin="10"
+            width="{qmlItem.width}" height="{qmlItem.height}"/>
+    </Rect>
+    <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>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
index 29fdf51..13bc209 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml
@@ -1,34 +1,12 @@
-<Rect id="page" width="480" height="360" color='black'>
+<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
     <properties>
         <Property name="mouseGrabbed" value="false"/>
     </properties>
-    <Item x="0" y="0" width="240" height="180">
-        <ContactField1
-            y="5"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.right="{parent.right}" anchors.rightMargin="5"/>
-        <ContactField2
-            y="40"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.right="{parent.right}" anchors.rightMargin="5"/>
-        <ContactField3
-            y="75"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.right="{parent.right}" anchors.rightMargin="5"
-            label="Phone Number"
-            icon="../shared/pics/phone.png"
-            value="123123"/>
-    </Item>
-    <Rect pen.color="gray" x="5" y="115" width="230" height="180" radius="5">
-        <Contact3 anchors.fill="{parent}"
-                label="Brian"
-                phone="123123"
-                email="brian@bigisp.com" />
-    </Rect>
-    <Rect pen.color="gray" x="245" y="115" width="230" height="180" radius="5">
-        <Contact4 anchors.fill="{parent}"
-                label="Brian"
-                phone="123123"
-                email="brian@bigisp.com" />
-    </Rect>
+    <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>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
index fdd0c6d..2933437 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml
@@ -1,4 +1,6 @@
-<Item id="contactDetails">
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
     <properties>
         <Property name="contactid" value=""/>
         <Property name="label" onValueChanged="labelField.value = label"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
index b1882da..9e988c0 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml
@@ -1,4 +1,6 @@
-<Item id="contactDetails">
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
     <properties>
         <Property name="contactid" value=""/>
         <Property name="label" onValueChanged="labelField.value = label"/>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
index 5547a3b..7bfdd28 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml
@@ -1,17 +1,18 @@
 <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-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
         anchors.verticalCenter="{parent.verticalCenter}"
         font.bold="true"
-        color="white"
-        text="Phone Number"/>
+        color="black"
+        text="123123"/>
     <Image src="../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        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
index b69e03c..7ec3e4d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml
@@ -1,5 +1,6 @@
 <Item id="contactField"
     clip="true"
+    width="230"
     height="30">
     <RemoveButton2 id="removeButton"
         anchors.right="{parent.right}"
@@ -7,13 +8,13 @@
         expandedWidth="{contactField.width}"
         onConfirmed="print('Clear field text'); fieldText.text=''"/>
     <Text id="fieldText"
-        width="{contactField.width-70}"
-        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        width="{contactField.width-80}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="10"
         anchors.verticalCenter="{parent.verticalCenter}"
         font.bold="true"
-        color="white"
-        text="Phone Number"/>
+        color="black"
+        text="123123"/>
     <Image src="../shared/pics/phone.png"
-        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        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
index f3a11f9..cef25ce 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml
@@ -1,9 +1,10 @@
 <Item id="contactField"
     clip="true"
+    width="230"
     height="30">
     <properties>
-        <Property name="label"/>
-        <Property name="icon"/>
+        <Property name="label" value="Name"/>
+        <Property name="icon" value="../shared/pics/phone.png"/>
         <Property name="value"/>
     </properties>
     <RemoveButton3 id="removeButton"
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
index c807aed..97c0772 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml
@@ -1,7 +1,7 @@
 <Rect id="fieldText"
     height="30"
     radius="5"
-    color="black">
+    color="white">
     <properties>
         <Property
             name="text"
@@ -43,10 +43,10 @@
         src="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="0"
-        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        color="white"
+        color="black"
         font.bold="true"
         readOnly="true"
         wrap="false"
@@ -75,13 +75,11 @@
         <State name="editing">
             <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
             <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{fieldText}" property="color" value="white"/>
-            <SetProperty target="{textEdit}" property="color" value="black"/>
             <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="34"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
         </State>
     </states>
     <transitions>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
index a4df42b..45bb18d 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml
@@ -1,7 +1,7 @@
 <Rect id="fieldText"
     height="30"
     radius="5"
-    color="black">
+    color="white">
     <properties>
         <Property
             name="text"
@@ -48,10 +48,10 @@
         src="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="0"
-        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        color="white"
+        color="black"
         font.bold="true"
         readOnly="true"
         wrap="false"
@@ -80,13 +80,11 @@
         <State name="editing">
             <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
             <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{fieldText}" property="color" value="white"/>
-            <SetProperty target="{textEdit}" property="color" value="black"/>
             <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="34"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
         </State>
     </states>
     <transitions>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
new file mode 100644
index 0000000..01f26ee
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml
@@ -0,0 +1,17 @@
+<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+    <properties>
+        <Property name="contents"/>
+        <Property name="label"/>
+    </properties>
+    <Rect id="wrapper" x="5" y="10" radius="10"
+        width="{groupBox.width-20}" height="{groupBox.height-20}"
+        color="white" pen.color="black">
+        <Item id="subItem" qml="{groupBox.contents}"
+            anchors.top="{parent.top}" anchors.topMargin="10"
+            anchors.right="{parent.right}" anchors.rightMargin="10"
+            width="{qmlItem.width}" height="{qmlItem.height}"/>
+    </Rect>
+    <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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
index ed2a3dc..6907676 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml
@@ -1,8 +1,37 @@
-<Rect id="page" width="480" height="640" color='black'>
-    <properties>
-        <Property name="mouseGrabbed" value="false"/>
-    </properties>
-    <ContactView1 x="0" y="0" width="240" height="320"/>
-    <ContactView2 x="240" y="0" width="240" height="320"/>
-    <ContactView3 x="0" y="320" width="240" height="320"/>
+<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'>
+    <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'" onPressed="" onPositionChanged=""/>
+                <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'" onPressed="" onPositionChanged=""/>
+                <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'" onPressed="" onPositionChanged=""/>
+                <opacity>
+                    <Behaviour>
+                        <NumericAnimation property="opacity" duration="250"/>
+                    </Behaviour>
+                </opacity>
+            </Rect>
+        </FocusRealm>
+    </GridLayout>
 </Rect>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
index d6f7bad..6606094 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml
@@ -1,4 +1,9 @@
-<Item id="contacts">
+<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}">
@@ -6,10 +11,10 @@
         </SqlQuery>
         <Component id="contactDelegate">
             <Text
-                x="40" y="12"
-                width="{contactListView.width-30}"
+                x="45" y="12"
+                width="{contactListView.width-45}"
                 height="30"
-                color="white"
+                color="black"
                 font.bold="true"
                 text="{model.label}"/>
         </Component>
@@ -18,5 +23,6 @@
         anchors.fill="{parent}"
         clip="true"
         model="{contactList}"
-        delegate="{contactDelegate}"/>
+        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
index da1e5db..97868e3 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml
@@ -1,4 +1,9 @@
-<Item id="contacts">
+<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}">
@@ -9,10 +14,10 @@
                 x="0"
                 width="{ListView.view.width}" height="34">
                 <Text id="label"
-                    x="40" y="12"
-                    width="{parent.width-30}" 
+                    x="45" y="12"
+                    width="{parent.width-45}" 
                     text="{model.label}"
-                    color="white"
+                    color="black"
                     font.bold="true">
                 </Text>
                 <MouseRegion
@@ -58,5 +63,6 @@
         anchors.bottom="{parent.bottom}"
         clip="true"
         model="{contactList}"
-        delegate="{contactDelegate}"/>
+        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
index a5d88a1..c15ece2 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml
@@ -1,4 +1,9 @@
-<Item id="contacts">
+<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}">
@@ -9,10 +14,10 @@
                 x="0"
                 width="{ListView.view.width}" height="34">
                 <Text id="label"
-                    x="40" y="12"
-                    width="{parent.width-30}" 
+                    x="45" y="12"
+                    width="{parent.width-45}" 
                     text="{model.label}"
-                    color="white"
+                    color="black"
                     font.bold="true">
                 </Text>
                 <MouseRegion
@@ -63,5 +68,6 @@
         anchors.bottom="{parent.bottom}"
         clip="true"
         model="{contactList}"
-        delegate="{contactDelegate}"/>
+        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
index a4df42b..583c73e 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml
@@ -1,7 +1,7 @@
 <Rect id="fieldText"
     height="30"
     radius="5"
-    color="black">
+    color="white">
     <properties>
         <Property
             name="text"
@@ -17,21 +17,21 @@
     <resources>
         <Script>
             function edit() {
-                if (!page.mouseGrabbed) {
+                if (!contacts.mouseGrabbed) {
                     fieldText.state='editing';
-                    page.mouseGrabbed=true;
+                    contacts.mouseGrabbed=true;
                 }
             }
             function confirm() {
                 fieldText.text = textEdit.text;
                 fieldText.state='';
-                page.mouseGrabbed=false;
+                contacts.mouseGrabbed=false;
                 fieldText.confirmed.emit();
             }
             function reset() {
                 textEdit.text = fieldText.text;
                 fieldText.state='';
-                page.mouseGrabbed=false;
+                contacts.mouseGrabbed=false;
             }
         </Script>
     </resources>
@@ -48,10 +48,10 @@
         src="../shared/pics/ok.png"
         opacity="0"/>
     <TextEdit id="textEdit"
-        anchors.left="{parent.left}" anchors.leftMargin="0"
-        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
         anchors.verticalCenter="{parent.verticalCenter}"
-        color="white"
+        color="black"
         font.bold="true"
         readOnly="true"
         wrap="false"
@@ -80,13 +80,11 @@
         <State name="editing">
             <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
             <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{fieldText}" property="color" value="white"/>
-            <SetProperty target="{textEdit}" property="color" value="black"/>
             <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="34"/>
-            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
         </State>
     </states>
     <transitions>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
new file mode 100644
index 0000000..01f26ee
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml
@@ -0,0 +1,17 @@
+<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}">
+    <properties>
+        <Property name="contents"/>
+        <Property name="label"/>
+    </properties>
+    <Rect id="wrapper" x="5" y="10" radius="10"
+        width="{groupBox.width-20}" height="{groupBox.height-20}"
+        color="white" pen.color="black">
+        <Item id="subItem" qml="{groupBox.contents}"
+            anchors.top="{parent.top}" anchors.topMargin="10"
+            anchors.right="{parent.right}" anchors.rightMargin="10"
+            width="{qmlItem.width}" height="{qmlItem.height}"/>
+    </Rect>
+    <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>
diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
index a489e95..493ab7a 100644
--- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml
@@ -14,11 +14,11 @@
                 print('removeButton.toggle()');
                 if (removeButton.state == 'opened') {
                     removeButton.state = '';
-                    page.mouseGrabbed=false;
+                    contacts.mouseGrabbed=false;
                 } else {
-                    if (!page.mouseGrabbed) {
+                    if (!contacts.mouseGrabbed) {
                         removeButton.state = 'opened';
-                        page.mouseGrabbed=true;
+                        contacts.mouseGrabbed=true;
                     }
                 }
             }