Converted the examples.

5 files changed, 165 insertions, 55 deletions

diff --git a/examples/declarative/tutorials/t1/tutorial1.qml b/examples/declarative/tutorials/t1/tutorial1.qml
index e4de571..ec29f4f 100644
--- a/examples/declarative/tutorials/t1/tutorial1.qml
+++ b/examples/declarative/tutorials/t1/tutorial1.qml
@@ -1,3 +1,14 @@
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+    }
+}
diff --git a/examples/declarative/tutorials/t2/Cell.qml b/examples/declarative/tutorials/t2/Cell.qml
index 5d6ff52..bd5bbe7 100644
--- a/examples/declarative/tutorials/t2/Cell.qml
+++ b/examples/declarative/tutorials/t2/Cell.qml
@@ -1,7 +1,16 @@
-<Item id="CellContainer" width="40" height="25">
-    <properties>
-        <Property name="color"/>
-    </properties>
-    <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
-    <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" />
-</Item>
+Item {
+    id: CellContainer
+    width: 40
+    height: 25
+    properties: Property {
+        name: "color"
+    }
+    Rect {
+        anchors.fill: parent
+        color: CellContainer.color
+    }
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { HelloText.color = CellContainer.color }
+    }
+}
diff --git a/examples/declarative/tutorials/t2/tutorial2.qml b/examples/declarative/tutorials/t2/tutorial2.qml
index 1e3af16..08ea9eb 100644
--- a/examples/declarative/tutorials/t2/tutorial2.qml
+++ b/examples/declarative/tutorials/t2/tutorial2.qml
@@ -1,11 +1,41 @@
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/>
-    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
-        <Cell color="#ff0000"/>
-        <Cell color="#00ff00"/>
-        <Cell color="#0000ff"/>
-        <Cell color="#ffff00"/>
-        <Cell color="#00ffff"/>
-        <Cell color="#ff00ff"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+    }
+    GridLayout {
+        id: ColorPicker
+        x: 0
+        anchors.bottom: Page.bottom
+        width: 120
+        height: 50
+        columns: 3
+        rows: 2
+        Cell {
+            color: "#ff0000"
+        }
+        Cell {
+            color: "#00ff00"
+        }
+        Cell {
+            color: "#0000ff"
+        }
+        Cell {
+            color: "#ffff00"
+        }
+        Cell {
+            color: "#00ffff"
+        }
+        Cell {
+            color: "#ff00ff"
+        }
+    }
+}
diff --git a/examples/declarative/tutorials/t3/Cell.qml b/examples/declarative/tutorials/t3/Cell.qml
index 5d6ff52..bd5bbe7 100644
--- a/examples/declarative/tutorials/t3/Cell.qml
+++ b/examples/declarative/tutorials/t3/Cell.qml
@@ -1,7 +1,16 @@
-<Item id="CellContainer" width="40" height="25">
-    <properties>
-        <Property name="color"/>
-    </properties>
-    <Rect anchors.fill="{parent}" color="{CellContainer.color}"/>
-    <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" />
-</Item>
+Item {
+    id: CellContainer
+    width: 40
+    height: 25
+    properties: Property {
+        name: "color"
+    }
+    Rect {
+        anchors.fill: parent
+        color: CellContainer.color
+    }
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { HelloText.color = CellContainer.color }
+    }
+}
diff --git a/examples/declarative/tutorials/t3/tutorial3.qml b/examples/declarative/tutorials/t3/tutorial3.qml
index f9f1415..8e2b697 100644
--- a/examples/declarative/tutorials/t3/tutorial3.qml
+++ b/examples/declarative/tutorials/t3/tutorial3.qml
@@ -1,27 +1,78 @@
-<Rect id="Page" width="480" height="200" color="white">
-    <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}">
-        <states>
-            <State name="down" when="{MouseRegion.pressed == true}">
-                <SetProperty target="{HelloText}" property="y" value="160"/>
-                <SetProperty target="{HelloText}" property="color" value="red"/>
-            </State>
-        </states>
-        <transitions>
-            <Transition fromState="*" toState="down" reversible="true">
-                <ParallelAnimation>
-                    <NumericAnimation properties="y" duration="500" easing="easeOutBounce"/>
-                    <ColorAnimation duration="500"/>
-                </ParallelAnimation>
-            </Transition>
-        </transitions>
-    </Text>
-    <MouseRegion id="MouseRegion" anchors.fill="{HelloText}"/>
-    <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2">
-        <Cell color="#ff0000"/>
-        <Cell color="#00ff00"/>
-        <Cell color="#0000ff"/>
-        <Cell color="#ffff00"/>
-        <Cell color="#00ffff"/>
-        <Cell color="#ff00ff"/>
-    </GridLayout>
-</Rect>
+Rect {
+    id: Page
+    width: 480
+    height: 200
+    color: "white"
+    Text {
+        id: HelloText
+        text: "Hello world!"
+        font.size: 24
+        font.bold: true
+        y: 30
+        anchors.horizontalCenter: Page.horizontalCenter
+        states: [
+            State {
+                name: "down"
+                when: MouseRegion.pressed == true
+                SetProperty {
+                    target: HelloText
+                    property: "y"
+                    value: 160
+                }
+                SetProperty {
+                    target: HelloText
+                    property: "color"
+                    value: "red"
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                fromState: "*"
+                toState: "down"
+                reversible: true
+                ParallelAnimation {
+                    NumericAnimation {
+                        properties: "y"
+                        duration: 500
+                        easing: "easeOutBounce"
+                    }
+                    ColorAnimation {
+                        duration: 500
+                    }
+                }
+            }
+        ]
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: HelloText
+    }
+    GridLayout {
+        id: ColorPicker
+        x: 0
+        anchors.bottom: Page.bottom
+        width: 120
+        height: 50
+        columns: 3
+        rows: 2
+        Cell {
+            color: "#ff0000"
+        }
+        Cell {
+            color: "#00ff00"
+        }
+        Cell {
+            color: "#0000ff"
+        }
+        Cell {
+            color: "#ffff00"
+        }
+        Cell {
+            color: "#00ffff"
+        }
+        Cell {
+            color: "#ff00ff"
+        }
+    }
+}