Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration

* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml: (100 commits)
  Update QML PropertyAnimation::easing docs
  Add testcase for QTBUG-7730
  Add autotests for tab and backtab in Keys and KeyNavigation.
  Run signal expressions on attached property objects in correct scope
  Fixup test
  Add support for tab and backtab in KeyNavigation
  Mark QGraphicsItem position properties as FINAL
  Move the multimedia files to the correct place.
  Fix grammar stringifying "on" as "readonly"
  Improve grouped property error messages
  Don't mess with highlight size if highlightFollowsCurrentItem is false.
  Fix ListView contentHeight calculation.
  Remove Qt.playSound()
  Add formatting functions to QML's global Qt object.
  Signal handler requires exactly one value.
  QDeclarativeContext::contextProperty() should also access ids
  Compile without QVariant::EasingCurve in Qt 4.6.2.
  Documented view behavior when items are removed from start of view.
  Fix tests failing due to javascript eval errors.
  Remove unnecessary additional hash of QDeclarativeGridViewAttached
  ...

55 files changed, 571 insertions, 367 deletions

diff --git a/examples/declarative/animations/color-animation.qml b/examples/declarative/animations/color-animation.qml
index 7171a69..6740522 100644
--- a/examples/declarative/animations/color-animation.qml
+++ b/examples/declarative/animations/color-animation.qml
@@ -10,7 +10,7 @@ Item {
         gradient: Gradient {
             GradientStop {
                 position: 0.0
-                color: SequentialAnimation {
+                SequentialAnimation on color {
                     repeat: true
                     ColorAnimation { from: "DeepSkyBlue"; to: "#0E1533"; duration: 5000 }
                     ColorAnimation { from: "#0E1533"; to: "DeepSkyBlue"; duration: 5000 }
@@ -18,7 +18,7 @@ Item {
             }
             GradientStop {
                 position: 1.0
-                color: SequentialAnimation {
+                SequentialAnimation on color {
                     repeat: true
                     ColorAnimation { from: "SkyBlue"; to: "#437284"; duration: 5000 }
                     ColorAnimation { from: "#437284"; to: "SkyBlue"; duration: 5000 }
@@ -31,7 +31,7 @@ Item {
     Item {
         width: parent.width; height: 2 * parent.height
         transformOrigin: Item.Center
-        rotation: NumberAnimation { from: 0; to: 360; duration: 10000; repeat: true }
+        NumberAnimation on rotation { from: 0; to: 360; duration: 10000; repeat: true }
         Image {
             source: "images/sun.png"; y: 10; anchors.horizontalCenter: parent.horizontalCenter
             transformOrigin: Item.Center; rotation: -3 * parent.rotation
@@ -44,7 +44,7 @@ Item {
             x: 0; y: parent.height/2; width: parent.width; height: parent.height/2
             source: "images/star.png"; angleDeviation: 360; velocity: 0
             velocityDeviation: 0; count: parent.width / 10; fadeInDuration: 2800
-            opacity: SequentialAnimation {
+            SequentialAnimation on opacity {
                 repeat: true
                 NumberAnimation { from: 0; to: 1; duration: 5000 }
                 NumberAnimation { from: 1; to: 0; duration: 5000 }
@@ -58,7 +58,7 @@ Item {
         gradient: Gradient {
             GradientStop {
                 position: 0.0
-                color: SequentialAnimation {
+                SequentialAnimation on color {
                     repeat: true
                     ColorAnimation { from: "ForestGreen"; to: "#001600"; duration: 5000 }
                     ColorAnimation { from: "#001600"; to: "ForestGreen"; duration: 5000 }
diff --git a/examples/declarative/animations/property-animation.qml b/examples/declarative/animations/property-animation.qml
index 537ee26..4428f34 100644
--- a/examples/declarative/animations/property-animation.qml
+++ b/examples/declarative/animations/property-animation.qml
@@ -42,7 +42,7 @@ Item {
 
         // Animate the y property. Setting repeat to true makes the
         // animation repeat indefinitely, otherwise it would only run once.
-        y: SequentialAnimation {
+        SequentialAnimation on y {
             repeat: true
 
             // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml
index 90ea516..79e99e9 100644
--- a/examples/declarative/aspectratio/face_fit_animated.qml
+++ b/examples/declarative/aspectratio/face_fit_animated.qml
@@ -18,7 +18,7 @@ Rectangle {
         source: "pics/face.png"
         x: (parent.width-width*scale)/2
         y: (parent.height-height*scale)/2
-        scale: SpringFollow {
+        SpringFollow on scale {
             source: Math.max(Math.min(face.parent.width/face.width*1.333,face.parent.height/face.height),
                         Math.min(face.parent.width/face.width,face.parent.height/face.height*1.333))
             spring: 1
diff --git a/examples/declarative/behaviours/behavior.qml b/examples/declarative/behaviours/behavior.qml
index 2732c0a..c84bf62 100644
--- a/examples/declarative/behaviours/behavior.qml
+++ b/examples/declarative/behaviours/behavior.qml
@@ -50,12 +50,12 @@ Rectangle {
             radius: 5
             border.width: 10; border.color: "white";
             x: 100-37; y: 100-25
-            x: Behavior { NumberAnimation { duration: 300 } }
-            y: Behavior { NumberAnimation { duration: 300 } }
+            Behavior on x { NumberAnimation { duration: 300 } }
+            Behavior on y { NumberAnimation { duration: 300 } }
             Text {
                 id: focusText
                 text: focusRect.text;
-                text: Behavior {
+                Behavior on text {
                     SequentialAnimation {
                         NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 }
                         PropertyAction {}
diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml
deleted file mode 100644
index 8fffd59..0000000
--- a/examples/declarative/behaviours/test.qml
+++ /dev/null
@@ -1,102 +0,0 @@
-import Qt 4.6
-
-Rectangle {
-    color: "lightsteelblue"
-    width: 800
-    height: 600
-    id: page
-    MouseArea {
-        anchors.fill: parent
-        onClicked: { bluerect.parent = page; console.log(mouseX); bluerect.x = mouseX; }
-    }
-    MyRect {
-        color: "green"
-        x: 200
-        y: 200
-    }
-    MyRect {
-        color: "red"
-        x: 400
-        y: 200
-    }
-    MyRect {
-        color: "yellow"
-        x: 400
-        y: 400
-    }
-    MyRect {
-        color: "orange"
-        x: 400
-        y: 500
-    }
-    MyRect {
-        color: "pink"
-        x: 400
-        y: 0
-    }
-    MyRect {
-        color: "lightsteelblue"
-        x: 100
-        y: 500
-    }
-    MyRect {
-        color: "black"
-        x: 0
-        y: 200
-    }
-    MyRect {
-        color: "white"
-        x: 400
-        y: 0
-    }
-    Rectangle {
-        color: "blue"
-        x: 0
-        y: 0
-        width: 100
-        height: 100
-        id: bluerect
-        x: Behavior {
-            ParallelAnimation {
-                SequentialAnimation {
-                    NumberAnimation {
-                        target: bluerect
-                        property: "y"
-                        from: 0
-                        to: 10
-                        easing.type: "OutBounce"
-                        easing.amplitude: 30
-                        duration: 250
-                    }
-                    NumberAnimation {
-                        target: bluerect
-                        property: "y"
-                        from: 10
-                        to: 0
-                        easing.type: "OutBounce"
-                        easing.amplitude: 30
-                        duration: 250
-                    }
-                }
-                NumberAnimation { duration: 500 }
-            }
-        }
-        parent: Behavior {
-            SequentialAnimation {
-                NumberAnimation {
-                    target: bluerect
-                    property: "opacity"
-                    to: 0
-                    duration: 150
-                }
-                PropertyAction {}
-                NumberAnimation {
-                    target: bluerect
-                    property: "opacity"
-                    to: 1
-                    duration: 150
-                }
-            }
-        }
-    }
-}
diff --git a/examples/declarative/border-image/content/MyBorderImage.qml b/examples/declarative/border-image/content/MyBorderImage.qml
index ca886e9..5621e18 100644
--- a/examples/declarative/border-image/content/MyBorderImage.qml
+++ b/examples/declarative/border-image/content/MyBorderImage.qml
@@ -17,13 +17,13 @@ Item {
     BorderImage {
         id: image; x: container.width / 2 - width / 2; y: container.height / 2 - height / 2
 
-        width: SequentialAnimation {
+        SequentialAnimation on width {
             repeat: true
             NumberAnimation { from: container.minWidth; to: container.maxWidth; duration: 2000; easing.type: "InOutQuad"}
             NumberAnimation { from: container.maxWidth; to: container.minWidth; duration: 2000; easing.type: "InOutQuad" }
         }
 
-        height: SequentialAnimation {
+        SequentialAnimation on height {
             repeat: true
             NumberAnimation { from: container.minHeight; to: container.maxHeight; duration: 2000; easing.type: "InOutQuad"}
             NumberAnimation { from: container.maxHeight; to: container.minHeight; duration: 2000; easing.type: "InOutQuad" }
diff --git a/examples/declarative/clocks/content/Clock.qml b/examples/declarative/clocks/content/Clock.qml
index 0c6836f..75a1cf5 100644
--- a/examples/declarative/clocks/content/Clock.qml
+++ b/examples/declarative/clocks/content/Clock.qml
@@ -34,7 +34,7 @@ Item {
         transform: Rotation {
             id: hourRotation
             origin.x: 7.5; origin.y: 73; angle: 0
-            angle: SpringFollow {
+            SpringFollow on angle {
                 spring: 2; damping: 0.2; modulus: 360
                 source: (clock.hours * 30) + (clock.minutes * 0.5)
             }
@@ -48,7 +48,7 @@ Item {
         transform: Rotation {
             id: minuteRotation
             origin.x: 6.5; origin.y: 83; angle: 0
-            angle: SpringFollow {
+            SpringFollow on angle {
                 spring: 2; damping: 0.2; modulus: 360
                 source: clock.minutes * 6
             }
@@ -62,7 +62,7 @@ Item {
         transform: Rotation {
             id: secondRotation
             origin.x: 2.5; origin.y: 80; angle: 0
-            angle: SpringFollow {
+            SpringFollow on angle {
                 spring: 5; damping: 0.25; modulus: 360
                 source: clock.seconds * 6
             }
diff --git a/examples/declarative/colorbrowser/colorbrowser.qml b/examples/declarative/colorbrowser/colorbrowser.qml
new file mode 100644
index 0000000..421ae07
--- /dev/null
+++ b/examples/declarative/colorbrowser/colorbrowser.qml
@@ -0,0 +1,101 @@
+import Qt 4.6
+import 'qml'
+
+Rectangle {
+    id: mainWindow
+    width: 800; height: 480; color: '#454545'
+
+    VisualDataModel { id: colorsVisualModel; delegate: colorsDelegate; model: ColorsModel }
+
+    Component {
+        id: colorsDelegate
+        Package {
+
+            Item {
+                Package.name: 'grid'
+                GridView {
+                    id: gridView; model: visualModel.parts.grid; width: mainWindow.width; height: mainWindow.height
+                    cellWidth: 160; cellHeight: 160; interactive: false
+                    onCurrentIndexChanged: listView.positionViewAtIndex(currentIndex)
+                }
+            }
+
+            Item {
+                Package.name: 'fullscreen'
+                ListView {
+                    id: listView; model: visualModel.parts.list; orientation: Qt.Horizontal
+                    width: mainWindow.width; height: mainWindow.height; interactive: false
+                    onCurrentIndexChanged: gridView.positionViewAtIndex(currentIndex)
+                    highlightRangeMode: ListView.StrictlyEnforceRange; snapMode: ListView.SnapOneItem
+                }
+            }
+
+            Item {
+                Package.name: 'stack'
+                id: wrapper
+                width: 260; height: 240
+
+                VisualDataModel { id: visualModel; model: colors; delegate: ColorDelegate {} }
+
+                PathView {
+                    id: pathView; model: visualModel.parts.stack; anchors.centerIn: parent
+                    pathItemCount: 3
+                    path: Path {
+                        PathAttribute { name: 'z'; value: 9999.0 }
+                        PathLine { x: 1; y: 1 }
+                        PathAttribute { name: 'z'; value: 0.0 }
+                    }
+                }
+
+                Item {
+                    anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom; anchors.bottomMargin: 20
+                    width: albumTitle.width + 20 ; height: albumTitle.height + 4
+                    Text { id: albumTitle; text: name; color: 'white'; font.bold: true; anchors.centerIn: parent }
+                }
+
+                MouseArea { anchors.fill: parent; onClicked: wrapper.state = 'inGrid' }
+
+                states: [
+                State {
+                    name: 'inGrid'
+                    PropertyChanges { target: gridView; interactive: true }
+                    PropertyChanges { target: shade; opacity: 1 }
+                },
+                State {
+                    name: 'fullscreen'; extend: 'inGrid'
+                    PropertyChanges { target: gridView; interactive: false }
+                    PropertyChanges { target: listView; interactive: true }
+                    PropertyChanges { target: infobox; opacity: 1 }
+                }
+                ]
+
+                transitions: [
+                    Transition {
+                        from: ''; to: 'inGrid'; reversible: true
+                        NumberAnimation { target: shade; properties: 'opacity'; duration: 300 }
+                    },
+                    Transition {
+                        from: 'inGrid'; to: 'fullscreen'; reversible: true
+                        SequentialAnimation {
+                            PauseAnimation { duration: 300 }
+                            NumberAnimation { target: infobox; properties: 'opacity'; duration: 300 }
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    GridView { width: parent.width; height: parent.height; cellWidth: 260; cellHeight: 240; model: colorsVisualModel.parts.stack }
+    Rectangle { id: shade; color: '#454545'; width: parent.width; height: parent.height; opacity: 0 }
+    ListView { anchors.fill: parent; model: colorsVisualModel.parts.grid; interactive: false }
+    ListView { anchors.fill: parent; model: colorsVisualModel.parts.fullscreen; interactive: false }
+    Item { id: foreground; anchors.fill: parent }
+
+    Column {
+        id: infobox; opacity: 0
+        anchors { left: parent.left; leftMargin: 20; bottom: parent.bottom; bottomMargin: 20 }
+        Text { id: infoColorName; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 18 }
+        Text { id: infoColorHex; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 14 }
+    }
+}
diff --git a/examples/declarative/colorbrowser/dummydata/ColorsModel.qml b/examples/declarative/colorbrowser/dummydata/ColorsModel.qml
new file mode 100644
index 0000000..eefbcfe
--- /dev/null
+++ b/examples/declarative/colorbrowser/dummydata/ColorsModel.qml
@@ -0,0 +1,96 @@
+import Qt 4.6
+
+ListModel {
+    id: colorsModel
+
+    ListElement {
+        name: "Reds"
+        colors: [
+            ListElement { name: "Fire Brick"; hex: "#B22222" },
+            ListElement { name: "Fire Brick 1"; hex: "#FF3030" },
+            ListElement { name: "Fire Brick 2"; hex: "#EE2C2C" },
+            ListElement { name: "Fire Brick 3"; hex: "#CD2626" },
+            ListElement { name: "Fire Brick 4"; hex: "#8B1A1A" },
+            ListElement { name: "Red"; hex: "#FF0000" },
+            ListElement { name: "Red 2"; hex: "#EE0000" },
+            ListElement { name: "Red 3"; hex: "#CD0000" },
+            ListElement { name: "Red 4"; hex: "#8B0000" },
+            ListElement { name: "Tomato"; hex: "#FF6347" },
+            ListElement { name: "Tomato 2"; hex: "#EE5C42" },
+            ListElement { name: "Tomato 3"; hex: "#CD4F39" },
+            ListElement { name: "Tomato 4"; hex: "#8B3626" },
+            ListElement { name: "Orange Red"; hex: "#FF4500" },
+            ListElement { name: "Orange Red 2"; hex: "#EE4000" },
+            ListElement { name: "Orange Red 3"; hex: "#CD3700" },
+            ListElement { name: "Orange Red 4"; hex: "#8B2500" },
+            ListElement { name: "Indian Red 2"; hex: "#EE6363" },
+            ListElement { name: "Indian Red 3"; hex: "#CD5555" },
+            ListElement { name: "Indian Red 4"; hex: "#8B3A3A" },
+            ListElement { name: "Brown"; hex: "#A52A2A" },
+            ListElement { name: "Brown 1"; hex: "#FF4040" },
+            ListElement { name: "Brown 2"; hex: "#EE3B3B" },
+            ListElement { name: "Brown 3"; hex: "#CD3333" },
+            ListElement { name: "Brown 4"; hex: "#8B2323" }
+        ]
+    }
+    ListElement {
+        name: "Greens"
+        colors: [
+            ListElement { name: "Green"; hex: "#008000" },
+            ListElement { name: "Green 2"; hex: "#00EE00" },
+            ListElement { name: "Green 3"; hex: "#00CD00" },
+            ListElement { name: "Green 4"; hex: "#008B00" },
+            ListElement { name: "Dark Green"; hex: "#006400" },
+            ListElement { name: "Sap Green"; hex: "#308014" },
+            ListElement { name: "Medium Spring Green"; hex: "#00FA9A" },
+            ListElement { name: "Spring Green"; hex: "#00FF7F" },
+            ListElement { name: "Spring Green 1"; hex: "#00EE76" },
+            ListElement { name: "Spring Green 2"; hex: "#00CD66" },
+            ListElement { name: "Spring Green 3"; hex: "#008B45" },
+            ListElement { name: "Medium Sea Green"; hex: "#3CB371" },
+            ListElement { name: "Sea Green 1"; hex: "#54FF9F" },
+            ListElement { name: "Sea Green 2"; hex: "#4EEE94" },
+            ListElement { name: "Sea Green 3"; hex: "#43CD80" },
+            ListElement { name: "Sea Green 4"; hex: "#2E8B57" },
+            ListElement { name: "Emerald Green"; hex: "#00C957" },
+            ListElement { name: "Mint"; hex: "#BDFCC9" },
+            ListElement { name: "Cobalt Green"; hex: "#3D9140" },
+            ListElement { name: "Dark Sea Green"; hex: "#8FBC8F" },
+            ListElement { name: "Dark Sea Green 1"; hex: "#C1FFC1" },
+            ListElement { name: "Dark Sea Green 2"; hex: "#B4EEB4" },
+            ListElement { name: "Dark Sea Green 3"; hex: "#9BCD9B" },
+            ListElement { name: "Dark Sea Green 4"; hex: "#698B69" },
+            ListElement { name: "Lime Green"; hex: "#00FF00" }
+        ]
+    }
+    ListElement {
+        name: "Blues"
+        colors: [
+            ListElement { name: "Dark Slate Blue"; hex: "#483D8B" },
+            ListElement { name: "Light Slate Blue"; hex: "#8470FF" },
+            ListElement { name: "Medium Slate Blue"; hex: "#7B68EE" },
+            ListElement { name: "Slate Blue"; hex: "#6A5ACD" },
+            ListElement { name: "Blue"; hex: "#0000FF" },
+            ListElement { name: "Midnight Blue"; hex: "#191970" },
+            ListElement { name: "Cobalt"; hex: "#3D59AB" },
+            ListElement { name: "Royal Blue"; hex: "#4169E1" },
+            ListElement { name: "Corn Flower Blue"; hex: "#6495ED" },
+            ListElement { name: "Light Steel Blue"; hex: "#B0C4DE" },
+            ListElement { name: "Light Steel Blue 1"; hex: "#CAE1FF" },
+            ListElement { name: "Light Steel Blue 2"; hex: "#BCD2EE" },
+            ListElement { name: "Light Steel Blue 3"; hex: "#A2B5CD" },
+            ListElement { name: "Dodger Blue"; hex: "#1E90FF" },
+            ListElement { name: "Dodger Blue 2"; hex: "#1C86EE" },
+            ListElement { name: "Dodger Blue 3"; hex: "#1874CD" },
+            ListElement { name: "Dodger Blue 4"; hex: "#104E8B" },
+            ListElement { name: "Steel Blue"; hex: "#4682B4" },
+            ListElement { name: "Light Sky Blue"; hex: "#87CEFA" },
+            ListElement { name: "Sky Blue"; hex: "#87CEEB" },
+            ListElement { name: "Peacock"; hex: "#33A1C9" },
+            ListElement { name: "Light Blue"; hex: "#ADD8E6" },
+            ListElement { name: "Powder Blue"; hex: "#B0E0E6" },
+            ListElement { name: "Cadet Blue"; hex: "#5F9EA0" },
+            ListElement { name: "Cyan"; hex: "#00FFFF" }
+        ]
+    }
+}
diff --git a/examples/declarative/colorbrowser/qml/ColorDelegate.qml b/examples/declarative/colorbrowser/qml/ColorDelegate.qml
new file mode 100644
index 0000000..c123d12
--- /dev/null
+++ b/examples/declarative/colorbrowser/qml/ColorDelegate.qml
@@ -0,0 +1,114 @@
+import Qt 4.6
+
+Package {
+    Item { id: stack; Package.name: 'stack'; width: 110; height: 110; z: stack.PathView.z }
+    Item { id: list; Package.name: 'list'; width: mainWindow.width + 4; height: 110 }
+    Item { id: grid; Package.name: 'grid'; width: 110; height: 110 }
+
+    Item {
+        id: delegate
+
+        property double randomAngle: Math.random() * (2 * 8 + 1) - 8
+        property bool open: false
+
+        width: 110; height: 110; z: stack.PathView.z
+
+        Image { x: -6; y: -5; source: 'box-shadow.png'; smooth: true;  }
+        Rectangle { color: hex; anchors.fill: parent; smooth: true }
+        Image { id: box; source: 'box.png'; smooth: true; anchors.fill: parent }
+
+        Binding {
+            target: infoColorName; property: 'text'
+            value: name; when: delegate.open && list.ListView.isCurrentItem
+        }
+
+        Binding {
+            target: infoColorHex; property: 'text'
+            value: hex; when: delegate.open && list.ListView.isCurrentItem
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.RightButton | Qt.LeftButton
+            onClicked: {
+                if (wrapper.state == 'inGrid' && mouse.button == Qt.RightButton) {
+                    wrapper.state = ''
+                } else if (wrapper.state == 'inGrid') {
+                    grid.GridView.view.currentIndex = index;
+                    wrapper.state = 'fullscreen'
+                } else {
+                    grid.GridView.view.currentIndex = index;
+                    wrapper.state = 'inGrid'
+                }
+            }
+        }
+
+        states: [
+        State {
+            name: 'stacked'; when: wrapper.state == ''
+            ParentChange { target: delegate; parent: stack; x: 0; y: 0; rotation: delegate.randomAngle }
+            PropertyChanges { target: delegate; visible: stack.PathView.onPath ? 1.0 : 0.0 }
+        },
+        State {
+            name: 'inGrid'; when: wrapper.state == 'inGrid'
+            ParentChange { target: delegate; parent: grid; x: 24; y: 24 }
+            PropertyChanges { target: delegate; open: true }
+        },
+        State {
+            name: 'fullscreen'; when: wrapper.state == 'fullscreen'
+            ParentChange { target: delegate; parent: list; x: 0; y: 0; width: mainWindow.width; height: mainWindow.height }
+            PropertyChanges { target: box; opacity: 0 }
+            PropertyChanges { target: delegate; open: true }
+        }
+        ]
+
+        transitions: [
+        Transition {
+            from: 'stacked'; to: 'inGrid'
+            SequentialAnimation {
+                PauseAnimation { duration: 20 * index }
+                ParentAnimation {
+                    target: delegate; via: foreground
+                    NumberAnimation { targets: delegate; properties: 'x,y,width,height,rotation'; duration: 600; easing.type: 'OutBack' }
+                }
+            }
+        },
+        Transition {
+            from: 'inGrid'; to: 'stacked'
+            ParentAnimation {
+                target: delegate; via: foreground
+                NumberAnimation { properties: 'x,y,width,height,rotation'; duration: 300; easing.type: 'InOutQuad' }
+            }
+        },
+        Transition {
+            from: 'inGrid'; to: 'fullscreen'
+            SequentialAnimation {
+                PauseAnimation { duration: grid.GridView.isCurrentItem ? 0 : 300 }
+                ParentAnimation {
+                    target: delegate; via: foreground
+                    NumberAnimation {
+                        properties: 'x,y,width,height,opacity'
+                        duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad'
+                    }
+                }
+            }
+        },
+        Transition {
+            from: 'fullscreen'; to: 'inGrid'
+            SequentialAnimation {
+                PauseAnimation { duration: grid.GridView.isCurrentItem ? 3 : 0 }
+                ParallelAnimation {
+                    ParentAnimation {
+                        target: delegate; via: foreground
+                        NumberAnimation {
+                            properties: 'x,y,width,height'
+                            duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad'
+                        }
+                    }
+                    NumberAnimation { properties: 'opacity'; duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' }
+                }
+            }
+        }
+        ]
+    }
+}
diff --git a/examples/declarative/colorbrowser/qml/box-shadow.png b/examples/declarative/colorbrowser/qml/box-shadow.png
new file mode 100644
index 0000000..3281a37
--- /dev/null
+++ b/examples/declarative/colorbrowser/qml/box-shadow.png
diff --git a/examples/declarative/colorbrowser/qml/box.png b/examples/declarative/colorbrowser/qml/box.png
new file mode 100644
index 0000000..86538aa
--- /dev/null
+++ b/examples/declarative/colorbrowser/qml/box.png
diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml
index 4692343..c35bda5 100644
--- a/examples/declarative/connections/connections.qml
+++ b/examples/declarative/connections/connections.qml
@@ -10,7 +10,7 @@ Rectangle {
     Image {
         id: image; source: "content/bg1.jpg"; anchors.centerIn: parent; transformOrigin: Item.Center
 	rotation: window.angle
-        rotation: Behavior { NumberAnimation { easing.type: "OutCubic"; duration: 300 } }
+        Behavior on rotation { NumberAnimation { easing.type: "OutCubic"; duration: 300 } }
     }
 
     Button {
diff --git a/examples/declarative/dial/content/Dial.qml b/examples/declarative/dial/content/Dial.qml
index 6fd0f39..ad4717a 100644
--- a/examples/declarative/dial/content/Dial.qml
+++ b/examples/declarative/dial/content/Dial.qml
@@ -26,7 +26,7 @@ Item {
             id: needleRotation
             origin.x: 7; origin.y: 65
             angle: -130
-            angle: SpringFollow {
+            SpringFollow on angle {
                 spring: 1.4
                 damping: .15
                 source: Math.min(Math.max(-130, root.value*2.6 - 130), 133)
diff --git a/examples/declarative/dynamic/qml/Sun.qml b/examples/declarative/dynamic/qml/Sun.qml
index 796a370..81b6e9b 100644
--- a/examples/declarative/dynamic/qml/Sun.qml
+++ b/examples/declarative/dynamic/qml/Sun.qml
@@ -11,14 +11,14 @@ Image {
 
     //x and y get set when instantiated
     //head offscreen
-    y: NumberAnimation {
-        to: parent.height;
-        duration: 10000;
+    NumberAnimation on y {
+        to: window.height / 2;
         running: created
+        onRunningChanged: if (running) duration = (window.height - sun.y) * 10; else state = "OffScreen";
     }
 
     states: State {
-        name: "OffScreen"; when: created && y > window.height / 2;//Below the ground
+        name: "OffScreen";
         StateChangeScript { script: { sun.created = false; sun.destroy() } }
     }
 }
diff --git a/examples/declarative/effects/effects.qml b/examples/declarative/effects/effects.qml
index 0674433..997d7de 100644
--- a/examples/declarative/effects/effects.qml
+++ b/examples/declarative/effects/effects.qml
@@ -11,7 +11,7 @@ Rectangle {
         source: "pic.png"
 
         effect: Blur {
-            blurRadius: NumberAnimation {
+            NumberAnimation on blurRadius {
                 id: blurEffect
                 running: false
                 from: 0; to: 10
@@ -33,7 +33,7 @@ Rectangle {
         effect: DropShadow {
             blurRadius: 3
             offset.x: 3
-            offset.y: NumberAnimation { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; repeat: true; }
+            NumberAnimation on offset.y { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; repeat: true; }
         }
 
         MouseArea { anchors.fill: parent; onClicked: dropShadowEffect.running = !dropShadowEffect.running }
diff --git a/examples/declarative/fillmode/fillmode.qml b/examples/declarative/fillmode/fillmode.qml
index ec3717f..ab0f81c 100644
--- a/examples/declarative/fillmode/fillmode.qml
+++ b/examples/declarative/fillmode/fillmode.qml
@@ -4,7 +4,7 @@ Image {
     width: 400
     height: 250
     source: "face.png"
-    fillMode: SequentialAnimation {
+    SequentialAnimation on fillMode {
         repeat: true
         PropertyAction { value: Image.Stretch }
         PropertyAction { target: label; property: "text"; value: "Stretch" }
diff --git a/examples/declarative/focusscope/test5.qml b/examples/declarative/focusscope/test5.qml
new file mode 100644
index 0000000..da98350
--- /dev/null
+++ b/examples/declarative/focusscope/test5.qml
@@ -0,0 +1,83 @@
+import Qt 4.6
+
+Rectangle {
+    color: "white"
+    width: 800
+    height: 600
+
+    Keys.onReturnPressed: console.log("Error - Root")
+
+    FocusScope {
+        id: myScope
+        focus: true
+
+        Keys.onReturnPressed: console.log("Error - FocusScope")
+
+        Rectangle {
+            height: 120
+            width: 420
+
+            color: "transparent"
+            border.width: 5
+            border.color: myScope.wantsFocus?"blue":"black"
+
+            Rectangle {
+                x: 10; y: 10
+                width: 100; height: 100; color: "green"
+                border.width: 5
+                border.color: item1.wantsFocus?"blue":"black"
+            }
+
+            TextEdit {
+                id: item1
+                x: 20; y: 20
+                width: 90; height: 90
+                color: "white"
+                font.pixelSize: 20
+                Keys.onReturnPressed: console.log("Top Left");
+                KeyNavigation.right: item2
+                focus: true
+                wrap: true
+                text: "Box 1"
+            }
+
+            Rectangle {
+                id: item2
+                x: 310; y: 10
+                width: 100; height: 100; color: "green"
+                border.width: 5
+                border.color: wantsFocus?"blue":"black"
+                KeyNavigation.left: item1
+                Keys.onReturnPressed: console.log("Top Right");
+
+                Rectangle {
+                    width: 50; height: 50; anchors.centerIn: parent
+                    color: parent.focus?"red":"transparent"
+                }
+            }
+        }
+        KeyNavigation.down: item3
+    }
+
+    Text { x:100; y:170; text: "Blue border indicates scoped focus\nBlack border indicates NOT scoped focus\nRed box or flashing cursor indicates active focus\nUse arrow keys to navigate\nPress Ctrl-Return to print currently focused item" }
+
+    Rectangle {
+        x: 10; y: 300
+        width: 100; height: 100; color: "green"
+        border.width: 5
+        border.color: item3.wantsFocus?"blue":"black"
+    }
+
+    TextEdit {
+        id: item3
+        x: 20; y: 310
+        width: 90; height: 90
+        color: "white"
+        font.pixelSize: 20
+        text: "Box 3"
+
+        Keys.onReturnPressed: console.log("Bottom Left");
+        KeyNavigation.up: myScope
+        wrap: true
+    }
+}
diff --git a/examples/declarative/fonts/banner.qml b/examples/declarative/fonts/banner.qml
index 00b8660..7989f80 100644
--- a/examples/declarative/fonts/banner.qml
+++ b/examples/declarative/fonts/banner.qml
@@ -10,7 +10,7 @@ Rectangle {
 
     Row {
         y: -screen.height / 4.5
-        x: NumberAnimation { from: 0; to: -text.width; duration: 6000; repeat: true }
+        NumberAnimation on x { from: 0; to: -text.width; duration: 6000; repeat: true }
         Text { id: text; font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text }
         Text { font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text }
         Text { font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text }
diff --git a/examples/declarative/fonts/hello.qml b/examples/declarative/fonts/hello.qml
index fcc9580..334409e 100644
--- a/examples/declarative/fonts/hello.qml
+++ b/examples/declarative/fonts/hello.qml
@@ -9,7 +9,7 @@ Rectangle {
             id: text; color: "white"; anchors.centerIn: parent
             text: "Hello world!"; font.pixelSize: 60
 
-            font.letterSpacing: SequentialAnimation {
+            SequentialAnimation on font.letterSpacing {
                 repeat: true;
                 NumberAnimation { from: 100; to: 300; easing.type: "InQuad"; duration: 3000 }
                 ScriptAction { script: {
@@ -17,7 +17,7 @@ Rectangle {
                     container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
                 } }
             }
-            opacity: SequentialAnimation {
+            SequentialAnimation on opacity {
                 repeat: true;
                 NumberAnimation { from: 1; to: 0; duration: 2600 }
                 PauseAnimation { duration: 400 }
diff --git a/examples/declarative/imageprovider/ImageProviderCore/qmldir b/examples/declarative/imageprovider/ImageProviderCore/qmldir
new file mode 100644
index 0000000..1028590
--- /dev/null
+++ b/examples/declarative/imageprovider/ImageProviderCore/qmldir
@@ -0,0 +1,2 @@
+plugin imageprovider
+
diff --git a/examples/declarative/imageprovider/main.cpp b/examples/declarative/imageprovider/imageprovider.cpp
index d9d4c1a..253dbf5 100644
--- a/examples/declarative/imageprovider/main.cpp
+++ b/examples/declarative/imageprovider/imageprovider.cpp
@@ -39,7 +39,8 @@
 **
 ****************************************************************************/
 
-#include <QApplication>
+
+#include <qdeclarativeextensionplugin.h>
 
 #include <qdeclarativeengine.h>
 #include <qdeclarativecontext.h>
@@ -70,29 +71,37 @@ public:
     }
 };
 
-int main(int argc, char ** argv)
+
+class ImageProviderExtensionPlugin : public QDeclarativeExtensionPlugin
 {
-    QApplication app(argc, argv);
+    Q_OBJECT
+public:
+    void registerTypes(const char *uri) {
+        Q_UNUSED(uri);
+
+    }
 
-    QDeclarativeView view;
+    void initializeEngine(QDeclarativeEngine *engine, const char *uri) {
+        Q_UNUSED(uri);
 
-    view.engine()->addImageProvider("colors", new ColorImageProvider);
+        engine->addImageProvider("colors", new ColorImageProvider);
 
-    QStringList dataList;
-    dataList.append("image://colors/red");
-    dataList.append("image://colors/green");
-    dataList.append("image://colors/blue");
-    dataList.append("image://colors/brown");
-    dataList.append("image://colors/orange");
-    dataList.append("image://colors/purple");
-    dataList.append("image://colors/yellow");
+        QStringList dataList;
+        dataList.append("image://colors/red");
+        dataList.append("image://colors/green");
+        dataList.append("image://colors/blue");
+        dataList.append("image://colors/brown");
+        dataList.append("image://colors/orange");
+        dataList.append("image://colors/purple");
+        dataList.append("image://colors/yellow");
 
-    QDeclarativeContext *ctxt = view.rootContext();
-    ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));
+        QDeclarativeContext *ctxt = engine->rootContext();
+        ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));
+    }
 
-    view.setSource(QUrl("qrc:view.qml"));
-    view.show();
+};
+
+#include "imageprovider.moc"
+
+Q_EXPORT_PLUGIN(ImageProviderExtensionPlugin);
 
-    return app.exec();
-}
-//![0]
diff --git a/examples/declarative/imageprovider/imageprovider.pro b/examples/declarative/imageprovider/imageprovider.pro
index 60423ab..e403bf8 100644
--- a/examples/declarative/imageprovider/imageprovider.pro
+++ b/examples/declarative/imageprovider/imageprovider.pro
@@ -1,9 +1,11 @@
-TEMPLATE = app
-TARGET = imageprovider
-DEPENDPATH += .
-INCLUDEPATH += .
+TEMPLATE = lib
+TARGET  = imageprovider
 QT += declarative
+CONFIG += qt plugin
+
+TARGET = $$qtLibraryTarget($$TARGET)
+DESTDIR = ImageProviderCore
 
 # Input
-SOURCES += main.cpp
-RESOURCES += imageprovider.qrc
+SOURCES += imageprovider.cpp
+
diff --git a/examples/declarative/imageprovider/view.qml b/examples/declarative/imageprovider/imageprovider.qml
index 2ab729d..f899b1e 100644
--- a/examples/declarative/imageprovider/view.qml
+++ b/examples/declarative/imageprovider/imageprovider.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import "ImageProviderCore" 
 //![0]
 ListView {
     width: 100
diff --git a/examples/declarative/imageprovider/imageprovider.qrc b/examples/declarative/imageprovider/imageprovider.qrc
deleted file mode 100644
index 17e9301..0000000
--- a/examples/declarative/imageprovider/imageprovider.qrc
+++ /dev/null
@@ -1,5 +0,0 @@
-<!DOCTYPE RCC><RCC version="1.0">
-<qresource>
-    <file>view.qml</file>
-</qresource>
-</RCC>
diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml
index accd969..4b2a3f8 100644
--- a/examples/declarative/layouts/layouts.qml
+++ b/examples/declarative/layouts/layouts.qml
@@ -1,5 +1,5 @@
 import Qt 4.6
-
+import Qt.widgets 4.6
 Item {
     id: resizable
     width:400
diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml
index 7146702..bce53bd 100644
--- a/examples/declarative/layouts/positioners.qml
+++ b/examples/declarative/layouts/positioners.qml
@@ -21,11 +21,11 @@ Rectangle {
         }
         Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
     }
@@ -45,11 +45,11 @@ Rectangle {
         }
         Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
         Rectangle { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
     }
@@ -113,15 +113,15 @@ Rectangle {
 
         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueG2; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueG3; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
         Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
@@ -147,15 +147,15 @@ Rectangle {
         }
         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueF1; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueF2; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
         Rectangle { id: blueF3; color: "lightsteelblue"; width: 40; height: 50; border.color: "black"; radius: 15 
-            opacity: Behavior{NumberAnimation{}}
+            Behavior on opacity {NumberAnimation{}}
         }
         Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 }
     }
diff --git a/examples/declarative/listview/content/ClickAutoRepeating.qml b/examples/declarative/listview/content/ClickAutoRepeating.qml
index 0850f4e..5240e65 100644
--- a/examples/declarative/listview/content/ClickAutoRepeating.qml
+++ b/examples/declarative/listview/content/ClickAutoRepeating.qml
@@ -10,7 +10,7 @@ Item {
     signal released
     signal clicked
 
-    isPressed: SequentialAnimation {
+    SequentialAnimation on isPressed {
         running: false
         id: autoRepeat
         PropertyAction { target: page; property: "isPressed"; value: true }
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index be1f62d..5e4911d 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -44,7 +44,7 @@ Rectangle {
         id: petHighlight
         Rectangle {
             width: 200; height: 50; color: "#FFFF88"
-            y: SpringFollow { source: list1.currentItem.y; spring: 3; damping: 0.1 }
+            SpringFollow on y { source: list1.currentItem.y; spring: 3; damping: 0.1 }
         }
     }
     ListView {
diff --git a/examples/declarative/package/Delegate.qml b/examples/declarative/package/Delegate.qml
index 4109633..f35314f 100644
--- a/examples/declarative/package/Delegate.qml
+++ b/examples/declarative/package/Delegate.qml
@@ -2,24 +2,26 @@ import Qt 4.6
 
 //![0]
 Package {
-    Text { id: listDelegate; width: 200; height: 25; text: "Empty"; Package.name: "list" }
-    Text { id: gridDelegate; width: 100; height: 50; text: "Empty"; Package.name: "grid" }
+    Text { id: listDelegate; width: 200; height: 25; text: 'Empty'; Package.name: 'list' }
+    Text { id: gridDelegate; width: 100; height: 50; text: 'Empty'; Package.name: 'grid' }
 
     Rectangle {
         id: wrapper
         width: 200; height: 25
-        color: "lightsteelblue"
+        color: 'lightsteelblue'
+
         Text { text: display; anchors.centerIn: parent }
-        MouseRegion {
+        MouseArea {
             anchors.fill: parent
             onClicked: {
-                if (wrapper.state == "inList")
-                    wrapper.state = "inGrid";
+                if (wrapper.state == 'inList')
+                    wrapper.state = 'inGrid';
                 else
-                    wrapper.state = "inList";
+                    wrapper.state = 'inList';
             }
         }
-        state: "inList"
+
+        state: 'inList'
         states: [
             State {
                 name: 'inList'
@@ -27,15 +29,17 @@ Package {
             },
             State {
                 name: 'inGrid'
-                ParentChange { target: wrapper; parent: gridDelegate }
-                PropertyChanges { target: wrapper; x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height }
+                ParentChange {
+                    target: wrapper; parent: gridDelegate
+                    x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height
+                }
             }
         ]
+
         transitions: [
             Transition {
-                SequentialAnimation {
-                    ParentAction { target: wrapper }
-                    NumberAnimation { targets: wrapper; properties: 'x,y,width,height'; duration: 300 }
+                ParentAnimation {
+                    NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
                 }
             }
         ]
diff --git a/examples/declarative/parallax/qml/ParallaxView.qml b/examples/declarative/parallax/qml/ParallaxView.qml
index 5e58100..08193ae 100644
--- a/examples/declarative/parallax/qml/ParallaxView.qml
+++ b/examples/declarative/parallax/qml/ParallaxView.qml
@@ -25,6 +25,7 @@ Item {
         anchors.fill: parent
         model: VisualItemModel { id: visualModel }
 
+        highlightRangeMode: ListView.StrictlyEnforceRange
         snapMode: ListView.SnapOneItem
     }
 
diff --git a/examples/declarative/parallax/qml/Smiley.qml b/examples/declarative/parallax/qml/Smiley.qml
index 81eadda..4442d5e 100644
--- a/examples/declarative/parallax/qml/Smiley.qml
+++ b/examples/declarative/parallax/qml/Smiley.qml
@@ -24,7 +24,7 @@ Item {
 
         // Animate the y property. Setting repeat to true makes the
         // animation repeat indefinitely, otherwise it would only run once.
-        y: SequentialAnimation {
+        SequentialAnimation  on y {
             repeat: true
 
             // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml
index bfc801c..65c80b2 100644
--- a/examples/declarative/progressbar/content/ProgressBar.qml
+++ b/examples/declarative/progressbar/content/ProgressBar.qml
@@ -21,7 +21,7 @@ Item {
         id: highlight; radius: 1
         anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom
         anchors.leftMargin: 3; anchors.topMargin: 3; anchors.bottomMargin: 3
-        width: EaseFollow { source: highlight.widthDest; velocity: 1200 }
+        EaseFollow on width { source: highlight.widthDest; velocity: 1200 }
         gradient: Gradient {
             GradientStop { id: g1; position: 0.0 }
             GradientStop { id: g2; position: 1.0 }
diff --git a/examples/declarative/progressbar/progressbars.qml b/examples/declarative/progressbar/progressbars.qml
index 6530c3d..a66d544 100644
--- a/examples/declarative/progressbar/progressbars.qml
+++ b/examples/declarative/progressbar/progressbars.qml
@@ -14,9 +14,9 @@ Rectangle {
                 ProgressBar {
                     property int r: Math.floor(Math.random() * 5000 + 1000)
                     width: main.width - 20
-                    value: NumberAnimation { duration: r; from: 0; to: 100; repeat: true }
-                    color: ColorAnimation { duration: r; from: "lightsteelblue"; to: "thistle"; repeat: true }
-                    secondColor: ColorAnimation { duration: r; from: "steelblue"; to: "#CD96CD"; repeat: true }
+                    NumberAnimation on value { duration: r; from: 0; to: 100; repeat: true }
+                    ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; repeat: true }
+                    ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; repeat: true }
                 }
             }
         }
diff --git a/examples/declarative/snow/ImageBatch.qml b/examples/declarative/snow/ImageBatch.qml
deleted file mode 100644
index c2a2674..0000000
--- a/examples/declarative/snow/ImageBatch.qml
+++ /dev/null
@@ -1,72 +0,0 @@
-import Qt 4.6
-
-GridView {
-    id: grid
-    property int offset: 0
-    property var ref
-    property bool isSelected: ref.selectedItemColumn >= offset && ref.selectedItemColumn < offset + 5
-
-    currentIndex: (ref.selectedItemColumn  - offset) + ref.selectedItemRow * 5
-
-    property int imageWidth: ref.imageWidth
-    property int imageHeight: ref.imageHeight
-
-    width: 5 * imageWidth
-    height: 4 * imageHeight
-    cellWidth: imageWidth
-    cellHeight: imageHeight
-
-    states: State {
-        name: "selected"; when: grid.isSelected
-        PropertyChanges { target: grid; z: 150 }
-    }
-    transitions: Transition {
-        SequentialAnimation {
-            PauseAnimation { duration: 150 }
-            PropertyAction { properties: "z" }
-        }
-    }
-    model: XmlListModel {
-        property string tags : ""
-        source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2"
-        query: "/rss/channel/item"
-        namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
-
-        XmlRole { name: "url"; query: "media:content/@url/string()" }
-    }
-
-    delegate: Item {
-        id: root
-        property bool isSelected: GridView.isCurrentItem && grid.isSelected
-        transformOrigin: Item.Center
-        width: grid.imageWidth; height: grid.imageHeight;
-
-        Image { id: flickrImage; source: url; fillMode: Image.PreserveAspectFit; smooth: true; anchors.fill: parent;
-                opacity: (status == Image.Ready)?1:0; opacity: Behavior { NumberAnimation { } } }
-        Loading { anchors.centerIn: parent; visible: flickrImage.status!=1 }
-
-        states: State {
-            name: "selected"
-            when: root.isSelected
-            PropertyChanges { target: root; scale: 3; z: 100 }
-        }
-        transitions: [
-            Transition {
-                to: "selected"
-                SequentialAnimation {
-                    PauseAnimation { duration: 150 }
-                    PropertyAction { properties: "z" }
-                    NumberAnimation { properties: "scale"; duration: 150; }
-                }
-            },
-            Transition {
-                from: "selected"
-                SequentialAnimation {
-                    NumberAnimation { properties: "scale"; duration: 150 }
-                    PropertyAction { properties: "z" }
-                }
-            }
-        ]
-    }
-}
-
diff --git a/examples/declarative/snow/Loading.qml b/examples/declarative/snow/Loading.qml
deleted file mode 100644
index 238d9c7..0000000
--- a/examples/declarative/snow/Loading.qml
+++ /dev/null
@@ -1,8 +0,0 @@
-import Qt 4.6
-
-Image {
-    id: loading; source: "pics/loading.png"; transformOrigin: Item.Center
-    rotation: NumberAnimation {
-        id: rotationAnimation; from: 0; to: 360; running: loading.visible == true; repeat: true; duration: 900
-    }
-}
diff --git a/examples/declarative/snow/create.js b/examples/declarative/snow/create.js
deleted file mode 100644
index 2bdae4a..0000000
--- a/examples/declarative/snow/create.js
+++ /dev/null
@@ -1,12 +0,0 @@
-var myComponent = null;
-
-function createNewBlock() {
-    if (myComponent == null)
-        myComponent = createComponent("ImageBatch.qml");
-
-    var obj = myComponent.createObject();
-    obj.parent = layout;
-    obj.offset = maximumColumn + 1;
-    obj.ref = imagePanel;
-    maximumColumn += 5;
-}
diff --git a/examples/declarative/snow/pics/loading.png b/examples/declarative/snow/pics/loading.png
deleted file mode 100644
index 0296cfe..0000000
--- a/examples/declarative/snow/pics/loading.png
+++ /dev/null
diff --git a/examples/declarative/snow/snow.qml b/examples/declarative/snow/snow.qml
deleted file mode 100644
index 39c9c43..0000000
--- a/examples/declarative/snow/snow.qml
+++ /dev/null
@@ -1,69 +0,0 @@
-import Qt 4.6
-
-Rectangle {
-    id: imagePanel
-    width: 1024
-    height: 768
-    color: "black"
-
-    property int maximumColumn: 4
-    property int selectedItemRow: 0
-    property int selectedItemColumn: 0
-
-    Script { source: "create.js" }
-
-    onSelectedItemColumnChanged: if (selectedItemColumn == maximumColumn) createNewBlock();
-
-    property int imageWidth: 200
-    property int imageHeight: 200
-
-    property int selectedX: selectedItemColumn * imageWidth
-    property int selectedY: selectedItemRow * imageHeight
-
-    Item {
-        anchors.centerIn: parent
-        Row {
-            id: layout
-            property real targetX: -(selectedX + imageWidth / 2)
-
-            property real targetDeform: 0
-            property bool slowDeform: true
-
-            property real deform: 0
-            deform: SpringFollow {
-                id: deformFollow; source: layout.targetDeform; velocity: layout.slowDeform?0.1:2
-                onSyncChanged: if(inSync) { layout.slowDeform = true; layout.targetDeform = 0; }
-            }
-
-            ImageBatch { offset: 0; ref: imagePanel }
-
-            x: SpringFollow { source: layout.targetX; velocity: 1000 }
-            y: SpringFollow { source: -(selectedY + imageHeight / 2); velocity: 500 }
-        }
-
-        transform: Rotation {
-            axis.y: 1; axis.z: 0
-            angle: layout.deform * -100
-        }
-    }
-
-    Script {
-        function left() {
-            if (selectedItemColumn <= 0) return;
-            selectedItemColumn -= 1;
-            layout.slowDeform = false;
-            layout.targetDeform = Math.max(Math.min(layout.deform - 0.1, -0.1), -0.4);
-        }
-        function right() {
-            selectedItemColumn += 1;
-            layout.slowDeform = false;
-            layout.targetDeform = Math.min(Math.max(layout.deform + 0.1, 0.1), 0.4);
-        }
-    }
-
-    focus: true
-    Keys.onLeftPressed: "left()"
-    Keys.onRightPressed: "right()"
-    Keys.onUpPressed: "if (selectedItemRow > 0) selectedItemRow = selectedItemRow - 1"
-    Keys.onDownPressed: "if (selectedItemRow < 3) selectedItemRow = selectedItemRow + 1"
-}
diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
index 9d35832..36178ec 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
@@ -14,7 +14,7 @@ Rectangle {
     signal closed();
     color: "white"; border.width: 1; width: myText.width + 20; height: 60;
     opacity: 0
-    opacity: Behavior { 
+    Behavior on opacity { 
         NumberAnimation { duration: 1000 }
     }
     Text { id: myText; anchors.centerIn: parent; text: "Hello World!" }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
index 85c2c93..9ef455a 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
@@ -8,8 +8,8 @@ Item { id:block
     property int targetX: 0
     property int targetY: 0
 
-    x: SpringFollow { enabled: spawned; source: targetX; spring: 2; damping: 0.2 }
-    y: SpringFollow { source: targetY; spring: 2; damping: 0.2 }
+    SpringFollow on x { enabled: spawned; source: targetX; spring: 2; damping: 0.2 }
+    SpringFollow on y { source: targetY; spring: 2; damping: 0.2 }
     //![1]
 
     //![2]
@@ -24,7 +24,7 @@ Item { id:block
             }
         }
         opacity: 0
-        opacity: Behavior { NumberAnimation { properties:"opacity"; duration: 200 } }
+        Behavior on opacity { NumberAnimation { properties:"opacity"; duration: 200 } }
         anchors.fill: parent
     }
     //![2]
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
index ed9fd32..831c03b 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
@@ -13,7 +13,7 @@ Rectangle {
     signal closed();
     color: "white"; border.width: 1; width: myText.width + 20; height: 60;
     opacity: 0
-    opacity: Behavior { 
+    Behavior on opacity { 
         NumberAnimation { duration: 1000 }
     }
     Text { id: myText; anchors.centerIn: parent; text: "Hello World!" }
diff --git a/examples/declarative/tvtennis/tvtennis.qml b/examples/declarative/tvtennis/tvtennis.qml
index 4bd5319..6022a15 100644
--- a/examples/declarative/tvtennis/tvtennis.qml
+++ b/examples/declarative/tvtennis/tvtennis.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import Qt.multimedia 4.7
 
 Rectangle {
     id: page
@@ -15,27 +16,30 @@ Rectangle {
         color: "Lime"
         x: 20; width: 20; height: 20; z: 1
 
+        SoundEffect { id: paddle; source: "paddle.wav" }
+        SoundEffect { id: wall; source: "click.wav" }
+
         // Move the ball to the right and back to the left repeatedly
-        x: SequentialAnimation {
+        SequentialAnimation on x {
             repeat: true
             NumberAnimation { to: page.width - 40; duration: 2000 }
-            ScriptAction { script: Qt.playSound('paddle.wav') }
+            ScriptAction { script: paddle.play() }
             PropertyAction { target: ball; property: "direction"; value: "left" }
             NumberAnimation { to: 20; duration: 2000 }
-            ScriptAction { script: Qt.playSound('paddle.wav') }
+            ScriptAction { script: paddle.play() }
             PropertyAction { target: ball; property: "direction"; value: "right" }
         }
 
         // Make y follow the target y coordinate, with a velocity of 200
-        y: SpringFollow { source: ball.targetY; velocity: 200 }
+        SpringFollow on y { source: ball.targetY; velocity: 200 }
 
         // Detect the ball hitting the top or bottom of the view and bounce it
         onYChanged: {
             if (y <= 0) {
-                Qt.playSound('click.wav');
+                wall.play();
                 targetY = page.height - 20;
             } else if (y >= page.height - 20) {
-                Qt.playSound('click.wav');
+                wall.play();
                 targetY = 0;
             }
         }
@@ -47,7 +51,7 @@ Rectangle {
         id: leftBat
         color: "Lime"
         x: 2; width: 20; height: 90
-        y: SpringFollow {
+        SpringFollow on y {
             source: ball.y - 45; velocity: 300
             enabled: ball.direction == 'left'
         }
@@ -56,7 +60,7 @@ Rectangle {
         id: rightBat
         color: "Lime"
         x: page.width - 22; width: 20; height: 90
-        y: SpringFollow {
+        SpringFollow on y {
             source: ball.y-45; velocity: 300
             enabled: ball.direction == 'right'
         }
diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index c39f99b..7424f60 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -24,7 +24,7 @@ Rectangle {
             id: stickyPage
             x: Math.random() * 200 + 100
             y: Math.random() * 300 + 50
-            rotation: SpringFollow {
+            SpringFollow on rotation {
                 source: -flickable.horizontalVelocity / 100
                 spring: 2.0; damping: 0.1
             }
diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml
index 74c6844..3c00ee6 100644
--- a/examples/declarative/webview/autosize.qml
+++ b/examples/declarative/webview/autosize.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import org.webkit 1.0
 
 // The WebView size is determined by the width, height,
 // preferredWidth, and preferredHeight properties.
diff --git a/examples/declarative/webview/content/FieldText.qml b/examples/declarative/webview/content/FieldText.qml
index 19b6acc..d282209 100644
--- a/examples/declarative/webview/content/FieldText.qml
+++ b/examples/declarative/webview/content/FieldText.qml
@@ -85,7 +85,7 @@ Item {
         font.bold: true
         text: label
         opacity: textEdit.text == '' ? 1 : 0
-        opacity: Behavior {
+        Behavior on opacity {
             NumberAnimation {
                 property: "opacity"
                 duration: 250
diff --git a/examples/declarative/webview/content/Mapping/Map.qml b/examples/declarative/webview/content/Mapping/Map.qml
index 2e98940..6c3b021 100644
--- a/examples/declarative/webview/content/Mapping/Map.qml
+++ b/examples/declarative/webview/content/Mapping/Map.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import org.webkit 1.0
 
 Item {
     id: page
diff --git a/examples/declarative/webview/evalandattach.qml b/examples/declarative/webview/evalandattach.qml
index 94301cd..d219d84 100644
--- a/examples/declarative/webview/evalandattach.qml
+++ b/examples/declarative/webview/evalandattach.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import org.webkit 1.0
 
 Item {
     height: 640
diff --git a/examples/declarative/webview/googleMaps.qml b/examples/declarative/webview/googleMaps.qml
index 1886961..a04fecb 100644
--- a/examples/declarative/webview/googleMaps.qml
+++ b/examples/declarative/webview/googleMaps.qml
@@ -6,6 +6,7 @@
 // order to create a Map.
 
 import Qt 4.6
+import org.webkit 1.0
 import "content/Mapping"
 
 Map {
diff --git a/examples/declarative/webview/inline-html.qml b/examples/declarative/webview/inline-html.qml
index 23b4555..41dfec3 100644
--- a/examples/declarative/webview/inline-html.qml
+++ b/examples/declarative/webview/inline-html.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import org.webkit 1.0
 
 // Inline HTML with loose formatting can be
 // set on the html property.
diff --git a/examples/declarative/webview/newwindows.qml b/examples/declarative/webview/newwindows.qml
index 5dd4cd5..c62aba6 100644
--- a/examples/declarative/webview/newwindows.qml
+++ b/examples/declarative/webview/newwindows.qml
@@ -4,6 +4,7 @@
 // allow it on WebView with settings.javascriptCanOpenWindows: true
 
 import Qt 4.6
+import org.webkit 1.0
 
 Grid {
     columns: 3
diff --git a/examples/declarative/webview/qdeclarative-in-html.qml b/examples/declarative/webview/qdeclarative-in-html.qml
index 77180ec..172ea4b 100644
--- a/examples/declarative/webview/qdeclarative-in-html.qml
+++ b/examples/declarative/webview/qdeclarative-in-html.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import org.webkit 1.0
 
 // The WebView supports QML data through the HTML OBJECT tag
 Rectangle {
diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml
index 9332f3e..5530819 100644
--- a/examples/declarative/webview/transparent.qml
+++ b/examples/declarative/webview/transparent.qml
@@ -1,4 +1,5 @@
 import Qt 4.6
+import org.webkit 1.0
 
 // The WebView background is transparent
 // if the HTML does not specify a background
diff --git a/examples/declarative/workerlistmodel/dataloader.js b/examples/declarative/workerlistmodel/dataloader.js
new file mode 100644
index 0000000..eac7478
--- /dev/null
+++ b/examples/declarative/workerlistmodel/dataloader.js
@@ -0,0 +1,14 @@
+// ![0]
+WorkerScript.onMessage = function(msg) {
+    console.log("Worker told to", msg.action);
+
+    if (msg.action == 'appendCurrentTime') {
+        var data = {'time': new Date().toTimeString()};
+        msg.model.append(data);
+        msg.model.sync();   // updates the changes to the list
+
+        var msgToSend = {'msg': 'Model updated!'};
+        WorkerScript.sendMessage(msgToSend);
+    }
+}
+// ![0]
diff --git a/examples/declarative/workerlistmodel/timedisplay.qml b/examples/declarative/workerlistmodel/timedisplay.qml
new file mode 100644
index 0000000..3bf2630
--- /dev/null
+++ b/examples/declarative/workerlistmodel/timedisplay.qml
@@ -0,0 +1,33 @@
+// ![0]
+import Qt 4.6
+
+ListView {
+    width: 200
+    height: 300
+
+    model: listModel
+    delegate: Component {
+        Text { text: time }
+    }
+
+    WorkerListModel { id: listModel }
+
+    WorkerScript {
+        id: worker
+        source: "dataloader.js"
+        onMessage: {
+            console.log("Worker said", messageObject.msg);
+        }
+    }
+
+    Timer {
+        id: timer
+        interval: 2000; repeat: true; running: true; triggeredOnStart: true
+
+        onTriggered: {
+            var msg = {'action': 'appendCurrentTime', 'model': listModel};
+            worker.sendMessage(msg);
+        }
+    }
+}
+// ![0]