1 files changed, 36 insertions, 26 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)
+    }
+}