1 files changed, 128 insertions, 52 deletions
diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml
index 4fbf323..b6695bd 100644
--- a/examples/declarative/follow/pong.qml
+++ b/examples/declarative/follow/pong.qml
@@ -1,55 +1,131 @@
-<Rect id="Page" width="640" height="480" color="#000000">
-    <!-- Make a ball to bounce -->
-    <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1">
-        <properties>
-            <!-- Add a property for the target y coordinate -->
-            <Property name="targetY" value="{Page.height-10}"/>
-            <Property name="direction" value="right"/>
-        </properties>
-        <x>
-            <!-- Move the ball to the right and back to the left repeatedly -->
-            <SequentialAnimation running="true" repeat="true">
-                <NumericAnimation to="{Page.width-40}" duration="2000"/>
-                <SetPropertyAction target="{Ball}" property="direction" value="left"/>
-                <NumericAnimation to="20" duration="2000"/>
-                <SetPropertyAction target="{Ball}" property="direction" value="right"/>
-            </SequentialAnimation>
-        </x>
-        <y>
-            <!-- Make y follow the target y coordinate, with a velocity of 200 -->
-            <Follow source="{Ball.targetY}" velocity="200"/>
-        </y>
-        <onTopChanged>
-            <!-- Detect the ball hitting the top or bottom of the view and bounce it -->
-            if (y &lt;= 0)
+Rect {
+    id: Page
+    width: 640
+    height: 480
+    color: "#000000"
+
+    // Make a ball to bounce
+    Rect {
+        id: Ball
+        x: 20
+        width: 20
+        height: 20
+        color: "#00ee00"
+        z: 1
+
+        // Add a property for the target y coordinate
+        properties: Property {
+            name: "targetY"
+            value: Page.height-10
+        }
+        properties: Property {
+            name: "direction"
+            value: "right"
+        }
+
+        // Move the ball to the right and back to the left repeatedly
+        x: SequentialAnimation {
+            running: true
+            repeat: true
+            NumericAnimation {
+                to: Page.width-40
+                duration: 2000
+            }
+            SetPropertyAction {
+                target: Ball
+                property: "direction"
+                value: "left"
+            }
+            NumericAnimation {
+                to: 20
+                duration: 2000
+            }
+            SetPropertyAction {
+                target: Ball
+                property: "direction"
+                value: "right"
+            }
+        }
+
+        // Make y follow the target y coordinate, with a velocity of 200
+        y: Follow {
+            source: Ball.targetY
+            velocity: 200
+        }
+
+        // Detect the ball hitting the top or bottom of the view and bounce it
+        onTopChanged: {
+            if (y <= 0)
                 targetY = Page.height-20;
-            else if (y &gt;= Page.height-20)
+            else if (y >= Page.height-20)
                 targetY = 0;
-        </onTopChanged>
-    </Rect>
-    <!--
-    Place bats to the left and right of the view, following the y
-    coordinates of the ball.
-    -->
-    <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90">
-        <y>
-            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/>
-        </y>
-    </Rect>
-    <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90">
-        <y>
-            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/>
-        </y>
-    </Rect>
+        }
+    }
+
+    // Place bats to the left and right of the view, following the y
+    // coordinates of the ball.
+    Rect {
+        id: LeftBat
+        color: "#00ee00"
+        x: 2
+        width: 20
+        height: 90
+        y: Follow {
+            source: Ball.y-45
+            velocity: 300
+            enabled: Ball.direction == 'left'
+        }
+    }
+    Rect {
+        id: RightBat
+        x: Page.width-22
+        color: "#00ee00"
+        width: 20
+        height: 90
+        y: Follow {
+            source: Ball.y-45
+            velocity: 300
+            enabled: Ball.direction == 'right'
+        }
+    }
 
-    <!--
-    The rest, to make it look realistic, if neither ever scores...
-    -->
-    <Rect color="#00ee00" width="40" height="60" x="{320-80}"/>
-    <Rect color="#000000" width="20" height="40"  x="{320-70}" y="10"/>
-    <Rect color="#00ee00" width="40" height="60" x="{320+40}"/>
-    <Rect color="#000000" width="20" height="40"  x="{320+50}" y="10"/>
-    <Repeater dataSource="{24}">
-        <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/>
-    </Repeater>
-</Rect>
+    // The rest, to make it look realistic, if neither ever scores...
+    Rect {
+        color: "#00ee00"
+        x: 320-80
+        y: 0
+        width: 40
+        height: 60
+    }
+    Rect {
+        color: "#000000"
+        x: 320-70
+        y: 10
+        width: 20
+        height: 40
+    }
+    Rect {
+        color: "#00ee00"
+        x: 320+40
+        y: 0
+        width: 40
+        height: 60
+    }
+    Rect {
+        color: "#000000"
+        x: 320+50
+        y: 10
+        width: 20
+        height: 40
+    }
+    Repeater {
+        dataSource: 24
+        Rect {
+            color: "#00ee00"
+            x: 320-5
+            y: index*20
+            width: 10
+            height: 10
+        }
+    }
+}