2 files changed, 80 insertions, 26 deletions
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
index e2a11b1..8336a70 100644
--- a/examples/declarative/dial/DialLibrary/Dial.qml
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -1,12 +1,42 @@
-<Item width="210" height="210">
-    <properties><Property name="value" type="real" value="0"/></properties>
-    <Image id="Background" src="background.svg"/>
-    <Item x="104" y="102" rotation="{Needle.rotation}">
-        <Image src="needle_shadow.svg" x="-104" y="-102"/>
-    </Item>
-    <Item id="Needle" x="102" y="98" rotation="-130">
-        <rotation><Follow spring="1.4" damping=".15" source="{Math.min(Math.max(-130, value*2.2 - 130), 133)}"/></rotation>
-        <Image src="needle.svg" x="-102" y="-98"/>
-    </Item>
-    <Image src="overlay.svg"/>
-</Item>
+Item {
+    width: 210
+    height: 210
+    properties: Property {
+        name: "value"
+        type: "real"
+        value: 0
+    }
+    Image {
+        id: Background
+        src: "background.svg"
+    }
+    Item {
+        x: 104
+        y: 102
+        rotation: Needle.rotation
+        Image {
+            src: "needle_shadow.svg"
+            x: -104
+            y: -102
+        }
+    }
+    Item {
+        id: Needle
+        x: 102
+        y: 98
+        rotation: -130
+        rotation: Follow {
+            spring: 1.4
+            damping: .15
+            source: Math.min(Math.max(-130, value*2.2 - 130), 133)
+        }
+        Image {
+            src: "needle.svg"
+            x: -102
+            y: -98
+        }
+    }
+    Image {
+        src: "overlay.svg"
+    }
+}
diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml
index bda9b41..fa11d79 100644
--- a/examples/declarative/dial/dial.qml
+++ b/examples/declarative/dial/dial.qml
@@ -1,14 +1,38 @@
-<?qtfx namespacepath:=DialLibrary ?>
-<Rect color="white" width="210" height="240">
-    <!-- Dial with a slider to adjust it -->
-    <Dial id="Dial" value="{Slider.x-2}"/>
-    <Rect anchors.top="{Dial.bottom}" x="20" width="160" height="16" color="steelblue" gradientColor="lightsteelblue" radius="8" opacity="0.7">
-        <Rect id="Slider" x="2" y="2" width="30" height="12" color="lightgray" gradientColor="gray" radius="6">
-            <MouseRegion anchors.fill="{parent}"
-                         drag.target="{parent}"
-                         drag.axis="x"
-                         drag.xmin="2"
-                         drag.xmax="128"/>
-        </Rect>
-    </Rect>
-</Rect>
+import "DialLibrary"
+Rect {
+    color: "white"
+    width: 210
+    height: 240
+    // Dial with a slider to adjust it
+    Dial {
+        id: Dial
+        value: Slider.x-2
+    }
+    Rect {
+        anchors.top: Dial.bottom
+        x: 20
+        width: 160
+        height: 16
+        color: "steelblue"
+        gradientColor: "lightsteelblue"
+        radius: 8
+        opacity: 0.7
+        Rect {
+            id: Slider
+            x: 2
+            y: 2
+            width: 30
+            height: 12
+            color: "lightgray"
+            gradientColor: "gray"
+            radius: 6
+            MouseRegion {
+                anchors.fill: parent
+                drag.target: parent
+                drag.axis: "x"
+                drag.xmin: 2
+                drag.xmax: 128
+            }
+        }
+    }
+}