1 files changed, 111 insertions, 68 deletions
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index c3f3515..c7fc656 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,68 +1,111 @@
-<Rect id="Page" width="300" height="300" color="white">
-
-    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
-    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
-    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
-    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
-    </Rect>
-
-    <!-- Rect which will be moved when my state changes -->
-    <Rect id="myrect" width="50" height="50" color="red"/>
-
-    <states>
-
-        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
-        <State name="Position1">
-            <SetProperty target="{myrect}" property="x" value="150"/>
-            <SetProperty target="{myrect}" property="y" value="50"/>
-        </State>
-
-        <!--
-        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.
-        -->
-        <State name="Position2">
-            <SetProperty target="{myrect}" property="y" value="200"/>
-        </State>
-
-    </states>
-
-    <!-- transitions define how the properties change. -->
-    <transitions>
-
-        <!--
-        When transitioning to 'Position1' move x,y over a duration of 1 second,
-        with easeOutBounce easing function.
-        -->
-        <Transition fromState="*" toState="Position1">
-            <NumericAnimation properties="x,y" easing="easeOutBounce" duration="1000" />
-        </Transition>
-
-        <!--
-        When transitioning to 'Position2' move x,y over a duration of 2 seconds,
-        with easeInOutQuad easing function.
-        -->
-        <Transition fromState="*" toState="Position2">
-            <NumericAnimation properties="x,y" easing="easeInOutQuad" duration="2000" />
-        </Transition>
-
-        <!--
-        For any other state changes move x,y linearly over duration of 200ms.
-        -->
-        <Transition>
-            <NumericAnimation properties="x,y" duration="200" />
-        </Transition>
-
-    </transitions>
-
-</Rect>
+Rect {
+    id: Page
+    width: 300
+    height: 300
+    color: "white"
+    // A target region.  Clicking in here sets the state to '' - the default state
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 0
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position1'
+    Rect {
+        width: 50
+        height: 50
+        x: 150
+        y: 50
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position1' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position2'
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 200
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position2' }
+        }
+    }
+    // Rect which will be moved when my state changes
+    Rect {
+        id: myrect
+        width: 50
+        height: 50
+        color: "red"
+    }
+    states: [
+        // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+        State {
+            name: "Position1"
+            SetProperty {
+                target: myrect
+                property: "x"
+                value: 150
+            }
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 50
+            }
+        }        // 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.
+,
+        State {
+            name: "Position2"
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 200
+            }
+        }
+    ]
+    // transitions define how the properties change.
+    transitions: [
+        // When transitioning to 'Position1' move x,y over a duration of 1 second,
+        // with easeOutBounce easing function.
+        Transition {
+            fromState: "*"
+            toState: "Position1"
+            NumericAnimation {
+                properties: "x,y"
+                easing: "easeOutBounce"
+                duration: 1000
+            }
+        }        // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+        // with easeInOutQuad easing function.
+,
+        Transition {
+            fromState: "*"
+            toState: "Position2"
+            NumericAnimation {
+                properties: "x,y"
+                easing: "easeInOutQuad"
+                duration: 2000
+            }
+        }        // For any other state changes move x,y linearly over duration of 200ms.
+,
+        Transition {
+            NumericAnimation {
+                properties: "x,y"
+                duration: 200
+            }
+        }
+    ]
+}