Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

Conflicts:
	doc/src/tutorials/declarative.qdoc

58 files changed, 1517 insertions, 1224 deletions

diff --git a/examples/declarative/aspectratio/face_fit.qml b/examples/declarative/aspectratio/face_fit.qml
new file mode 100644
index 0000000..35c63ce
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit.qml
@@ -0,0 +1,26 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement a hybrid of the "scale to fit" and "scale and crop"
+// behaviours which will crop up to 25% from *one* dimension if necessary
+// to fully scale the other. This is a realistic algorithm, for example
+// when the edges of the image contain less vital information than the
+// center - such as a face.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(Math.min(parent.width/width*1.333,parent.height/height),
+                        Math.min(parent.width/width,parent.height/height*1.333))
+    }
+}
diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml
new file mode 100644
index 0000000..366d27b
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit_animated.qml
@@ -0,0 +1,28 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we extend the "face_fit" example with animation to show how truly
+// diverse and usage-specific behaviours are made possible by NOT putting a
+// hard-coded aspect ratio feature into the Image primitive.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Follow {
+            source: Math.max(Math.min(Image.parent.width/Image.width*1.333,Image.parent.height/Image.height),
+                        Math.min(Image.parent.width/Image.width,Image.parent.height/Image.height*1.333))
+            spring: 1
+            damping: 0.05
+        }
+    }
+}
diff --git a/examples/declarative/aspectratio/pics/face.png b/examples/declarative/aspectratio/pics/face.png
new file mode 100644
index 0000000..9623b1a
--- /dev/null
+++ b/examples/declarative/aspectratio/pics/face.png
diff --git a/examples/declarative/aspectratio/scale_and_crop.qml b/examples/declarative/aspectratio/scale_and_crop.qml
new file mode 100644
index 0000000..a5409f9
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_crop.qml
@@ -0,0 +1,21 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement "Scale and Crop" behaviour.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_and_sidecrop.qml b/examples/declarative/aspectratio/scale_and_sidecrop.qml
new file mode 100644
index 0000000..e076735
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_sidecrop.qml
@@ -0,0 +1,22 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement a variant of "Scale and Crop" behaviour, where we
+// crop the sides if necessary to fully fit vertically, but not the reverse.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: parent.height/height
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_to_fit.qml b/examples/declarative/aspectratio/scale_to_fit.qml
new file mode 100644
index 0000000..61a4082
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_to_fit.qml
@@ -0,0 +1,21 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement "Scale to Fit" behaviour.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.min(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/contacts/dummydata/contactModel.qml b/examples/declarative/contacts/dummydata/contactModel.qml
index 341b7a6..48b2fd9 100644
--- a/examples/declarative/contacts/dummydata/contactModel.qml
+++ b/examples/declarative/contacts/dummydata/contactModel.qml
@@ -1,103 +1,103 @@
-<ListModel>
-    <Contact>
-        <firstName>Aaron</firstName>
-        <lastName>Kennedy</lastName>
-        <portrait>contact.png</portrait>
-        <emails>
-            <Email address="akennedy@trolltech.com"/>
-            <Email address="aaron.kennedy@trolltech.com"/>
-        </emails>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>1</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>2</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>3</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>4</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>5</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>6</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>7</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>8</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Contact</firstName>
-        <lastName>9</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Alan</firstName>
-        <lastName>Alpert</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Betty</firstName>
-        <lastName>Boo</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Foo</firstName>
-        <lastName>Bar</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Marius</firstName>
-        <lastName>Bugge Monsen</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Martin</firstName>
-        <lastName>Jones</lastName>
-        <portrait>contact.png</portrait>
-        <emails>
-            <Email address="mjones@trolltech.com"/>
-            <Email address="martin.jones@trolltech.com"/>
-        </emails>
-    </Contact>
-    <Contact>
-        <firstName>Michael</firstName>
-        <lastName>Brasser</lastName>
-        <portrait>contact.png</portrait>
-        <emails>
-            <Email address="mbrasser@trolltech.com"/>
-        </emails>
-    </Contact>
-    <Contact>
-        <firstName>Yann</firstName>
-        <lastName>Bodson</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-    <Contact>
-        <firstName>Yogi</firstName>
-        <lastName>Bear</lastName>
-        <portrait>contact.png</portrait>
-    </Contact>
-</ListModel>
+ListModel2 {
+    ListElement {
+        firstName: "Aaron"
+        lastName: "Kennedy"
+        portrait: "contact.png"
+        emails: [ 
+            ListElement { address: "akennedy@trolltech.com" },
+            ListElement { address: "aaron.kennedy@trolltech.com" }
+        ]
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 1
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 2
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 3
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 4
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 5
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 6
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 7
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 8
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "ListElement"
+        lastName: 9
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "Alan"
+        lastName: "Alpert"
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "Betty"
+        lastName: "Boo"
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "Foo"
+        lastName: "Bar"
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "Marius"
+        lastName: "Bugge Monsen"
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "Martin"
+        lastName: "Jones"
+        portrait: "contact.png"
+        emails: [
+            ListElement { address: "mjones@trolltech.com" },
+            ListElement { address: "martin.jones@trolltech.com" }
+        ]
+    }
+    ListElement {
+        firstName: "Michael"
+        lastName: "Brasser"
+        portrait: "contact.png"
+        emails: ListElement {
+            address: "mbrasser@trolltech.com"
+        }
+    }
+    ListElement {
+        firstName: "Yann"
+        lastName: "Bodson"
+        portrait: "contact.png"
+    }
+    ListElement {
+        firstName: "Yogi"
+        lastName: "Bear"
+        portrait: "contact.png"
+    }
+}
diff --git a/examples/declarative/contacts/main.cpp b/examples/declarative/contacts/main.cpp
index 6bf9daf..bda6565 100644
--- a/examples/declarative/contacts/main.cpp
+++ b/examples/declarative/contacts/main.cpp
@@ -7,7 +7,7 @@
 #include <QTime>
 #include <QVBoxLayout>
 
-const char *defaultFileName("contacts.xml");
+const char *defaultFileName("contacts.qml");
 
 class Contacts : public QWidget
 {
@@ -43,8 +43,8 @@ Contacts::Contacts(const QString &fileName, int width, int height, QWidget *pare
 
     QFile file(fileName);
     file.open(QFile::ReadOnly);
-    QString xml = file.readAll();
-    canvas->setXml(xml, fileName);
+    QString qml = file.readAll();
+    canvas->setQml(qml, fileName);
 
     canvas->execute();
 }
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml
index fe8528d..485188a 100644
--- a/examples/declarative/dial/DialLibrary/Dial.qml
+++ b/examples/declarative/dial/DialLibrary/Dial.qml
@@ -1,11 +1,9 @@
 Item {
+    property real value : 0
+
     width: 210
     height: 210
-    properties: Property {
-        name: "value"
-        type: "real"
-        value: 0
-    }
+
     Image {
         id: Background
         source: "background.svg"
diff --git a/examples/declarative/easing/easing.qml b/examples/declarative/easing/easing.qml
index f95d8c6..32c1b9b 100644
--- a/examples/declarative/easing/easing.qml
+++ b/examples/declarative/easing/easing.qml
@@ -1,67 +1,92 @@
-<Rect id="Window" width="640" height="{Layout.height}" color="white">
+Rect {
+    id: Window
+    width: 640
+    height: Layout.height
+    color: "white"
 
-    <resources>
-        <ListModel id="EasingTypes">
-            <ListItem><type>easeLinear</type></ListItem>
-            <ListItem><type>easeInQuad</type></ListItem>
-            <ListItem><type>easeOutQuad</type></ListItem>
-            <ListItem><type>easeInOutQuad</type></ListItem>
-            <ListItem><type>easeOutInQuad</type></ListItem>
-            <ListItem><type>easeInCubic</type></ListItem>
-            <ListItem><type>easeOutCubic</type></ListItem>
-            <ListItem><type>easeInOutCubic</type></ListItem>
-            <ListItem><type>easeOutInCubic</type></ListItem>
-            <ListItem><type>easeInQuart</type></ListItem>
-            <ListItem><type>easeOutQuart</type></ListItem>
-            <ListItem><type>easeInOutQuart</type></ListItem>
-            <ListItem><type>easeOutInQuart</type></ListItem>
-            <ListItem><type>easeInQuint</type></ListItem>
-            <ListItem><type>easeOutQuint</type></ListItem>
-            <ListItem><type>easeInOutQuint</type></ListItem>
-            <ListItem><type>easeOutInQuint</type></ListItem>
-            <ListItem><type>easeInSine</type></ListItem>
-            <ListItem><type>easeOutSine</type></ListItem>
-            <ListItem><type>easeInOutSine</type></ListItem>
-            <ListItem><type>easeOutInSine</type></ListItem>
-            <ListItem><type>easeInExpo</type></ListItem>
-            <ListItem><type>easeOutExpo</type></ListItem>
-            <ListItem><type>easeInOutExpo</type></ListItem>
-            <ListItem><type>easeOutInExpo</type></ListItem>
-            <ListItem><type>easeInCirc</type></ListItem>
-            <ListItem><type>easeOutCirc</type></ListItem>
-            <ListItem><type>easeInOutCirc</type></ListItem>
-            <ListItem><type>easeOutInCirc</type></ListItem>
-            <ListItem><type>easeInElastic</type></ListItem>
-            <ListItem><type>easeOutElastic</type></ListItem>
-            <ListItem><type>easeInOutElastic</type></ListItem>
-            <ListItem><type>easeOutInElastic</type></ListItem>
-            <ListItem><type>easeInBack</type></ListItem>
-            <ListItem><type>easeOutBack</type></ListItem>
-            <ListItem><type>easeInOutBack</type></ListItem>
-            <ListItem><type>easeOutInBack</type></ListItem>
-            <ListItem><type>easeOutBounce</type></ListItem>
-            <ListItem><type>easeInBounce</type></ListItem>
-            <ListItem><type>easeInOutBounce</type></ListItem>
-            <ListItem><type>easeOutInBounce</type></ListItem>
-        </ListModel>
-    </resources>
-
-    <VerticalLayout id="Layout" anchors.left="{Window.left}" anchors.right="{Window.right}">
-        <Repeater dataSource="{EasingTypes}">
-            <Component>
-                <Text id="Text" text="{type}" height="18" font.italic="true">
-                    <x>
-                        <SequentialAnimation id="Anim">
-                            <NumericAnimation from="0" to="{Window.width / 2}" easing="{type}" duration="1000"/>
-                            <PauseAnimation duration="300"/>
-                            <NumericAnimation to="0" from="{Window.width / 2}" easing="{type}" duration="1000"/>
-                        </SequentialAnimation>
-                    </x>
-                    <children>
-                        <MouseRegion onClicked="Anim.running=true" anchors.fill="{parent}"/>
-                    </children>
-                </Text>
-            </Component>
-        </Repeater>
-    </VerticalLayout>
-</Rect>
+    ListModel2 {
+        id: EasingTypes
+        ListElement { type: "easeLinear" }
+        ListElement { type: "easeInQuad" }
+        ListElement { type: "easeOutQuad" }
+        ListElement { type: "easeInOutQuad" }
+        ListElement { type: "easeOutInQuad" }
+        ListElement { type: "easeInCubic" }
+        ListElement { type: "easeOutCubic" }
+        ListElement { type: "easeInOutCubic" }
+        ListElement { type: "easeOutInCubic" }
+        ListElement { type: "easeInQuart" }
+        ListElement { type: "easeOutQuart" }
+        ListElement { type: "easeInOutQuart" }
+        ListElement { type: "easeOutInQuart" }
+        ListElement { type: "easeInQuint" }
+        ListElement { type: "easeOutQuint" }
+        ListElement { type: "easeInOutQuint" }
+        ListElement { type: "easeOutInQuint" }
+        ListElement { type: "easeInSine" }
+        ListElement { type: "easeOutSine" }
+        ListElement { type: "easeInOutSine" }
+        ListElement { type: "easeOutInSine" }
+        ListElement { type: "easeInExpo" }
+        ListElement { type: "easeOutExpo" }
+        ListElement { type: "easeInOutExpo" }
+        ListElement { type: "easeOutInExpo" }
+        ListElement { type: "easeInCirc" }
+        ListElement { type: "easeOutCirc" }
+        ListElement { type: "easeInOutCirc" }
+        ListElement { type: "easeOutInCirc" }
+        ListElement { type: "easeInElastic" }
+        ListElement { type: "easeOutElastic" }
+        ListElement { type: "easeInOutElastic" }
+        ListElement { type: "easeOutInElastic" }
+        ListElement { type: "easeInBack" }
+        ListElement { type: "easeOutBack" }
+        ListElement { type: "easeInOutBack" }
+        ListElement { type: "easeOutInBack" }
+        ListElement { type: "easeOutBounce" }
+        ListElement { type: "easeInBounce" }
+        ListElement { type: "easeInOutBounce" }
+        ListElement { type: "easeOutInBounce" }
+    }
+    
+    VerticalLayout {
+        id: Layout
+        anchors.left: Window.left
+        anchors.right: Window.right
+        Repeater {
+            dataSource: EasingTypes
+            Component {
+                Text {
+                    id: Text
+                    text: type
+                    height: 18
+                    font.italic: true
+                    x: SequentialAnimation {
+                        id: Anim
+                        NumericAnimation {
+                            from: 0
+                            to: Window.width / 2
+                            easing: type
+                            duration: 1000
+                        }
+                        PauseAnimation {
+                            duration: 300
+                        }
+                        NumericAnimation {
+                            to: 0
+                            from: Window.width / 2
+                            easing: type
+                            duration: 1000
+                        }
+                    }
+                    children: [
+                        MouseRegion {
+                            onClicked: { Anim.running=true }
+                            anchors.fill: parent
+                        }
+                    ]
+                }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml
index 598d953..5368e75 100644
--- a/examples/declarative/follow/follow.qml
+++ b/examples/declarative/follow/follow.qml
@@ -1,78 +1,46 @@
 Rect {
-    width: 320
-    height: 240
     color: "#ffffff"
+    width: 320; height: 240
     Rect {
         id: Rect
-        y: 200
         color: "#00ff00"
-        width: 60
-        height: 20
+        y: 200; width: 60; height: 20
         y: SequentialAnimation {
-            running: true
-            repeat: true
+            running: true; repeat: true
             NumericAnimation {
-                to: 200
+                to: 200; duration: 2000
                 easing: "easeOutBounce(amplitude:180)"
-                duration: 2000
-            }
-            PauseAnimation {
-                duration: 1000
             }
+            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"
+        x: Rect.width; 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"
+        x: Rect.width * 2; 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
+            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
-            }
+            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/follow/pong.qml b/examples/declarative/follow/pong.qml
index 4fbf323..582b04c 100644
--- a/examples/declarative/follow/pong.qml
+++ b/examples/declarative/follow/pong.qml
@@ -1,55 +1,67 @@
-<Rect id="Page" width="640" height="480" color="#000000">
-    <!-- Make a ball to bounce -->
-    <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1">
-        <properties>
-            <!-- Add a property for the target y coordinate -->
-            <Property name="targetY" value="{Page.height-10}"/>
-            <Property name="direction" value="right"/>
-        </properties>
-        <x>
-            <!-- Move the ball to the right and back to the left repeatedly -->
-            <SequentialAnimation running="true" repeat="true">
-                <NumericAnimation to="{Page.width-40}" duration="2000"/>
-                <SetPropertyAction target="{Ball}" property="direction" value="left"/>
-                <NumericAnimation to="20" duration="2000"/>
-                <SetPropertyAction target="{Ball}" property="direction" value="right"/>
-            </SequentialAnimation>
-        </x>
-        <y>
-            <!-- Make y follow the target y coordinate, with a velocity of 200 -->
-            <Follow source="{Ball.targetY}" velocity="200"/>
-        </y>
-        <onTopChanged>
-            <!-- Detect the ball hitting the top or bottom of the view and bounce it -->
-            if (y &lt;= 0)
+Rect {
+    id: Page
+    width: 640; height: 480
+    color: "#000000"
+
+    // Make a ball to bounce
+    Rect {
+        // Add a property for the target y coordinate
+        property var targetY : Page.height-10
+        property var direction : "right"
+
+        id: Ball
+        color: "#00ee00"
+        x: 20; width: 20; height: 20; z: 1
+
+        // Move the ball to the right and back to the left repeatedly
+        x: SequentialAnimation {
+            running: true; repeat: true
+            NumericAnimation { to: Page.width-40; duration: 2000 }
+            SetPropertyAction { target: Ball; property: "direction"; value: "left" }
+            NumericAnimation { to: 20; duration: 2000 }
+            SetPropertyAction { target: Ball; property: "direction"; value: "right" }
+        }
+
+        // Make y follow the target y coordinate, with a velocity of 200
+        y: Follow { source: Ball.targetY; velocity: 200 }
+
+        // Detect the ball hitting the top or bottom of the view and bounce it
+        onTopChanged: {
+            if (y <= 0)
                 targetY = Page.height-20;
-            else if (y &gt;= Page.height-20)
+            else if (y >= Page.height-20)
                 targetY = 0;
-        </onTopChanged>
-    </Rect>
-    <!--
-    Place bats to the left and right of the view, following the y
-    coordinates of the ball.
-    -->
-    <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90">
-        <y>
-            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/>
-        </y>
-    </Rect>
-    <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90">
-        <y>
-            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/>
-        </y>
-    </Rect>
+        }
+    }
+
+    // Place bats to the left and right of the view, following the y
+    // coordinates of the ball.
+    Rect {
+        id: LeftBat
+        color: "#00ee00"
+        x: 2; width: 20; height: 90
+        y: Follow {
+            source: Ball.y-45; velocity: 300
+            enabled: Ball.direction == 'left'
+        }
+    }
+    Rect {
+        id: RightBat
+        color: "#00ee00"
+        x: Page.width-22; width: 20; height: 90
+        y: Follow {
+            source: Ball.y-45; velocity: 300
+            enabled: Ball.direction == 'right'
+        }
+    }
 
-    <!--
-    The rest, to make it look realistic, if neither ever scores...
-    -->
-    <Rect color="#00ee00" width="40" height="60" x="{320-80}"/>
-    <Rect color="#000000" width="20" height="40"  x="{320-70}" y="10"/>
-    <Rect color="#00ee00" width="40" height="60" x="{320+40}"/>
-    <Rect color="#000000" width="20" height="40"  x="{320+50}" y="10"/>
-    <Repeater dataSource="{24}">
-        <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/>
-    </Repeater>
-</Rect>
+    // The rest, to make it look realistic, if neither ever scores...
+    Rect { color: "#00ee00"; x: 320-80; y: 0; width: 40; height: 60 }
+    Rect { color: "#000000"; x: 320-70; y: 10; width: 20; height: 40 }
+    Rect { color: "#00ee00"; x: 320+40; y: 0; width: 40; height: 60 }
+    Rect { color: "#000000"; x: 320+50; y: 10; width: 20; height: 40 }
+    Repeater {
+        dataSource: 24
+        Rect { color: "#00ee00"; x: 320-5; y: index*20; width: 10; height: 10 }
+    }
+}
diff --git a/examples/declarative/listview/content/MediaButton.qml b/examples/declarative/listview/content/MediaButton.qml
index 6c672ea..cad36bd 100644
--- a/examples/declarative/listview/content/MediaButton.qml
+++ b/examples/declarative/listview/content/MediaButton.qml
@@ -1,21 +1,37 @@
-<Item id="Container">
-    <signals>
-        <Signal name="clicked"/>
-    </signals>
+Item {
+    property var text
+    signal clicked
 
-    <properties>
-        <Property name="text"/>
-    </properties>
-
-    <Image id="Image" source="pics/button.png"/>
-    <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/>
-    <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/>
-    <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/>
-    <width>{Image.width}</width>
-
-    <states>
-        <State name="Pressed" when="{MouseRegion.pressed == true}">
-            <SetProperties target="{Pressed}" opacity="1"/>
-        </State>
-    </states>
-</Item>
+    id: Container
+    Image {
+        id: Image
+        source: "pics/button.png"
+    }
+    Image {
+        id: Pressed
+        source: "pics/button-pressed.png"
+        opacity: 0
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked.emit(); }
+    }
+    Text {
+        font.bold: true
+        color: "white"
+        anchors.centeredIn: Image
+        text: Container.text
+    }
+    width: Image.width
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            SetProperties {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml
index 5af7fbf..1c96b7f 100644
--- a/examples/declarative/listview/dummydata/MyPetsModel.qml
+++ b/examples/declarative/listview/dummydata/MyPetsModel.qml
@@ -1,51 +1,59 @@
-<!--
-ListModel allows free form list models to be defined and populated.
-Be sure to name the file the same as the id.
--->
-<ListModel id="MyPetsModel">
-    <Pet>
-        <name>Rover</name>
-        <type>Dog</type>
-        <age>5</age>
-    </Pet>
-    <Pet>
-        <name>Whiskers</name>
-        <type>Cat</type>
-        <age>2</age>
-    </Pet>
-    <Pet>
-        <name>Warren</name>
-        <type>Rabbit</type>
-        <age>2</age>
-    </Pet>
-    <Pet>
-        <name>Polly</name>
-        <type>Parrot</type>
-        <age>12</age>
-    </Pet>
-    <Pet>
-        <name>Spot</name>
-        <type>Dog</type>
-        <age>9</age>
-    </Pet>
-    <Pet>
-        <name>Tiny</name>
-        <type>Elephant</type>
-        <age>15</age>
-    </Pet>
-    <Pet>
-        <name>Penny</name>
-        <type>Turtle</type>
-        <age>4</age>
-    </Pet>
-    <Pet>
-        <name>Joey</name>
-        <type>Kangaroo</type>
-        <age>1</age>
-    </Pet>
-    <Pet>
-        <name>Kimba</name>
-        <type>Bunny</type>
-        <age>65</age>
-    </Pet>
-</ListModel>
+// ListModel allows free form list models to be defined and populated.
+// Be sure to name the file the same as the id.
+ListModel2 {
+    id: MyListElementsModel
+    ListElement {
+        name: "Polly"
+        type: "Parrot"
+        age: 12
+        size: "Small"
+    }
+    ListElement {
+        name: "Penny"
+        type: "Turtle"
+        age: 4
+        size: "Small"
+    }
+    ListElement {
+        name: "Warren"
+        type: "Rabbit"
+        age: 2
+        size: "Small"
+    }
+    ListElement {
+        name: "Spot"
+        type: "Dog"
+        age: 9
+        size: "Medium"
+    }
+    ListElement {
+        name: "Whiskers"
+        type: "Cat"
+        age: 2
+        size: "Medium"
+    }
+    ListElement {
+        name: "Joey"
+        type: "Kangaroo"
+        age: 1
+        size: "Medium"
+    }
+    ListElement {
+        name: "Kimba"
+        type: "Bunny"
+        age: 65
+        size: "Large"
+    }
+    ListElement {
+        name: "Rover"
+        type: "Dog"
+        age: 5
+        size: "Large"
+    }
+    ListElement {
+        name: "Tiny"
+        type: "Elephant"
+        age: 15
+        size: "Large"
+    }
+}
diff --git a/examples/declarative/listview/dummydata/Recipies.qml b/examples/declarative/listview/dummydata/Recipies.qml
index 49bc610..8f464da 100644
--- a/examples/declarative/listview/dummydata/Recipies.qml
+++ b/examples/declarative/listview/dummydata/Recipies.qml
@@ -1,112 +1,88 @@
-<ListModel id="Recipies">
-    <Recipe title="Pancakes" picture="content/pics/pancakes.jpg">
-        <ingredients>
-            <![CDATA[
-            <html>
-                <ul>
-                    <li> 1 cup (150g) self-raising flour
-                    <li> 1 tbs caster sugar
-                    <li> 3/4 cup (185ml) milk
-                    <li> 1 egg
-                </ul>
-            </html>
-            ]]>
-        </ingredients>
-        <method>
-            <![CDATA[
-            <html>
-                <ol>
-                    <li> Sift flour and sugar together into a bowl. Add a pinch of salt.
-                    <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth.
-                    <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface.
-                    <li> Turn over and cook other side until golden. 
-                </ol>
-            ]]>
-        </method>
-    </Recipe>
-    <Recipe title="Fruit Salad" picture="content/pics/fruit-salad.jpg">
-        <ingredients>
-        * Seasonal Fruit
-        </ingredients>
-        <method>
-        * Chop fruit and place in a bowl.
-        </method>
-    </Recipe>
-    <Recipe title="Vegetable Soup" picture="content/pics/vegetable-soup.jpg">
-        <ingredients>
-            <![CDATA[
-            <html>
-                <ul>
-                    <li> 1 onion
-                    <li> 1 turnip
-                    <li> 1 potato
-                    <li> 1 carrot
-                    <li> 1 head of celery
-                    <li> 1 1/2 litres of water
-                </ul>
-            </html>
-            ]]>
-        </ingredients>
-        <method>
-            <![CDATA[
-            <html>
-                <ol>
-                    <li> Chop vegetables.
-                    <li> Boil in water until vegetables soften.
-                    <li> Season with salt and pepper to taste.
-                </ol>
-            </html>
-            ]]>
-        </method>
-    </Recipe>
-    <Recipe title="Hamburger" picture="content/pics/hamburger.jpg">
-        <ingredients>
-            <![CDATA[
-            <html>
-                <ul>
-                    <li> 500g minced beef
-                    <li> Seasoning
-                    <li> lettuce, tomato, onion, cheese
-                    <li> 1 hamburger bun for each burger
-                </ul>
-            </html>
-            ]]>
-        </ingredients>
-        <method>
-            <![CDATA[
-            <html>
-                <ol>
-                    <li> Mix the beef, together with seasoning, in a food processor.
-                    <li> Shape the beef into burgers.
-                    <li> Grill the burgers for about 5 mins on each side (until cooked through)
-                    <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion.
-                </ol>
-            </html>
-            ]]>
-        </method>
-    </Recipe>
-    <Recipe title="Lemonade" picture="content/pics/lemonade.jpg">
-        <ingredients>
-            <![CDATA[
-            <html>
-                <ul>
-                    <li> 1 cup Lemon Juice
-                    <li> 1 cup Sugar
-                    <li> 6 Cups of Water (2 cups warm water, 4 cups cold water)
-                </ul>
-            </html>
-            ]]>
-        </ingredients>
-        <method>
-            <![CDATA[
-            <html>
-                <ol>
-                    <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves.
-                    <li> Pour in lemon juice, stir again, and add 4 cups of cold water.
-                    <li> Chill or serve over ice cubes.
-                </ol>
-            </html>
-            ]]>
-        </method>
-    </Recipe>
-</ListModel>
+ListModel2 {
+    id: Recipies
+    ListElement {
+        title: "Pancakes"
+        picture: "content/pics/pancakes.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 cup (150g) self-raising flour 
+                        <li> 1 tbs caster sugar 
+                        <li> 3/4 cup (185ml) milk 
+                        <li> 1 egg 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Sift flour and sugar together into a bowl. Add a pinch of salt. 
+                   <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. 
+                   <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. 
+                   <li> Turn over and cook other side until golden.  
+                  </ol>
+                 </html>"
+    }
+    ListElement {
+        title: "Fruit Salad"
+        picture: "content/pics/fruit-salad.jpg"
+        ingredients: "* Seasonal Fruit"
+        method: "* Chop fruit and place in a bowl."
+    }
+    ListElement {
+        title: "Vegetable Soup"
+        picture: "content/pics/vegetable-soup.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 onion 
+                        <li> 1 turnip 
+                        <li> 1 potato 
+                        <li> 1 carrot 
+                        <li> 1 head of celery 
+                        <li> 1 1/2 litres of water 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Chop vegetables. 
+                   <li> Boil in water until vegetables soften. 
+                   <li> Season with salt and pepper to taste. 
+                  </ol> 
+                 </html>"
+    }
+    ListElement {
+        title: "Hamburger"
+        picture: "content/pics/hamburger.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 500g minced beef 
+                        <li> Seasoning 
+                        <li> lettuce, tomato, onion, cheese 
+                        <li> 1 hamburger bun for each burger 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Mix the beef, together with seasoning, in a food processor. 
+                   <li> Shape the beef into burgers. 
+                   <li> Grill the burgers for about 5 mins on each side (until cooked through) 
+                   <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. 
+                  </ol> 
+                 </html>"
+    }
+    ListElement {
+        title: "Lemonade"
+        picture: "content/pics/lemonade.jpg"
+        ingredients: "<html> 
+                       <ul> 
+                        <li> 1 cup Lemon Juice 
+                        <li> 1 cup Sugar 
+                        <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) 
+                       </ul> 
+                      </html>"
+        method: "<html> 
+                  <ol> 
+                   <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. 
+                   <li> Pour in lemon juice, stir again, and add 4 cups of cold water. 
+                   <li> Chill or serve over ice cubes. 
+                  </ol> 
+                 </html>"
+    }
+}
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index cbadb72..9a672d9 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,7 +1,6 @@
 Rect {
-    width: 400
-    height: 300
-    color: "white"
+    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.
@@ -12,18 +11,11 @@ Rect {
         id: PetDelegate
         Item {
             id: Wrapper
-            width: 200
-            height: 50
+            width: 200; height: 50
             VerticalLayout {
-                Text {
-                    text: 'Name: ' + name
-                }
-                Text {
-                    text: 'Type: ' + type
-                }
-                Text {
-                    text: 'Age: ' + age
-                }
+                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.
@@ -32,17 +24,14 @@ Rect {
                     name: "Current"
                     when: Wrapper.ListView.isCurrentItem
                     SetProperty {
-                        target: Wrapper
-                        property: "x"
-                        value: 10
+                        target: Wrapper; property: "x"; value: 10
                     }
                 }
             ]
             transitions: [
                 Transition {
                     NumericAnimation {
-                        properties: "x"
-                        duration: 200
+                        properties: "x"; duration: 200
                     }
                 }
             ]
@@ -54,24 +43,15 @@ Rect {
     Component {
         id: PetHighlight
         Rect {
-            width: 200
-            height: 50
-            color: "#FFFF88"
-            y: Follow {
-                source: List1.current.y
-                spring: 3
-                damping: 0.1
-            }
+            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
+        width: 200; height: parent.height
+        model: MyPetsModel; delegate: PetDelegate
+        highlight: PetHighlight; autoHighlight: false
         focus: true
     }
 }
diff --git a/examples/declarative/listview/listview.qml b/examples/declarative/listview/listview.qml
index b71ed4e..a222378 100644
--- a/examples/declarative/listview/listview.qml
+++ b/examples/declarative/listview/listview.qml
@@ -1,7 +1,6 @@
 Rect {
-    width: 600
-    height: 300
-    color: "white"
+    width: 600; 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.
@@ -12,29 +11,22 @@ Rect {
         id: PetDelegate
         Item {
             id: Wrapper
-            width: 200
-            height: 50
+            width: 200; height: 50
             VerticalLayout {
-                Text {
-                    text: 'Name: ' + name
-                }
-                Text {
-                    text: 'Type: ' + type
-                }
-                Text {
-                    text: 'Age: ' + age
-                }
+                Text { text: 'Name: ' + name }
+                Text { text: 'Type: ' + type }
+                Text { text: 'Age: ' + age }
             }
         }
     }
+
     // Define a highlight component.  Just one of these will be instantiated
     // by each ListView and placed behind the current item.
     Component {
         id: PetHighlight
-        Rect {
-            color: "#FFFF88"
-        }
+        Rect { color: "#FFFF88" }
     }
+
     // Show the model in three lists, with different currentItemPositioning.
     // currentItemPositioning determines how the list behaves when the
     // current item changes.  Note that the second and third ListView
@@ -54,35 +46,23 @@ Rect {
     // the mouse, the current index of List1 will be changed.
     ListView {
         id: List1
-        width: 200
-        height: parent.height
-        model: MyPetsModel
-        delegate: PetDelegate
-        highlight: PetHighlight
-        currentIndex: List3.currentIndex
+        width: 200; height: parent.height
+        model: MyPetsModel; delegate: PetDelegate
+        highlight: PetHighlight; currentIndex: List3.currentIndex
         focus: true
     }
     ListView {
         id: List2
-        x: 200
-        width: 200
-        height: parent.height
-        model: MyPetsModel
-        delegate: PetDelegate
-        highlight: PetHighlight
-        currentItemPositioning: "Snap"
-        snapPosition: 125
+        x: 200; width: 200; height: parent.height
+        model: MyPetsModel; delegate: PetDelegate; highlight: PetHighlight
+        currentItemPositioning: "Snap"; snapPosition: 125
         currentIndex: List1.currentIndex
     }
     ListView {
         id: List3
-        x: 400
-        width: 200
-        height: parent.height
-        model: MyPetsModel
-        delegate: PetDelegate
-        currentItemPositioning: "SnapAuto"
-        snapPosition: 125
+        x: 400; width: 200; height: parent.height
+        model: MyPetsModel; delegate: PetDelegate
+        currentItemPositioning: "SnapAuto"; snapPosition: 125
         currentIndex: List1.currentIndex
         children: [
             // Position a static highlight rather than a normal highlight so that
@@ -92,11 +72,8 @@ Rect {
             // Note that we specify the 'children' property.  This is because
             // the default property of a ListView is 'delegate'.
             Rect {
-                y: 125
-                width: 200
-                height: 50
-                color: "#FFFF88"
-                z: -1
+                y: 125; width: 200; height: 50
+                color: "#FFFF88"; z: -1
             }
         ]
     }
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index db8604e..28785f1 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -2,9 +2,7 @@ import "content"
 // This example illustrates expanding a list item to show a more detailed view
 Rect {
     id: page
-    width: 400
-    height: 240
-    color: "black"
+    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.
@@ -18,21 +16,13 @@ Rect {
                 // 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"
-                }
+                property real detailsOpacity : 0
+
                 // 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
+                    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
@@ -47,145 +37,86 @@ Rect {
                 // mode have their opacity set to wrapper.detailsOpacity.
                 HorizontalLayout {
                     id: topLayout
-                    x: 10
-                    y: 10
+                    x: 10; y: 10; height: recipePic.height; width: parent.width
                     spacing: 10
-                    height: recipePic.height
-                    width: parent.width
                     Image {
                         id: recipePic
-                        source: picture
-                        width: 48
-                        height: 48
+                        source: picture; width: 48; height: 48
                     }
                     VerticalLayout {
-                        height: recipePic.height
+                        height: recipePic.height; width: background.width-recipePic.width-20
                         spacing: 5
-                        width: background.width-recipePic.width-20
-                        Text {
-                            id: name
-                            text: title
-                            font.bold: true
-                            font.size: 16
-                        }
+                        Text { id: name; text: title; font.bold: true; font.size: 16 }
                         Text {
+                            text: "Ingredients"; font.size: 12; font.bold: true
                             opacity: wrapper.detailsOpacity
-                            text: "Ingredients"
-                            font.size: 12
-                            font.bold: true
                         }
                         Text {
+                            text: ingredients; wrap: true; width: parent.width
                             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
+                    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
+                        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
-                        }
+                        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
-                        source: "content/pics/moreUp.png"
-                        opacity: flick.atYBeginning ? 0 : 1
+                        anchors.right: flick.right; anchors.top: flick.top
+                        source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
                     }
                     Image {
-                        anchors.right: flick.right
-                        anchors.bottom: flick.bottom
-                        source: "content/pics/moreDown.png"
-                        opacity: flick.atYEnd ? 0 : 1
+                        anchors.right: flick.right; anchors.bottom: flick.bottom
+                        source: "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 = '' }
+                    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"
-                        }
+                        SetProperty { target: background; property: "color"; value: "white" }
                         // Make the picture bigger
-                        SetProperties {
-                            target: recipePic
-                            width: 128
-                            height: 128
-                        }
+                        SetProperties { target: recipePic; width: 128; height: 128 }
                         // Make details visible
-                        SetProperties {
-                            target: wrapper
-                            detailsOpacity: 1
-                            x: 0
-                        }
+                        SetProperties { target: wrapper; detailsOpacity: 1; x: 0 }
                         // Make the detailed view fill the entire list area
-                        SetProperty {
-                            target: wrapper
-                            property: "height"
-                            value: List.height
-                        }
+                        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
+                            property: "yPosition"; value: wrapper.y
                         }
                         // Disallow flicking while we're in detailed view
-                        SetProperty {
-                            target: wrapper.ListView.view
-                            property: "locked"
-                            value: 1
-                        }
+                        SetProperty { target: wrapper.ListView.view; property: "locked"; value: 1 }
                     }
                 ]
                 transitions: [
                     Transition {
                         // Make the state changes smooth
                         ParallelAnimation {
-                            ColorAnimation {
-                                duration: 500
-                            }
+                            ColorAnimation { duration: 500 }
                             NumericAnimation {
-                                duration: 300
-                                properties: "detailsOpacity,x,yPosition,height,width"
+                                duration: 300; properties: "detailsOpacity,x,yPosition,height,width"
                             }
                         }
                     }
@@ -196,9 +127,7 @@ Rect {
     // The actual list
     ListView {
         id: List
-        model: Recipies
-        anchors.fill: parent
-        clip: true
-        delegate: recipeDelegate
+        model: Recipies; delegate: recipeDelegate
+        anchors.fill: parent; clip: true
     }
 }
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
new file mode 100644
index 0000000..60acd62
--- /dev/null
+++ b/examples/declarative/listview/sections.qml
@@ -0,0 +1,69 @@
+//! [0]
+Rect {
+    width: 200
+    height: 240
+    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 that includes a separator for sections.
+    Component {
+        id: PetDelegate
+        Item {
+            id: Wrapper
+            width: 200
+            // My height is the combined height of the description and the section separator
+            height: Separator.height + Desc.height
+            Rect {
+                id: Separator
+                color: "lightsteelblue"
+                width: parent.width
+                // Only show the section separator when we are the beginning of a new section
+                // Note that for this to work nicely, the list must be ordered by section.
+                height: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 20 : 0
+                opacity: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 1 : 0
+                Text {
+                    text: Wrapper.ListView.section; font.bold: true
+                    x: 2; height: parent.height; vAlign: 'AlignVCenter'
+                }
+            }
+            Item {
+                id: Desc
+                x: 5
+                height: Layout.height + 4
+                anchors.top: Separator.bottom
+                VerticalLayout {
+                    id: Layout
+                    y: 2
+                    Text { text: 'Name: ' + name }
+                    Text { text: 'Type: ' + type }
+                    Text { text: 'Age: ' + age }
+                }
+            }
+        }
+    }
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+    Component {
+        id: PetHighlight
+        Rect {
+            color: "#FFFF88"
+        }
+    }
+    // The list
+    ListView {
+        id: List
+        width: 200
+        height: parent.height
+        model: MyPetsModel
+        delegate: PetDelegate
+        highlight: PetHighlight
+        // The sectionExpression is simply the size of the pet.
+        // We use this to determine which section we are in above.
+        sectionExpression: "size"
+        focus: true
+    }
+}
+//! [0]
diff --git a/examples/declarative/minehunt/Description.qml b/examples/declarative/minehunt/Description.qml
index f59c8f9..0241ae5 100644
--- a/examples/declarative/minehunt/Description.qml
+++ b/examples/declarative/minehunt/Description.qml
@@ -1,9 +1,7 @@
 Item {
     id: Page
     height: MyText.height + 20
-    properties: Property {
-        name: "text"
-    }
+    property var text
     MouseRegion {
         anchors.fill: parent
         drag.target: Page
diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml
index 8d868bc..2886559 100644
--- a/examples/declarative/minehunt/Explosion.qml
+++ b/examples/declarative/minehunt/Explosion.qml
@@ -1,9 +1,6 @@
 Item {
-    properties: Property {
-        name: "explode"
-        type: "Bool"
-        value: false
-    }
+    property bool explode : false
+
     Particles {
         width: 38
         height: 21
diff --git a/examples/declarative/minehunt/main.cpp b/examples/declarative/minehunt/main.cpp
index 9db717b..7f10757 100644
--- a/examples/declarative/minehunt/main.cpp
+++ b/examples/declarative/minehunt/main.cpp
@@ -130,8 +130,8 @@ MyWidget::MyWidget(int width, int height, QWidget *parent, Qt::WindowFlags flags
 
     QFile file(fileName);
     file.open(QFile::ReadOnly);
-    QString xml = file.readAll();
-    canvas->setXml(xml, fileName);
+    QString qml = file.readAll();
+    canvas->setQml(qml, fileName);
 
     QmlContext *ctxt = canvas->rootContext();
     ctxt->activate();
diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml
index fb65fa3..58397b0 100644
--- a/examples/declarative/minehunt/minehunt.qml
+++ b/examples/declarative/minehunt/minehunt.qml
@@ -1,73 +1,160 @@
-<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">
-                <axis>
-                    <Axis startX="20" startY="20" endX="20" endY="0" />
-                </axis>
-                <front>
-                    <Image source="pics/front.png" width="40" height="40">
-                        <Image anchors.horizontalCenter="{parent.horizontalCenter}"
-                               anchors.verticalCenter="{parent.verticalCenter}"
-                                source="pics/flag.png" opacity="{modelData.hasFlag}">
-                                <opacity>
-                                    <Behaviour>
-                                        <NumericAnimation property="opacity" duration="250"/>
-                                    </Behaviour>
-                                </opacity>
-                        </Image>
-                    </Image>
-                </front>
-                <back>
-                    <Image source="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}" 
-                                source="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="{flipable}" 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(mouse.button==undefined || mouse.button==Qt.RightButton){flag(row,col);}else{flip(row,col);}" />
-            </Flipable>
-        </Component>
-    </resources>
-    <Image source="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" source="pics/bomb-color.png"/>
-        <Text x="100" y="60" color="white" text="{numMines}"/>
-        <Image x="140" y="20" source="pics/flag-color.png"/>
-        <Text x="140" y="60" color="white" text="{numFlags}"/>
+Item {
+    id: field
+    width: 370
+    height: 480
 
-        <Image x="240" y="0" source="{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>
+    property int clickx : 0
+    property int clicky : 0
+
+    resources: [
+        Component {
+            id: tile
+            Flipable {
+                id: flipable
+                width: 40
+                height: 40
+                axis: Axis {
+                    startX: 20
+                    startY: 20
+                    endX: 20
+                    endY: 0
+                }
+                front: Image {
+                    source: "pics/front.png"
+                    width: 40
+                    height: 40
+                    Image {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        source: "pics/flag.png"
+                        opacity: modelData.hasFlag
+                        opacity: Behaviour {
+                            NumericAnimation {
+                                property: "opacity"
+                                duration: 250
+                            }
+                        }
+                    }
+                }
+                back: Image {
+                    source: "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
+                        source: "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: flipable
+                            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); if (ret > 0) {if(modelData.hasMine==true && modelData.flipped==true){ret*3;}else{ret;}} else {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(mouse.button==undefined || mouse.button==Qt.RightButton){flag(row,col);}else{flip(row,col);} }
+                }
+            }
+        }
+    ]
+    Image {
+        source: "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
+            source: "pics/bomb-color.png"
+        }
+        Text {
+            x: 100
+            y: 60
+            color: "white"
+            text: numMines
+        }
+        Image {
+            x: 140
+            y: 20
+            source: "pics/flag-color.png"
+        }
+        Text {
+            x: 140
+            y: 60
+            color: "white"
+            text: numFlags
+        }
+        Image {
+            x: 240
+            y: 0
+            source: 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/mouseregion/mouse.qml b/examples/declarative/mouseregion/mouse.qml
index 7aaf51a..6d10425 100644
--- a/examples/declarative/mouseregion/mouse.qml
+++ b/examples/declarative/mouseregion/mouse.qml
@@ -1,24 +1,48 @@
-<Rect color="white" width="200" height="200">
-    <Rect width="50" height="50" color="red">
-        <Text text="Click" anchors.centeredIn="{parent}"/>
-        <MouseRegion onPressed="print('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers &amp; Qt.ShiftModifier ? 'true' : 'false') + ')')"
-                     onReleased="print('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')')"
-                     onClicked="print('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')')"
-                     onDoubleClicked="print('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')')"
-                     onPressAndHold="print('press and hold')"
-                     onExitedWhilePressed="print('exiting while pressed')"
-                     onReenteredWhilePressed="print('reentering while pressed')" anchors.fill="{parent}"/>
-    </Rect>
-    <Rect y="100" width="50" height="50" color="blue">
-        <Text text="Drag" anchors.centeredIn="{parent}"/>
-        <MouseRegion drag.target="{parent}"
-                     drag.axis="x" drag.xmin="0" drag.xmax="150"
-                     onPressed="print('press')"
-                     onReleased="print('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')')"
-                     onClicked="print('click' + '(wasHeld: ' + mouse.wasHeld + ')')"
-                     onDoubleClicked="print('double click')"
-                     onPressAndHold="print('press and hold')"
-                     onExitedWhilePressed="print('exiting while pressed')"
-                     onReenteredWhilePressed="print('reentering while pressed')" anchors.fill="{parent}"/>
-    </Rect>
-</Rect>
+Rect {
+    color: "white"
+    width: 200
+    height: 200
+    Rect {
+        width: 50
+        height: 50
+        color: "red"
+        Text {
+            text: "Click"
+            anchors.centeredIn: parent
+        }
+        MouseRegion {
+            onPressed: { print('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')') }
+            onReleased: { print('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')') }
+            onClicked: { print('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')') }
+            onDoubleClicked: { print('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')') }
+            onPressAndHold: { print('press and hold') }
+            onExitedWhilePressed: { print('exiting while pressed') }
+            onReenteredWhilePressed: { print('reentering while pressed') }
+            anchors.fill: parent
+        }
+    }
+    Rect {
+        y: 100
+        width: 50
+        height: 50
+        color: "blue"
+        Text {
+            text: "Drag"
+            anchors.centeredIn: parent
+        }
+        MouseRegion {
+            drag.target: parent
+            drag.axis: "x"
+            drag.xmin: 0
+            drag.xmax: 150
+            onPressed: { print('press') }
+            onReleased: { print('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')') }
+            onClicked: { print('click' + '(wasHeld: ' + mouse.wasHeld + ')') }
+            onDoubleClicked: { print('double click') }
+            onPressAndHold: { print('press and hold') }
+            onExitedWhilePressed: { print('exiting while pressed') }
+            onReenteredWhilePressed: { print('reentering while pressed') }
+            anchors.fill: parent
+        }
+    }
+}
diff --git a/examples/declarative/namespaces/BlueStuff/Rect.qml b/examples/declarative/namespaces/BlueStuff/Rect.qml
deleted file mode 100644
index 94e066c..0000000
--- a/examples/declarative/namespaces/BlueStuff/Rect.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Rect color="blue"/>
diff --git a/examples/declarative/namespaces/Local.qml b/examples/declarative/namespaces/Local.qml
deleted file mode 100644
index 5fb2aef..0000000
--- a/examples/declarative/namespaces/Local.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Text>This is a local component</Text>
diff --git a/examples/declarative/namespaces/components.qml b/examples/declarative/namespaces/components.qml
deleted file mode 100644
index ea5e2d9..0000000
--- a/examples/declarative/namespaces/components.qml
+++ /dev/null
@@ -1,17 +0,0 @@
-<Item id="Root">
-    <properties>
-        <Property name="period" value="1000"/>
-        <Property name="color" value="green"/>
-    </properties>
-
-    <Component id="SpinSquare">
-        <Item>
-            <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/>
-            <rotation>
-                <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/>
-            </rotation>
-        </Item>
-    </Component>
-
-    <ComponentInstance component="{SpinSquare}" x="{Root.width/2}" y="{Root.height/2}"/>
-</Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/Clock.qml b/examples/declarative/namespaces/lib/Chronos/Clock.qml
deleted file mode 100644
index 959d193..0000000
--- a/examples/declarative/namespaces/lib/Chronos/Clock.qml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml/Chronos=. ?>
-
-<Image id="clock" source="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos">
-    <properties>
-        <Property name="hours" value="0"/>
-        <Property name="minutes" value="0"/>
-        <Property name="seconds" value="0"/>
-    </properties>
-    <DateTimeFormatter id="format" time="{clock.time}"/>
-    <Item x="{clock.width/2}" y="{clock.height/2}">
-        <This:Hand id="hour" length="{clock.height/4}" rotation="{clock.hours*30+clock.minutes/2+clock.seconds/120}"/>
-        <This:Hand id="minute" length="{clock.height/3}" thickness="3" rotation="{clock.minutes*6+clock.seconds/10}"/>
-        <This:Hand id="second" length="{clock.height/2.5}" thickness="1" rotation="{clock.seconds*6}"/>
-    </Item>
-</Image>
diff --git a/examples/declarative/namespaces/lib/Chronos/Hand.qml b/examples/declarative/namespaces/lib/Chronos/Hand.qml
deleted file mode 100644
index 3662e74..0000000
--- a/examples/declarative/namespaces/lib/Chronos/Hand.qml
+++ /dev/null
@@ -1,9 +0,0 @@
-<Item id="Hand">
-    <properties>
-        <Property name="length" value="100"/>
-        <Property name="thickness" value="0"/>
-    </properties>
-    <Item rotation="-90">
-        <Rect width="{length}" height="{thickness==0 ? length/8 : thickness}" y="{-height/2}"/>
-    </Item>
-</Item>
diff --git a/examples/declarative/namespaces/lib/Chronos/pics/clockface.png b/examples/declarative/namespaces/lib/Chronos/pics/clockface.png
deleted file mode 100644
index a885950..0000000
--- a/examples/declarative/namespaces/lib/Chronos/pics/clockface.png
+++ /dev/null
diff --git a/examples/declarative/namespaces/lib/Path/PathLabel.qml b/examples/declarative/namespaces/lib/Path/PathLabel.qml
deleted file mode 100644
index c4b08b0..0000000
--- a/examples/declarative/namespaces/lib/Path/PathLabel.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Text color="green"/>
diff --git a/examples/declarative/namespaces/lib/RedStuff/Rect.qml b/examples/declarative/namespaces/lib/RedStuff/Rect.qml
deleted file mode 100644
index 3429b09..0000000
--- a/examples/declarative/namespaces/lib/RedStuff/Rect.qml
+++ /dev/null
@@ -1 +0,0 @@
-<Rect color="red"/>
diff --git a/examples/declarative/namespaces/lib/Wrong/Wrong.qml b/examples/declarative/namespaces/lib/Wrong/Wrong.qml
deleted file mode 100644
index 3af55f6..0000000
--- a/examples/declarative/namespaces/lib/Wrong/Wrong.qml
+++ /dev/null
@@ -1,3 +0,0 @@
-<Rect>
-    <Local/> <!-- not allowed - not in this component! -->
-</Rect>
diff --git a/examples/declarative/namespaces/library.qml b/examples/declarative/namespaces/library.qml
deleted file mode 100644
index ae10ed8..0000000
--- a/examples/declarative/namespaces/library.qml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml=lib ?>
-
-<Rect id="obj" width="200" height="200" xmlns:Chronos="http://nokia.com/qml/Chronos">
- <properties>
-     <Property name="time_sec"/>
- </properties>
- <time_sec> <!-- simple animation, not bound to the real time -->
-    <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/>
- </time_sec>
- <Chronos:Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}"
-    hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/>
-</Rect>
diff --git a/examples/declarative/namespaces/path.qml b/examples/declarative/namespaces/path.qml
deleted file mode 100644
index 795447b..0000000
--- a/examples/declarative/namespaces/path.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- Empty Namespaces paths allow unqualified Types to be found
-     in other locations. For file URLs, multiple paths can be
-     given, forming a file search path. -->
-
-<?qtfx namespacepath:=lib/Chronos ?> <!-- Clock will be found here -->
-<?qtfx namespacepath:=lib/Path ?> <!-- PathLabel will be found here -->
-
-<Rect id="obj" width="200" height="200">
- <properties>
-     <Property name="time_sec"/>
- </properties>
- <time_sec> <!-- simple animation, not bound to the real time -->
-    <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/>
- </time_sec>
- <Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}"
-    hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/>
- <PathLabel text="This is a clock"/>
-</Rect>
diff --git a/examples/declarative/namespaces/simple.qml b/examples/declarative/namespaces/simple.qml
deleted file mode 100644
index 16d9815..0000000
--- a/examples/declarative/namespaces/simple.qml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml=lib ?>
-<Rect id="obj" width="100" height="100" xmlns:bs="BlueStuff" xmlns:rs="http://nokia.com/qml/RedStuff">
- <bs:Rect x="20" y="20" width="50" height="50"/>
- <rs:Rect x="30" y="30" width="50" height="50"/>
-</Rect>
diff --git a/examples/declarative/namespaces/wrong1.qml b/examples/declarative/namespaces/wrong1.qml
deleted file mode 100644
index 721c45a..0000000
--- a/examples/declarative/namespaces/wrong1.qml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?qtfx namespacepath:http://nokia.com/qml=lib ?>
-<Rect id="obj" width="100" height="100" xmlns:w="http://nokia.com/qml/Wrong" color="white">
- <w:Wrong/>
-</Rect>
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
index e3ca0c2..929c72a 100644
--- a/examples/declarative/scrollbar/ScrollBar.qml
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -5,16 +5,10 @@ Item {
     // 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"
-    }
+    property var position
+    property var pageSize
+    property var orientation : "Vertical"
+
     // A light, semi-transparent background
     Rect {
         id: Background
diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index a3f75e8..6777277 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -2,9 +2,9 @@ Item {
     id: Switch
     width: Groove.width
     height: Groove.height
-    properties: Property {
-        name: "on"
-    }
+
+    property var on
+
     Script {
 
         function toggle() {
@@ -14,7 +14,6 @@ Item {
                 Switch.state = "On";
         }
         function dorelease() {
-            print(Knob.x);
             if(Knob.x == 1) {
                 if(Switch.state == "Off") 
                     return;
@@ -46,7 +45,7 @@ Item {
     MouseRegion {
         anchors.fill: Knob
         onClicked: { toggle() }
-        onReleased: { if (!isClick) dorelease() }
+        onReleased: { dorelease() }
         drag.target: Knob
         drag.axis: "x"
         drag.xmin: 1
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
index 665c072..edaae72 100644
--- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
+++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml
@@ -2,12 +2,10 @@ FocusRealm {
     id: groupBox
     width: Math.max(270, subItem.width+40)
     height: Math.max(70, subItem.height+40)
-    properties: Property {
-        name: "contents"
-    }
-    properties: Property {
-        name: "label"
-    }
+
+    property var contents
+    property var label
+
     Rect {
         id: wrapper
         x: 5
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
index 33ac627..23560ce 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml
@@ -2,6 +2,7 @@ Item {
     id: contactDetails
     width: 230
     height: layout.height
+
     properties: Property {
         name: "contactid"
         value: ""
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
index 309ee5a..8d82e89 100644
--- a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
+++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml
@@ -1,3 +1,4 @@
+//! [all]
 Rect {
     id: removeButton
     width: 30
@@ -120,3 +121,4 @@ Rect {
         }
     ]
 }
+//! [all]
diff --git a/examples/declarative/tutorials/t1/tutorial1.qml b/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
index ec29f4f..ec29f4f 100644
--- a/examples/declarative/tutorials/t1/tutorial1.qml
+++ b/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
diff --git a/examples/declarative/tutorials/t2/Cell.qml b/examples/declarative/tutorials/helloworld/t2/Cell.qml
index bd5bbe7..0109251 100644
--- a/examples/declarative/tutorials/t2/Cell.qml
+++ b/examples/declarative/tutorials/helloworld/t2/Cell.qml
@@ -1,10 +1,10 @@
 Item {
+    property var color
+
     id: CellContainer
     width: 40
     height: 25
-    properties: Property {
-        name: "color"
-    }
+
     Rect {
         anchors.fill: parent
         color: CellContainer.color
diff --git a/examples/declarative/tutorials/helloworld/t2/tutorial2.qml b/examples/declarative/tutorials/helloworld/t2/tutorial2.qml
new file mode 100644
index 0000000..4630435
--- /dev/null
+++ b/examples/declarative/tutorials/helloworld/t2/tutorial2.qml
@@ -0,0 +1,27 @@
+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
+        rows: 2; columns: 3
+        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/helloworld/t3/Cell.qml
index bd5bbe7..e779406 100644
--- a/examples/declarative/tutorials/t3/Cell.qml
+++ b/examples/declarative/tutorials/helloworld/t3/Cell.qml
@@ -1,10 +1,9 @@
 Item {
+    property var color
+
     id: CellContainer
     width: 40
     height: 25
-    properties: Property {
-        name: "color"
-    }
     Rect {
         anchors.fill: parent
         color: CellContainer.color
diff --git a/examples/declarative/tutorials/t3/tutorial3.qml b/examples/declarative/tutorials/helloworld/t3/tutorial3.qml
index 8e2b697..3ca7a2f 100644
--- a/examples/declarative/tutorials/t3/tutorial3.qml
+++ b/examples/declarative/tutorials/helloworld/t3/tutorial3.qml
@@ -37,42 +37,23 @@ Rect {
                         duration: 500
                         easing: "easeOutBounce"
                     }
-                    ColorAnimation {
-                        duration: 500
-                    }
+                    ColorAnimation { duration: 500 }
                 }
             }
         ]
     }
-    MouseRegion {
-        id: MouseRegion
-        anchors.fill: HelloText
-    }
+    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"
-        }
+        width: 120; height: 50
+        rows: 2; columns: 3
+        Cell { color: "#ff0000" }
+        Cell { color: "#00ff00" }
+        Cell { color: "#0000ff" }
+        Cell { color: "#ffff00" }
+        Cell { color: "#00ffff" }
+        Cell { color: "#ff00ff" }
     }
 }
diff --git a/examples/declarative/tutorials/t2/tutorial2.qml b/examples/declarative/tutorials/t2/tutorial2.qml
deleted file mode 100644
index 08ea9eb..0000000
--- a/examples/declarative/tutorials/t2/tutorial2.qml
+++ /dev/null
@@ -1,41 +0,0 @@
-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/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index b65f2bc..c70a211 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -1,41 +1,111 @@
-<Rect width="400" height="500" radius="7" pen.color="black" id="Page">
-    <properties>
-        <Property name="day" type="string" />
-        <Property name="stickies" />
-    </properties>
+Rect {
+    property string day
+    property var 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"/>
-            </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>
+    width: 400
+    height: 500
+    radius: 7
+    pen.color: "black"
+    id: Page
+    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
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml
index fedd497..c32b752 100644
--- a/examples/declarative/webview/autosize.qml
+++ b/examples/declarative/webview/autosize.qml
@@ -1,42 +1,59 @@
-<!-- The WebView size is determined by the width, height,
-     idealWidth, and idealHeight properties. -->
-<Rect id="Rect" color="white" width="200" height="{Layout.height}">
-    <VerticalLayout id="Layout" spacing="2">
-        <WebView>
-            <html><![CDATA[
-                No width defined.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView width="{Rect.width}">
-            <html><![CDATA[
-                The width is full.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView width="{Rect.width/2}">
-            <html><![CDATA[
-                The width is half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView idealWidth="{Rect.width/2}">
-            <html><![CDATA[
-                The idealWidth is half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView idealWidth="{Rect.width/2}">
-            <html><![CDATA[
-                The_idealWidth_is_half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-        <WebView width="{Rect.width/2}">
-            <html><![CDATA[
-                The_width_is_half.
-            ]]></html>
-            <Rect color="#10000000" anchors.fill="{parent}"/>
-        </WebView>
-    </VerticalLayout>
-</Rect>
+// The WebView size is determined by the width, height,
+// idealWidth, and idealHeight properties.
+Rect {
+    id: Rect
+    color: "white"
+    width: 200
+    height: Layout.height
+    VerticalLayout {
+        id: Layout
+        spacing: 2
+        WebView {
+            html: "No width defined."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            width: Rect.width
+            html: "The width is full."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            width: Rect.width/2
+            html: "The width is half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            idealWidth: Rect.width/2
+            html: "The idealWidth is half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            idealWidth: Rect.width/2
+            html: "The_idealWidth_is_half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+        WebView {
+            width: Rect.width/2
+            html: "The_width_is_half."
+            Rect {
+                color: "#10000000"
+                anchors.fill: parent
+            }
+        }
+    }
+}
diff --git a/examples/declarative/webview/content/SpinSquare.qml b/examples/declarative/webview/content/SpinSquare.qml
index ced45d5..5e4735e 100644
--- a/examples/declarative/webview/content/SpinSquare.qml
+++ b/examples/declarative/webview/content/SpinSquare.qml
@@ -1,12 +1,24 @@
-<Item id="Root">
-    <properties>
-        <Property name="period" value="250"/>
-        <Property name="color" value="black"/>
-    </properties>
-    <Item x="{Root.width/2}" y="{Root.height/2}">
-        <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/>
-        <rotation>
-            <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/>
-        </rotation>
-    </Item>
-</Item>
+Item {
+    properties var period : 250
+    properties var color : "black"
+    id: Root
+
+    Item {
+        x: Root.width/2
+        y: Root.height/2
+        Rect {
+            color: Root.color
+            x: -width/2
+            y: -height/2
+            width: Root.width
+            height: width
+        }
+        rotation: NumericAnimation {
+            from: 0
+            to: 360
+            repeat: true
+            running: true
+            duration: Root.period
+        }
+    }
+}
diff --git a/examples/declarative/webview/inline-html.qml b/examples/declarative/webview/inline-html.qml
index 701db41..5f6d410 100644
--- a/examples/declarative/webview/inline-html.qml
+++ b/examples/declarative/webview/inline-html.qml
@@ -1,13 +1,12 @@
-<!-- Inline HTML with loose formatting can be
-     set on the html property by using CDATA. -->
-<WebView>
-    <html><![CDATA[
-        <body bgcolor="white">
-        <table border=1>
-            <tr><th><th>One<th>Two<th>Three
-            <tr><th>1<td>X<td>1<td>X
-            <tr><th>2<td>0<td>X<td>0
-            <tr><th>3<td>X<td>1<td>X
-        </table>
-    ]]></html>
-</WebView>
+// Inline HTML with loose formatting can be
+// set on the html property.
+WebView {
+    html:"\
+        <body bgcolor=white>\
+        <table border=1>\
+            <tr><th><th>One<th>Two<th>Three\
+            <tr><th>1<td>X<td>1<td>X\
+            <tr><th>2<td>0<td>X<td>0\
+            <tr><th>3<td>X<td>1<td>X\
+        </table>"
+}
diff --git a/examples/declarative/webview/inline-xhtml.qml b/examples/declarative/webview/inline-xhtml.qml
deleted file mode 100644
index 4acb417..0000000
--- a/examples/declarative/webview/inline-xhtml.qml
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- Inline xHTML (with strict XML formatting) can be
-     set on the html property by giving it the appropriate namespace. -->
-<WebView>
-    <html xmlns="http://www.w3.org/1999/xhtml">
-        <body bgcolor="white">
-        <table border="1">
-            <tr><th></th><th>One</th><th>Two</th><th>Three</th></tr>
-            <tr><th>1</th><td>X</td><td>1</td><td>X</td></tr>
-            <tr><th>2</th><td>0</td><td>X</td><td>0</td></tr>
-            <tr><th>3</th><td>X</td><td>1</td><td>X</td></tr>
-        </table>
-        </body>
-    </html>
-</WebView>
diff --git a/examples/declarative/webview/qml-in-html.qml b/examples/declarative/webview/qml-in-html.qml
index 8c1c06f..29dded5 100644
--- a/examples/declarative/webview/qml-in-html.qml
+++ b/examples/declarative/webview/qml-in-html.qml
@@ -1,20 +1,30 @@
-<!-- The WebView supports QML data through the HTML OBJECT tag --> 
-<Flickable width="{250*.75}" height="240"
-    viewportWidth="{Web.width*Web.scale}" viewportHeight="{Web.height*Web.scale}">
-<WebView id="Web" width="250" height="420" scale="0.75" settings.pluginsEnabled="true">
-    <html><![CDATA[
-        <html>
-        <body bgcolor=white>
-        These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%
-        and placed in a Flickable area...
-        <table border=1>
-        <tr><th>Duration <th>Color <th>Plugin
-        <tr><td>500      <td>red   <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />
-        <tr><td>2000     <td>blue  <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />
-        <tr><td>1000     <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />
-        </table>
-        </body>
-        </html>
-    ]]></html>
-</WebView>
-</Flickable>
+// The WebView supports QML data through the HTML OBJECT tag
+Rect {
+    color:"blue"
+    Flickable {
+        width: parent.width
+        height: parent.height/2
+        viewportWidth: Web.width*Web.scale
+        viewportHeight: Web.height*Web.scale
+        WebView {
+            id: Web
+            width: 250
+            height: 420
+            scale: 0.75
+            smooth: true
+            settings.pluginsEnabled: true
+            html: "<html>\
+                <body bgcolor=white>\
+                    These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%\
+                    and placed in a Flickable area...\
+                    <table border=1>\
+                        <tr><th>Duration <th>Color <th>Plugin\
+                        <tr><td>500      <td>red   <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />\
+                        <tr><td>2000     <td>blue  <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />\
+                        <tr><td>1000     <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />\
+                    </table>\
+                </body>\
+                </html>"
+        }
+    }
+}
diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml
index 71e1621..8614822 100644
--- a/examples/declarative/webview/transparent.qml
+++ b/examples/declarative/webview/transparent.qml
@@ -1,6 +1,11 @@
-<!-- The WebView background is transparent
-     if the HTML does not specify a background -->
-
-<Rect color="green" width="{Web.width}" height="{Web.height}">
-    <WebView id="Web" html="Hello &lt;b&gt;World!&lt;/b&gt;"/>
-</Rect>
+// The WebView background is transparent
+// if the HTML does not specify a background
+Rect {
+    color: "green"
+    width: Web.width
+    height: Web.height
+    WebView {
+        id: Web
+        html: "Hello <b>World!</b>"
+    }
+}
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
index 5e98d1b..3877adf 100644
--- a/examples/declarative/xmldata/daringfireball.qml
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -1,25 +1,59 @@
-<Rect color="white" width="600" height="600">
-  <resources>
-        <XmlListModel id="feedModel" source="http://daringfireball.net/index.xml"
-                                     query="doc($src)/feed/entry">
-            <namespaceDeclarations>
-                declare default element namespace 'http://www.w3.org/2005/Atom';
-            </namespaceDeclarations>
-            <Role name="title" query="title/string()"/>
-            <Role name="tagline" query="author/name/string()"/>
-            <Role name="content" query="content/string()" isCData="true"/>
-        </XmlListModel>
-        <Component id="feedDelegate">
-            <Item height="{contents.height + 20}">
-                <Text x="10" id="TitleText" text="{title}" font.bold="true"/>
-                <Text text="{'by ' + tagline}" anchors.left="{TitleText.right}" anchors.leftMargin="10" font.italic="true"/>
-                <Text x="10" text="{content}" anchors.top="{TitleText.bottom}" width="580" wrap="true">
-                    <onLinkActivated>print('link clicked: ' + link)</onLinkActivated>
-                </Text>
-            </Item>
-        </Component>
-    </resources>
-
-    <ListView id="list" anchors.fill="{parent}" clip="true"
-              model="{feedModel}" delegate="{feedDelegate}"/>
-</Rect>
+Rect {
+    color: "white"
+    width: 600
+    height: 600
+    resources: [
+        XmlListModel {
+            id: feedModel
+            source: "http://daringfireball.net/index.xml"
+            query: "doc($src)/feed/entry"
+            namespaceDeclarations: "declare default element namespace 'http://www.w3.org/2005/Atom';"
+            Role {
+                name: "title"
+                query: "title/string()"
+            }
+            Role {
+                name: "tagline"
+                query: "author/name/string()"
+            }
+            Role {
+                name: "content"
+                query: "content/string()"
+                isCData: true
+            }
+        },
+        Component {
+            id: feedDelegate
+            Item {
+                height: contents.height + 20
+                Text {
+                    x: 10
+                    id: TitleText
+                    text: title
+                    font.bold: true
+                }
+                Text {
+                    text: 'by ' + tagline
+                    anchors.left: TitleText.right
+                    anchors.leftMargin: 10
+                    font.italic: true
+                }
+                Text {
+                    x: 10
+                    text: content
+                    anchors.top: TitleText.bottom
+                    width: 580
+                    wrap: true
+                    onLinkActivated: { print('link clicked: ' + link) }
+                }
+            }
+        }
+    ]
+    ListView {
+        id: list
+        anchors.fill: parent
+        clip: true
+        model: feedModel
+        delegate: feedDelegate
+    }
+}
diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml
index 32a706e..a465cdd 100644
--- a/examples/declarative/xmldata/yahoonews.qml
+++ b/examples/declarative/xmldata/yahoonews.qml
@@ -1,38 +1,111 @@
-<Rect color="black" gradientColor="#AAAAAA" width="600" height="600">
-  <resources>
-        <XmlListModel id="feedModel" source="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item">
-            <Role name="title" query="title/string()"/>
-            <Role name="link" query="link/string()"/>
-            <Role name="description" query="description/string()" isCData="true"/>
-        </XmlListModel>
-        <Component id="feedDelegate">
-            <Item id="Delegate" height="{Wrapper.height + 10}">
-                <MouseRegion anchors.fill="{Wrapper}" onPressed="Delegate.ListView.list.currentIndex = index;"
-                             onClicked="if (Wrapper.state == 'Details') { Wrapper.state = '';} else {Wrapper.state = 'Details';}"/>
-                <Rect id="Wrapper" y="5" height="{TitleText.height + 10}" width="580" color="#F0F0F0" radius="5">
-                    <Text x="10" y="5" id="TitleText" text="{'&lt;a href=\'' + link + '\'&gt;' + title + '&lt;/a&gt;'}" font.bold="true" font.family="Helvetica" font.size="14" onLinkActivated="print('link clicked: ' + link)"/>
-                    <Text x="10" id="Description" text="{description}" width="560" wrap="true" font.family="Helvetica"
-                          anchors.top="{TitleText.bottom}" anchors.topMargin="5" opacity="0"/>
-
-                    <states>
-                        <State name="Details">
-                            <SetProperty target="{Wrapper}" property="height" binding="contents.height + 10"/>
-                            <SetProperty target="{Description}" property="opacity" value="1"/>
-                        </State>
-                    </states>
-                    <transitions>
-                        <Transition fromState="*" toState="Details" reversible="true">
-                            <SequentialAnimation>
-                                <NumericAnimation duration="200" properties="height" easing="easeOutQuad"/>
-                                <NumericAnimation duration="200" properties="opacity"/>
-                            </SequentialAnimation>
-                        </Transition>
-                    </transitions>
-                </Rect>
-            </Item>
-        </Component>
-    </resources>
-
-    <ListView id="list" x="10" y="10" width="{parent.width - 20}" height="{parent.height - 20}" clip="true"
-              model="{feedModel}" delegate="{feedDelegate}" currentItemPositioning="Snap"/>
-</Rect>
+Rect {
+    color: "black"
+    gradientColor: "#AAAAAA"
+    width: 600
+    height: 600
+    resources: [
+        XmlListModel {
+            id: feedModel
+            source: "http://rss.news.yahoo.com/rss/oceania"
+            query: "doc($src)/rss/channel/item"
+            Role {
+                name: "title"
+                query: "title/string()"
+            }
+            Role {
+                name: "link"
+                query: "link/string()"
+            }
+            Role {
+                name: "description"
+                query: "description/string()"
+                isCData: true
+            }
+        },
+        Component {
+            id: feedDelegate
+            Item {
+                id: Delegate
+                height: Wrapper.height + 10
+                MouseRegion {
+                    anchors.fill: Wrapper
+                    onPressed: { Delegate.ListView.list.currentIndex = index; }
+                    onClicked: { if (Wrapper.state == 'Details') { Wrapper.state = '';} else {Wrapper.state = 'Details';} }
+                }
+                Rect {
+                    id: Wrapper
+                    y: 5
+                    height: TitleText.height + 10
+                    width: 580
+                    color: "#F0F0F0"
+                    radius: 5
+                    Text {
+                        x: 10
+                        y: 5
+                        id: TitleText
+                        text: '<a href=\'' + link + '\'>' + title + '</a>'
+                        font.bold: true
+                        font.family: "Helvetica"
+                        font.size: 14
+                        onLinkActivated: { print('link clicked: ' + link) }
+                    }
+                    Text {
+                        x: 10
+                        id: Description
+                        text: description
+                        width: 560
+                        wrap: true
+                        font.family: "Helvetica"
+                        anchors.top: TitleText.bottom
+                        anchors.topMargin: 5
+                        opacity: 0
+                    }
+                    states: [
+                        State {
+                            name: "Details"
+                            SetProperty {
+                                target: Wrapper
+                                property: "height"
+                                binding: "contents.height + 10"
+                            }
+                            SetProperty {
+                                target: Description
+                                property: "opacity"
+                                value: 1
+                            }
+                        }
+                    ]
+                    transitions: [
+                        Transition {
+                            fromState: "*"
+                            toState: "Details"
+                            reversible: true
+                            SequentialAnimation {
+                                NumericAnimation {
+                                    duration: 200
+                                    properties: "height"
+                                    easing: "easeOutQuad"
+                                }
+                                NumericAnimation {
+                                    duration: 200
+                                    properties: "opacity"
+                                }
+                            }
+                        }
+                    ]
+                }
+            }
+        }
+    ]
+    ListView {
+        id: list
+        x: 10
+        y: 10
+        width: parent.width - 20
+        height: parent.height - 20
+        clip: true
+        model: feedModel
+        delegate: feedDelegate
+        currentItemPositioning: "Snap"
+    }
+}