Convert all examples and demos from XML format

2 files changed, 228 insertions, 122 deletions

diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index b65f2bc..7d26e88 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -1,41 +1,115 @@
-<Rect width="400" height="500" radius="7" pen.color="black" id="Page">
-    <properties>
-        <Property name="day" type="string" />
-        <Property name="stickies" />
-    </properties>
-
-    <Image x="10" y="10" source="cork.jpg" opaque="true"/>
-    <Text x="20" y="20" height="40" font.size="14" font.bold="true" width="370" text="{day}" style="Outline" styleColor="#dedede"/>
-
-    <Repeater dataSource="{Page.stickies}">
-        <Item x="{Math.random() * 200 + 100}" y="{Math.random() * 300 + 50}" id="StickyPage">
-            <rotation>
-                <Follow source="{-Flick.xVelocity / 100}" spring="2.0" damping="0.1"/>
-            </rotation>
-            <Item id="Sticky" scale="0.5">
-                <Image id="StickyImage" source="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" />
-                <TextEdit id="MyText" smooth="true" font.size="28" readOnly="false" x="-104" y="36" wrap="true" rotation="-8" text="{noteText}" width="195" height="172" />
-                <Item y="-20" x="{StickyImage.x}" width="{StickyImage.width * StickyImage.scale}" height="{StickyImage.height * StickyImage.scale}" >
-                    <MouseRegion id="Mouse" onClicked="MyText.focus = true" anchors.fill="{parent}" drag.target="{StickyPage}" drag.axis="xy" drag.ymin="0" drag.ymax="500" drag.xmin="0" drag.xmax="400"/>
-                </Item>
-            </Item>
-            <Image source="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" />
-
-            <states>
-                <State name="pressed" when="{Mouse.pressed}">
-                    <SetProperties target="{Sticky}" rotation="8" scale="1"/>
-                    <SetProperties target="{Page}" z="8"/>
-                </State>
-            </states>
-            <transitions>
-                <Transition>
-                    <NumericAnimation properties="rotation,scale" duration="200"/>
-                </Transition>
-            </transitions>
-        </Item>
-    </Repeater>
-
-
-
-
-</Rect>
+Rect {
+    width: 400
+    height: 500
+    radius: 7
+    pen.color: "black"
+    id: Page
+    properties: Property {
+        name: "day"
+        type: "string"
+    }
+    properties: Property {
+        name: "stickies"
+    }
+    Image {
+        x: 10
+        y: 10
+        source: "cork.jpg"
+        opaque: true
+    }
+    Text {
+        x: 20
+        y: 20
+        height: 40
+        font.size: 14
+        font.bold: true
+        width: 370
+        text: day
+        style: Outline
+        styleColor: "#dedede"
+    }
+    Repeater {
+        dataSource: Page.stickies
+        Item {
+            x: Math.random() * 200 + 100
+            y: Math.random() * 300 + 50
+            id: StickyPage
+            rotation: Follow {
+                source: -Flick.xVelocity / 100
+                spring: 2.0
+                damping: 0.1
+            }
+            Item {
+                id: Sticky
+                scale: 0.5
+                Image {
+                    id: StickyImage
+                    source: "sticky.png"
+                    smooth: true
+                    y: -20
+                    x: 8 + -width * 0.6 / 2
+                    scale: 0.6
+                }
+                TextEdit {
+                    id: MyText
+                    smooth: true
+                    font.size: 28
+                    readOnly: false
+                    x: -104
+                    y: 36
+                    wrap: true
+                    rotation: -8
+                    text: noteText
+                    width: 195
+                    height: 172
+                }
+                Item {
+                    y: -20
+                    x: StickyImage.x
+                    width: StickyImage.width * StickyImage.scale
+                    height: StickyImage.height * StickyImage.scale
+                    MouseRegion {
+                        id: Mouse
+                        onClicked: { MyText.focus = true }
+                        anchors.fill: parent
+                        drag.target: StickyPage
+                        drag.axis: "xy"
+                        drag.ymin: 0
+                        drag.ymax: 500
+                        drag.xmin: 0
+                        drag.xmax: 400
+                    }
+                }
+            }
+            Image {
+                source: "tack.png"
+                x: -width / 2
+                y: -height * 0.7 / 2
+                scale: 0.7
+            }
+            states: [
+                State {
+                    name: "pressed"
+                    when: Mouse.pressed
+                    SetProperties {
+                        target: Sticky
+                        rotation: 8
+                        scale: 1
+                    }
+                    SetProperties {
+                        target: Page
+                        z: 8
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    NumericAnimation {
+                        properties: "rotation,scale"
+                        duration: 200
+                    }
+                }
+            ]
+        }
+    }
+}
diff --git a/examples/declarative/velocity/velocity.qml b/examples/declarative/velocity/velocity.qml
index 0215d37..ff95527 100644
--- a/examples/declarative/velocity/velocity.qml
+++ b/examples/declarative/velocity/velocity.qml
@@ -1,81 +1,113 @@
-<Rect color="lightSteelBlue" width="800" height="600">
-    <ListModel id="List">
-        <Day>
-            <name>Sunday</name>
-            <dayColor>#808080</dayColor>
-            <notes>
-                <Note noteText="Lunch" />
-                <Note noteText="Party" />
-            </notes>
-        </Day>
-        <Day>
-            <name>Monday</name>
-            <dayColor>blue</dayColor>
-            <notes>
-                <Note noteText="Pickup kids" />
-                <Note noteText="Checkout kinetic" />
-                <Note noteText="Read email" />
-            </notes>
-        </Day>
-        <Day>
-            <name>Tuesday</name>
-            <dayColor>yellow</dayColor>
-            <notes>
-                <Note noteText="Walk dog" />
-                <Note noteText="Buy newspaper" />
-            </notes>
-        </Day>
-        <Day>
-            <name>Wednesday</name>
-            <dayColor>purple</dayColor>
-            <notes>
-                <Note noteText="Cook dinner" />
-                <Note noteText="Eat dinner" />
-            </notes>
-        </Day>
-        <Day>
-            <name>Thursday</name>
-            <dayColor>blue</dayColor>
-            <notes>
-                <Note noteText="5:30pm Meeting" />
-                <Note noteText="Weed garden" />
-            </notes>
-        </Day>
-        <Day>
-            <name>Friday</name>
-            <dayColor>green</dayColor>
-            <notes>
-                <Note noteText="Still work" />
-                <Note noteText="Drink" />
-            </notes>
-        </Day>
-        <Day>
-            <name>Saturday</name>
-            <dayColor>orange</dayColor>
-            <notes>
-                <Note noteText="Drink" />
-                <Note noteText="Drink" />
-            </notes>
-        </Day>
-    </ListModel>
-
-    <Flickable id="Flick" anchors.fill="{parent}" viewportWidth="{Lay.width}">
-        <HorizontalLayout id="Lay">
-            <Repeater dataSource="{List}">
-                <Component>
-                    <Day day="{name}" color="{dayColor}" stickies="{notes}"/>
-                </Component>
-            </Repeater>
-            <!--
-            <Day color="#808080" day="Sunday" />
-            <Day color="blue" day="Monday"/>
-            <Day color="yellow" day="Tuesday"/>
-            <Day color="purple" day="Wednesday"/>
-            <Day color="blue" day="Thursday"/>
-            <Day color="green" day="Friday"/>
-            <Day color="orange" day="Saturday"/>
-            -->
-        </HorizontalLayout>
-    </Flickable>
-
-</Rect>
+Rect {
+    color: "lightSteelBlue"
+    width: 800
+    height: 600
+    ListModel2 {
+        id: List
+        ListElement {
+            name: "Sunday"
+            dayColor: "#808080"
+            notes: [
+                ListElement {
+                    noteText: "Lunch"
+                },
+                ListElement {
+                    noteText: "Party"
+                }
+            ]
+        }
+        ListElement {
+            name: "Monday"
+            dayColor: "blue"
+            notes: [
+                ListElement {
+                    noteText: "Pickup kids"
+                },
+                ListElement {
+                    noteText: "Checkout kinetic"
+                },
+                ListElement {
+                    noteText: "Read email"
+                }
+            ]
+        }
+        ListElement {
+            name: "Tuesday"
+            dayColor: "yellow"
+            notes: [
+                ListElement {
+                    noteText: "Walk dog"
+                },
+                ListElement {
+                    noteText: "Buy newspaper"
+                }
+            ]
+        }
+        ListElement {
+            name: "Wednesday"
+            dayColor: "purple"
+            notes: [
+                ListElement {
+                    noteText: "Cook dinner"
+                },
+                ListElement {
+                    noteText: "Eat dinner"
+                }
+            ]
+        }
+        ListElement {
+            name: "Thursday"
+            dayColor: "blue"
+            notes: [
+                ListElement {
+                    noteText: "5:30pm Meeting"
+                },
+                ListElement {
+                    noteText: "Weed garden"
+                }
+            ]
+        }
+        ListElement {
+            name: "Friday"
+            dayColor: "green"
+            notes: [
+                ListElement {
+                    noteText: "Still work"
+                },
+                ListElement {
+                    noteText: "Drink"
+                }
+            ]
+        }
+        ListElement {
+            name: "Saturday"
+            dayColor: "orange"
+            notes: [
+                ListElement {
+                    noteText: "Drink"
+                },
+                ListElement {
+                    noteText: "Drink"
+                }
+            ]
+        }
+    }
+    Flickable {
+        id: Flick
+        anchors.fill: parent
+        viewportWidth: Lay.width
+        HorizontalLayout {
+            id: Lay
+            Repeater {
+                dataSource: List
+                Component {
+                    Day {
+                        day: name
+                        color: dayColor
+                        stickies: notes
+                    }
+                }
+            }
+        }
+    }
+}