Converted the examples.

23 files changed, 1503 insertions, 655 deletions

diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml
index 1d60ac0..5cb471e 100644
--- a/examples/declarative/animation/animation.qml
+++ b/examples/declarative/animation/animation.qml
@@ -1,28 +1,51 @@
-<Rect width="400" height="200" color="white">
-    <Rect width="40" height="40" y="80" color="#FF0000" radius="10">
-
-        <x>
-            <!--
-            Animate the x property.  Setting repeat to true makes the
-            animation repeat indefinitely, otherwise it would only run once.
-            -->
-            <SequentialAnimation running="true" repeat="true">
-                <!-- Move from 0 to 360 in 500ms, using the easeInOutQuad easing function -->
-                <NumericAnimation from="0" to="360" easing="easeInOutQuad" duration="500"/>
-                <!-- Then pause for 200ms -->
-                <PauseAnimation duration="200"/>
-                <!-- Then move back to 0 in 2 seconds, using the easeInOutElastic easing function -->
-                <NumericAnimation from="360" to="0" easing="easeInOutElastic" duration="2000"/>
-            </SequentialAnimation>
-        </x>
-
-        <color>
-            <!-- Alternate color between red and green -->
-            <SequentialAnimation running="true" repeat="true">
-                <ColorAnimation from="#FF0000" to="#00FF00" duration="5000"/>
-                <ColorAnimation from="#00FF00" to="#FF0000" duration="5000"/>
-            </SequentialAnimation>
-        </color>
-
-    </Rect>
-</Rect>
+Rect {
+    width: 400
+    height: 200
+    color: "white"
+    Rect {
+        width: 40
+        height: 40
+        y: 80
+        color: "#FF0000"
+        radius: 10
+        // Animate the x property.  Setting repeat to true makes the
+        // animation repeat indefinitely, otherwise it would only run once.
+        x: SequentialAnimation {
+            running: true
+            repeat: true
+            // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function
+            NumericAnimation {
+                from: 0
+                to: 360
+                easing: "easeInOutQuad"
+                duration: 500
+            }
+            // Then pause for 200ms
+            PauseAnimation {
+                duration: 200
+            }
+            // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function
+            NumericAnimation {
+                from: 360
+                to: 0
+                easing: "easeInOutElastic"
+                duration: 2000
+            }
+        }
+        // Alternate color between red and green
+        color: SequentialAnimation {
+            running: true
+            repeat: true
+            ColorAnimation {
+                from: "#FF0000"
+                to: "#00FF00"
+                duration: 5000
+            }
+            ColorAnimation {
+                from: "#00FF00"
+                to: "#FF0000"
+                duration: 5000
+            }
+        }
+    }
+}
diff --git a/examples/declarative/behaviours/MyRect.qml b/examples/declarative/behaviours/MyRect.qml
index e40bd1b..dc9a094 100644
--- a/examples/declarative/behaviours/MyRect.qml
+++ b/examples/declarative/behaviours/MyRect.qml
@@ -1,4 +1,11 @@
-<Rect radius="15" pen.color="black" width="100" height="100" id="Page">
-    <MouseRegion anchors.fill="{parent}" onClicked="bluerect.parent = Page; bluerect.x=0" />
-</Rect>
-
+Rect {
+    radius: 15
+    pen.color: "black"
+    width: 100
+    height: 100
+    id: Page
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { bluerect.parent = Page; bluerect.x=0 }
+    }
+}
diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml
index a544028..bb7109e 100644
--- a/examples/declarative/behaviours/test.qml
+++ b/examples/declarative/behaviours/test.qml
@@ -1,37 +1,103 @@
-<Rect color="lightsteelblue" width="800" height="600" id="Page">
-    <MouseRegion anchors.fill="{parent}" onClicked="bluerect.parent = Page; bluerect.x = mouseX;" />
-
-    <MyRect color="green" x="200" y="200" />
-    <MyRect color="red" x="400" y="200" />
-    <MyRect color="yellow" x="400" y="400" />
-    <MyRect color="orange" x="400" y="500" />
-    <MyRect color="pink" x="400" y="0" />
-    <MyRect color="lightsteelblue" x="100" y="500" />
-    <MyRect color="black" x="0" y="200" />
-    <MyRect color="white" x="400" y="0" />
-
-    <Rect color="blue" x="0" y="0" width="100" height="100" id="bluerect">
-        <x>
-            <Behaviour>
-                <SequentialAnimation>
-                    <NumericAnimation target="{bluerect}" properties="y" from="0" to="10" easing="easeOutBounce(amplitude:30)" duration="250" />
-                    <NumericAnimation target="{bluerect}" properties="y" from="10" to="0" easing="easeOutBounce(amplitude:30)" duration="250" />
-                </SequentialAnimation>
-                <NumericAnimation target="{bluerect}" property="x" duration="500" />
-            </Behaviour>
-        </x>
-
-        <parent>
-            <Behaviour>
-                <SequentialAnimation>
-                    <NumericAnimation target="{bluerect}" properties="opacity" to="0" duration="150" />
-                    <SetPropertyAction target="{bluerect}" property="parent" />
-                    <NumericAnimation target="{bluerect}" properties="opacity" to="1" duration="150"/>
-                </SequentialAnimation>
-            </Behaviour>
-        </parent>
-        
-    </Rect>
-
-
-</Rect>
+Rect {
+    color: "lightsteelblue"
+    width: 800
+    height: 600
+    id: Page
+    MouseRegion {
+        anchors.fill: parent
+        onClicked: { bluerect.parent = Page; bluerect.x = mouseX; }
+    }
+    MyRect {
+        color: "green"
+        x: 200
+        y: 200
+    }
+    MyRect {
+        color: "red"
+        x: 400
+        y: 200
+    }
+    MyRect {
+        color: "yellow"
+        x: 400
+        y: 400
+    }
+    MyRect {
+        color: "orange"
+        x: 400
+        y: 500
+    }
+    MyRect {
+        color: "pink"
+        x: 400
+        y: 0
+    }
+    MyRect {
+        color: "lightsteelblue"
+        x: 100
+        y: 500
+    }
+    MyRect {
+        color: "black"
+        x: 0
+        y: 200
+    }
+    MyRect {
+        color: "white"
+        x: 400
+        y: 0
+    }
+    Rect {
+        color: "blue"
+        x: 0
+        y: 0
+        width: 100
+        height: 100
+        id: bluerect
+        x: Behaviour {
+            SequentialAnimation {
+                NumericAnimation {
+                    target: bluerect
+                    properties: "y"
+                    from: 0
+                    to: 10
+                    easing: "easeOutBounce(amplitude:30)"
+                    duration: 250
+                }
+                NumericAnimation {
+                    target: bluerect
+                    properties: "y"
+                    from: 10
+                    to: 0
+                    easing: "easeOutBounce(amplitude:30)"
+                    duration: 250
+                }
+            }
+            NumericAnimation {
+                target: bluerect
+                property: "x"
+                duration: 500
+            }
+        }
+        parent: Behaviour {
+            SequentialAnimation {
+                NumericAnimation {
+                    target: bluerect
+                    properties: "opacity"
+                    to: 0
+                    duration: 150
+                }
+                SetPropertyAction {
+                    target: bluerect
+                    property: "parent"
+                }
+                NumericAnimation {
+                    target: bluerect
+                    properties: "opacity"
+                    to: 1
+                    duration: 150
+                }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/contacts/contacts.qml b/examples/declarative/contacts/contacts.qml
index d4647f9..fa50010 100644
--- a/examples/declarative/contacts/contacts.qml
+++ b/examples/declarative/contacts/contacts.qml
@@ -1,44 +1,121 @@
-<Rect id="page" width="320" height="480" color="white">
-    <resources>
-        <Component id="contactDelegate">
-            <Rect id="wrapper" x="20" width="{List.width-40}" color="#FEFFEE" pen.color="#FFBE4F" radius="5">
-                <filter><Shadow xOffset="5" yOffset="5" /></filter>
-                <MouseRegion id="pageMouse" anchors.fill="{parent}" onClicked="if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';}"/> 
-                <Image id="portraitPic" src="{portrait}" x="10" y="10" />
-                <Text id="name" text="{firstName + ' ' + lastName}" anchors.left="{portraitPic.right}" anchors.leftMargin="10"
-                      anchors.top="{portraitPic.top}" anchors.right="{wrapper.right}" anchors.rightMargin="10"
-                      font.family="Comic Sans MS" font.bold="true" font.size="11"/>
-                <VerticalLayout id="email_layout" anchors.left="{name.left}" anchors.top="{name.bottom}" anchors.topMargin="10">
-                    <Repeater id="email_list" dataSource="{emails}" >
-                        <Component>
-                            <Text text="{modelData}" height="18" font.italic="true" color="midnightblue" />
-                        </Component>
-                    </Repeater>
-                </VerticalLayout>
-                <height>{Math.max(email_layout.height + name.height + 25, portraitPic.height+20)}</height>
-
-                <states>
-                    <State name="Details">
-                        <SetProperty target="{wrapper}" property="color" value="white" />
-                        <SetProperty target="{wrapper}" property="x" value="0" />
-                        <SetProperty target="{wrapper}" property="height" value="{List.height}" />
-                        <SetProperty target="{wrapper}" property="width" value="{List.width}" />
-                        <SetProperty target="{wrapper.ListView.view}" property="yPosition" value="{wrapper.y}"/>
-                        <SetProperty target="{wrapper.ListView.view}" property="locked" value="1"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition>
-                        <ParallelAnimation>
-                            <ColorAnimation duration="500" />
-                            <NumericAnimation duration="150" properties="x,yPosition,height,width"/>
-                        </ParallelAnimation>
-                    </Transition>
-                </transitions>
-            </Rect>
-        </Component>
-    </resources>
-
-    <ListView id="List" model="{contactModel}" width="320" height="480" clip="true" delegate="{contactDelegate}"/>
-</Rect>
+Rect {
+    id: page
+    width: 320
+    height: 480
+    color: "white"
+    resources: [
+        Component {
+            id: contactDelegate
+            Rect {
+                id: wrapper
+                x: 20
+                width: List.width-40
+                color: "#FEFFEE"
+                pen.color: "#FFBE4F"
+                radius: 5
+                filter: Shadow {
+                    xOffset: 5
+                    yOffset: 5
+                }
+                MouseRegion {
+                    id: pageMouse
+                    anchors.fill: parent
+                    onClicked: { if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';} }
+                }
+                Image {
+                    id: portraitPic
+                    src: portrait
+                    x: 10
+                    y: 10
+                }
+                Text {
+                    id: name
+                    text: firstName + ' ' + lastName
+                    anchors.left: portraitPic.right
+                    anchors.leftMargin: 10
+                    anchors.top: portraitPic.top
+                    anchors.right: wrapper.right
+                    anchors.rightMargin: 10
+                    font.family: "Comic Sans MS"
+                    font.bold: true
+                    font.size: 11
+                }
+                VerticalLayout {
+                    id: email_layout
+                    anchors.left: name.left
+                    anchors.top: name.bottom
+                    anchors.topMargin: 10
+                    Repeater {
+                        id: email_list
+                        dataSource: emails
+                        Component {
+                            Text {
+                                text: modelData
+                                height: 18
+                                font.italic: true
+                                color: "midnightblue"
+                            }
+                        }
+                    }
+                }
+                height: Math.max(email_layout.height + name.height + 25, portraitPic.height+20)
+                states: [
+                    State {
+                        name: "Details"
+                        SetProperty {
+                            target: wrapper
+                            property: "color"
+                            value: "white"
+                        }
+                        SetProperty {
+                            target: wrapper
+                            property: "x"
+                            value: 0
+                        }
+                        SetProperty {
+                            target: wrapper
+                            property: "height"
+                            value: List.height
+                        }
+                        SetProperty {
+                            target: wrapper
+                            property: "width"
+                            value: List.width
+                        }
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "yPosition"
+                            value: wrapper.y
+                        }
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "locked"
+                            value: 1
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        ParallelAnimation {
+                            ColorAnimation {
+                                duration: 500
+                            }
+                            NumericAnimation {
+                                duration: 150
+                                properties: "x,yPosition,height,width"
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+    ListView {
+        id: List
+        model: contactModel
+        width: 320
+        height: 480
+        clip: true
+        delegate: contactDelegate
+    }
+}
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
+            }
+        }
+    }
+}
diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml
index 0f3e772..598d953 100644
--- a/examples/declarative/follow/follow.qml
+++ b/examples/declarative/follow/follow.qml
@@ -1,35 +1,78 @@
-<Rect width="320" height="240" color="#ffffff">
-    <Rect id="Rect" y="{200}" color="#00ff00" width="60" height="20">
-        <y>
-            <SequentialAnimation running="true" repeat="true">
-            <NumericAnimation to="{200}" easing="easeOutBounce(amplitude:180)" duration="2000" />
-            <PauseAnimation duration="1000" />
-            </SequentialAnimation>
-        </y>
-    </Rect>
-    <!-- Velocity -->
-    <Rect x="{Rect.width}" color="#ff0000" width="{Rect.width}" height="20">
-        <y>
-            <Follow source="{Rect.y}" velocity="200"/>
-        </y>
-    </Rect>
-    <Text x="{Rect.width}" y="220" text="Velocity"/>
-    <!-- Spring -->
-    <Rect x="{Rect.width * 2}" color="#ff0000" width="{Rect.width}" height="20">
-        <y>
-            <Follow source="{Rect.y}" spring="1.2" damping="0.1"/>
-        </y>
-    </Rect>
-    <Text x="{Rect.width * 2}" y="220" text="Spring"/>
-    <!-- Follow mouse -->
-    <MouseRegion id="Mouse" anchors.fill="{parent}">
-        <Rect width="20" height="20" radius="10" color="#0000ff">
-            <x>
-                <Follow source="{Mouse.mouseX-10}" spring="1.0" damping="0.05"/>
-            </x>
-            <y>
-                <Follow source="{Mouse.mouseY-10}" spring="1.0" damping="0.05"/>
-            </y>
-        </Rect>
-    </MouseRegion>
-</Rect>
+Rect {
+    width: 320
+    height: 240
+    color: "#ffffff"
+    Rect {
+        id: Rect
+        y: 200
+        color: "#00ff00"
+        width: 60
+        height: 20
+        y: SequentialAnimation {
+            running: true
+            repeat: true
+            NumericAnimation {
+                to: 200
+                easing: "easeOutBounce(amplitude:180)"
+                duration: 2000
+            }
+            PauseAnimation {
+                duration: 1000
+            }
+        }
+    }
+    // Velocity
+    Rect {
+        x: Rect.width
+        color: "#ff0000"
+        width: Rect.width
+        height: 20
+        y: Follow {
+            source: Rect.y
+            velocity: 200
+        }
+    }
+    Text {
+        x: Rect.width
+        y: 220
+        text: "Velocity"
+    }
+    // Spring
+    Rect {
+        x: Rect.width * 2
+        color: "#ff0000"
+        width: Rect.width
+        height: 20
+        y: Follow {
+            source: Rect.y
+            spring: 1.2
+            damping: 0.1
+        }
+    }
+    Text {
+        x: Rect.width * 2
+        y: 220
+        text: "Spring"
+    }
+    // Follow mouse
+    MouseRegion {
+        id: Mouse
+        anchors.fill: parent
+        Rect {
+            width: 20
+            height: 20
+            radius: 10
+            color: "#0000ff"
+            x: Follow {
+                source: Mouse.mouseX-10
+                spring: 1.0
+                damping: 0.05
+            }
+            y: Follow {
+                source: Mouse.mouseY-10
+                spring: 1.0
+                damping: 0.05
+            }
+        }
+    }
+}
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 5ce7acb..cbadb72 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,56 +1,77 @@
-<Rect width="400" height="300" color="white">
-
-    <!--
-    MyPets model is defined in dummydata/MyPetsModel.qml
-    The viewer automatically loads files in dummydata/* to assist
-    development without a real data source.
-    This one contains my pets.
-    -->
-
-    <!--
-    Define a delegate component.  A component will be
-    instantiated for each visible item in the list.
-    -->
-    <Component id="PetDelegate">
-        <Item id="Wrapper" width="200" height="50">
-            <VerticalLayout>
-                <Text text="{'Name: ' + name}"/>
-                <Text text="{'Type: ' + type}"/>
-                <Text text="{'Age: ' + age}"/>
-            </VerticalLayout>
-
-            <!--
-            Use the ListView.isCurrentItem attached property to
-            indent the item if it is the current item.
-            -->
-            <states>
-                <State name="Current" when="{Wrapper.ListView.isCurrentItem}">
-                    <SetProperty target="{Wrapper}" property="x" value="10"/>
-                </State>
-            </states>
-            <transitions>
-                <Transition>
-                    <NumericAnimation properties="x" duration="200" />
-                </Transition>
-            </transitions>
-        </Item>
-    </Component>
-
-    <!--
-    Specify a highlight with custom movement.  Note that autoHighlight
-    is set to false in the ListView so that we can control how the
-    highlight moves to the current item.
-    -->
-    <Component id="PetHighlight">
-        <Rect width="200" height="50" color="#FFFF88">
-            <y>
-                <Follow source="{List1.current.y}" spring="3" damping="0.1"/>
-            </y>
-        </Rect>
-    </Component>
-
-    <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}"
-              delegate="{PetDelegate}" highlight="{PetHighlight}" autoHighlight="false"
-              focus="true"/>
-
-</Rect>
+Rect {
+    width: 400
+    height: 300
+    color: "white"
+    // MyPets model is defined in dummydata/MyPetsModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+    // This one contains my pets.
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+    Component {
+        id: PetDelegate
+        Item {
+            id: Wrapper
+            width: 200
+            height: 50
+            VerticalLayout {
+                Text {
+                    text: 'Name: ' + name
+                }
+                Text {
+                    text: 'Type: ' + type
+                }
+                Text {
+                    text: 'Age: ' + age
+                }
+            }
+            // Use the ListView.isCurrentItem attached property to
+            // indent the item if it is the current item.
+            states: [
+                State {
+                    name: "Current"
+                    when: Wrapper.ListView.isCurrentItem
+                    SetProperty {
+                        target: Wrapper
+                        property: "x"
+                        value: 10
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    NumericAnimation {
+                        properties: "x"
+                        duration: 200
+                    }
+                }
+            ]
+        }
+    }
+    // Specify a highlight with custom movement.  Note that autoHighlight
+    // is set to false in the ListView so that we can control how the
+    // highlight moves to the current item.
+    Component {
+        id: PetHighlight
+        Rect {
+            width: 200
+            height: 50
+            color: "#FFFF88"
+            y: Follow {
+                source: List1.current.y
+                spring: 3
+                damping: 0.1
+            }
+        }
+    }
+    ListView {
+        id: List1
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        autoHighlight: false
+        focus: true
+    }
+}
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 6826b78..0f6324f 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -1,85 +1,204 @@
-<!-- This example illustrates expanding a list item to show a more detailed view -->
-<?qtfx namespacepath:=content ?>
-<Rect id="page" width="400" height="240" color="black">
-    <resources>
-        <!--
-        Delegate for the recipes.  This delegate has two modes:
-        1. the list mode (default), which just shows the picture and title of the recipe.
-        2. the details mode, which also shows the ingredients and method.
-        -->
-        <Component id="recipeDelegate">
-            <Item id="wrapper" width="{List.width}">
-                <!--
-                Create a property to contain the visibility of the details.
-                We can bind multiple element's opacity to this one property,
-                rather than having a "SetProperty" line for each element we
-                want to fade.
-                -->
-                <properties><Property name="detailsOpacity" value="0" type="real"/></properties>
-                <!-- A simple rounded rectangle for the background -->
-                <Rect id="background" x="1" y="2" width="{parent.width-2}" height="{parent.height-4}" color="#FEFFEE" pen.color="#FFBE4F" radius="5"/>
-                <!--
-                This mouse region covers the entire delegate.
-                When clicked it changes mode to 'Details'.  If we are already
-                in Details mode, then no change will happen.
-                -->
-                <MouseRegion id="pageMouse" anchors.fill="{parent}" onClicked="wrapper.state = 'Details'"/> 
-                <!--
-                Layout the page.  Picture, title and ingredients at the top, method at the
-                bottom.  Note that elements that should not be visible in the list
-                mode have their opacity set to wrapper.detailsOpacity.
-                -->
-                <HorizontalLayout id="topLayout" x="10" y="10" spacing="10" height="{recipePic.height}" width="{parent.width}">
-                    <Image id="recipePic" src="{picture}" width="48" height="48"/>
-                    <VerticalLayout height="{recipePic.height}" spacing="5" width="{background.width-recipePic.width-20}">
-                        <Text id="name" text="{title}" font.bold="true" font.size="16"/>
-                        <Text opacity="{wrapper.detailsOpacity}" text="Ingredients" font.size="12" font.bold="true"/>
-                        <Text opacity="{wrapper.detailsOpacity}" text="{ingredients}" wrap="true" width="{parent.width}"/>
-                    </VerticalLayout>
-                </HorizontalLayout>
-                <Item id="details" x="10" width="{parent.width-20}" anchors.top="{topLayout.bottom}" anchors.topMargin="10"
-                            anchors.bottom="{parent.bottom}" anchors.bottomMargin="10" opacity="{wrapper.detailsOpacity}">
-                    <Text id="methodTitle" text="Method" font.size="12" font.bold="true" anchors.top="{parent.top}"/>
-                    <Flickable id="flick" anchors.top="{methodTitle.bottom}" anchors.bottom="{parent.bottom}" width="{parent.width}" viewportHeight="{methodText.height}" clip="true">
-                        <Text id="methodText" text="{method}" wrap="true" width="{details.width}"/>
-                    </Flickable>
-                    <Image anchors.right="{flick.right}" anchors.top="{flick.top}" src="content/pics/moreUp.png" opacity="{flick.atYBeginning ? 0 : 1}"/>
-                    <Image anchors.right="{flick.right}" anchors.bottom="{flick.bottom}" src="content/pics/moreDown.png" opacity="{flick.atYEnd ? 0 : 1}"/>
-                </Item>
-                <!-- A button to close the detailed view, i.e. set the state back to default (''). -->
-                <MediaButton anchors.right="{background.right}" anchors.rightMargin="5" y="10" opacity="{wrapper.detailsOpacity}" text="Close" onClicked="wrapper.state = ''"/>
-                <!-- Make the default height equal the hight of the picture, plus margin. -->
-                <height>68</height>
-
-                <states>
-                    <State name="Details">
-                        <SetProperty target="{background}" property="color" value="white" />
-                        <!-- Make the picture bigger -->
-                        <SetProperties target="{recipePic}" width="128" height="128" />
-                        <!-- Make details visible -->
-                        <SetProperties target="{wrapper}" detailsOpacity="1" x="0"/>
-                        <!-- Make the detailed view fill the entire list area -->
-                        <SetProperty target="{wrapper}" property="height" value="{List.height}"/>
-                        <!-- Move the list so that this item is at the top. -->
-                        <SetProperty target="{wrapper.ListView.view}" property="yPosition" value="{wrapper.y}"/>
-                        <!-- Disallow flicking while we're in detailed view -->
-                        <SetProperty target="{wrapper.ListView.view}" property="locked" value="1"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition>
-                        <!-- Make the state changes smooth -->
-                        <ParallelAnimation>
-                            <ColorAnimation duration="500" />
-                            <NumericAnimation duration="300" properties="detailsOpacity,x,yPosition,height,width"/>
-                        </ParallelAnimation>
-                    </Transition>
-                </transitions>
-            </Item>
-        </Component>
-    </resources>
-
-    <!-- The actual list -->
-    <ListView id="List" model="{Recipies}" anchors.fill="{parent}" clip="true" delegate="{recipeDelegate}"/>
-</Rect>
+import "content"
+// This example illustrates expanding a list item to show a more detailed view
+Rect {
+    id: page
+    width: 400
+    height: 240
+    color: "black"
+    resources: [
+        // Delegate for the recipes.  This delegate has two modes:
+        // 1. the list mode (default), which just shows the picture and title of the recipe.
+        // 2. the details mode, which also shows the ingredients and method.
+        Component {
+            id: recipeDelegate
+            Item {
+                id: wrapper
+                width: List.width
+                // Create a property to contain the visibility of the details.
+                // We can bind multiple element's opacity to this one property,
+                // rather than having a "SetProperty" line for each element we
+                // want to fade.
+                properties: Property {
+                    name: "detailsOpacity"
+                    value: 0
+                    type: "real"
+                }
+                // A simple rounded rectangle for the background
+                Rect {
+                    id: background
+                    x: 1
+                    y: 2
+                    width: parent.width-2
+                    height: parent.height-4
+                    color: "#FEFFEE"
+                    pen.color: "#FFBE4F"
+                    radius: 5
+                }
+                // This mouse region covers the entire delegate.
+                // When clicked it changes mode to 'Details'.  If we are already
+                // in Details mode, then no change will happen.
+                MouseRegion {
+                    id: pageMouse
+                    anchors.fill: parent
+                    onClicked: { wrapper.state = 'Details' }
+                }
+                // Layout the page.  Picture, title and ingredients at the top, method at the
+                // bottom.  Note that elements that should not be visible in the list
+                // mode have their opacity set to wrapper.detailsOpacity.
+                HorizontalLayout {
+                    id: topLayout
+                    x: 10
+                    y: 10
+                    spacing: 10
+                    height: recipePic.height
+                    width: parent.width
+                    Image {
+                        id: recipePic
+                        src: picture
+                        width: 48
+                        height: 48
+                    }
+                    VerticalLayout {
+                        height: recipePic.height
+                        spacing: 5
+                        width: background.width-recipePic.width-20
+                        Text {
+                            id: name
+                            text: title
+                            font.bold: true
+                            font.size: 16
+                        }
+                        Text {
+                            opacity: wrapper.detailsOpacity
+                            text: "Ingredients"
+                            font.size: 12
+                            font.bold: true
+                        }
+                        Text {
+                            opacity: wrapper.detailsOpacity
+                            text: ingredients
+                            wrap: true
+                            width: parent.width
+                        }
+                    }
+                }
+                Item {
+                    id: details
+                    x: 10
+                    width: parent.width-20
+                    anchors.top: topLayout.bottom
+                    anchors.topMargin: 10
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 10
+                    opacity: wrapper.detailsOpacity
+                    Text {
+                        id: methodTitle
+                        text: "Method"
+                        font.size: 12
+                        font.bold: true
+                        anchors.top: parent.top
+                    }
+                    Flickable {
+                        id: flick
+                        anchors.top: methodTitle.bottom
+                        anchors.bottom: parent.bottom
+                        width: parent.width
+                        viewportHeight: methodText.height
+                        clip: true
+                        Text {
+                            id: methodText
+                            text: method
+                            wrap: true
+                            width: details.width
+                        }
+                    }
+                    Image {
+                        anchors.right: flick.right
+                        anchors.top: flick.top
+                        src: "content/pics/moreUp.png"
+                        opacity: flick.atYBeginning ? 0 : 1
+                    }
+                    Image {
+                        anchors.right: flick.right
+                        anchors.bottom: flick.bottom
+                        src: "content/pics/moreDown.png"
+                        opacity: flick.atYEnd ? 0 : 1
+                    }
+                }
+                // A button to close the detailed view, i.e. set the state back to default ('').
+                MediaButton {
+                    anchors.right: background.right
+                    anchors.rightMargin: 5
+                    y: 10
+                    opacity: wrapper.detailsOpacity
+                    text: "Close"
+                    onClicked: { wrapper.state = '' }
+                }
+                // Make the default height equal the hight of the picture, plus margin.
+                height: 68
+                states: [
+                    State {
+                        name: "Details"
+                        SetProperty {
+                            target: background
+                            property: "color"
+                            value: "white"
+                        }
+                        // Make the picture bigger
+                        SetProperties {
+                            target: recipePic
+                            width: 128
+                            height: 128
+                        }
+                        // Make details visible
+                        SetProperties {
+                            target: wrapper
+                            detailsOpacity: 1
+                            x: 0
+                        }
+                        // Make the detailed view fill the entire list area
+                        SetProperty {
+                            target: wrapper
+                            property: "height"
+                            value: List.height
+                        }
+                        // Move the list so that this item is at the top.
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "yPosition"
+                            value: wrapper.y
+                        }
+                        // Disallow flicking while we're in detailed view
+                        SetProperty {
+                            target: wrapper.ListView.view
+                            property: "locked"
+                            value: 1
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        // Make the state changes smooth
+                        ParallelAnimation {
+                            ColorAnimation {
+                                duration: 500
+                            }
+                            NumericAnimation {
+                                duration: 300
+                                properties: "detailsOpacity,x,yPosition,height,width"
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+    // The actual list
+    ListView {
+        id: List
+        model: Recipies
+        anchors.fill: parent
+        clip: true
+        delegate: recipeDelegate
+    }
+}
diff --git a/examples/declarative/minehunt/Description.qml b/examples/declarative/minehunt/Description.qml
index 5bda5f8..f59c8f9 100644
--- a/examples/declarative/minehunt/Description.qml
+++ b/examples/declarative/minehunt/Description.qml
@@ -1,10 +1,38 @@
-<Item id="Page" height="{MyText.height + 20}" >
-    <properties><Property name="text" /></properties>
-    <MouseRegion anchors.fill="{parent}" drag.target="{Page}" drag.axis="xy" drag.xmin="0" drag.xmax="1000" drag.ymin="0" drag.ymax="1000"/>
-    <Rect radius="10" anchors.fill="{parent}" color="lightsteelblue" />
-    <Item x="10" y="10" width="{parent.width - 20}" height="{parent.height - 20}">
-        <Text id="MyText" text="{Page.text}" width="{parent.width}" clip="true" wrap="true"/>
-    </Item>
-
-    <filter><Shadow xOffset="5" yOffset="5" /></filter>
-</Item>
+Item {
+    id: Page
+    height: MyText.height + 20
+    properties: Property {
+        name: "text"
+    }
+    MouseRegion {
+        anchors.fill: parent
+        drag.target: Page
+        drag.axis: "xy"
+        drag.xmin: 0
+        drag.xmax: 1000
+        drag.ymin: 0
+        drag.ymax: 1000
+    }
+    Rect {
+        radius: 10
+        anchors.fill: parent
+        color: "lightsteelblue"
+    }
+    Item {
+        x: 10
+        y: 10
+        width: parent.width - 20
+        height: parent.height - 20
+        Text {
+            id: MyText
+            text: Page.text
+            width: parent.width
+            clip: true
+            wrap: true
+        }
+    }
+    filter: Shadow {
+        xOffset: 5
+        yOffset: 5
+    }
+}
diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml
index aec685b..1e4f03d 100644
--- a/examples/declarative/minehunt/Explosion.qml
+++ b/examples/declarative/minehunt/Explosion.qml
@@ -1,6 +1,21 @@
-<Item>
-    <properties>
-        <Property name="explode" type="Bool" value="false"/>
-    </properties>
-    <Particles width="38" height="21" lifeSpan="3600000" lifeSpanDeviation="0" src="pics/star.png" count="200" angle="270" angleDeviation="360" velocity="100" velocityDeviation="20" z="100" emitting="{explode}"/>
-</Item>
+Item {
+    properties: Property {
+        name: "explode"
+        type: "Bool"
+        value: false
+    }
+    Particles {
+        width: 38
+        height: 21
+        lifeSpan: 3600000
+        lifeSpanDeviation: 0
+        src: "pics/star.png"
+        count: 200
+        angle: 270
+        angleDeviation: 360
+        velocity: 100
+        velocityDeviation: 20
+        z: 100
+        emitting: explode
+    }
+}
diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml
index 9db0e84..9454f2f 100644
--- a/examples/declarative/minehunt/minehunt.qml
+++ b/examples/declarative/minehunt/minehunt.qml
@@ -1,73 +1,186 @@
-<Item id="field" width="370" height="480">
-    <properties>
-        <Property name="clickx" type="Int" value="0"/>
-        <Property name="clicky" type="Int" value="0"/>
-    </properties>
-    <resources>
-        <Component id="tile">
-            <Flipable id="flipable" width="40" height="40">
-                <transform>
-                    <Axis id="axis" xStart="20" xEnd="20" yStart="20" yEnd="0" />
-                </transform>
-                <front>
-                    <Image src="pics/front.png" width="40" height="40">
-                        <Image anchors.horizontalCenter="{parent.horizontalCenter}"
-                               anchors.verticalCenter="{parent.verticalCenter}"
-                                src="pics/flag.png" opacity="{modelData.hasFlag}">
-                                <opacity>
-                                    <Behaviour>
-                                        <NumericAnimation property="opacity" duration="250"/>
-                                    </Behaviour>
-                                </opacity>
-                        </Image>
-                    </Image>
-                </front>
-                <back>
-                    <Image src="pics/back.png" width="40" height="40">
-                        <Text anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
-                              text="{modelData.hint}" color="white" font.bold="true" 
-                              opacity="{modelData.hasMine == false &amp;&amp; modelData.hint > 0}"/>
-                        <Image anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" 
-                                src="pics/bomb.png" opacity="{modelData.hasMine}"/>
-                        <Explosion anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" explode="{modelData.hasMine==true &amp;&amp; modelData.flipped==true}"/>
-                    </Image>
-                </back>
-                <states>
-                    <State name="back" when="{modelData.flipped == true}">
-                        <SetProperty target="{axis}" property="rotation" value="180" />
-                    </State>
-                </states>
-                <transitions>
-                    <Transition>
-                        <SequentialAnimation>
-                            <PauseAnimation duration="{var ret = Math.abs(flipable.parent.x-field.clickx) + Math.abs(flipable.parent.y-field.clicky); if (ret > 0) {if(modelData.hasMine==true &amp;&amp; modelData.flipped==true){ret*3;}else{ret;}} else {0}}"/>
-                            <NumericAnimation easing="easeInOutQuad" properties="rotation"/>
-                        </SequentialAnimation>
-                    </Transition>
-                </transitions>
-                <MouseRegion anchors.fill="{parent}"
-                             onClicked="field.clickx = flipable.parent.x; field.clicky = flipable.parent.y; row = Math.floor(index/9); col = index - (Math.floor(index/9) * 9); if(mouseButton==undefined || mouseButton=='Right'){flag(row,col);}else{flip(row,col);}" />
-            </Flipable>
-        </Component>
-    </resources>
-    <Image src="pics/No-Ones-Laughing-3.jpg" tile="true"/>
-    <Description text="Use the 'minehunt' executable to run this demo!" width="300" opacity="{tiles?0:1}" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/>
-    <Repeater dataSource="{tiles}" x="1" y="1">
-        <Component>
-            <ComponentInstance component="{tile}" 
-                           x="{(index - (Math.floor(index/9) * 9)) * 41}"
-                           y="{Math.floor(index/9) * 41}"/>
-        </Component>
-    </Repeater>
-    <Item id="gamedata" width="370" height="100" y="380">
-        <Text color="white" font.size="18" x="20" y="20">In play:</Text>
-        <Image x="100" y="20" src="pics/bomb-color.png"/>
-        <Text x="100" y="60" color="white" text="{numMines}"/>
-        <Image x="140" y="20" src="pics/flag-color.png"/>
-        <Text x="140" y="60" color="white" text="{numFlags}"/>
+Item {
+    id: field
+    width: 370
+    height: 480
+    properties: Property {
+        name: "clickx"
+        type: "Int"
+        value: 0
+    }
+    properties: Property {
+        name: "clicky"
+        type: "Int"
+        value: 0
+    }
+    resources: [
+        Component {
+            id: tile
+            Flipable {
+                id: flipable
+                width: 40
+                height: 40
+                transform: [
+                    Axis {
+                        id: axis
+                        xStart: 20
+                        xEnd: 20
+                        yStart: 20
+                        yEnd: 0
+                    }
+                ]
+                front: Image {
+                    src: "pics/front.png"
+                    width: 40
+                    height: 40
+                    Image {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        src: "pics/flag.png"
+                        opacity: modelData.hasFlag
+                        opacity: Behaviour {
+                            NumericAnimation {
+                                property: "opacity"
+                                duration: 250
+                            }
+                        }
+                    }
+                }
+                back: Image {
+                    src: "pics/back.png"
+                    width: 40
+                    height: 40
+                    Text {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: modelData.hint
+                        color: "white"
+                        font.bold: true
+                        opacity: modelData.hasMine == false && modelData.hint > 0
+                    }
+                    Image {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        src: "pics/bomb.png"
+                        opacity: modelData.hasMine
+                    }
+                    Explosion {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        explode: modelData.hasMine==true && modelData.flipped==true
+                    }
+                }
+                states: [
+                    State {
+                        name: "back"
+                        when: modelData.flipped == true
+                        SetProperty {
+                            target: axis
+                            property: "rotation"
+                            value: 180
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        SequentialAnimation {
+                            PauseAnimation {
+                                duration: {
+                                      var ret = Math.abs(flipable.parent.x-field.clickx) +
+                                                Math.abs(flipable.parent.y-field.clicky);
 
-        <Image x="240" y="0" src="{if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}}}">
-            <MouseRegion anchors.fill="{parent}" onClicked="reset()"/>
-        </Image>
-    </Item>
-</Item>
+                                      ret > 0
+                                        ? (modelData.hasMine==true && modelData.flipped==true) ? ret * 3 : ret
+                                        : 0
+                                }
+                            }
+                            NumericAnimation {
+                                easing: "easeInOutQuad"
+                                properties: "rotation"
+                            }
+                        }
+                    }
+                ]
+                MouseRegion {
+                    anchors.fill: parent
+                    onClicked: {
+                        field.clickx = flipable.parent.x;
+                        field.clicky = flipable.parent.y;
+                        row = Math.floor(index/9);
+                        col = index - (Math.floor(index/9) * 9);
+                        if (mouseButton==undefined || mouseButton=='Right') {
+                            flag(row, col);
+                        } else{
+                            flip(row, col);
+                        }
+                    }
+                }
+            }
+        }
+    ]
+    Image {
+        src: "pics/No-Ones-Laughing-3.jpg"
+        tile: true
+    }
+    Description {
+        text: "Use the 'minehunt' executable to run this demo!"
+        width: 300
+        opacity: tiles?0:1
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Repeater {
+        dataSource: tiles
+        x: 1
+        y: 1
+        Component {
+            ComponentInstance {
+                component: tile
+                x: (index - (Math.floor(index/9) * 9)) * 41
+                y: Math.floor(index/9) * 41
+            }
+        }
+    }
+    Item {
+        id: gamedata
+        width: 370
+        height: 100
+        y: 380
+        Text {
+            color: "white"
+            font.size: 18
+            x: 20
+            y: 20
+        }
+        Image {
+            x: 100
+            y: 20
+            src: "pics/bomb-color.png"
+        }
+        Text {
+            x: 100
+            y: 60
+            color: "white"
+            text: numMines
+        }
+        Image {
+            x: 140
+            y: 20
+            src: "pics/flag-color.png"
+        }
+        Text {
+            x: 140
+            y: 60
+            color: "white"
+            text: numFlags
+        }
+        Image {
+            x: 240
+            y: 0
+            src: if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}}
+            MouseRegion {
+                anchors.fill: parent
+                onClicked: { reset() }
+            }
+        }
+    }
+}
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
+    }
+}
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index 90e6e64..f62e4b6 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -1,6 +1,12 @@
-<Item id="Switch" width="{Groove.width}" height="{Groove.height}">
-    <properties><Property name="on"/></properties>
-    <Script>
+Item {
+    id: Switch
+    width: Groove.width
+    height: Groove.height
+    properties: Property {
+        name: "on"
+    }
+    Script {
+
         function toggle() {
             if(Switch.state == "On")
                 Switch.state = "Off";
@@ -21,32 +27,66 @@
 
             toggle();
         }
-    </Script>
-    <Image id="Groove" src="background.svg"/>
-    <MouseRegion anchors.fill="{Groove}" onClicked="toggle()"/>
-    <Image id="Knob" src="knob.svg" x="1" y="2"/>
-    <MouseRegion anchors.fill="{Knob}"
-                 onClicked="toggle()"
-                 onReleased="if (!isClick) dorelease()"
-                 drag.target="{Knob}"
-                 drag.axis="x"
-                 drag.xmin="1"
-                 drag.xmax="78"/>
-
-    <states>
-        <State name="On">
-            <SetProperty target="{Knob}" property="x" value="78" />
-            <SetProperty target="{Switch}" property="on" value="true" />
-        </State>
-        <State name="Off">
-            <SetProperty target="{Knob}" property="x" value="1" />
-            <SetProperty target="{Switch}" property="on" value="false" />
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="x" easing="easeInOutQuad" duration="200"/>
-        </Transition>
-    </transitions>
-</Item>
+    
+    }
+    Image {
+        id: Groove
+        src: "background.svg"
+    }
+    MouseRegion {
+        anchors.fill: Groove
+        onClicked: { toggle() }
+    }
+    Image {
+        id: Knob
+        src: "knob.svg"
+        x: 1
+        y: 2
+    }
+    MouseRegion {
+        anchors.fill: Knob
+        onClicked: { toggle() }
+        onReleased: { if (!isClick) dorelease() }
+        drag.target: Knob
+        drag.axis: "x"
+        drag.xmin: 1
+        drag.xmax: 78
+    }
+    states: [
+        State {
+            name: "On"
+            SetProperty {
+                target: Knob
+                property: "x"
+                value: 78
+            }
+            SetProperty {
+                target: Switch
+                property: "on"
+                value: true
+            }
+        },
+        State {
+            name: "Off"
+            SetProperty {
+                target: Knob
+                property: "x"
+                value: 1
+            }
+            SetProperty {
+                target: Switch
+                property: "on"
+                value: false
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumericAnimation {
+                properties: "x"
+                easing: "easeInOutQuad"
+                duration: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/slideswitch/display.qml b/examples/declarative/slideswitch/display.qml
index b62422c..cea89b6 100644
--- a/examples/declarative/slideswitch/display.qml
+++ b/examples/declarative/slideswitch/display.qml
@@ -1,3 +1,8 @@
-<Rect color="white" width="150" height="150">
-    <Switch anchors.centeredIn="{parent}"/>
-</Rect>
+Rect {
+    color: "white"
+    width: 150
+    height: 150
+    Switch {
+        anchors.centeredIn: parent
+    }
+}
diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
index e540d25..0c27637 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -1,40 +1,79 @@
-<Rect id="Page" width="300" height="300" color="white">
-
-    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
-    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
-    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
-    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
-    </Rect>
-
-    <!-- Rect which will be moved when my state changes -->
-    <Rect id="myrect" width="50" height="50" color="red"/>
-
-    <states>
-
-        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
-        <State name="Position1">
-            <SetProperty target="{myrect}" property="x" value="150"/>
-            <SetProperty target="{myrect}" property="y" value="50"/>
-        </State>
-
-        <!--
-        In state 'Position2', change y to 100.  We do not specify 'x' here - 
-        it will therefore be restored to its default value of 0, if it
-        had been changed.
-        -->
-        <State name="Position2">
-            <SetProperty target="{myrect}" property="y" value="200"/>
-        </State>
-
-    </states>
-
-</Rect>
+Rect {
+    id: Page
+    width: 300
+    height: 300
+    color: "white"
+    // A target region.  Clicking in here sets the state to '' - the default state
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 0
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position1'
+    Rect {
+        width: 50
+        height: 50
+        x: 150
+        y: 50
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position1' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position2'
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 200
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position2' }
+        }
+    }
+    // Rect which will be moved when my state changes
+    Rect {
+        id: myrect
+        width: 50
+        height: 50
+        color: "red"
+    }
+    states: [
+        // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+        State {
+            name: "Position1"
+            SetProperty {
+                target: myrect
+                property: "x"
+                value: 150
+            }
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 50
+            }
+        }        // In state 'Position2', change y to 100.  We do not specify 'x' here - 
+        // it will therefore be restored to its default value of 0, if it
+        // had been changed.
+,
+        State {
+            name: "Position2"
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 200
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index c3f3515..c7fc656 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,68 +1,111 @@
-<Rect id="Page" width="300" height="300" color="white">
-
-    <!-- A target region.  Clicking in here sets the state to '' - the default state -->
-    <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position1' -->
-    <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
-    </Rect>
-
-    <!-- Another target region.  Clicking in here sets the state to 'Position2' -->
-    <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
-        <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
-    </Rect>
-
-    <!-- Rect which will be moved when my state changes -->
-    <Rect id="myrect" width="50" height="50" color="red"/>
-
-    <states>
-
-        <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
-        <State name="Position1">
-            <SetProperty target="{myrect}" property="x" value="150"/>
-            <SetProperty target="{myrect}" property="y" value="50"/>
-        </State>
-
-        <!--
-        In state 'Position2', change y to 100.  We do not specify 'x' here - 
-        it will therefore be restored to its default value of 0, if it
-        had been changed.
-        -->
-        <State name="Position2">
-            <SetProperty target="{myrect}" property="y" value="200"/>
-        </State>
-
-    </states>
-
-    <!-- transitions define how the properties change. -->
-    <transitions>
-
-        <!--
-        When transitioning to 'Position1' move x,y over a duration of 1 second,
-        with easeOutBounce easing function.
-        -->
-        <Transition fromState="*" toState="Position1">
-            <NumericAnimation properties="x,y" easing="easeOutBounce" duration="1000" />
-        </Transition>
-
-        <!--
-        When transitioning to 'Position2' move x,y over a duration of 2 seconds,
-        with easeInOutQuad easing function.
-        -->
-        <Transition fromState="*" toState="Position2">
-            <NumericAnimation properties="x,y" easing="easeInOutQuad" duration="2000" />
-        </Transition>
-
-        <!--
-        For any other state changes move x,y linearly over duration of 200ms.
-        -->
-        <Transition>
-            <NumericAnimation properties="x,y" duration="200" />
-        </Transition>
-
-    </transitions>
-
-</Rect>
+Rect {
+    id: Page
+    width: 300
+    height: 300
+    color: "white"
+    // A target region.  Clicking in here sets the state to '' - the default state
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 0
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position1'
+    Rect {
+        width: 50
+        height: 50
+        x: 150
+        y: 50
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position1' }
+        }
+    }
+    // Another target region.  Clicking in here sets the state to 'Position2'
+    Rect {
+        width: 50
+        height: 50
+        x: 0
+        y: 200
+        color: "transparent"
+        pen.color: "black"
+        MouseRegion {
+            anchors.fill: parent
+            onClicked: { Page.state='Position2' }
+        }
+    }
+    // Rect which will be moved when my state changes
+    Rect {
+        id: myrect
+        width: 50
+        height: 50
+        color: "red"
+    }
+    states: [
+        // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+        State {
+            name: "Position1"
+            SetProperty {
+                target: myrect
+                property: "x"
+                value: 150
+            }
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 50
+            }
+        }        // In state 'Position2', change y to 100.  We do not specify 'x' here - 
+        // it will therefore be restored to its default value of 0, if it
+        // had been changed.
+,
+        State {
+            name: "Position2"
+            SetProperty {
+                target: myrect
+                property: "y"
+                value: 200
+            }
+        }
+    ]
+    // transitions define how the properties change.
+    transitions: [
+        // When transitioning to 'Position1' move x,y over a duration of 1 second,
+        // with easeOutBounce easing function.
+        Transition {
+            fromState: "*"
+            toState: "Position1"
+            NumericAnimation {
+                properties: "x,y"
+                easing: "easeOutBounce"
+                duration: 1000
+            }
+        }        // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+        // with easeInOutQuad easing function.
+,
+        Transition {
+            fromState: "*"
+            toState: "Position2"
+            NumericAnimation {
+                properties: "x,y"
+                easing: "easeInOutQuad"
+                duration: 2000
+            }
+        }        // For any other state changes move x,y linearly over duration of 200ms.
+,
+        Transition {
+            NumericAnimation {
+                properties: "x,y"
+                duration: 200
+            }
+        }
+    ]
+}
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"
+        }
+    }
+}