Improve states & transitions examples.

3 files changed, 56 insertions, 52 deletions

diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
index acab2f0..6f6b40f 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -2,47 +2,49 @@ import Qt 4.6
 
 Rectangle {
     id: page
-    width: 300; height: 300; color: "white"
-    // A target region.  Clicking in here sets the state to '' - the default state
+    width: 640; height: 480; color: "#343434"
+
+    // A target region.  Clicking in here sets the state to the default state
     Rectangle {
-        x: 0; y: 0; width: 50; height: 50
-        color: "transparent"; border.color: "black"
-        MouseRegion { anchors.fill: parent; onClicked: { page.state='' } }
+        id: initialPosition
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 64; height: 64; radius: 6
+        color: "Transparent"; border.color: "Gray"
+        MouseRegion { anchors.fill: parent; onClicked: page.state = '' }
     }
+
     // Another target region.  Clicking in here sets the state to 'Position1'
     Rectangle {
-        x: 150; y: 50; width: 50; height: 50
-        color: "transparent"; border.color: "black"
-        MouseRegion { anchors.fill: parent; onClicked: { page.state='Position1' } }
+        id: position1
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
+        width: 64; height: 64; radius: 6
+        color: "Transparent"; border.color: "Gray"
+        MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position1' }
     }
+
     // Another target region.  Clicking in here sets the state to 'Position2'
     Rectangle {
-        x: 0; y: 200; width: 50; height: 50
-        color: "transparent"; border.color: "black"
-        MouseRegion { anchors.fill: parent; onClicked: { page.state='Position2' } }
+        id: position2
+        anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
+        width: 64; height: 64; radius: 6
+        color: "Transparent"; border.color: "Gray"
+        MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position2' }
     }
-    // Rect which will be moved when my state changes
-    Rectangle { id: myrect; width: 50; height: 50; color: "red" }
+
+    // The image which will be moved when my state changes
+    Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
 
     states: [
-        // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+        // In state 'Position1', change the 'user' item position to rect2's position.
         State {
             name: "Position1"
-            PropertyChanges {
-                target: myrect
-                x: 150
-                y: 50
-            }
+            PropertyChanges { target: user; x: position1.x; y: position1.y }
         },
-        // In state 'Position2', change y to 100.  We do not specify 'x' here -
-        // it will therefore be restored to its default value of 0, if it
-        // had been changed.
+
+        // In state 'Position2', change the 'user' item position to rect3's position.
         State {
             name: "Position2"
-            PropertyChanges {
-                target: myrect
-                y: 200
-            }
+            PropertyChanges { target: user; x: position2.x; y: position2.y  }
         }
     ]
 }
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index cc6894d..ba97d9be 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -2,47 +2,49 @@ import Qt 4.6
 
 Rectangle {
     id: page
-    width: 300; height: 300; color: "white"
-    // A target region.  Clicking in here sets the state to '' - the default state
+    width: 640; height: 480; color: "#343434"
+
+    // A target region.  Clicking in here sets the state to the default state
     Rectangle {
-        x: 0; y: 0; width: 50; height: 50
-        color: "transparent"; border.color: "black"
-        MouseRegion { anchors.fill: parent; onClicked: { page.state='' } }
+        id: initialPosition
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 64; height: 64; radius: 6
+        color: "Transparent"; border.color: "Gray"
+        MouseRegion { anchors.fill: parent; onClicked: page.state = '' }
     }
+
     // Another target region.  Clicking in here sets the state to 'Position1'
     Rectangle {
-        x: 150; y: 50; width: 50; height: 50
-        color: "transparent"; border.color: "black"
-        MouseRegion { anchors.fill: parent; onClicked: { page.state='Position1' } }
+        id: position1
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
+        width: 64; height: 64; radius: 6
+        color: "Transparent"; border.color: "Gray"
+        MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position1' }
     }
+
     // Another target region.  Clicking in here sets the state to 'Position2'
     Rectangle {
-        x: 0; y: 200; width: 50; height: 50
-        color: "transparent"; border.color: "black"
-        MouseRegion { anchors.fill: parent; onClicked: { page.state='Position2' } }
+        id: position2
+        anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
+        width: 64; height: 64; radius: 6
+        color: "Transparent"; border.color: "Gray"
+        MouseRegion { anchors.fill: parent; onClicked: page.state = 'Position2' }
     }
-    // Rect which will be moved when my state changes
-    Rectangle { id: myrect; width: 50; height: 50; color: "red" }
+
+    // The image which will be moved when my state changes
+    Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
 
     states: [
-        // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+        // In state 'Position1', change the 'user' item position to rect2's position.
         State {
             name: "Position1"
-            PropertyChanges {
-                target: myrect
-                x: 150
-                y: 50
-            }
+            PropertyChanges { target: user; x: position1.x; y: position1.y }
         },
-        // In state 'Position2', change y to 100.  We do not specify 'x' here -
-        // it will therefore be restored to its default value of 0, if it
-        // had been changed.
+
+        // In state 'Position2', change the 'user' item position to rect3's position.
         State {
             name: "Position2"
-            PropertyChanges {
-                target: myrect
-                y: 200
-            }
+            PropertyChanges { target: user; x: position2.x; y: position2.y  }
         }
     ]
 
diff --git a/examples/declarative/states/user.png b/examples/declarative/states/user.png
new file mode 100644
index 0000000..dd7d7a2
--- /dev/null
+++ b/examples/declarative/states/user.png