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

Conflicts:
	examples/declarative/follow/pong.qml
	examples/declarative/listview/dummydata/MyPetsModel.qml

33 files changed, 443 insertions, 325 deletions

diff --git a/doc/src/declarative/pics/ListViewHorizontal.png b/doc/src/declarative/pics/ListViewHorizontal.png
index 63c7c86..4633a0e 100644
--- a/doc/src/declarative/pics/ListViewHorizontal.png
+++ b/doc/src/declarative/pics/ListViewHorizontal.png
diff --git a/doc/src/declarative/pics/ListViewSections.png b/doc/src/declarative/pics/ListViewSections.png
new file mode 100644
index 0000000..9270126
--- /dev/null
+++ b/doc/src/declarative/pics/ListViewSections.png
diff --git a/doc/src/declarative/pics/trivialListView.png b/doc/src/declarative/pics/trivialListView.png
index 175e455..3782570 100644
--- a/doc/src/declarative/pics/trivialListView.png
+++ b/doc/src/declarative/pics/trivialListView.png
diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
new file mode 100644
index 0000000..302dfd2
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
@@ -0,0 +1,18 @@
+<!--
+ListModel allows free form list models to be defined and populated.
+Be sure to name the file the same as the id.
+-->
+<ListModel id="ContactModel">
+    <Contact>
+        <name>Bill Smith</name>
+        <number>555 3264</number>
+    </Contact>
+    <Contact>
+        <name>John Brown</name>
+        <number>555 8426</number>
+    </Contact>
+    <Contact>
+        <name>Sam Wise</name>
+        <number>555 0473</number>
+    </Contact>
+</ListModel>
diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml
new file mode 100644
index 0000000..d8bbb22
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/highlight.qml
@@ -0,0 +1,59 @@
+Rect {
+    width: 180
+    height: 200
+    color: "white"
+    // ContactModel model is defined in dummydata/ContactModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+//! [0]
+    Component {
+        id: Delegate
+        Item {
+            id: Wrapper
+            width: 180
+            height: 40
+            VerticalLayout {
+                x: 5; y: 5
+                Text {
+                    text: '<b>Name:</b> ' + name
+                }
+                Text {
+                    text: '<b>Number:</b> ' + number
+                }
+            }
+        }
+    }
+//! [0]
+    // Specify a highlight with custom movement.  Note that autoHighlight
+    // is set to false in the ListView so that we can control how the
+    // highlight moves to the current item.
+//! [1]
+    Component {
+        id: Highlight
+        Rect {
+            width: 180
+            height: 40
+            color: "lightsteelblue"
+            radius: 5
+            y: Follow {
+                source: List.current.y
+                spring: 3
+                damping: 0.1
+            }
+        }
+    }
+    ListView {
+        id: List
+        width: 180
+        height: parent.height
+        model: ContactModel
+        delegate: Delegate
+        highlight: Highlight
+        autoHighlight: false
+        focus: true
+    }
+//! [1]
+}
diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml
new file mode 100644
index 0000000..5b99bbd
--- /dev/null
+++ b/doc/src/snippets/declarative/listview/listview.qml
@@ -0,0 +1,55 @@
+//! [3]
+Rect {
+    width: 480
+    height: 40
+    color: "white"
+    // ContactModel model is defined in dummydata/ContactModel.qml
+    // The viewer automatically loads files in dummydata/* to assist
+    // development without a real data source.
+
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+//! [0]
+    Component {
+        id: Delegate
+        Item {
+            id: Wrapper
+            width: 180
+            height: 40
+            VerticalLayout {
+                x: 5; y: 5
+                Text {
+                    text: '<b>Name:</b> ' + name
+                }
+                Text {
+                    text: '<b>Number:</b> ' + number
+                }
+            }
+        }
+    }
+//! [0]
+    // Define a highlight component.  Just one of these will be instantiated
+    // by each ListView and placed behind the current item.
+//! [1]
+    Component {
+        id: Highlight
+        Rect {
+            color: "lightsteelblue"
+            radius: 5
+        }
+    }
+//! [1]
+    // The actual list
+//! [2]
+    ListView {
+        width: 480
+        height: parent.height
+        model: ContactModel
+        delegate: Delegate
+        highlight: Highlight
+        focus: true
+        orientation: 'Horizontal'
+    }
+//! [2]
+}
+//! [3]
diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml
index ed4a652..b6695bd 100644
--- a/examples/declarative/follow/pong.qml
+++ b/examples/declarative/follow/pong.qml
@@ -3,6 +3,7 @@ Rect {
     width: 640
     height: 480
     color: "#000000"
+
     // Make a ball to bounce
     Rect {
         id: Ball
@@ -11,6 +12,7 @@ Rect {
         height: 20
         color: "#00ee00"
         z: 1
+
         // Add a property for the target y coordinate
         properties: Property {
             name: "targetY"
@@ -20,6 +22,7 @@ Rect {
             name: "direction"
             value: "right"
         }
+
         // Move the ball to the right and back to the left repeatedly
         x: SequentialAnimation {
             running: true
@@ -43,17 +46,22 @@ Rect {
                 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)
+        onTopChanged: {
+            if (y <= 0)
                 targetY = Page.height-20;
             else if (y >= Page.height-20)
-                targetY = 0; }
+                targetY = 0;
+        }
     }
+
     // Place bats to the left and right of the view, following the y
     // coordinates of the ball.
     Rect {
@@ -80,41 +88,44 @@ Rect {
             enabled: Ball.direction == 'right'
         }
     }
+
     // The rest, to make it look realistic, if neither ever scores...
     Rect {
         color: "#00ee00"
+        x: 320-80
+        y: 0
         width: 40
         height: 60
-        x: 320-80
     }
     Rect {
         color: "#000000"
-        width: 20
-        height: 40
         x: 320-70
         y: 10
+        width: 20
+        height: 40
     }
     Rect {
         color: "#00ee00"
+        x: 320+40
+        y: 0
         width: 40
         height: 60
-        x: 320+40
     }
     Rect {
         color: "#000000"
-        width: 20
-        height: 40
         x: 320+50
         y: 10
+        width: 20
+        height: 40
     }
     Repeater {
         dataSource: 24
         Rect {
             color: "#00ee00"
-            width: 10
-            height: 10
             x: 320-5
             y: index*20
+            width: 10
+            height: 10
         }
     }
 }
diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml
index def8cf3..1c96b7f 100644
--- a/examples/declarative/listview/dummydata/MyPetsModel.qml
+++ b/examples/declarative/listview/dummydata/MyPetsModel.qml
@@ -1,50 +1,59 @@
 // ListModel allows free form list models to be defined and populated.
 // Be sure to name the file the same as the id.
 ListModel2 {
-    id: MyPetsModel
+    id: MyListElementsModel
     ListElement {
-        name: "Rover"
-        type: "Dog"
-        age: 5
+        name: "Polly"
+        type: "Parrot"
+        age: 12
+        size: "Small"
     }
     ListElement {
-        name: "Whiskers"
-        type: "Cat"
-        age: 2
+        name: "Penny"
+        type: "Turtle"
+        age: 4
+        size: "Small"
     }
     ListElement {
         name: "Warren"
         type: "Rabbit"
         age: 2
-    }
-    ListElement {
-        name: "Polly"
-        type: "Parrot"
-        age: 12
+        size: "Small"
     }
     ListElement {
         name: "Spot"
         type: "Dog"
         age: 9
+        size: "Medium"
     }
     ListElement {
-        name: "Tiny"
-        type: "Elephant"
-        age: 15
-    }
-    ListElement {
-        name: "Penny"
-        type: "Turtle"
-        age: 4
+        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/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/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/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml
index a3f75e8..5862646 100644
--- a/examples/declarative/slideswitch/Switch.qml
+++ b/examples/declarative/slideswitch/Switch.qml
@@ -46,7 +46,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/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..5c14506 100644
--- a/examples/declarative/webview/content/SpinSquare.qml
+++ b/examples/declarative/webview/content/SpinSquare.qml
@@ -1,12 +1,29 @@
-<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 {
+    id: Root
+    properties: Property {
+        name: "period"
+        value: 250
+    }
+    properties: Property {
+        name: "color"
+        value: "black"
+    }
+    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/src/declarative/fx/qfxlistview.cpp b/src/declarative/fx/qfxlistview.cpp
index 0724e3a..13e5b21 100644
--- a/src/declarative/fx/qfxlistview.cpp
+++ b/src/declarative/fx/qfxlistview.cpp
@@ -798,37 +798,23 @@ void QFxListViewPrivate::fixupX()
     \brief The ListView element provides a list view of items provided by a model.
 
     The model is typically provided by a QAbstractListModel "C++ model object", but can also be created directly in XML.
-
     The items are laid out vertically or horizontally and may be flicked to scroll.
 
     The below example creates a very simple vertical list, using an XML model.
     \image trivialListView.png
-    \code
-    <resources>
-        <ListModel id="contactModel">
-            <Contact>
-                <firstName>John</firstName>
-                <lastName>Smith</lastName>
-            </Contact>
-            <Contact>
-                <firstName>Bill</firstName>
-                <lastName>Jones</lastName>
-            </Contact>
-            <Contact>
-                <firstName>Jane</firstName>
-                <lastName>Doe</lastName>
-            </Contact>
-            </ListModel>
-            <Component id="contactDelegate">
-                <Rect pen.color="blue" z="-1" height="20" width="80" color="white" radius="2">
-                    <Text id="name" text="{firstName + ' ' + lastName}" font.size="11"/>
-                </Rect>
-        </Component>
-    </resources>
-
-    <ListView id="list" width="320" height="240" clip="true"
-                model="{contactModel}" delegate="{contactDelegate}"/>
-    \endcode
+
+    The user interface defines a delegate to display an item, a highlight,
+    and the ListView which uses the above.
+
+    \snippet doc/src/snippets/declarative/listview/listview.qml 3
+
+    The model is defined as a ListModel using XML:
+    \quotefromfile doc/src/snippets/declarative/listview/dummydata/ContactModel.qml
+    \skipto <ListModel
+    \printuntil </ListModel
+
+    In this case ListModel is a handy way for us to test our UI.  In practice
+    the model would be implemented in C++, or perhaps via a SQL data source.
 */
 
 QFxListView::QFxListView(QFxItem *parent)
@@ -854,25 +840,7 @@ QFxListView::~QFxListView()
     The C++ model object must be a \l QListModelInterface subclass, a \l VisualModel,
     or a simple list.
 
-    Models can also be created directly in XML, using the \l ListModel element. For example:
-    \code
-    <ListModel id="contactModel">
-        <Contact>
-            <firstName>John</firstName>
-            <lastName>Smith</lastName>
-        </Contact>
-        <Contact>
-            <firstName>Bill</firstName>
-            <lastName>Jones</lastName>
-        </Contact>
-        <Contact>
-            <firstName>Jane</firstName>
-            <lastName>Doe</lastName>
-        </Contact>
-    </ListModel>
-
-    <ListView model="{contactModel}" .../>
-    \endcode
+    Models can also be created directly in XML, using the \l ListModel element.
 */
 QVariant QFxListView::model() const
 {
@@ -922,17 +890,7 @@ void QFxListView::setModel(const QVariant &model)
     The delegate provides a template describing what each item in the view should look and act like.
 
     Here is an example delegate:
-    \code
-    <Component id="contactDelegate">
-        <Item id="wrapper">
-            <Image id="pic" width="100" height="100" file="{portrait}"/>
-            <Text id="name" text="{firstName + ' ' + lastName}"
-                    anchors.left="{pic.right}" anchors.leftMargin="5"/>
-        </Item>
-    </Component>
-    ...
-    <ListView delegate="{contactDelegate}" .../>
-    \endcode
+    \snippet doc/src/snippets/declarative/listview/listview.qml 0
 */
 QmlComponent *QFxListView::delegate() const
 {
@@ -1012,13 +970,9 @@ int QFxListView::count() const
 
     The below example demonstrates how to make a simple highlight
     for a vertical list.
-    \code
-    <Component id="ListHighlight">
-        <Rect color="lightsteelblue" radius="4"/>
-    </Component>
-    <ListView highlight="{ListHighlight}">
-    \endcode
-    \image ListViewHighlight.png
+
+    \snippet doc/src/snippets/declarative/listview/listview.qml 1
+    \image trivialListView.png
 
     \sa autoHighlight
 */
@@ -1043,17 +997,12 @@ void QFxListView::setHighlight(QmlComponent *highlight)
     If autoHighlight is true, the highlight will be moved smoothly
     to follow the current item.  If autoHighlight is false, the
     highlight will not be moved by the view, and must be implemented
-    by the highlight, for example:
-
-    \code
-    <Component id="Highlight">
-        <Rect id="Wrapper" color="#242424" radius="4" width="320" height="60" >
-            <y>
-                <Follow source="{Wrapper.ListView.view.current.y}" spring="3" damping="0.2"/>
-            </y>
-        </Rect>
-    </Component>
-    \endcode
+    by the highlight.  The following example creates a highlight with
+    its motion defined by the spring \l {Follow}:
+
+    \snippet doc/src/snippets/declarative/listview/highlight.qml 1
+
+    \sa highlight
 */
 bool QFxListView::autoHighlight() const
 {
@@ -1079,11 +1028,18 @@ void QFxListView::setAutoHighlight(bool autoHighlight)
     The modes supported are:
     \list
     \i Free - For Mouse, the current item may be positioned anywhere,
-    whether within the visible area, or outside.  during Keyboard interaction,
+    whether within the visible area, or outside.  During Keyboard interaction,
     the current item can move within the visible area, and the view will
     scroll to keep the highlight visible.
-    \i Snap -
-    \i SnapAuto -
+    \i Snap - For mouse, the current item may be positioned anywhere,
+    whether within the visible area, or outside.  During keyboard interaction,
+    the current item will be kept in the visible area and will prefer to be
+    positioned at the \l snapPosition, however the view will never scroll
+    beyond the beginning or end of the view.
+    \i SnapAuto - For both mouse and keyboard, the current item will be
+    kept at the \l {snapPosition}. Additionally, if the view is dragged or
+    flicked, the current item will be automatically updated to be the item
+    currently at the snapPosition.
     \endlist
 */
 QFxListView::CurrentItemPositioning QFxListView::currentItemPositioning() const
@@ -1121,10 +1077,10 @@ void QFxListView::setSnapPosition(int pos)
     \qmlproperty enumeration ListView::orientation
     This property holds the orientation of the list.
 
-    Possible values are \c Qt::Vertical (default) and \c Qt::Horizontal.
+    Possible values are \c Vertical (default) and \c Horizontal.
 
     Vertical Example:
-    \image ListViewVertical.png
+    \image trivialListView.png
     Horizontal Example:
     \image ListViewHorizontal.png
 */
@@ -1205,24 +1161,15 @@ void QFxListView::setCacheBuffer(int b)
     \qmlproperty string ListView::sectionExpression
     This property holds the expression to be evaluated for the section attached property.
 
-    Each item in the list has attached properties named \c section and
-    \c prevSection.  These may be used to place a section header for
-    related items.  The example below assumes that the model is alphabetically
-    sorted.  The section expression is the first character of the \c description
-    property.  If \c section and \c prevSection differ, the item will
-    display a section header.
-
-    \code
-    <Component id="Delegate">
-        <Item id="wrapper" x="0" width="240" height="{Separator.height + Desc.height}">
-            <Item id="Separator" height="{wrapper.ListView.prevSection != wrapper.ListView.section ? 10 : 0}" width="240">
-                <Text text="{wrapper.ListView.section}" anchors.fill="{parent}"/>
-            </Item>
-            <Text id="Desc" text="{description} width="{parent.width}" height="30"/>
-        </Item>
-    </Component>
-    <ListView anchors.fill="{parent}" sectionExpression="{String(description).charAt(0)}" delegate="{Delegate}" model="{Model}"/>
-    \endcode
+    Each item in the list has attached properties named \c ListView.section and
+    \c ListView.prevSection.  These may be used to place a section header for
+    related items.  The example below assumes that the model is sorted by size of
+    pet.  The section expression is the size property.  If \c ListView.section and
+    \c ListView.prevSection differ, the item will display a section header.
+
+    \snippet examples/declarative/listview/sections.qml 0
+
+    \image ListViewSections.png
 */
 QString QFxListView::sectionExpression() const
 {
diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp
index 7c05088..05730f9 100644
--- a/src/declarative/fx/qfxwebview.cpp
+++ b/src/declarative/fx/qfxwebview.cpp
@@ -589,7 +589,8 @@ void QFxWebView::paintGLContents(GLPainter &p)
 
 #if defined(QFX_RENDER_QPAINTER)
     bool wasAA = p.testRenderHint(QPainter::Antialiasing);
-    p.setRenderHints(QPainter::Antialiasing, d->smooth);
+    bool wasSM = p.testRenderHint(QPainter::SmoothPixmapTransform);
+    p.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform, d->smooth);
     QRectF clipf = p.clipRegion().boundingRect();
     const QRect clip = p.clipRegion().isEmpty() ? content : clipf.toRect();
 #elif defined(QFX_RENDER_OPENGL)
@@ -656,6 +657,7 @@ void QFxWebView::paintGLContents(GLPainter &p)
     }
 #if defined(QFX_RENDER_QPAINTER)
     p.setRenderHints(QPainter::Antialiasing, wasAA);
+    p.setRenderHints(QPainter::SmoothPixmapTransform, wasSM);
 #endif
 }
 
diff --git a/src/declarative/util/qfxview.cpp b/src/declarative/util/qfxview.cpp
index 42047b6..5611bca 100644
--- a/src/declarative/util/qfxview.cpp
+++ b/src/declarative/util/qfxview.cpp
@@ -265,7 +265,7 @@ void QFxView::continueExecute()
             d->root = item;
             connect(item, SIGNAL(widthChanged()), this, SLOT(sizeChanged()));
             connect(item, SIGNAL(heightChanged()), this, SLOT(sizeChanged()));
-            sizeChanged();
+            emit sceneResized(QSize(d->root->width(),d->root->height()));
         } else if (QWidget *wid = qobject_cast<QWidget *>(obj)) {
             window()->setAttribute(Qt::WA_OpaquePaintEvent, false);
             window()->setAttribute(Qt::WA_NoSystemBackground, false);
diff --git a/src/declarative/util/qmlstateoperations.cpp b/src/declarative/util/qmlstateoperations.cpp
index 8a10ca3..755befe 100644
--- a/src/declarative/util/qmlstateoperations.cpp
+++ b/src/declarative/util/qmlstateoperations.cpp
@@ -59,6 +59,7 @@ public:
 };
 
 /*!
+    \preliminary
     \qmlclass ParentChange
     \brief The ParentChange element allows you to reparent an object in a state.
 */