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.

4 files changed, 232 insertions, 0 deletions

diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
new file mode 100644
index 0000000..cf6c657
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
@@ -0,0 +1,29 @@
+<Item id="contactDetails"
+    width="230"
+    height="{layout.height}">
+    <properties>
+        <Property name="contactid" value=""/>
+        <Property name="label" onValueChanged="labelField.value = label"/>
+        <Property name="phone" onValueChanged="phoneField.value = phone"/>
+        <Property name="email" onValueChanged="emailField.value = email"/>
+    </properties>
+    <VerticalLayout id="layout"
+        anchors.fill="{parent}"
+        spacing="5"
+        margin="5">
+        <ContactField id="labelField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            label="Name"/>
+        <ContactField id="phoneField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/phone.png"
+            label="Phone"/>
+        <ContactField id="emailField"
+            anchors.left="{layout.left}" anchors.leftMargin="5"
+            anchors.right="{layout.right}" anchors.rightMargin="5"
+            icon="../../shared/pics/email.png"
+            label="Email"/>
+    </VerticalLayout>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
new file mode 100644
index 0000000..5748a81
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml
@@ -0,0 +1,36 @@
+<Item id="contactField"
+    clip="true"
+    width="230"
+    height="30">
+    <properties>
+        <Property name="label" value="Name"/>
+        <Property name="icon" value="../../shared/pics/phone.png"/>
+        <Property name="value"/>
+    </properties>
+    <RemoveButton id="removeButton"
+        anchors.right="{parent.right}"
+        anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"
+        expandedWidth="{contactField.width}"
+        onConfirmed="print('Clear field text'); fieldText.text=''"/>
+    <FieldText id="fieldText"
+        width="{contactField.width-70}"
+        anchors.right="{removeButton.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        label="{contactField.label}"
+        text="{contactField.value}"/>
+    <Image
+        anchors.right="{fieldText.left}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="{contactField.icon}"/>
+    <states>
+        <State name="editingText" when="{fieldText.state == 'editing'}">
+            <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
+            <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="width,rightMargin" duration="200"/>
+        </Transition>
+    </transitions>
+</Item>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
new file mode 100644
index 0000000..8010ac0
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml
@@ -0,0 +1,91 @@
+<Rect id="fieldText"
+    height="30"
+    radius="5"
+    color="white">
+    <properties>
+        <Property
+            name="text"
+            value=""
+            onValueChanged="reset()"/>
+        <Property
+            name="label"
+            value=""/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function edit() {
+                fieldText.state='editing';
+            }
+            function confirm() {
+                fieldText.text = textEdit.text;
+                fieldText.state='';
+                fieldText.confirmed.emit();
+            }
+            function reset() {
+                textEdit.text = fieldText.text;
+                fieldText.state='';
+            }
+        </Script>
+    </resources>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0"/>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0"/>
+    <TextEdit id="textEdit"
+        anchors.left="{parent.left}" anchors.leftMargin="5"
+        anchors.right="{parent.right}" anchors.rightMargin="5"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        color="black"
+        font.bold="true"
+        readOnly="true"
+        wrap="false"
+        />
+    <Text id="textLabel"
+        x="5" width="{parent.width-10}"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        hAlign="AlignHCenter"
+        color="#505050"
+        font.italic="true"
+        text="{fieldText.label}"
+        opacity="{textEdit.text == '' ? 1 : 0}">
+        <opacity>
+            <Behaviour>
+                <NumericAnimation property="opacity" duration="250"/>
+            </Behaviour>
+        </opacity>
+    </Text>
+    <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/>
+    <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/>
+    <MouseRegion
+        id="editRegion"
+        anchors.fill="{textEdit}"
+        onClicked="edit()"/>
+    <states>
+        <State name="editing">
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{textEdit}" property="readOnly" value="false"/>
+            <SetProperty target="{textEdit}" property="focus" value="true"/>
+            <SetProperty target="{editRegion}" property="opacity" value="0"/>
+            <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/>
+            <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState='' toState="*" reversible="true">
+            <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/>
+            <ColorAnimation duration="150"/>
+        </Transition>
+    </transitions>
+</Rect>
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
new file mode 100644
index 0000000..e52bcbf
--- /dev/null
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -0,0 +1,76 @@
+<Rect id="removeButton"
+    width="30" height="30"
+    color="red"
+    radius="5">
+    <properties>
+        <Property name="expandedWidth" value="230"/>
+    </properties>
+    <signals>
+        <Signal name="confirmed"/>
+    </signals>
+    <resources>
+        <Script>
+            function toggle() {
+                print('removeButton.toggle()');
+                if (removeButton.state == 'opened') {
+                    removeButton.state = '';
+                } else {
+                    removeButton.state = 'opened';
+                }
+            }
+        </Script>
+    </resources>
+    <Image id="trashIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/trash.png"
+        opacity="1">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="cancelIcon"
+        width="22" height="22"
+        anchors.right="{parent.right}" anchors.rightMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/cancel.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle()"/>
+    </Image>
+    <Image id="confirmIcon"
+        width="22" height="22"
+        anchors.left="{parent.left}" anchors.leftMargin="4"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        src="../../shared/pics/ok.png"
+        opacity="0">
+        <MouseRegion
+            anchors.fill="{parent}"
+            onClicked="toggle(); removeButton.confirmed.emit()"/>
+    </Image>
+    <Text id="text"
+        anchors.verticalCenter="{parent.verticalCenter}"
+        anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
+        anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
+        font.bold="true"
+        color="white"
+        hAlign="AlignHCenter"
+        text="Remove"
+        opacity="0"/>
+    <states>
+        <State name="opened">
+            <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
+            <SetProperty target="{text}" property="opacity" value="1"/>
+            <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
+            <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
+            <SetProperty target="{trashIcon}" property="opacity" value="0"/>
+        </State>
+    </states>
+    <transitions>
+        <Transition fromState="*" toState="opened" reversible="true">
+            <NumericAnimation properties="opacity,x,width" duration="200"/>
+        </Transition>
+    </transitions>
+</Rect>