Continuing tutorial

Start of qdoc componenet relating to example files.
Also removed t8 and replaced with Final, which will represent
the final 'application', and not necissarily in terms of
minor stages.  However difference that will be useful or
confusing to the user will still be highlighted, just not
in the progressive manor of the rest of the tutorial

Scheduled for review when complete.

15 files changed, 507 insertions, 432 deletions

diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
index 06c9f5a..06c9f5a 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml
diff --git a/examples/declarative/tutorials/contacts/t8/Button.qml b/examples/declarative/tutorials/contacts/Final/Button.qml
index 63c4636..8290d35 100644
--- a/examples/declarative/tutorials/contacts/t8/Button.qml
+++ b/examples/declarative/tutorials/contacts/Final/Button.qml
@@ -1,16 +1,21 @@
-<Item width="30" height="30" id="button">
+<Item id="button" width="30" height="30">
     <properties>
         <Property name="icon"/>
     </properties>
     <signals>
         <Signal name="clicked"/>
     </signals>
-    <Rect id="buttonRect" color="lightgreen" anchors.fill="{parent}" radius="5">
+    <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()"/>
+        <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"/>
diff --git a/examples/declarative/tutorials/contacts/Final/Contact.qml b/examples/declarative/tutorials/contacts/Final/Contact.qml
new file mode 100644
index 0000000..679f4a8
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/Contact.qml
@@ -0,0 +1,57 @@
+<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>
+    <signals>
+        <Signal name="update"/>
+        <Signal name="insert"/>
+    </signals>
+    <resources>
+        <SqlQuery id="updateContactQuery" connection="{contactDatabase}">
+            <query>UPDATE contacts SET label = :l, email = :e, phone = :p WHERE recid = :r</query>
+            <bindings>
+                <SqlBind name=":r" value="{contactid}"/>
+                <SqlBind name=":l" value="{labelField.value}"/>
+                <SqlBind name=":e" value="{emailField.value}"/>
+                <SqlBind name=":p" value="{phoneField.value}"/>
+            </bindings>
+        </SqlQuery>
+        <SqlQuery id="insertContactQuery" connection="{contactDatabase}">
+            <query>INSERT INTO contacts (label, email, phone) VALUES(:l, :e, :p)</query>
+            <bindings>
+                <SqlBind name=":l" value="{labelField.value}"/>
+                <SqlBind name=":e" value="{emailField.value}"/>
+                <SqlBind name=":p" value="{phoneField.value}"/>
+            </bindings>
+        </SqlQuery>
+    </resources>
+    <Connection sender="{contactDetails}" signal="update()">
+        updateContactQuery.exec();
+    </Connection>
+    <Connection sender="{contactDetails}" signal="insert()">
+        insertContactQuery.exec();
+    </Connection>
+    <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/Final/ContactField.qml b/examples/declarative/tutorials/contacts/Final/ContactField.qml
new file mode 100644
index 0000000..fe9329a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/ContactField.qml
@@ -0,0 +1,36 @@
+<Item id="contactField"
+    clip="true"
+    height="30">
+    <properties>
+        <Property name="label"/>
+        <Property name="icon"/>
+        <Property name="value" onValueChanged="fieldText.text=field.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}"
+        onConfirmed="contactField.value=fieldText.text"/>
+    <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/Final/ContactView2.qml b/examples/declarative/tutorials/contacts/Final/ContactView2.qml
new file mode 100644
index 0000000..da1e5db
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/ContactView2.qml
@@ -0,0 +1,62 @@
+<Item id="contacts">
+    <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="40" y="12"
+                    width="{parent.width-30}" 
+                    text="{model.label}"
+                    color="white"
+                    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}"/>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml
new file mode 100644
index 0000000..a82cecd
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/FieldText.qml
@@ -0,0 +1,98 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="black">
+    <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="0"
+        anchors.right="{parent.right}" anchors.rightMargin="0"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="white"
+        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 != '' ? 0 : 1}">
+        <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="{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"/>
+        </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/Final/RemoveButton.qml b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
new file mode 100644
index 0000000..493ab7a
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/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/Final/SearchBar.qml b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
new file mode 100644
index 0000000..aea5a5d
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
@@ -0,0 +1,18 @@
+<Rect id="searchBar"
+    color="white">
+    <properties>
+        <Property name="text" value="{searchEdit.text}"/>
+    </properties>
+    <Image id="searchIcon"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../shared/pics/search.png"/>
+    <TextEdit id="searchEdit"
+        anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
+        anchors.leftMargin="5" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        readOnly="false"
+        wrap="false"
+        focus="true"/>
+</Rect>
+
diff --git a/examples/declarative/tutorials/contacts/Final/contacts.qml b/examples/declarative/tutorials/contacts/Final/contacts.qml
new file mode 100644
index 0000000..8b0d6d0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/Final/contacts.qml
@@ -0,0 +1,148 @@
+<Rect id="contacts"
+    width="240"
+    height="320"
+    color="black">
+    <properties>
+        <Property name="mode" value="list"/>
+        <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 WHERE lower(label) LIKE lower(:searchTerm) ORDER BY label, recid</query>
+            <bindings>
+                <SqlBind name=":searchTerm" value="{searchBar.text + '%' }"/>
+            </bindings>
+        </SqlQuery>
+        <Component id="contactDelegate">
+            <Item id="wrapper"
+                x="0"
+                width="{ListView.view.width}"
+                height="34">
+                <Text id="label"
+                    x="40" y="12"
+                    width="{parent.width-30}" 
+                    text="{model.label}"
+                    color="white"
+                    font.bold="true">
+                    <children>
+                        <MouseRegion
+                            anchors.fill="{parent}">
+                            <onClicked>
+                                Details.qml = 'Contact.qml';
+                                wrapper.state='opened';
+                                contacts.mode = 'edit';
+                            </onClicked>
+                        </MouseRegion>
+                    </children>
+                </Text>
+                <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' &amp;&amp; !contacts.mouseGrabbed) {
+                        wrapper.state = '';
+                        contacts.mode = 'list';
+                    }
+                </Connection>
+                <Connection sender="{confirmEditButton}" signal="clicked()">
+                    if (wrapper.state == 'opened' &amp;&amp; !contacts.mouseGrabbed) {
+                        print('confirm and close edit');
+                        Details.qmlItem.update.emit();
+                        wrapper.state = '';
+                        contacts.mode = 'list';
+                        contactList.exec();
+                    }
+                </Connection>
+            </Item>
+        </Component>
+    </resources>
+    <Button id="newContactButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../shared/pics/new.png"
+        onClicked="newContactItem.label = ''; newContactItem.phone = ''; newContactItem.email = ''; contacts.mode = 'new'"
+        opacity="{contacts.mode == 'list' ? 1 : 0}"/>
+    <Button id="confirmEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        icon="../shared/pics/ok.png"
+        opacity="{contacts.mode == 'list' || contacts.mouseGrabbed ? 0 : 1}"/>
+    <Button id="cancelEditButton"
+        anchors.top="{parent.top}" anchors.topMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        icon="../shared/pics/cancel.png"
+        opacity="{contacts.mode == 'list' || contacts.mouseGrabbed ? 0 : 1}"/>
+    <ListView id="contactListView"
+        anchors.left="{parent.left}"
+        anchors.right="{parent.right}"
+        anchors.top="{cancelEditButton.bottom}"
+        anchors.bottom="{searchBarWrapper.bottom}"
+        clip="true"
+        model="{contactList}"
+        delegate="{contactDelegate}"
+        focus="{contacts.mode != 'list'}"/>
+    <Contact id="newContactItem"
+        anchors.fill="{contactListView}"
+        opacity="0"/>
+    <Connection sender="{confirmEditButton}" signal="clicked()">
+        if (contacts.mode == 'new' &amp;&amp; contacts.mouseGrabbed != 'true') {
+            newContactItem.insert.emit();
+            contacts.mode = 'list';
+            contactList.exec();
+        }
+    </Connection>
+    <Connection sender="{cancelEditButton}" signal="clicked()">
+        if (contacts.mode == 'new' &amp;&amp; contacts.mouseGrabbed != 'true') {
+            contacts.mode = 'list';
+        }
+    </Connection>
+    <FocusRealm id="searchBarWrapper"
+        height="30"
+        anchors.bottom="{parent.bottom}"
+        anchors.left="{parent.left}" anchors.right="{parent.right}"
+        anchors.bottomMargin="0"
+        focus="{contacts.mode == 'list'}">
+        <SearchBar id="searchBar" anchors.fill="{parent}"/>
+        <states>
+            <State name="searchHidden" when="{searchBar.text == '' || contacts.mode != 'list'}">
+                <SetProperty target="{searchBarWrapper.anchors}" property="bottomMargin" value="-30"/>
+            </State>
+        </states>
+        <transitions>
+            <Transition fromState="*" toState="*">
+                <NumericAnimation property="bottomMargin" duration="250"/>
+            </Transition>
+        </transitions>
+    </FocusRealm>
+    <states>
+        <State name="editNewState" when="{contacts.mode == 'new'}">
+            <SetProperty target="{contactListView}" property="opacity" value="0"/>
+            <SetProperty target="{newContactItem}" property="opacity" value="1"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="*">
+            <NumericAnimation property="opacity" duration="500"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/t8/Contact.qml b/examples/declarative/tutorials/contacts/t8/Contact.qml
deleted file mode 100644
index 5852b43..0000000
--- a/examples/declarative/tutorials/contacts/t8/Contact.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Item id="contactDetails" anchors.fill="{parent}">
-    <properties>
-        <Property name="label" onValueChanged="c_label.value = label"/>
-        <Property name="contactid" value=""/>
-        <Property name="phone" onValueChanged="c_phone.value = phone"/>
-        <Property name="email" onValueChanged="c_email.value = email"/>
-        <Property name="mode" value="closed"/>
-    </properties>
-    <signals>
-        <Signal name="open"/>
-        <Signal name="close"/>
-        <Signal name="confirm"/>
-        <Signal name="cancel"/>
-    </signals>
-    <resources>
-        <SqlQuery id="updateContactQuery" connection="{contactDatabase}">
-            <query>UPDATE contacts SET label = :l, email = :e, phone = :p WHERE recid = :r</query>
-            <bindings>
-                <SqlBind name=":r" value="{contactid}"/>
-                <SqlBind name=":l" value="{c_label.value}"/>
-                <SqlBind name=":e" value="{c_email.value}"/>
-                <SqlBind name=":p" value="{c_phone.value}"/>
-            </bindings>
-        </SqlQuery>
-        <SqlQuery id="insertContactQuery" connection="{contactDatabase}">
-            <query>INSERT INTO contacts (label, email, phone) VALUES(:l, :e, :p)</query>
-            <bindings>
-                <SqlBind name=":l" value="{c_label.value}"/>
-                <SqlBind name=":e" value="{c_email.value}"/>
-                <SqlBind name=":p" value="{c_phone.value}"/>
-            </bindings>
-        </SqlQuery>
-    </resources>
-    <Connection sender="{contactDetails}" signal="cancel()">
-        c_label.value = label;
-        c_phone.value = phone;
-        c_email.value = email;
-        contactDetails.close.emit();
-    </Connection>
-    <Connection sender="{contactDetails}" signal="confirm()">
-        if (c_label.value != '') {
-            if (contactid == '') {
-                insertContactQuery.exec();
-                c_label.value = label;
-                c_phone.value = phone;
-                c_email.value = email;
-            } else {
-                updateContactQuery.exec();
-            }
-            contactList.exec();
-        }
-        contactDetails.close.emit();
-    </Connection>
-    <VerticalLayout id="layout" anchors.fill="{parent}" spacing="5" margin="5">
-        <Field id="c_label" label="Name"
-            editable="{mode == 'opened' ? 1 : 0}"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"/>
-        <Field id="c_phone" icon="../shared/pics/phone.png" label="Phone"
-            opacity="0" editable="{mode == 'opened' ? 1 : 0}"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"/>
-        <Field id="c_email" icon="../shared/pics/email.png" label="Email"
-            opacity="0" editable="{mode == 'opened' ? 1 : 0}"
-            anchors.left="{layout.left}" anchors.leftMargin="5"
-            anchors.right="{layout.right}" anchors.rightMargin="5"/>
-    </VerticalLayout>
-    <MouseRegion anchors.fill="{contactDetails}" onClicked="contactDetails.open.emit()" z="{mode=='opened' ? -1 : 1}"/>
-    <states>
-        <State name="opened" when="{mode == 'opened'}">
-            <SetProperty target="{c_phone}" property="opacity" value="1"/>
-            <SetProperty target="{c_email}" property="opacity" value="1"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="opened" reversible="true">
-            <NumericAnimation target="{contactFields}" properties="opacity" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/Field.qml b/examples/declarative/tutorials/contacts/t8/Field.qml
deleted file mode 100644
index 0191ef8..0000000
--- a/examples/declarative/tutorials/contacts/t8/Field.qml
+++ /dev/null
@@ -1,54 +0,0 @@
-<Item height="30" width="200" id="field">
-    <properties>
-        <Property name="value" onValueChanged="fieldText.text=field.value"/>
-        <Property name="icon"/>
-        <Property name="editable" value="0"/>
-        <Property name="label"/>
-    </properties>
-    <Item id="fieldSelector" width="30" height="30"
-        x="0"
-        anchors.top="{parent.top}"
-        anchors.bottom="{parent.bottom}">
-        <Image src="{field.icon}"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            anchors.horizontalCenter="{parent.horizontalCenter}"/>
-    </Item>
-    <FieldText id="fieldText"
-        label="{field.label}"
-        width="{field.width-70}"
-        anchors.left="{fieldSelector.right}"
-        anchors.leftMargin="5"
-        anchors.top="{parent.top}"
-        anchors.bottom="{parent.bottom}"
-        onTextEdited="field.value = fieldText.text"/>
-    <FieldRemover id="fieldRemover"
-        anchors.left="{fieldText.right}"
-        anchors.leftMargin="5"
-        anchors.top="{parent.top}"
-        anchors.bottom="{parent.bottom}"
-        onConfirm="fieldText.text = ''"
-        opacity="{field.editable}"/>
-    <states>
-        <State name="textFill" when="{fieldText.open == 'true'}">
-            <SetProperty target="{fieldText}" property="width" value="{field.width}"/>
-            <SetProperty target="{fieldText}" property="x" value="0"/>
-            <SetProperty target="{fieldRemover}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="x" value="{-5-fieldSelector.width}"/>
-        </State>
-        <State name="removerFill" when="{fieldRemover.open == 'true'}">
-            <SetProperty target="{fieldRemover}" property="width" value="{field.width}"/>
-            <SetProperty target="{fieldRemover}" property="x" value="0"/>
-            <SetProperty target="{fieldText}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="opacity" value="0"/>
-            <SetProperty target="{fieldSelector}" property="x" value="{-10-fieldText.width-fieldSelector.width}"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation target="{fieldSelector}" properties="width,x,opacity" duration="200"/>
-            <NumericAnimation target="{fieldText}" properties="width,x,opacity" duration="200"/>
-            <NumericAnimation target="{fieldRemover}" properties="width,x,opacity" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/FieldRemover.qml b/examples/declarative/tutorials/contacts/t8/FieldRemover.qml
deleted file mode 100644
index a7dad64..0000000
--- a/examples/declarative/tutorials/contacts/t8/FieldRemover.qml
+++ /dev/null
@@ -1,57 +0,0 @@
-<Item height="30" width="30" id="fieldRemover" clip="true">
-    <properties>
-        <Property name="open" value="false"/>
-    </properties>
-    <signals>
-        <Signal name="confirm"/>
-    </signals>
-    <resources>
-        <Script>
-            function toggle() {
-                if (fieldRemover.state=='opened') {
-                    fieldRemover.state='';
-                    open='false';
-                    Page.mouseGrabbed='false';
-                } else {
-                    if (Page.mouseGrabbed != 'true') {
-                        fieldRemover.state='opened';
-                        open='true';
-                        Page.mouseGrabbed='true';
-                    }
-                }
-            }
-        </Script>
-    </resources>
-    <Rect id="border" anchors.fill="{parent}" color="red" radius="5"/>
-    <Image id="trashIcon" src="../shared/pics/trash.png"
-        width="22" height="22"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-    <Image id="cancelIcon" src="../shared/pics/cancel.png"
-        width="22" height="22" opacity="0"
-        anchors.right="{parent.right}" anchors.rightMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-    <Image id="confirmIcon" src="../shared/pics/ok.png"
-        width="22" height="22" opacity="0"
-        anchors.left="{parent.left}" anchors.leftMargin="4"
-        anchors.verticalCenter="{parent.verticalCenter}"/>
-    <Text id="text" opacity="0" text="Remove" font.bold="true" color="white" hAlign="AlignHCenter"
-        anchors.verticalCenter="{parent.verticalCenter}"
-        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
-        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"/>
-    <MouseRegion anchors.fill="{confirmIcon}" onClicked="toggle(); fieldRemover.confirm.emit()"/>
-    <MouseRegion anchors.fill="{trashIcon}" onClicked="toggle()"/>
-    <states>
-        <State name="opened">
-            <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>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/FieldText.qml b/examples/declarative/tutorials/contacts/t8/FieldText.qml
deleted file mode 100644
index d3a158a..0000000
--- a/examples/declarative/tutorials/contacts/t8/FieldText.qml
+++ /dev/null
@@ -1,89 +0,0 @@
-<Item height="30" id="fieldText">
-    <properties>
-        <Property name="open" value="false"/>
-        <Property name="text" value="" onValueChanged="setText(fieldText.text)"/>
-        <Property name="label" value=""/>
-    </properties>
-    <signals>
-        <Signal name="textEdited"/>
-    </signals>
-    <resources>
-        <Script>
-            function start() {
-                if (Page.mouseGrabbed != 'true') {
-                    fieldText.state='editing';
-                    open='true';
-                    Page.mouseGrabbed='true';
-                }
-            }
-            function confirm() {
-                fieldText.text = textEdit.text;
-                fieldText.state='';
-                open='false';
-                Page.mouseGrabbed='false';
-                fieldText.textEdited.emit();
-            }
-            function cancel() {
-                textEdit.text = fieldText.text;
-                fieldText.state='';
-                open='false';
-                Page.mouseGrabbed='false';
-            }
-            function setText(value) {
-                if (textEdit.text != value) {
-                    fieldText.state='';
-                    open='false';
-                    textEdit.text = value;
-                }
-            }
-        </Script>
-    </resources>
-    <Rect id="border" radius="5" anchors.fill="{parent}" color="{field.editable == 1 ? '#202020' : '#000000'}">
-        <TextEdit id="textEdit" vAlign="AlignVCenter" text=""
-            readOnly="true" font.bold="true" wrap="false" color="white"
-            x="5" width="{parent.width-10}"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            />
-        <Text id="textLabel" vAlign="AlignVCenter" hAlign="AlignHCenter"
-            color="#505050" font.italic="true"
-            anchors.fill="{border}" text="{fieldText.label}"
-            opacity="{textEdit.text == '' ? 1 : 0}">
-            <opacity>
-                <Behaviour>
-                    <NumericAnimation target="{textLabel}" property="opacity" duration="250"/>
-                </Behaviour>
-            </opacity>
-        </Text>
-        <Image id="cancelIcon" src="../shared/pics/cancel.png"
-            width="22" height="22" opacity="0"
-            anchors.right="{parent.right}" anchors.rightMargin="4"
-            anchors.verticalCenter="{parent.verticalCenter}"/>
-        <Image id="confirmIcon" src="../shared/pics/ok.png"
-            width="22" height="22" opacity="0"
-            anchors.left="{parent.left}" anchors.leftMargin="4"
-            anchors.verticalCenter="{parent.verticalCenter}"/>
-        <MouseRegion anchors.fill="{cancelIcon}" onClicked="cancel()"/>
-        <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
-        <MouseRegion id="editRegion" anchors.fill="{textEdit}" onClicked="start()"/>
-    </Rect>
-    <states>
-        <State name="editing">
-            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
-            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
-            <SetProperty target="{border}" 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="{textEdit}" property="x" value="35"/>
-            <SetProperty target="{editRegion}" property="opacity" value="0"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState='' toState="*" reversible="true">
-            <NumericAnimation target="{textEdit}" properties="x" duration="200"/>
-            <NumericAnimation target="{confirmIcon}" properties="opacity" duration="200"/>
-            <NumericAnimation target="{cancelIcon}" properties="opacity" duration="200"/>
-            <ColorAnimation duration="150"/>
-        </Transition>
-    </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/t8/SearchBar.qml b/examples/declarative/tutorials/contacts/t8/SearchBar.qml
deleted file mode 100644
index f8e1a6a..0000000
--- a/examples/declarative/tutorials/contacts/t8/SearchBar.qml
+++ /dev/null
@@ -1,16 +0,0 @@
-<Item height="30" width="{parent.width}">
-    <properties>
-        <Property name="text" value="{searchEdit.text}"/>
-    </properties>
-    <Rect color="white" anchors.fill="{parent}">
-        <Image id="searchIcon" src="../shared/pics/search.png"
-            anchors.left="{parent.left}" anchors.leftMargin="5"
-            anchors.verticalCenter="{parent.verticalCenter}"/>
-        <TextEdit id="searchEdit" focus="{Page.listShown == 1}" 
-            anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
-            anchors.leftMargin="5" anchors.rightMargin="5"
-            anchors.verticalCenter="{parent.verticalCenter}"
-            readOnly="false" wrap="false"/>
-    </Rect>
-</Item>
-
diff --git a/examples/declarative/tutorials/contacts/t8/contacts.qml b/examples/declarative/tutorials/contacts/t8/contacts.qml
deleted file mode 100644
index f76ccfd..0000000
--- a/examples/declarative/tutorials/contacts/t8/contacts.qml
+++ /dev/null
@@ -1,133 +0,0 @@
-<Rect id="Page" color="black" width="240" height="320">
-    <properties>
-        <Property name="listShown" value="1"/>
-        <Property name="mode" value="list"/>
-        <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 WHERE lower(label) LIKE lower(:searchTerm) ORDER BY label, recid</query>
-            <bindings>
-                <SqlBind name=":searchTerm" value="{searchBar.text + '%' }"/>
-            </bindings>
-        </SqlQuery>
-        <Component id="contactDelegate">
-            <Item id="wrapper" x="0" width="{ListView.view.width}" height="34">
-                <Text id="label" x="45" y="12" text="{model.label}" color="white" font.bold="true" width="{parent.width-30}" opacity="{listShown}"/>
-                <Item id="Details" anchors.fill="{wrapper}">
-                    <Bind target="{Details.qmlItem}" property="contactid" value="{model.recid}"/>
-                    <Bind target="{Details.qmlItem}" property="mode" value="{wrapper.state}"/>
-                    <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>
-                <MouseRegion anchors.fill="{label}" opacity="{listShown}">
-                    <onClicked>
-                        Details.qml = 'Contact.qml';
-                        wrapper.state='opened';
-                    </onClicked>
-                </MouseRegion>
-                <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="{Details.qmlItem}" property="mode" value="opened"/>
-                        <SetProperty target="{Page}" property="mode" value="editExisting"/>
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <NumericAnimation duration="500" properties="yPosition,height,opacity"/>
-                    </Transition>
-                </transitions>
-                <Connection sender="{confirmEditButton}" signal="clicked()">
-                    if (Details.qmlItem.mode == 'opened' &amp;&amp; Page.mouseGrabbed != 'true') {
-                        Details.qmlItem.mode = 'closed';
-                        wrapper.state = "";
-                        Details.qmlItem.confirm.emit();
-                    }
-                </Connection>
-                <Connection sender="{cancelEditButton}" signal="clicked()">
-                    if (Details.qmlItem.mode == 'opened' &amp;&amp; Page.mouseGrabbed != 'true') {
-                        Details.qmlItem.mode = 'closed';
-                        wrapper.state = "";
-                        Details.qmlItem.cancel.emit();
-                    }
-                </Connection>
-            </Item>
-        </Component>
-    </resources>
-    <Button id="newContactButton" icon="../shared/pics/new.png"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        onClicked="newContactItem.label = ''; newContactItem.phone = ''; newContactItem.email = ''; Page.mode = 'editNew'"
-        opacity="{Page.mode == 'list' ? 1 : 0}"/>
-    <Button id="cancelEditButton" icon="../shared/pics/cancel.png"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.right="{parent.right}" anchors.rightMargin="5"
-        opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/>
-    <Button id="confirmEditButton" icon="../shared/pics/ok.png"
-        anchors.top="{parent.top}" anchors.topMargin="5"
-        anchors.left="{parent.left}" anchors.leftMargin="5"
-        opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/>
-    <FocusRealm id="searchBarRealm"
-        height="30"
-        anchors.bottom="{parent.bottom}"
-        anchors.left="{parent.left}" anchors.right="{parent.right}"
-        focus="{Page.mode == 'list' ? 'true' : 'false'}">
-        <SearchBar id="searchBar" anchors.fill="{parent}">
-            <states>
-                <State name="searchHidden" when="{searchBar.text == '' || Page.listShown == 0}">
-                    <SetProperty target="{searchBarRealm}" property="anchors.bottomMargin" value="-30"/>
-                </State>
-            </states>
-            <transitions>
-                <Transition fromState="*" toState="*">
-                    <NumericAnimation property="bottomMargin" duration="250"/>
-                </Transition>
-            </transitions>
-        </SearchBar>
-    </FocusRealm>
-    <ListView id="contactListView" model="{contactList}" delegate="{contactDelegate}"
-        anchors.top="{newContactButton.bottom}" anchors.topMargin="10"
-        anchors.left="{parent.left}" anchors.right="{parent.right}"
-        anchors.bottom="{searchBarRealm.top}"
-        clip="true"
-        focus="{Page.mode == 'list' ? 'false' : 'true'}"
-        />
-    <Contact id="newContactItem"
-        mode="opened"
-        anchors.top="{newContactButton.bottom}" anchors.topMargin="10"
-        anchors.left="{parent.left}" anchors.right="{parent.right}"
-        anchors.bottom="{searchBarRealm.top}"
-        onClose="Page.mode='list'"
-        opacity="0"
-    />
-    <Connection sender="{confirmEditButton}" signal="clicked()">
-        if (Page.mode == 'editNew' &amp;&amp; Page.mouseGrabbed != 'true') {
-            newContactItem.confirm.emit()
-        }
-    </Connection>
-    <Connection sender="{cancelEditButton}" signal="clicked()">
-        if (Page.mode == 'editNew' &amp;&amp; Page.mouseGrabbed != 'true') {
-            newContactItem.cancel.emit()
-        }
-    </Connection>
-    <states>
-        <State name="editExistingState" when="{Page.mode == 'editExisting'}">
-            <SetProperty target="{Page}" property="listShown" value="0"/>
-        </State>
-        <State name="editNewState" when="{Page.mode == 'editNew'}">
-            <SetProperty target="{Page}" property="listShown" value="0"/>
-            <SetProperty target="{contactListView}" property="opacity" value="0"/>
-            <SetProperty target="{newContactItem}" property="opacity" value="1"/>
-        </State>
-    </states>
-    <transitions>
-        <Transition fromState="*" toState="*">
-            <NumericAnimation property="opacity" duration="500"/>
-        </Transition>
-    </transitions>
-</Rect>