Converted the examples.

2 files changed, 99 insertions, 54 deletions

diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
index 470a170..e3ca0c2 100644
--- a/examples/declarative/scrollbar/ScrollBar.qml
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -1,26 +1,36 @@
-<Item id="ScrollBar">
-    <!--
-    The properties that define the scrollbar's state.
-    position and pageSize are in the range 0.0 - 1.0.  They are relative to the
-    height of the page, i.e. a pageSize of 0.5 means that you can see 50%
-    of the height of the view.
-    orientation can be either 'Vertical' or 'Horizontal'
-    -->
-    <properties>
-        <Property name="position"/>
-        <Property name="pageSize"/>
-        <Property name="orientation" value="Vertical"/>
-    </properties>
-
-    <!-- A light, semi-transparent background -->
-    <Rect id="Background" radius="{orientation == 'Vertical' ? (width/2) : (height/2)}" color="white" opacity="0.3" anchors.fill="{parent}"/>
-
-    <!-- Size the bar to the required size, depending upon the orientation.  -->
-    <Rect opacity="0.6" color="black"
-          radius="{orientation == 'Vertical' ? (width/2) : (height/2)}"
-          x="{orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2)}"
-          y="{orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2}"
-          width="{orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4))}"
-          height="{orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4)}"
-          />
-</Item>
+Item {
+    id: ScrollBar
+    // The properties that define the scrollbar's state.
+    // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
+    // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+    // of the height of the view.
+    // orientation can be either 'Vertical' or 'Horizontal'
+    properties: Property {
+        name: "position"
+    }
+    properties: Property {
+        name: "pageSize"
+    }
+    properties: Property {
+        name: "orientation"
+        value: "Vertical"
+    }
+    // A light, semi-transparent background
+    Rect {
+        id: Background
+        radius: orientation == 'Vertical' ? (width/2) : (height/2)
+        color: "white"
+        opacity: 0.3
+        anchors.fill: parent
+    }
+    // Size the bar to the required size, depending upon the orientation.
+    Rect {
+        opacity: 0.6
+        color: "black"
+        radius: orientation == 'Vertical' ? (width/2) : (height/2)
+        x: orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2)
+        y: orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2
+        width: orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4))
+        height: orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4)
+    }
+}
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
index 697b68a..4412d7f 100644
--- a/examples/declarative/scrollbar/display.qml
+++ b/examples/declarative/scrollbar/display.qml
@@ -1,28 +1,63 @@
-<Rect width="640" height="480">
-
-    <!-- Create a flickable to view a large image.  -->
-    <Flickable id="View" anchors.fill="{parent}">
-        <Image id="Picture" src="pics/niagara_falls.jpg"/>
-        <viewportWidth>{Picture.width}</viewportWidth>
-        <viewportHeight>{Picture.height}</viewportHeight>
-
-        <!-- Only show the scrollbars when the view is moving.  -->
-        <states>
-            <State name="ShowBars" when="{View.moving}">
-                <SetProperty target="{SBV}" property="opacity" value="1" />
-                <SetProperty target="{SBH}" property="opacity" value="1" />
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="*">
-                <NumericAnimation properties="opacity" duration="400"/>
-            </Transition>
-        </transitions>
-
-    </Flickable>
-
-    <!-- Attach scrollbars to the right and bottom edges of the view.  -->
-    <ScrollBar id="SBV" opacity="0" orientation="Vertical" position="{View.pageYPosition}" pageSize="{View.pageHeight}" width="12" height="{View.height-12}" anchors.right="{View.right}"/>
-    <ScrollBar id="SBH" opacity="0" orientation="Horizontal" position="{View.pageXPosition}" pageSize="{View.pageWidth}" height="12" width="{View.width-12}" anchors.bottom="{View.bottom}"/>
-
-</Rect>
+Rect {
+    width: 640
+    height: 480
+    // Create a flickable to view a large image.
+    Flickable {
+        id: View
+        anchors.fill: parent
+        Image {
+            id: Picture
+            src: "pics/niagara_falls.jpg"
+        }
+        viewportWidth: Picture.width
+        viewportHeight: Picture.height
+        // Only show the scrollbars when the view is moving.
+        states: [
+            State {
+                name: "ShowBars"
+                when: View.moving
+                SetProperty {
+                    target: SBV
+                    property: "opacity"
+                    value: 1
+                }
+                SetProperty {
+                    target: SBH
+                    property: "opacity"
+                    value: 1
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                fromState: "*"
+                toState: "*"
+                NumericAnimation {
+                    properties: "opacity"
+                    duration: 400
+                }
+            }
+        ]
+    }
+    // Attach scrollbars to the right and bottom edges of the view.
+    ScrollBar {
+        id: SBV
+        opacity: 0
+        orientation: "Vertical"
+        position: View.pageYPosition
+        pageSize: View.pageHeight
+        width: 12
+        height: View.height-12
+        anchors.right: View.right
+    }
+    ScrollBar {
+        id: SBH
+        opacity: 0
+        orientation: "Horizontal"
+        position: View.pageXPosition
+        pageSize: View.pageWidth
+        height: 12
+        width: View.width-12
+        anchors.bottom: View.bottom
+    }
+}