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: (71 commits)
  Add QML documentation for validators
  Updates to the module documentation
  Fix minor typo in docs
  Revert "qdeclarativefocusscope works fine as a parallel test"
  qdeclarativefocusscope works fine as a parallel test
  Reduce warnings at shutdown
  Image with PreserveAspect enabled with either width or height defined should implicitly update the undefined axis to follow the aspect ratio
  Fix GridView.onRemove animation in photoviewer.
  Reduce warnings at shutdown
  Fix QT_NO_DESKTOPSERVICES
  Compiled bindings should not print warnings where normal bindings don't
  Update references links
  Move example code into separate files to make sure they compile
  Include qvariant.h as a convenience as context properties
  Merged 'orientation' into 'runtime' context property in qmlruntime
  Add 'runtime' property to the rootContext of DeclarativeViewer
  Temporarily disable tests that require compilation
  Fix qdeclarativedom test
  Further improve failure output
  Doc: more mention of using QUrl::fromLocalFile() for URLs on local filesystem
  ...

73 files changed, 1184 insertions, 681 deletions

diff --git a/examples/declarative/behaviors/SideRect.qml b/examples/declarative/behaviors/SideRect.qml
index d06f73c..d32bd7b 100644
--- a/examples/declarative/behaviors/SideRect.qml
+++ b/examples/declarative/behaviors/SideRect.qml
@@ -5,12 +5,18 @@ Rectangle {
 
     property string text
 
-    width: 75; height: 50; radius: 6
-    color: "#646464"; border.width: 4; border.color: "white"
+    width: 75; height: 50
+    radius: 6
+    color: "#646464"
+    border.width: 4; border.color: "white"
 
     MouseArea {
         anchors.fill: parent
         hoverEnabled: true
-        onEntered: { focusRect.x = myRect.x; focusRect.y = myRect.y; focusRect.text = myRect.text }
+        onEntered: {
+            focusRect.x = myRect.x; 
+            focusRect.y = myRect.y; 
+            focusRect.text = myRect.text;
+        }
     }
 }
diff --git a/examples/declarative/behaviors/behavior-example.qml b/examples/declarative/behaviors/behavior-example.qml
index b21f4f0..b7bae6c 100644
--- a/examples/declarative/behaviors/behavior-example.qml
+++ b/examples/declarative/behaviors/behavior-example.qml
@@ -1,40 +1,38 @@
 import Qt 4.7
 
 Rectangle {
-    color: "#343434"
     width: 600; height: 400
+    color: "#343434"
 
     Rectangle {
         anchors.centerIn: parent
-        width: 200; height: 200; radius: 30
-        color: "transparent"; border.width: 4; border.color: "white"
+        width: 200; height: 200
+        radius: 30
+        color: "transparent"
+        border.width: 4; border.color: "white"
 
 
         SideRect {
             id: leftRect
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.left
+            anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.left }
             text: "Left"
         }
 
         SideRect {
             id: rightRect
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.right
+            anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.right }
             text: "Right"
         }
 
         SideRect {
             id: topRect
-            anchors.verticalCenter: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors { verticalCenter: parent.top; horizontalCenter: parent.horizontalCenter }
             text: "Top"
         }
 
         SideRect {
             id: bottomRect
-            anchors.verticalCenter: parent.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors { verticalCenter: parent.bottom; horizontalCenter: parent.horizontalCenter }
             text: "Bottom"
         }
 
@@ -44,9 +42,10 @@ Rectangle {
 
             property string text
 
-            color: "firebrick"
             x: 62.5; y: 75; width: 75; height: 50
-            radius: 6; border.width: 4; border.color: "white"
+            radius: 6
+            border.width: 4; border.color: "white"
+            color: "firebrick"
 
             // Setting an 'elastic' behavior on the focusRect's x property.
             Behavior on x {
@@ -62,7 +61,8 @@ Rectangle {
                 id: focusText
                 text: focusRect.text
                 anchors.centerIn: parent
-                color: "white"; font.pixelSize: 16; font.bold: true
+                color: "white"
+                font.pixelSize: 16; font.bold: true
 
                 // Setting a behavior on the focusText's x property:
                 // Set the opacity to 0, set the new text value, then set the opacity back to 1.
diff --git a/examples/declarative/border-image/animated.qml b/examples/declarative/border-image/animated.qml
index 730aeca..c3ff9ef 100644
--- a/examples/declarative/border-image/animated.qml
+++ b/examples/declarative/border-image/animated.qml
@@ -3,7 +3,6 @@ import "content"
 
 Rectangle {
     id: page
-    color: "white"
     width: 1030; height: 540
 
     MyBorderImage {
diff --git a/examples/declarative/border-image/borders.qml b/examples/declarative/border-image/borders.qml
index 8956128..3743f7e 100644
--- a/examples/declarative/border-image/borders.qml
+++ b/examples/declarative/border-image/borders.qml
@@ -2,7 +2,6 @@ import Qt 4.7
 
 Rectangle {
     id: page
-    color: "white"
     width: 520; height: 280
 
     BorderImage {
diff --git a/examples/declarative/clocks/content/Clock.qml b/examples/declarative/clocks/content/Clock.qml
index 036df46..3426e6a 100644
--- a/examples/declarative/clocks/content/Clock.qml
+++ b/examples/declarative/clocks/content/Clock.qml
@@ -14,7 +14,7 @@ Item {
     function timeChanged() {
         var date = new Date;
         hours = shift ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
-        if ( hours < 7 || hours > 19 ) night = true; else night = false
+        night = ( hours < 7 || hours > 19 )
         minutes = shift ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
         seconds = date.getUTCSeconds();
     }
@@ -74,7 +74,10 @@ Item {
     }
 
     Text {
-        id: cityLabel; font.bold: true; font.pixelSize: 14; y: 200; color: "white"
-        anchors.horizontalCenter: parent.horizontalCenter; style: Text.Raised; styleColor: "black"
+        id: cityLabel
+        y: 200; anchors.horizontalCenter: parent.horizontalCenter
+        color: "white"
+        font.bold: true; font.pixelSize: 14
+        style: Text.Raised; styleColor: "black"
     }
 }
diff --git a/examples/declarative/connections/connections-example.qml b/examples/declarative/connections/connections-example.qml
index 0b4ca45..fbef968 100644
--- a/examples/declarative/connections/connections-example.qml
+++ b/examples/declarative/connections/connections-example.qml
@@ -2,23 +2,34 @@ import Qt 4.7
 import "content"
 
 Rectangle {
-    id: window; color: "#646464"
-    width: 640; height: 480
+    id: window
 
     property int angle: 0
 
+    width: 640; height: 480
+    color: "#646464"
+
     Image {
-        id: image; source: "content/bg1.jpg"; anchors.centerIn: parent; transformOrigin: Item.Center
-	rotation: window.angle
-        Behavior on rotation { NumberAnimation { easing.type: "OutCubic"; duration: 300 } }
+        id: image
+        source: "content/bg1.jpg"
+        anchors.centerIn: parent
+        transformOrigin: Item.Center
+        rotation: window.angle
+
+        Behavior on rotation {
+            NumberAnimation { easing.type: "OutCubic"; duration: 300 }
+        }
     }
 
     Button {
-        id: leftButton; image: "content/rotate-left.png"
+        id: leftButton
+        image: "content/rotate-left.png"
         anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 10 }
     }
+
     Button {
-        id: rightButton; image: "content/rotate-right.png"
+        id: rightButton
+        image: "content/rotate-right.png"
         anchors { right: parent.right; bottom: parent.bottom; rightMargin: 10; bottomMargin: 10 }
     }
 
diff --git a/examples/declarative/dial/dial-example.qml b/examples/declarative/dial/dial-example.qml
index 1ca958a..fd899a5 100644
--- a/examples/declarative/dial/dial-example.qml
+++ b/examples/declarative/dial/dial-example.qml
@@ -6,26 +6,35 @@ Rectangle {
     width: 300; height: 300
 
     // Dial with a slider to adjust it
-    Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) }
+    Dial {
+        id: dial
+        anchors.centerIn: parent
+        value: slider.x * 100 / (container.width - 34)
+    }
 
     Rectangle {
         id: container
-        anchors.bottom: parent.bottom; anchors.bottomMargin: 10
-        anchors.left: parent.left; anchors.leftMargin: 20
-        anchors.right: parent.right; anchors.rightMargin: 20; height: 16
+        anchors { bottom: parent.bottom; left: parent.left; right: parent.right; leftMargin: 20; rightMargin: 20; bottomMargin: 10 }
+        height: 16
+
+        radius: 8
+        opacity: 0.7
+        smooth: true
         gradient: Gradient {
             GradientStop { position: 0.0; color: "gray" }
             GradientStop { position: 1.0; color: "white" }
         }
-        radius: 8; opacity: 0.7; smooth: true
+
         Rectangle {
             id: slider
             x: 1; y: 1; width: 30; height: 14
-            radius: 6; smooth: true
+            radius: 6
+            smooth: true
             gradient: Gradient {
                 GradientStop { position: 0.0; color: "#424242" }
                 GradientStop { position: 1.0; color: "black" }
             }
+
             MouseArea {
                 anchors.fill: parent
                 drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32
diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml
index 7331b3f..eea528f 100644
--- a/examples/declarative/dynamic/dynamic.qml
+++ b/examples/declarative/dynamic/dynamic.qml
@@ -60,7 +60,7 @@ Item {
         width: 480
         anchors { right: parent.right; top:parent.top; bottom: parent.bottom }
         Rectangle { //Not a child of any positioner
-            color: "white"; border.color: "black";
+            border.color: "black";
             width: toolRow.width + 4
             height: toolRow.height + 4
             x: toolboxPositioner.x + toolRow.x - 2
diff --git a/examples/declarative/effects/effects.qml b/examples/declarative/effects/effects.qml
index d325e11..feb7c69 100644
--- a/examples/declarative/effects/effects.qml
+++ b/examples/declarative/effects/effects.qml
@@ -1,9 +1,7 @@
 import Qt 4.7
 
 Rectangle {
-    color: "white"
-    width: 400
-    height: 200
+    width: 400; height: 200
 
     Image {
         id: blur
@@ -33,7 +31,14 @@ Rectangle {
         effect: DropShadow {
             blurRadius: 3
             offset.x: 3
-            NumberAnimation on offset.y { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; loops: Animation.Infinite; }
+
+            NumberAnimation on offset.y {
+                id: dropShadowEffect
+                from: 0; to: 10
+                duration: 1000
+                running: false
+                loops: Animation.Infinite
+            }
         }
 
         MouseArea { anchors.fill: parent; onClicked: dropShadowEffect.running = !dropShadowEffect.running }
diff --git a/examples/declarative/fillmode/fillmode.qml b/examples/declarative/fillmode/fillmode.qml
index 249674b..e47fc9b 100644
--- a/examples/declarative/fillmode/fillmode.qml
+++ b/examples/declarative/fillmode/fillmode.qml
@@ -4,6 +4,7 @@ Image {
     width: 400
     height: 250
     source: "face.png"
+
     SequentialAnimation on fillMode {
         loops: Animation.Infinite
         PropertyAction { value: Image.Stretch }
@@ -25,17 +26,19 @@ Image {
         PropertyAction { target: label; property: "text"; value: "TileVertically" }
         PauseAnimation { duration: 1000 }
     }
+
     Text {
         id: label
         font.pointSize: 24
         color: "blue"
         style: Text.Outline
         styleColor: "white"
-        anchors { centerIn: parent }
+        anchors.centerIn: parent
     }
+
     Rectangle {
         border.color: "black"
         color: "transparent"
-        anchors { fill: parent; rightMargin: 1; bottomMargin: 1}
+        anchors { fill: parent; rightMargin: 1; bottomMargin: 1 }
     }
 }
diff --git a/examples/declarative/flipable/flipable-example.qml b/examples/declarative/flipable/flipable-example.qml
index 171353f..4e09569 100644
--- a/examples/declarative/flipable/flipable-example.qml
+++ b/examples/declarative/flipable/flipable-example.qml
@@ -2,7 +2,9 @@ import Qt 4.7
 import "content"
 
 Rectangle {
-    id: window; width: 480; height: 320
+    id: window
+    
+    width: 480; height: 320
     color: "darkgreen"
 
     Row {
diff --git a/examples/declarative/focus/Core/ContextMenu.qml b/examples/declarative/focus/Core/ContextMenu.qml
index 56a1b3e..49a54bc 100644
--- a/examples/declarative/focus/Core/ContextMenu.qml
+++ b/examples/declarative/focus/Core/ContextMenu.qml
@@ -2,13 +2,16 @@ import Qt 4.7
 
 FocusScope {
     id: container
+
     property bool open: false
 
     Item {
         anchors.fill: parent
 
         Rectangle {
-            anchors.fill: parent; color: "#D1DBBD"; focus: true
+            anchors.fill: parent
+            color: "#D1DBBD"
+            focus: true
             Keys.onRightPressed: mainView.focus = true
         }
     }
diff --git a/examples/declarative/focus/Core/GridMenu.qml b/examples/declarative/focus/Core/GridMenu.qml
index 75f6be0..c37b17a 100644
--- a/examples/declarative/focus/Core/GridMenu.qml
+++ b/examples/declarative/focus/Core/GridMenu.qml
@@ -6,32 +6,41 @@ FocusScope {
     onWantsFocusChanged: if (wantsFocus) mainView.state = ""
 
     Rectangle {
-        clip: true; anchors.fill: parent
+        anchors.fill: parent
+        clip: true
         gradient: Gradient {
             GradientStop { position: 0.0; color: "#193441" }
             GradientStop { position: 1.0; color: Qt.darker("#193441") }
         }
 
         GridView {
-            id: gridView; cellWidth: 152; cellHeight: 152; focus: true
+            id: gridView
             x: 20; width: parent.width - 40; height: parent.height
+            cellWidth: 152; cellHeight: 152
+            focus: true
             model: 12
             KeyNavigation.down: listViews
             KeyNavigation.left: contextMenu
 
             delegate: Item {
-                id: container; width: GridView.view.cellWidth; height: GridView.view.cellHeight
+                id: container
+                width: GridView.view.cellWidth; height: GridView.view.cellHeight
 
                 Rectangle {
                     id: content
-                    color: "transparent"; smooth: true
+                    color: "transparent"
+                    smooth: true
                     anchors.centerIn: parent; width: container.width - 40; height: container.height - 40; radius: 10
+
                     Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 }
                     Image { source: "images/qt-logo.png"; anchors.centerIn: parent; smooth: true }
                 }
 
                 MouseArea {
-                    id: mouseArea; anchors.fill: parent; hoverEnabled: true
+                    id: mouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+
                     onClicked: {
                         GridView.view.currentIndex = index
                         container.focus = true
diff --git a/examples/declarative/focus/Core/ListViewDelegate.qml b/examples/declarative/focus/Core/ListViewDelegate.qml
index 35c04cf..96324d7 100644
--- a/examples/declarative/focus/Core/ListViewDelegate.qml
+++ b/examples/declarative/focus/Core/ListViewDelegate.qml
@@ -7,8 +7,11 @@ Component {
 
         Rectangle {
             id: content
-            color: "transparent"; smooth: true
-            anchors.centerIn: parent; width: container.width - 40; height: container.height - 10; radius: 10
+            anchors.centerIn: parent; width: container.width - 40; height: container.height - 10
+            color: "transparent"
+            smooth: true
+            radius: 10
+
             Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 }
             Text {
                 text: "List element " + (index + 1); color: "#193441"; font.bold: false; anchors.centerIn: parent
@@ -17,7 +20,10 @@ Component {
         }
 
         MouseArea {
-            id: mouseArea; anchors.fill: parent; hoverEnabled: true
+            id: mouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+
             onClicked: {
                 ListView.view.currentIndex = index
                 container.focus = true
diff --git a/examples/declarative/focus/Core/ListViews.qml b/examples/declarative/focus/Core/ListViews.qml
index b28cc1c..f4384c8 100644
--- a/examples/declarative/focus/Core/ListViews.qml
+++ b/examples/declarative/focus/Core/ListViews.qml
@@ -7,29 +7,43 @@ FocusScope {
 
     ListView {
         id: list1
+        y: wantsFocus ? 10 : 40; width: parent.width / 3; height: parent.height - 20
+        focus: true
+        KeyNavigation.up: gridMenu; KeyNavigation.left: contextMenu; KeyNavigation.right: list2
+        model: 10
         delegate: ListViewDelegate {}
-        y: wantsFocus ? 10 : 40; focus: true; width: parent.width / 3; height: parent.height - 20
-        model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: contextMenu; KeyNavigation.right: list2
-        Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+
+        Behavior on y {
+            NumberAnimation { duration: 600; easing.type: "OutQuint" }
+        }
     }
 
     ListView {
         id: list2
-        delegate: ListViewDelegate {}
         y: wantsFocus ? 10 : 40; x: parent.width / 3; width: parent.width / 3; height: parent.height - 20
-        model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list1; KeyNavigation.right: list3
-        Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+        KeyNavigation.up: gridMenu; KeyNavigation.left: list1; KeyNavigation.right: list3
+        model: 10
+        delegate: ListViewDelegate {}
+
+        Behavior on y {
+            NumberAnimation { duration: 600; easing.type: "OutQuint" }
+        }
     }
 
     ListView {
         id: list3
-        delegate: ListViewDelegate {}
         y: wantsFocus ? 10 : 40; x: 2 * parent.width / 3; width: parent.width / 3; height: parent.height - 20
-        model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list2
-        Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+        KeyNavigation.up: gridMenu; KeyNavigation.left: list2
+        model: 10
+        delegate: ListViewDelegate {}
+
+        Behavior on y {
+            NumberAnimation { duration: 600; easing.type: "OutQuint" }
+        }
     }
 
     Rectangle { width: parent.width; height: 1; color: "#D1DBBD" }
+
     Rectangle {
         y: 1; width: parent.width; height: 10
         gradient: Gradient {
@@ -37,6 +51,7 @@ FocusScope {
             GradientStop { position: 1.0; color: "transparent" }
         }
     }
+
     Rectangle {
         y: parent.height - 10; width: parent.width; height: 10
         gradient: Gradient {
diff --git a/examples/declarative/focus/focus.qml b/examples/declarative/focus/focus.qml
index d9b6549..22b0e50 100644
--- a/examples/declarative/focus/focus.qml
+++ b/examples/declarative/focus/focus.qml
@@ -2,19 +2,34 @@ import Qt 4.7
 import "Core"
 
 Rectangle {
-    id: window; width: 800; height: 480; color: "#3E606F"
+    id: window
+    
+    width: 800; height: 480
+    color: "#3E606F"
 
     FocusScope {
-        id: mainView; focus: true; width: parent.width; height: parent.height
+        id: mainView
+
+        width: parent.width; height: parent.height
+        focus: true
 
         GridMenu {
-            id: gridMenu; focus: true
-            width: parent.width; height: 320; interactive: parent.wantsFocus
+            id: gridMenu
+
+            width: parent.width; height: 320
+            focus: true
+            interactive: parent.wantsFocus
         }
 
-        ListViews { id: listViews; y: 320; width: parent.width; height: 320 }
+        ListViews {
+            id: listViews
+            y: 320; width: parent.width; height: 320
+        }
 
-        Rectangle { id: shade; color: "black"; opacity: 0; anchors.fill: parent }
+        Rectangle { 
+            id: shade
+            color: "black"; opacity: 0; anchors.fill: parent
+        }
 
         states: State {
             name: "showListViews"
@@ -28,7 +43,10 @@ Rectangle {
     }
 
     Image {
-        source: "Core/images/arrow.png"; rotation: 90; anchors.verticalCenter: parent.verticalCenter
+        source: "Core/images/arrow.png"
+        rotation: 90
+        anchors.verticalCenter: parent.verticalCenter
+
         MouseArea {
             anchors { fill: parent; leftMargin: -10; topMargin: -10; rightMargin: -10; bottomMargin: -10 }
             onClicked: window.state = "contextMenuOpen"
@@ -38,7 +56,8 @@ Rectangle {
     ContextMenu { id: contextMenu; x: -265; width: 260; height: parent.height }
 
     states: State {
-        name: "contextMenuOpen"; when: !mainView.wantsFocus
+        name: "contextMenuOpen"
+        when: !mainView.wantsFocus
         PropertyChanges { target: contextMenu; x: 0; open: true }
         PropertyChanges { target: mainView; x: 130 }
         PropertyChanges { target: shade; opacity: 0.25 }
diff --git a/examples/declarative/fonts/banner.qml b/examples/declarative/fonts/banner.qml
index b7f5344..353354a 100644
--- a/examples/declarative/fonts/banner.qml
+++ b/examples/declarative/fonts/banner.qml
@@ -2,14 +2,17 @@ import Qt 4.7
 
 Rectangle {
     id: screen
-    width: 640; height: 320; color: "steelblue"
 
     property int pixelSize: screen.height * 1.25
     property color textColor: "lightsteelblue"
     property string text: "Hello world! "
 
+    width: 640; height: 320
+    color: "steelblue"
+
     Row {
         y: -screen.height / 4.5
+
         NumberAnimation on x { from: 0; to: -text.width; duration: 6000; loops: Animation.Infinite }
         Text { id: 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/fonts.qml b/examples/declarative/fonts/fonts.qml
index 49c3d0a..97dd645 100644
--- a/examples/declarative/fonts/fonts.qml
+++ b/examples/declarative/fonts/fonts.qml
@@ -11,36 +11,43 @@ Rectangle {
     FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }
 
     Column {
-        anchors.fill: parent; spacing: 15
-        anchors.leftMargin: 10; anchors.rightMargin: 10
+        anchors { fill: parent; leftMargin: 10; rightMargin: 10 }
+        spacing: 15
+
         Text {
-            text: myText; color: "lightsteelblue"
-            width: parent.width; elide: Text.ElideRight
-            font.family: "Times"; font.pointSize: 42
+            text: myText
+            color: "lightsteelblue"
+            width: parent.width
+            elide: Text.ElideRight
+            font.family: "Times"; font.pointSize: 42 
         }
         Text {
-            text: myText; color: "lightsteelblue"
-            width: parent.width; elide: Text.ElideLeft
-            font.family: "Times"; font.pointSize: 42
-            font.capitalization: Font.AllUppercase
+            text: myText
+            color: "lightsteelblue"
+            width: parent.width
+            elide: Text.ElideLeft
+            font { family: "Times"; pointSize: 42; capitalization: Font.AllUppercase }
         }
         Text {
-            text: myText; color: "lightsteelblue"
-            width: parent.width; elide: Text.ElideMiddle
-            font.family: fixedFont.name; font.pointSize: 42; font.weight: Font.Bold
-            font.capitalization: Font.AllLowercase
+            text: myText
+            color: "lightsteelblue"
+            width: parent.width
+            elide: Text.ElideMiddle
+            font { family: fixedFont.name; pointSize: 42; weight: Font.Bold; capitalization: Font.AllLowercase }
         }
         Text {
-            text: myText; color: "lightsteelblue"
-            width: parent.width; elide: Text.ElideRight
-            font.family: fixedFont.name; font.pointSize: 42; font.italic: true
-            font.capitalization: Font.SmallCaps
+            text: myText
+            color: "lightsteelblue"
+            width: parent.width
+            elide: Text.ElideRight
+            font { family: fixedFont.name; pointSize: 42; italic: true; capitalization: Font.SmallCaps }
         }
         Text {
-            text: myText; color: "lightsteelblue"
-            width: parent.width; elide: Text.ElideLeft
-            font.family: localFont.name; font.pointSize: 42
-            font.capitalization: Font.Capitalize
+            text: myText
+            color: "lightsteelblue"
+            width: parent.width
+            elide: Text.ElideLeft
+            font { family: localFont.name; pointSize: 42; capitalization: Font.Capitalize }
         }
         Text {
             text: {
@@ -49,7 +56,8 @@ Rectangle {
                 else if (webFont.status == 3) "Error loading font"
             }
             color: "lightsteelblue"
-            width: parent.width; elide: Text.ElideMiddle
+            width: parent.width
+            elide: Text.ElideMiddle
             font.family: webFont.name; font.pointSize: 42
         }
     }
diff --git a/examples/declarative/fonts/hello.qml b/examples/declarative/fonts/hello.qml
index 9d926fb..d4d0e4c 100644
--- a/examples/declarative/fonts/hello.qml
+++ b/examples/declarative/fonts/hello.qml
@@ -1,22 +1,33 @@
 import Qt 4.7
 
 Rectangle {
-    id: screen; width: 800; height: 480; color: "black"
+    id: screen
+
+    width: 800; height: 480
+    color: "black"
 
     Item {
-        id: container; x: screen.width / 2; y: screen.height / 2
+        id: container
+        x: screen.width / 2; y: screen.height / 2
+
         Text {
-            id: text; color: "white"; anchors.centerIn: parent
-            text: "Hello world!"; font.pixelSize: 60
+            id: text
+            anchors.centerIn: parent
+            color: "white"
+            text: "Hello world!"
+            font.pixelSize: 60
 
             SequentialAnimation on font.letterSpacing {
                 loops: Animation.Infinite;
                 NumberAnimation { from: 100; to: 300; easing.type: "InQuad"; duration: 3000 }
-                ScriptAction { script: {
-                    container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
-                    container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
-                } }
+                ScriptAction {
+                    script: {
+                        container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
+                        container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
+                    }
+                }
             }
+
             SequentialAnimation on opacity {
                 loops: Animation.Infinite;
                 NumberAnimation { from: 1; to: 0; duration: 2600 }
diff --git a/examples/declarative/gridview/gridview-example.qml b/examples/declarative/gridview/gridview-example.qml
index fd5f430..a5f41fb 100644
--- a/examples/declarative/gridview/gridview-example.qml
+++ b/examples/declarative/gridview/gridview-example.qml
@@ -1,7 +1,8 @@
 import Qt 4.7
 
 Rectangle {
-    width: 300; height: 400; color: "white"
+    width: 300; height: 400
+    color: "white"
 
     ListModel {
         id: appModel
@@ -16,10 +17,19 @@ Rectangle {
 
     Component {
         id: appDelegate
+
         Item {
             width: 100; height: 100
-            Image { id: myIcon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon }
-            Text { anchors.top: myIcon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name }
+
+            Image {
+                id: myIcon
+                y: 20; anchors.horizontalCenter: parent.horizontalCenter
+                source: icon
+            }
+            Text {
+                anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
+                text: name
+            }
         }
     }
 
@@ -31,8 +41,9 @@ Rectangle {
     GridView {
         anchors.fill: parent
         cellWidth: 100; cellHeight: 100
-        model: appModel; delegate: appDelegate
         highlight: appHighlight
         focus: true
+        model: appModel
+        delegate: appDelegate
     }
 }
diff --git a/examples/declarative/imageprovider/imageprovider-example.qml b/examples/declarative/imageprovider/imageprovider-example.qml
index 9d22576..d774112 100644
--- a/examples/declarative/imageprovider/imageprovider-example.qml
+++ b/examples/declarative/imageprovider/imageprovider-example.qml
@@ -2,10 +2,11 @@ import Qt 4.7
 import "ImageProviderCore"
 //![0]
 ListView {
-    width: 100
-    height: 100
+    width: 100; height: 100
     anchors.fill: parent
+
     model: myModel
+
     delegate: Component {
         Item {
             width: 100
diff --git a/examples/declarative/images/images.qml b/examples/declarative/images/images.qml
index 7980088..e48ad50 100644
--- a/examples/declarative/images/images.qml
+++ b/examples/declarative/images/images.qml
@@ -6,8 +6,8 @@ Rectangle {
     height: grid.height + 50
 
     Grid {
-        x: 25; y: 25
         id: grid
+        x: 25; y: 25
         columns: 3
 
         Image {
@@ -48,19 +48,22 @@ Rectangle {
         }
 
         Image {
-            width: 50; height: 50; transform: Translate { x: 50 }
+            width: 50; height: 50
+            transform: Translate { x: 50 }
             source: "content/lemonade.jpg"
         }
 
         Image {
-            width: 50; height: 50; transform: Translate { x: 50 }
+            width: 50; height: 50
+            transform: Translate { x: 50 }
             sourceSize.width: 50
             sourceSize.height: 50
             source: "content/lemonade.jpg"
         }
 
         Image {
-            width: 50; height: 50; transform: Translate { x: 50 }
+            width: 50; height: 50
+            transform: Translate { x: 50 }
             sourceSize: "50x50" // syntactic sugar
             smooth: true
             source: "content/lemonade.jpg"
diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml
index 1d34afd..391eab7 100644
--- a/examples/declarative/layouts/layouts.qml
+++ b/examples/declarative/layouts/layouts.qml
@@ -1,12 +1,15 @@
 import Qt 4.7
-import Qt.widgets 4.6
+import Qt.widgets 4.7
+
 Item {
     id: resizable
-    width:400
-    height:400
+
+    width: 400
+    height: 400
+
     QGraphicsWidget {
-        size.width:parent.width
-        size.height:parent.height
+        size.width: parent.width
+        size.height: parent.height
 
         layout: QGraphicsLinearLayout {
             LayoutItem {
diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml
index ef225d0..3703b59 100644
--- a/examples/declarative/layouts/positioners.qml
+++ b/examples/declarative/layouts/positioners.qml
@@ -2,31 +2,40 @@ import Qt 4.7
 
 Rectangle {
     id: page
-    width: 420
-    height: 420
-    color: "white"
+    width: 420; height: 420
 
     Column {
         id: layout1
         y: 0
         move: Transition {
-            NumberAnimation {
-                properties: "y"; easing.type: "OutBounce"
-            }
+            NumberAnimation { properties: "y"; easing.type: "OutBounce" }
         }
         add: Transition {
-            NumberAnimation {
-                properties: "y"; easing.type: "OutQuad"
-            }
+            NumberAnimation { properties: "y"; easing.type: "OutQuad" }
         }
+
         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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueV1
+            width: 100; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueV2
+            width: 100; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            Behavior on opacity { NumberAnimation {} }
         }
+
         Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
     }
 
@@ -34,31 +43,41 @@ Rectangle {
         id: layout2
         y: 300 
         move: Transition {
-            NumberAnimation {
-                properties: "x"; easing.type: "OutBounce"
-            }
+            NumberAnimation { properties: "x"; easing.type: "OutBounce" }
         }
         add: Transition {
-            NumberAnimation {
-                properties: "x"; easing.type: "OutQuad"
-            }
+            NumberAnimation { properties: "x"; easing.type: "OutQuad" }
         }
+
         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
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueH1
+            width: 50; height: 100
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15
+            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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueH2
+            width: 50; height: 100
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            Behavior on opacity { NumberAnimation {} }
         }
+
         Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
     }
 
     Button {
+        x: 135; y: 90
         text: "Remove"
         icon: "del.png"
-        x: 135
-        y: 90
 
         onClicked: {
             blueH2.opacity = 0
@@ -75,10 +94,9 @@ Rectangle {
     }
 
     Button {
+        x: 145; y: 140
         text: "Add"
         icon: "add.png"
-        x: 145
-        y: 140
 
         onClicked: {
             blueH2.opacity = 1
@@ -95,34 +113,50 @@ Rectangle {
     }
 
     Grid {
-        x: 260
-        y: 0
+        x: 260; y: 0
         columns: 3
 
         move: Transition {
-            NumberAnimation {
-                properties: "x,y"; easing.type: "OutBounce"
-            }
+            NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
         }
 
         add: Transition {
-            NumberAnimation {
-                properties: "x,y"; easing.type: "OutBounce"
-            }
+            NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
         }
 
         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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueG1
+            width: 50; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueG2
+            width: 50; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueG3
+            width: 50; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            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 }
         Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
@@ -130,33 +164,49 @@ Rectangle {
 
     Flow {
         id: layout4
-        x: 260
-        y: 250
-        width: 150
+        x: 260; y: 250; width: 150
 
         move: Transition {
-            NumberAnimation {
-                properties: "x,y"; easing.type: "OutBounce"
-            }
+            NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
         }
 
         add: Transition {
-            NumberAnimation {
-                properties: "x,y"; easing.type: "OutBounce"
-            }
+            NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
         }
+
         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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueF1
+            width: 60; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle {
+            id: blueF2
+            width: 60; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            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 
-            Behavior on opacity {NumberAnimation{}}
+
+        Rectangle { 
+            id: blueF3
+            width: 40; height: 50
+            color: "lightsteelblue"
+            border.color: "black"
+            radius: 15 
+            Behavior on opacity { NumberAnimation {} }
         }
+
         Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 }
     }
 
diff --git a/examples/declarative/listmodel-threaded/timedisplay.qml b/examples/declarative/listmodel-threaded/timedisplay.qml
index 848192e..80ac9fa 100644
--- a/examples/declarative/listmodel-threaded/timedisplay.qml
+++ b/examples/declarative/listmodel-threaded/timedisplay.qml
@@ -22,7 +22,9 @@ ListView {
 
     Timer {
         id: timer
-        interval: 2000; repeat: true; running: true; triggeredOnStart: true
+        interval: 2000; repeat: true
+        running: true
+        triggeredOnStart: true
 
         onTriggered: {
             var msg = {'action': 'appendCurrentTime', 'model': listModel};
diff --git a/examples/declarative/listview/dynamic.qml b/examples/declarative/listview/dynamic.qml
index 32483fa..236a9c5 100644
--- a/examples/declarative/listview/dynamic.qml
+++ b/examples/declarative/listview/dynamic.qml
@@ -3,11 +3,13 @@ import "content"
 import "../scrollbar"
 
 Rectangle {
+    id: container
     width: 640; height: 480
     color: "#343434"
 
     ListModel {
         id: fruitModel
+
         ListElement {
             name: "Apple"; cost: 2.45
             attributes: [
@@ -51,12 +53,16 @@ Rectangle {
 
     Component {
         id: fruitDelegate
+
         Item {
-            width: parent.width; height: 55
+            width: container.width; height: 55
             
             Column {
-                id: moveButtons; x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
-                Image { source: "content/pics/go-up.png"
+                id: moveButtons
+                x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
+
+                Image {
+                    source: "content/pics/go-up.png"
                     MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) }
                 }
                 Image { source: "content/pics/go-down.png"
@@ -66,33 +72,63 @@ Rectangle {
 
             Column {
                 anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 }
+
                 Text {
-                    id: label; font.bold: true; text: name; elide: Text.ElideRight; font.pixelSize: 15
-                    width: parent.width; color: "White"
+                    id: label
+                    width: parent.width
+                    color: "White"
+                    font.bold: true; font.pixelSize: 15
+                    text: name; elide: Text.ElideRight
                 }
                 Row {
                     spacing: 5
-                    Repeater { model: attributes; Component { Text { text: description; color: "White" } } }
+                    Repeater {
+                        model: attributes
+                        Component { 
+                            Text { text: description; color: "White" }
+                        }
+                    }
                 }
             }
 
             Row {
                 id: itemButtons
-                anchors.right: removeButton.left; anchors.rightMargin: 35; spacing: 10
-                width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
-                Image { source: "content/pics/list-add.png"
-                    ClickAutoRepeating { id: clickUp; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",cost+0.25) }
-                    scale: clickUp.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+                anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter }
+                width: childrenRect.width 
+                spacing: 10
+
+                Image {
+                    source: "content/pics/list-add.png"
+                    scale: clickUp.isPressed ? 0.9 : 1
+                    transformOrigin: Item.Center
+
+                    ClickAutoRepeating {
+                        id: clickUp
+                        anchors.fill: parent
+                        onClicked: fruitModel.setProperty(index, "cost", cost+0.25)
+                    }
                 }
+
                 Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; }
-                Image { source: "content/pics/list-remove.png"
-                    ClickAutoRepeating { id: clickDown; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",Math.max(0,cost-0.25)) }
-                    scale: clickDown.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+                Image {
+                    source: "content/pics/list-remove.png"
+                    scale: clickDown.isPressed ? 0.9 : 1
+                    transformOrigin: Item.Center
+
+                    ClickAutoRepeating { 
+                        id: clickDown
+                        anchors.fill: parent
+                        onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+                    }
                 }
             }
             Image {
-                id: removeButton; source: "content/pics/archive-remove.png"
+                id: removeButton
                 anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: 10 }
+                source: "content/pics/archive-remove.png"
+
                 MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
             }
         }
@@ -100,60 +136,75 @@ Rectangle {
 
     ListView {
         id: view
-        model: fruitModel; delegate: fruitDelegate
         anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top }
+        model: fruitModel
+        delegate: fruitDelegate
     }
 
     // Attach scrollbar to the right edge of the view.
     ScrollBar {
         id: verticalScrollBar
+
+        width: 8; height: view.height; anchors.right: view.right
         opacity: 0
         orientation: "Vertical"
         position: view.visibleArea.yPosition
         pageSize: view.visibleArea.heightRatio
-        width: 8
-        height: view.height
-        anchors.right: view.right
+
         // Only show the scrollbar when the view is moving.
-        states: [
-            State {
-                name: "ShowBars"; when: view.moving
-                PropertyChanges { target: verticalScrollBar; opacity: 1 }
-            }
-        ]
-        transitions: [ Transition { NumberAnimation { properties: "opacity"; duration: 400 } } ]
+        states: State {
+            name: "ShowBars"; when: view.moving
+            PropertyChanges { target: verticalScrollBar; opacity: 1 }
+        }
+        transitions: Transition {
+            NumberAnimation { properties: "opacity"; duration: 400 }
+        } 
     }
 
     Row {
-        x: 8; width: childrenRect.width
-        height: childrenRect.height
+        id: buttons
+
+        x: 8; width: childrenRect.width; height: childrenRect.height
         anchors { bottom: parent.bottom; bottomMargin: 8 }
         spacing: 8
-        id: buttons
-        Image { source: "content/pics/archive-insert.png"
-            MouseArea { anchors.fill: parent;
+
+        Image {
+            source: "content/pics/archive-insert.png"
+
+            MouseArea {
+                anchors.fill: parent
                 onClicked: {
                     fruitModel.append({
-                        "name":"Pizza Margarita",
-                        "cost":5.95,
-                        "attributes":[{"description": "Cheese"},{"description": "Tomato"}]
-                        })
+                        "name": "Pizza Margarita",
+                        "cost": 5.95,
+                        "attributes": [{"description": "Cheese"},{"description": "Tomato"}]
+                    })
                 }
             }
         }
-        Image { source: "content/pics/archive-insert.png"
-            MouseArea { anchors.fill: parent;
+
+        Image {
+            source: "content/pics/archive-insert.png"
+
+            MouseArea {
+                anchors.fill: parent;
                 onClicked: {
-                    fruitModel.insert(0,{
-                        "name":"Pizza Supreme",
-                        "cost":9.95,
-                        "attributes":[{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
-                        })
+                    fruitModel.insert(0, {
+                        "name": "Pizza Supreme",
+                        "cost": 9.95,
+                        "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
+                    })
                 }
             }
         }
-        Image { source: "content/pics/archive-remove.png"
-            MouseArea { anchors.fill: parent; onClicked: fruitModel.clear() }
+
+        Image { 
+            source: "content/pics/archive-remove.png"
+
+            MouseArea { 
+                anchors.fill: parent
+                onClicked: fruitModel.clear()
+            }
         }
     }
 }
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 2b54dd8..50ba2f7 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,12 +1,13 @@
 import Qt 4.7
 
 Rectangle {
-    width: 400; height: 300; color: "white"
+    width: 400; height: 300
 
     // MyPets model is defined in dummydata/MyPetsModel.qml
     // The viewer automatically loads files in dummydata/* to assist
     // development without a real data source.
     // This one contains my pets.
+
     // Define a delegate component.  A component will be
     // instantiated for each visible item in the list.
     Component {
@@ -21,20 +22,14 @@ Rectangle {
             }
             // Use the ListView.isCurrentItem attached property to
             // indent the item if it is the current item.
-            states: [
-                State {
-                    name: "Current"
-                    when: wrapper.ListView.isCurrentItem
-                    PropertyChanges { target: wrapper; x: 10 }
-                }
-            ]
-            transitions: [
-                Transition {
-                    NumberAnimation {
-                        properties: "x"; duration: 200
-                    }
-                }
-            ]
+            states: State {
+                name: "Current"
+                when: wrapper.ListView.isCurrentItem
+                PropertyChanges { target: wrapper; x: 10 }
+            }
+            transitions: Transition {
+                NumberAnimation { properties: "x"; duration: 200 } 
+            }
         }
     }
     // Specify a highlight with custom movement.  Note that highlightFollowsCurrentItem
@@ -43,14 +38,17 @@ Rectangle {
     Component {
         id: petHighlight
         Rectangle {
-            width: 200; height: 50; color: "#FFFF88"
+            width: 200; height: 50
+            color: "#FFFF88"
             SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
         }
     }
+
     ListView {
         id: list1
         width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate
+        model: MyPetsModel
+        delegate: petDelegate
         highlight: petHighlight; highlightFollowsCurrentItem: false
         focus: true
     }
diff --git a/examples/declarative/listview/itemlist.qml b/examples/declarative/listview/itemlist.qml
index 2f4aa31..e387f28 100644
--- a/examples/declarative/listview/itemlist.qml
+++ b/examples/declarative/listview/itemlist.qml
@@ -10,23 +10,27 @@ Rectangle {
 
     VisualItemModel {
         id: itemModel
+
         Rectangle {
-            height: view.height; width: view.width; color: "#FFFEF0"
+            width: view.width; height: view.height
+            color: "#FFFEF0"
             Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
         }
         Rectangle {
-            height: view.height; width: view.width; color: "#F0FFF7"
+            width: view.width; height: view.height
+            color: "#F0FFF7"
             Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
         }
         Rectangle {
-            height: view.height; width: view.width; color: "#F4F0FF"
+            width: view.width; height: view.height
+            color: "#F4F0FF"
             Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
         }
     }
 
     ListView {
         id: view
-        anchors.fill: parent; anchors.bottomMargin: 30
+        anchors { fill: parent; bottomMargin: 30 }
         model: itemModel
         preferredHighlightBegin: 0; preferredHighlightEnd: 0
         highlightRangeMode: "StrictlyEnforceRange"
@@ -35,22 +39,27 @@ Rectangle {
     }
 
     Rectangle {
+        width: 240; height: 30
+        anchors { top: view.bottom; bottom: parent.bottom }
         color: "gray"
-        anchors.top: view.bottom
-        anchors.bottom: parent.bottom
-        height: 30
-        width: 240
 
         Row {
             anchors.centerIn: parent
             spacing: 20
+
             Repeater {
                 model: itemModel.count
+
                 Rectangle {
                     width: 5; height: 5
                     radius: 3
-                    MouseArea { width: 20; height: 20; anchors.centerIn: parent; onClicked: view.currentIndex = index }
                     color: view.currentIndex == index ? "blue" : "white"
+
+                    MouseArea { 
+                        width: 20; height: 20
+                        anchors.centerIn: parent
+                        onClicked: view.currentIndex = index
+                    }
                 }
             }
         }
diff --git a/examples/declarative/listview/listview-example.qml b/examples/declarative/listview/listview-example.qml
index d648b60..6feedf6 100644
--- a/examples/declarative/listview/listview-example.qml
+++ b/examples/declarative/listview/listview-example.qml
@@ -1,12 +1,13 @@
 import Qt 4.7
 
 Rectangle {
-    width: 600; height: 300; color: "white"
+    width: 600; height: 300
 
     // MyPets model is defined in dummydata/MyPetsModel.qml
     // The viewer automatically loads files in dummydata/* to assist
     // development without a real data source.
     // This one contains my pets.
+
     // Define a delegate component.  A component will be
     // instantiated for each visible item in the list.
     Component {
@@ -31,46 +32,61 @@ Rectangle {
     // Show the model in three lists, with different highlight ranges.
     // preferredHighlightBegin and preferredHighlightEnd set the
     // range in which to attempt to maintain the highlight.
+    //
     // Note that the second and third ListView
     // set their currentIndex to be the same as the first, and that
     // the first ListView is given keyboard focus.
+    //
     // The default mode allows the currentItem to move freely
     // within the visible area.  If it would move outside the visible
     // area, the view is scrolled to keep it visible.
+    //
     // The second list sets a highlight range which attempts to keep the
     // current item within the the bounds of the range, however
     // items will not scroll beyond the beginning or end of the view,
     // forcing the highlight to move outside the range at the ends.
+    //
     // The third list sets the highlightRangeMode to StrictlyEnforceRange
     // and sets a range smaller than the height of an item.  This
     // forces the current item to change when the view is flicked,
     // since the highlight is unable to move.
+    //
     // Note that the first ListView sets its currentIndex to be equal to
     // the third ListView's currentIndex.  By flicking List3 with
     // the mouse, the current index of List1 will be changed.
+
     ListView {
         id: list1
         width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate
-        highlight: petHighlight; currentIndex: list3.currentIndex
+        model: MyPetsModel
+        delegate: petDelegate
+
+        highlight: petHighlight
+        currentIndex: list3.currentIndex
         focus: true
     }
+
     ListView {
         id: list2
         x: 200; width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
-        preferredHighlightBegin: 80
-        preferredHighlightEnd: 220
-        highlightRangeMode: "ApplyRange"
+        model: MyPetsModel
+        delegate: petDelegate
+
+        highlight: petHighlight
         currentIndex: list1.currentIndex
+        preferredHighlightBegin: 80; preferredHighlightEnd: 220
+        highlightRangeMode: "ApplyRange"
     }
+
     ListView {
         id: list3
         x: 400; width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
+        model: MyPetsModel
+        delegate: petDelegate
+
+        highlight: Rectangle { color: "lightsteelblue" }
         currentIndex: list1.currentIndex
-        preferredHighlightBegin: 125
-        preferredHighlightEnd: 125
+        preferredHighlightBegin: 125; preferredHighlightEnd: 125
         highlightRangeMode: "StrictlyEnforceRange"
         flickDeceleration: 1000
     }
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 66c4109..990e272 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -5,16 +5,17 @@ import "content"
 
 Rectangle {
     id: page
-    width: 400; height: 240; color: "black"
+    width: 400; height: 240
+    color: "black"
 
     // Delegate for the recipes.  This delegate has two modes:
     // 1. the list mode (default), which just shows the picture and title of the recipe.
     // 2. the details mode, which also shows the ingredients and method.
     Component {
         id: recipeDelegate
+
         Item {
             id: wrapper
-            width: list.width
 
             // Create a property to contain the visibility of the details.
             // We can bind multiple element's opacity to this one property,
@@ -22,11 +23,15 @@ Rectangle {
             // want to fade.
             property real detailsOpacity : 0
 
+            width: list.width
+
             // A simple rounded rectangle for the background
             Rectangle {
                 id: background
                 x: 1; y: 2; width: parent.width - 2; height: parent.height - 4
-                color: "#FEFFEE"; border.color: "#FFBE4F"; radius: 5
+                color: "#FEFFEE"
+                border.color: "#FFBE4F"
+                radius: 5
             }
 
             // This mouse region covers the entire delegate.
@@ -52,13 +57,17 @@ Rectangle {
                 }
 
                 Column {
-                    height: recipePic.height; width: background.width-recipePic.width-20
+                    width: background.width-recipePic.width-20; height: recipePic.height; 
                     spacing: 5
+
                     Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
+
                     Text {
-                        text: "Ingredients"; font.pointSize: 12; font.bold: true
+                        text: "Ingredients"
+                        font.pointSize: 12; font.bold: true
                         opacity: wrapper.detailsOpacity
                     }
+
                     Text {
                         text: ingredients
                         wrapMode: Text.WordWrap
@@ -71,52 +80,61 @@ Rectangle {
             Item {
                 id: details
                 x: 10; width: parent.width-20
-                anchors.top: topLayout.bottom; anchors.topMargin: 10
-                anchors.bottom: parent.bottom; anchors.bottomMargin: 10
+                anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
                 opacity: wrapper.detailsOpacity
 
                 Text {
                     id: methodTitle
-                    text: "Method"; font.pointSize: 12; font.bold: true
                     anchors.top: parent.top
+                    text: "Method"
+                    font.pointSize: 12; font.bold: true
                 }
+
                 Flickable {
                     id: flick
-                    anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
-                    width: parent.width; contentHeight: methodText.height; clip: true
+                    width: parent.width
+                    anchors { top: methodTitle.bottom; bottom: parent.bottom }
+                    contentHeight: methodText.height; clip: true
+
                     Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
                 }
+
                 Image {
-                    anchors.right: flick.right; anchors.top: flick.top
-                    source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
+                    anchors { right: flick.right; top: flick.top }
+                    source: "content/pics/moreUp.png"
+                    opacity: flick.atYBeginning ? 0 : 1
                 }
+
                 Image {
-                    anchors.right: flick.right; anchors.bottom: flick.bottom
-                    source: "content/pics/moreDown.png"; opacity: flick.atYEnd ? 0 : 1
+                    anchors { right: flick.right; bottom: flick.bottom }
+                    source: "content/pics/moreDown.png"
+                    opacity: flick.atYEnd ? 0 : 1
                 }
             }
 
             // A button to close the detailed view, i.e. set the state back to default ('').
             MediaButton {
-                anchors.right: background.right; anchors.rightMargin: 5
-                y: 10; opacity: wrapper.detailsOpacity
-                text: "Close"; onClicked: wrapper.state = '';
+                y: 10; anchors { right: background.right; rightMargin: 5 }
+                opacity: wrapper.detailsOpacity
+                text: "Close"
+
+                onClicked: wrapper.state = '';
             }
 
-            // Make the default height equal the hight of the picture, plus margin.
+            // Set the default height to the height of the picture, plus margin.
             height: 68
 
             states: State {
                 name: "Details"
+
                 PropertyChanges { target: background; color: "white" }
-                // Make the picture bigger
-                PropertyChanges { target: recipePic; width: 128; height: 128 }
-                // Make details visible
-                PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 }
-                // Make the detailed view fill the entire list area
-                PropertyChanges { target: wrapper; height: list.height }
+                PropertyChanges { target: recipePic; width: 128; height: 128 } // Make picture bigger
+                PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make details visible
+                PropertyChanges { target: wrapper; height: list.height } // Fill the entire list area with the detailed view
+
                 // Move the list so that this item is at the top.
                 PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
+
                 // Disallow flicking while we're in detailed view
                 PropertyChanges { target: wrapper.ListView.view; interactive: false }
             }
@@ -125,9 +143,7 @@ Rectangle {
                 // Make the state changes smooth
                 ParallelAnimation {
                     ColorAnimation { property: "color"; duration: 500 }
-                    NumberAnimation {
-                        duration: 300; properties: "detailsOpacity,x,contentY,height,width"
-                    }
+                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                 }
             }
         }
@@ -136,7 +152,9 @@ Rectangle {
     // The actual list
     ListView {
         id: list
-        model: Recipes; delegate: recipeDelegate
-        anchors.fill: parent; clip: true
+        anchors.fill: parent
+        clip: true
+        model: Recipes
+        delegate: recipeDelegate
     }
 }
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
index 7c132a4..0a81f63 100644
--- a/examples/declarative/listview/sections.qml
+++ b/examples/declarative/listview/sections.qml
@@ -4,7 +4,7 @@ import Qt 4.7
 Rectangle {
     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.
@@ -13,15 +13,16 @@ Rectangle {
     // 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: desc.height
+            height: desc.height // height is the combined height of the description and the section separator
+
             Item {
                 id: desc
-                x: 5
-                height: layout.height + 4
+                x: 5; height: layout.height + 4
+
                 Column {
                     id: layout
                     y: 2
@@ -32,22 +33,24 @@ Rectangle {
             }
         }
     }
+
     // Define a highlight component.  Just one of these will be instantiated
     // by each ListView and placed behind the current item.
     Component {
         id: petHighlight
-        Rectangle {
-            color: "#FFFF88"
-        }
+        Rectangle { color: "#FFFF88" }
     }
+
     // The list
     ListView {
         id: myList
-        width: 200
-        height: parent.height
+
+        width: 200; height: parent.height
         model: MyPetsModel
         delegate: petDelegate
         highlight: petHighlight
+        focus: true
+
         // The sectionExpression is simply the size of the pet.
         // We use this to determine which section we are in above.
         section.property: "size"
@@ -57,11 +60,12 @@ Rectangle {
             width: 200
             height: 20
             Text {
-                text: section; font.bold: true
-                x: 2; height: parent.height; verticalAlignment: 'AlignVCenter'
+                x: 2; height: parent.height
+                verticalAlignment: 'AlignVCenter'
+                text: section
+                font.bold: true
             }
         }
-        focus: true
     }
 }
 //! [0]
diff --git a/examples/declarative/mousearea/mouse.qml b/examples/declarative/mousearea/mouse.qml
index efbfb53..67302a8 100644
--- a/examples/declarative/mousearea/mouse.qml
+++ b/examples/declarative/mousearea/mouse.qml
@@ -1,40 +1,47 @@
 import Qt 4.7
 
 Rectangle {
-    color: "white"
     width: 200; height: 200
+
     Rectangle {
         width: 50; height: 50
         color: "red"
+
         Text { text: "Click"; anchors.centerIn: parent }
+
         MouseArea {
+            anchors.fill: parent
             hoverEnabled: true
             acceptedButtons: Qt.LeftButton | Qt.RightButton
-            onPressed: { console.log('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')') }
-            onReleased: { console.log('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')') }
-            onClicked: { console.log('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')') }
-            onDoubleClicked: { console.log('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')') }
-            onPressAndHold: { console.log('press and hold') }
-            onEntered: { console.log('entered ' + pressed) }
-            onExited: { console.log('exited ' + pressed) }
-            anchors.fill: parent
+
+            onPressed: console.log('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')') 
+            onReleased: console.log('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')') 
+            onClicked: console.log('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')')
+            onDoubleClicked: console.log('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')')
+            onPressAndHold: console.log('press and hold')
+            onEntered: console.log('entered ' + pressed)
+            onExited: console.log('exited ' + pressed)
         }
     }
+
     Rectangle {
         y: 100; width: 50; height: 50
         color: "blue"
+
         Text { text: "Drag"; anchors.centerIn: parent }
+
         MouseArea {
+            anchors.fill: parent
             drag.target: parent
             drag.axis: "XAxis"
             drag.minimumX: 0
             drag.maximumX: 150
-            onPressed: { console.log('press') }
-            onReleased: { console.log('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')') }
-            onClicked: { console.log('click' + '(wasHeld: ' + mouse.wasHeld + ')') }
-            onDoubleClicked: { console.log('double click') }
-            onPressAndHold: { console.log('press and hold') }
-            anchors.fill: parent
+
+            onPressed: console.log('press')
+            onReleased: console.log('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')')
+            onClicked: console.log('click' + '(wasHeld: ' + mouse.wasHeld + ')')
+            onDoubleClicked: console.log('double click')
+            onPressAndHold: console.log('press and hold')
         }
     }
 }
diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml
index d82d89d..bc36df5 100644
--- a/examples/declarative/progressbar/content/ProgressBar.qml
+++ b/examples/declarative/progressbar/content/ProgressBar.qml
@@ -2,36 +2,42 @@ import Qt 4.7
 
 Item {
     id: progressbar
-    width: 250; height: 23; clip: true
 
     property int minimum: 0
     property int maximum: 100
     property int value: 0
-    property alias color: g1.color
-    property alias secondColor: g2.color
+    property alias color: gradient1.color
+    property alias secondColor: gradient2.color
+
+    width: 250; height: 23
+    clip: true
 
     BorderImage {
         source: "background.png"
         width: parent.width; height: parent.height
-        border.left: 4; border.top: 4; border.right: 4; border.bottom: 4
+        border { left: 4; top: 4; right: 4; bottom: 4 }
     }
 
     Rectangle {
+        id: highlight
+
         property int widthDest: ((progressbar.width * (value - minimum)) / (maximum - minimum) - 6)
-        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: highlight.widthDest
         Behavior on width { SmoothedAnimation { velocity: 1200 } }
+
+        anchors { left: parent.left; top: parent.top; bottom: parent.bottom; leftMargin: 3; topMargin: 3; bottomMargin: 3 }
+        radius: 1
         gradient: Gradient {
-            GradientStop { id: g1; position: 0.0 }
-            GradientStop { id: g2; position: 1.0 }
+            GradientStop { id: gradient1; position: 0.0 }
+            GradientStop { id: gradient2; position: 1.0 }
         }
+
     }
     Text {
-        anchors.right: highlight.right; anchors.rightMargin: 6
-        color: "white"; font.bold: true
-        anchors.verticalCenter: parent.verticalCenter
+        anchors { right: highlight.right; rightMargin: 6; verticalCenter: parent.verticalCenter }
+        color: "white"
+        font.bold: true
         text: Math.floor((value - minimum) / (maximum - minimum) * 100) + '%'
     }
 }
diff --git a/examples/declarative/progressbar/progressbars.qml b/examples/declarative/progressbar/progressbars.qml
index e10c9f0..55fd682 100644
--- a/examples/declarative/progressbar/progressbars.qml
+++ b/examples/declarative/progressbar/progressbars.qml
@@ -3,17 +3,26 @@ import "content"
 
 Rectangle {
     id: main
-    width: 600; height: 405; color: "#edecec"
+
+    width: 600; height: 405
+    color: "#edecec"
 
     Flickable {
-        anchors.fill: parent; contentHeight: column.height + 20
+        anchors.fill: parent
+        contentHeight: column.height + 20
+
         Column {
-            id: column; x: 10; y: 10; spacing: 10
+            id: column
+            x: 10; y: 10
+            spacing: 10
+
             Repeater {
                 model: 25
+
                 ProgressBar {
                     property int r: Math.floor(Math.random() * 5000 + 1000)
                     width: main.width - 20
+
                     NumberAnimation on value { duration: r; from: 0; to: 100; loops: Animation.Infinite }
                     ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; loops: Animation.Infinite }
                     ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; loops: Animation.Infinite }
diff --git a/examples/declarative/proxywidgets/proxywidgets.qml b/examples/declarative/proxywidgets/proxywidgets.qml
index 6fa0c40..46dcf99 100644
--- a/examples/declarative/proxywidgets/proxywidgets.qml
+++ b/examples/declarative/proxywidgets/proxywidgets.qml
@@ -3,45 +3,62 @@ import "ProxyWidgets" 1.0
 
 Rectangle {
     id: window
-    width: 640; height: 480; color: palette.window
 
     property int margin: 30
 
+    width: 640; height: 480
+    color: palette.window
+
     SystemPalette { id: palette }
 
     MyPushButton {
-        id: button1; x: margin; y: margin; text: "Right"; onClicked: window.state = "right"
+        id: button1
+        x: margin; y: margin
+        text: "Right"
         transformOriginPoint: Qt.point(width / 2, height / 2)
+
+        onClicked: window.state = "right"
     }
 
     MyPushButton {
-        id: button2; x: margin; y: margin + 30; text: "Bottom"; onClicked: window.state = "bottom"
+        id: button2
+        x: margin; y: margin + 30
+        text: "Bottom"
         transformOriginPoint: Qt.point(width / 2, height / 2)
+
+        onClicked: window.state = "bottom"
     }
 
     MyPushButton {
-        id: button3; x: margin; y: margin + 60; text: "Quit"; onClicked: Qt.quit()
+        id: button3
+        x: margin; y: margin + 60
+        text: "Quit"
         transformOriginPoint: Qt.point(width / 2, height / 2)
+
+        onClicked: Qt.quit()
     }
 
     states: [
-    State {
-        name: "right"
-        PropertyChanges { target: button1; x: window.width - width - margin; text: "Left"; onClicked: window.state = "" }
-        PropertyChanges { target: button2; x: window.width - width - margin }
-        PropertyChanges { target: button3; x: window.width - width - margin }
-        PropertyChanges { target: window; color: Qt.darker(palette.window) }
-    },
-    State {
-        name: "bottom"
-        PropertyChanges { target: button1; y: window.height - height - margin; rotation: 180 }
-        PropertyChanges {
-            target: button2; x: button1.x + button1.width + 10; y: window.height - height - margin;  rotation: 180
-            text: "Top"; onClicked: window.state = ""
+        State {
+            name: "right"
+            PropertyChanges { target: button1; x: window.width - width - margin; text: "Left"; onClicked: window.state = "" }
+            PropertyChanges { target: button2; x: window.width - width - margin }
+            PropertyChanges { target: button3; x: window.width - width - margin }
+            PropertyChanges { target: window; color: Qt.darker(palette.window) }
+        },
+        State {
+            name: "bottom"
+            PropertyChanges { target: button1; y: window.height - height - margin; rotation: 180 }
+            PropertyChanges {
+                target: button2
+                x: button1.x + button1.width + 10; y: window.height - height - margin
+                rotation: 180
+                text: "Top"
+                onClicked: window.state = ""
+            }
+            PropertyChanges { target: button3; x: button2.x + button2.width + 10; y: window.height - height - margin;  rotation: 180 }
+            PropertyChanges { target: window; color: Qt.lighter(palette.window) }
         }
-        PropertyChanges { target: button3; x: button2.x + button2.width + 10; y: window.height - height - margin;  rotation: 180 }
-        PropertyChanges { target: window; color: Qt.lighter(palette.window) }
-    }
     ]
 
     transitions: Transition {
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
index 2186b35..5433156 100644
--- a/examples/declarative/scrollbar/ScrollBar.qml
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -2,6 +2,7 @@ import Qt 4.7
 
 Item {
     id: scrollBar
+
     // The properties that define the scrollbar's state.
     // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
     // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
@@ -14,18 +15,19 @@ Item {
     // A light, semi-transparent background
     Rectangle {
         id: background
-        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
-        color: "white"; opacity: 0.3
         anchors.fill: parent
+        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+        color: "white"
+        opacity: 0.3
     }
     // Size the bar to the required size, depending upon the orientation.
     Rectangle {
-        opacity: 0.7
-        color: "black"
-        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
         x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
         y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
         width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
         height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
+        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+        color: "black"
+        opacity: 0.7
     }
 }
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
index 421cb7f..cb1da16 100644
--- a/examples/declarative/scrollbar/display.qml
+++ b/examples/declarative/scrollbar/display.qml
@@ -3,56 +3,52 @@ import Qt 4.7
 Rectangle {
     width: 640
     height: 480
+
     // Create a flickable to view a large image.
     Flickable {
         id: view
         anchors.fill: parent
+        contentWidth: picture.width
+        contentHeight: picture.height
+
         Image {
             id: picture
             source: "pics/niagara_falls.jpg"
             asynchronous: true
         }
-        contentWidth: picture.width
-        contentHeight: picture.height
+
         // Only show the scrollbars when the view is moving.
-        states: [
-            State {
-                name: "ShowBars"
-                when: view.moving
-                PropertyChanges { target: verticalScrollBar; opacity: 1 }
-                PropertyChanges { target: horizontalScrollBar; opacity: 1 }
-            }
-        ]
-        transitions: [
-            Transition {
-                from: "*"
-                to: "*"
-                NumberAnimation {
-                    properties: "opacity"
-                    duration: 400
-                }
-            }
-        ]
+        states: State {
+            name: "ShowBars"
+            when: view.moving
+            PropertyChanges { target: verticalScrollBar; opacity: 1 }
+            PropertyChanges { target: horizontalScrollBar; opacity: 1 }
+        }
+
+        transitions: Transition {
+            from: "*"; to: "*"
+            NumberAnimation { properties: "opacity"; duration: 400 }
+        }
     }
+
     // Attach scrollbars to the right and bottom edges of the view.
     ScrollBar {
         id: verticalScrollBar
+        width: 12; height: view.height-12
+        anchors.right: view.right
         opacity: 0
         orientation: "Vertical"
         position: view.visibleArea.yPosition
         pageSize: view.visibleArea.heightRatio
-        width: 12
-        height: view.height-12
-        anchors.right: view.right
     }
+
     ScrollBar {
         id: horizontalScrollBar
+        width: view.width-12; height: 12
+        anchors.bottom: view.bottom
         opacity: 0
         orientation: "Horizontal"
         position: view.visibleArea.xPosition
         pageSize: view.visibleArea.widthRatio
-        height: 12
-        width: view.width-12
-        anchors.bottom: view.bottom
     }
 }
diff --git a/examples/declarative/searchbox/SearchBox.qml b/examples/declarative/searchbox/SearchBox.qml
index be85023..aae7ee9 100644
--- a/examples/declarative/searchbox/SearchBox.qml
+++ b/examples/declarative/searchbox/SearchBox.qml
@@ -18,27 +18,32 @@ FocusScope {
     }
 
     Text {
-        id: typeSomething; anchors.fill: parent; anchors.leftMargin: 8
+        id: typeSomething
+        anchors.fill: parent; anchors.leftMargin: 8
         verticalAlignment: Text.AlignVCenter
-        text: "Type something..."; color: "gray"; font.italic: true
+        text: "Type something..."
+        color: "gray"
+        font.italic: true
     }
 
     MouseArea { anchors.fill: parent; onClicked: focusScope.focus = true }
 
     TextInput {
         id: textInput
-        anchors.left: parent.left; anchors.leftMargin: 8
-        anchors.verticalCenter: parent.verticalCenter
-        focus: if (1) true
+        anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
+        focus: true
     }
 
     Image {
         id: clear
-        anchors.right: parent.right; anchors.rightMargin: 8
-        anchors.verticalCenter: parent.verticalCenter
-        source: "images/edit-clear-locationbar-rtl.png"; opacity: 0
+        anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }
+        source: "images/edit-clear-locationbar-rtl.png"
+        opacity: 0
 
-        MouseArea { anchors.fill: parent; onClicked: { textInput.text = ''; focusScope.focus = true } }
+        MouseArea { 
+            anchors.fill: parent
+            onClicked: { textInput.text = ''; focusScope.focus = true }
+        }
     }
 
     states: State {
diff --git a/examples/declarative/searchbox/main.qml b/examples/declarative/searchbox/main.qml
index eb95a23..9f73473 100644
--- a/examples/declarative/searchbox/main.qml
+++ b/examples/declarative/searchbox/main.qml
@@ -1,10 +1,12 @@
 import Qt 4.7
 
 Rectangle {
-    width: 500; height: 250; color: "#edecec"
+    width: 500; height: 250
+    color: "#edecec"
 
     Column {
-        anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter; spacing: 10
+        anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
+        spacing: 10
 
         SearchBox { id: search1; KeyNavigation.tab: search2; KeyNavigation.backtab: search3; focus: true }
         SearchBox { id: search2; KeyNavigation.tab: search3; KeyNavigation.backtab: search1 }
diff --git a/examples/declarative/slideswitch/content/Switch.qml b/examples/declarative/slideswitch/content/Switch.qml
index e16198d..a8fa6ef 100644
--- a/examples/declarative/slideswitch/content/Switch.qml
+++ b/examples/declarative/slideswitch/content/Switch.qml
@@ -31,14 +31,17 @@ Item {
 
 //![4]
     Image {
-        id: background; source: "background.svg"
+        id: background
+        source: "background.svg"
         MouseArea { anchors.fill: parent; onClicked: toggle() }
     }
 //![4]
 
 //![5]
     Image {
-        id: knob; source: "knob.svg"; x: 1; y: 2
+        id: knob
+        x: 1; y: 2
+        source: "knob.svg"
 
         MouseArea {
             anchors.fill: parent
diff --git a/examples/declarative/sql/hello.qml b/examples/declarative/sql/hello.qml
index a9f77ca..8b021b7 100644
--- a/examples/declarative/sql/hello.qml
+++ b/examples/declarative/sql/hello.qml
@@ -1,6 +1,8 @@
 import Qt 4.7
 
 Text {
+    text: "?"
+
     function findGreetings() {
         var db = openDatabaseSync("QDeclarativeExampleDB", "1.0", "The Example QML SQL!", 1000000);
 
@@ -24,7 +26,6 @@ Text {
         )
     }
 
-    text: "?"
     Component.onCompleted: findGreetings()
 }
 
diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
index c35cd63..4429e78 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -2,49 +2,60 @@ import Qt 4.7
 
 Rectangle {
     id: page
-    width: 640; height: 480; color: "#343434"
+    width: 640; height: 480
+    color: "#343434"
+
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "user.png"
+    }
 
-    // A target region.  Clicking in here sets the state to the default state
     Rectangle {
-        id: initialPosition
+        id: topLeftRect
+
         anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
-        width: 64; height: 64; radius: 6
-        color: "Transparent"; border.color: "Gray"
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to the default state, returning the image to
+        // its initial position
         MouseArea { anchors.fill: parent; onClicked: page.state = '' }
     }
 
-    // Another target region.  Clicking in here sets the state to 'Position1'
     Rectangle {
-        id: position1
+        id: middleRightRect
+
         anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
-        width: 64; height: 64; radius: 6
-        color: "Transparent"; border.color: "Gray"
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'middleRight'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
     }
 
-    // Another target region.  Clicking in here sets the state to 'Position2'
     Rectangle {
-        id: position2
+        id: bottomLeftRect
+
         anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
-        width: 64; height: 64; radius: 6
-        color: "Transparent"; border.color: "Gray"
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
-    }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
 
-    // The image which will be moved when my state changes
-    Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
+        // Clicking in here sets the state to 'bottomLeft'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
+    }
 
     states: [
-        // In state 'Position1', change the 'user' item position to rect2's position.
+        // In state 'middleRight', move the image to middleRightRect
         State {
-            name: "Position1"
-            PropertyChanges { target: user; x: position1.x; y: position1.y }
+            name: "middleRight"
+            PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
         },
 
-        // In state 'Position2', change the 'user' item position to rect3's position.
+        // In state 'bottomLeft', move the image to bottomLeftRect
         State {
-            name: "Position2"
-            PropertyChanges { target: user; x: position2.x; y: position2.y  }
+            name: "bottomLeft"
+            PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
         }
     ]
 }
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index 3cb5543..d1b1dd6 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,67 +1,87 @@
 import Qt 4.7
 
+/*
+    This is exactly the same as states.qml, except that we have appended
+    a set of transitions to apply animations when the item changes 
+    between each state.
+*/
+
 Rectangle {
     id: page
-    width: 640; height: 480; color: "#343434"
+    width: 640; height: 480
+    color: "#343434"
+
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "user.png"
+    }
 
-    // A target region.  Clicking in here sets the state to the default state
     Rectangle {
-        id: initialPosition
+        id: topLeftRect
+
         anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
-        width: 64; height: 64; radius: 6
-        color: "Transparent"; border.color: "Gray"
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to the default state, returning the image to
+        // its initial position
         MouseArea { anchors.fill: parent; onClicked: page.state = '' }
     }
 
-    // Another target region.  Clicking in here sets the state to 'Position1'
     Rectangle {
-        id: position1
+        id: middleRightRect
+
         anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
-        width: 64; height: 64; radius: 6
-        color: "Transparent"; border.color: "Gray"
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'middleRight'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
     }
 
-    // Another target region.  Clicking in here sets the state to 'Position2'
     Rectangle {
-        id: position2
+        id: bottomLeftRect
+
         anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
-        width: 64; height: 64; radius: 6
-        color: "Transparent"; border.color: "Gray"
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
-    }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
 
-    // The image which will be moved when my state changes
-    Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
+        // Clicking in here sets the state to 'bottomLeft'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
+    }
 
     states: [
-        // In state 'Position1', change the 'user' item position to rect2's position.
+        // In state 'middleRight', move the image to middleRightRect
         State {
-            name: "Position1"
-            PropertyChanges { target: user; x: position1.x; y: position1.y }
+            name: "middleRight"
+            PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
         },
 
-        // In state 'Position2', change the 'user' item position to rect3's position.
+        // In state 'bottomLeft', move the image to bottomLeftRect
         State {
-            name: "Position2"
-            PropertyChanges { target: user; x: position2.x; y: position2.y  }
+            name: "bottomLeft"
+            PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
         }
     ]
 
-    // transitions define how the properties change.
+    // Transitions define how the properties change when the item moves between each state
     transitions: [
-        // When transitioning to 'Position1' move x,y over a duration of 1 second,
+
+        // When transitioning to 'middleRight' move x,y over a duration of 1 second,
         // with OutBounce easing function.
         Transition {
-            from: "*"; to: "Position1"
+            from: "*"; to: "middleRight"
             NumberAnimation { properties: "x,y"; easing.type: "OutBounce"; duration: 1000 }
         },
-        // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+
+        // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,
         // with InOutQuad easing function.
         Transition {
-            from: "*"; to: "Position2"
+            from: "*"; to: "bottomLeft"
             NumberAnimation { properties: "x,y"; easing.type: "InOutQuad"; duration: 2000 }
         },
+
         // For any other state changes move x,y linearly over duration of 200ms.
         Transition {
             NumberAnimation { properties: "x,y"; duration: 200 }
diff --git a/examples/declarative/tabwidget/TabWidget.qml b/examples/declarative/tabwidget/TabWidget.qml
index e6b40fd..26d25b4 100644
--- a/examples/declarative/tabwidget/TabWidget.qml
+++ b/examples/declarative/tabwidget/TabWidget.qml
@@ -2,6 +2,7 @@ import Qt 4.7
 
 Item {
     id: tabWidget
+
     property int current: 0
     default property alias content: stack.children
 
@@ -18,21 +19,26 @@ Item {
     Row {
         id: header
         Repeater {
-            delegate:
-            Rectangle {
+            delegate: Rectangle {
                 width: tabWidget.width / stack.children.length; height: 36
+
                 Rectangle {
-                    color: "#acb2c2"; width: parent.width; height: 1
+                    width: parent.width; height: 1
                     anchors { bottom: parent.bottom; bottomMargin: 1 }
+                    color: "#acb2c2"
                 }
                 BorderImage {
-                    source: "tab.png"; visible: tabWidget.current == index; border.left: 7; border.right: 7
                     anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
+                    border { left: 7; right: 7 }
+                    source: "tab.png"
+                    visible: tabWidget.current == index
                 }
                 Text {
                     horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
-                    anchors.fill: parent; text: stack.children[index].title
-                    elide: Text.ElideRight; font.bold: tabWidget.current == index
+                    anchors.fill: parent
+                    text: stack.children[index].title
+                    elide: Text.ElideRight
+                    font.bold: tabWidget.current == index
                 }
                 MouseArea {
                     anchors.fill: parent
@@ -45,6 +51,7 @@ Item {
 
     Item {
         id: stack
-        anchors.top: header.bottom; anchors.bottom: tabWidget.bottom; width: tabWidget.width
+        width: tabWidget.width
+        anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
     }
 }
diff --git a/examples/declarative/tabwidget/tabs.qml b/examples/declarative/tabwidget/tabs.qml
index e1bbdef..fba203c 100644
--- a/examples/declarative/tabwidget/tabs.qml
+++ b/examples/declarative/tabwidget/tabs.qml
@@ -6,28 +6,36 @@ TabWidget {
 
     Rectangle {
         property string title: "Red"
-        anchors.fill: parent; color: "#e3e3e3"
+        anchors.fill: parent
+        color: "#e3e3e3"
+
         Rectangle {
             anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
             color: "#ff7f7f"
             Text {
+                width: parent.width - 20
                 anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
-                text: "Roses are red"; font.pixelSize: 20
-                wrapMode: Text.WordWrap; width: parent.width - 20
+                text: "Roses are red"
+                font.pixelSize: 20
+                wrapMode: Text.WordWrap
             }
         }
     }
 
     Rectangle {
         property string title: "Green"
-        anchors.fill: parent; color: "#e3e3e3"
+        anchors.fill: parent
+        color: "#e3e3e3"
+
         Rectangle {
             anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
             color: "#7fff7f"
             Text {
+                width: parent.width - 20
                 anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
-                text: "Flower stems are green"; font.pixelSize: 20
-                wrapMode: Text.WordWrap; width: parent.width - 20
+                text: "Flower stems are green"
+                font.pixelSize: 20
+                wrapMode: Text.WordWrap
             }
         }
     }
@@ -35,13 +43,16 @@ TabWidget {
     Rectangle {
         property string title: "Blue"
         anchors.fill: parent; color: "#e3e3e3"
+
         Rectangle {
             anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
             color: "#7f7fff"
             Text {
+                width: parent.width - 20
                 anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
-                text: "Violets are blue"; font.pixelSize: 20
-                wrapMode: Text.WordWrap; width: parent.width - 20
+                text: "Violets are blue"
+                font.pixelSize: 20
+                wrapMode: Text.WordWrap
             }
         }
     }
diff --git a/examples/declarative/tic-tac-toe/content/Button.qml b/examples/declarative/tic-tac-toe/content/Button.qml
index 05d3f8d..ecf18cd 100644
--- a/examples/declarative/tic-tac-toe/content/Button.qml
+++ b/examples/declarative/tic-tac-toe/content/Button.qml
@@ -3,33 +3,35 @@ import Qt 4.7
 Rectangle {
     id: container
 
-    signal clicked
     property string text: "Button"
     property bool down: false
     property string mainCol: "lightgray"
     property string darkCol: "darkgray"
     property string lightCol: "white"
 
-    color: mainCol; smooth: true
-    width: txtItem.width + 20; height: txtItem.height + 6
-    border.width: 1; border.color: Qt.darker(mainCol); radius: 8;
+    width: buttonLabel.width + 20; height: buttonLabel.height + 6
+    border { width: 1; color: Qt.darker(mainCol) } 
+    radius: 8;
+    color: mainCol
+    smooth: true
 
     gradient: Gradient {
         GradientStop {
             id: topGrad; position: 0.0
-            color: if (container.down) { darkCol } else { lightCol } }
+            color: if (container.down) { darkCol } else { lightCol }
+        }
         GradientStop { position: 1.0; color: mainCol }
     }
 
+    signal clicked
+
     MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() }
 
     Text {
-        id: txtItem; text: container.text;
+        id: buttonLabel
+
         anchors.centerIn: container
-        color: "blue"
-        styleColor: "white"
-        style: Text.Outline
+        text: container.text;
         font.pixelSize: 14
-        font.bold: true
     }
 }
diff --git a/examples/declarative/tic-tac-toe/tic-tac-toe.qml b/examples/declarative/tic-tac-toe/tic-tac-toe.qml
index ca66a46..dd13052 100644
--- a/examples/declarative/tic-tac-toe/tic-tac-toe.qml
+++ b/examples/declarative/tic-tac-toe/tic-tac-toe.qml
@@ -4,23 +4,23 @@ import "content/tic-tac-toe.js" as Logic
 
 Item {
     id: game
-    property bool show: false;
+
+    property bool show: false
+    property real difficulty: 1.0   //chance it will actually think
+
     width: 440
     height: 480
     anchors.fill: parent
-    property real difficulty: 1.0; //chance it will actually think
 
     Image {
         id: boardimage
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.horizontalCenter }
         source: "content/pics/board.png"
     }
 
     Grid {
         id: board
         anchors.fill: boardimage
-
         columns: 3
 
         Repeater {
@@ -46,33 +46,32 @@ Item {
 
     Row {
         spacing: 4
-        anchors.top: board.bottom
-        anchors.horizontalCenter: board.horizontalCenter
+        anchors { top: board.bottom; horizontalCenter: board.horizontalCenter }
+
         Button {
             text: "Hard"
-            onClicked: game.difficulty=1.0;
+            onClicked: game.difficulty = 1.0;
             down: game.difficulty == 1.0
         }
         Button {
             text: "Moderate"
-            onClicked: game.difficulty=0.8;
+            onClicked: game.difficulty = 0.8;
             down: game.difficulty == 0.8
         }
         Button {
             text: "Easy"
-            onClicked: game.difficulty=0.2;
+            onClicked: game.difficulty = 0.2;
             down: game.difficulty == 0.2
         }
     }
 
     Text {
         id: msg
-        opacity: 0
+
         anchors.centerIn: parent
+        opacity: 0
         color: "blue"
-        styleColor: "white"
-        style: Text.Outline
-        font.pixelSize: 50
-        font.bold: true
+        style: Text.Outline; styleColor: "white"
+        font.pixelSize: 50; font.bold: true
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame1/Block.qml b/examples/declarative/tutorials/samegame/samegame1/Block.qml
index 7cf819b..a535235 100644
--- a/examples/declarative/tutorials/samegame/samegame1/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/Block.qml
@@ -2,11 +2,12 @@
 import Qt 4.7
 
 Item { 
-    id:block
+    id: block
     
-    Image { id: img
-        source: "../shared/pics/redStone.png";
+    Image {
+        id: img
         anchors.fill: parent
+        source: "../shared/pics/redStone.png";
     }
 }
 //![0]
diff --git a/examples/declarative/tutorials/samegame/samegame1/Button.qml b/examples/declarative/tutorials/samegame/samegame1/Button.qml
index 8ad7c0f..e8034ac 100644
--- a/examples/declarative/tutorials/samegame/samegame1/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/Button.qml
@@ -4,25 +4,31 @@ import Qt 4.7
 Rectangle {
     id: container
 
-    signal clicked
     property string text: "Button"
 
-    color: activePalette.button; smooth: true
+    signal clicked
+
     width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+    smooth: true
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    radius: 8
 
+    // color the button with a gradient
     gradient: Gradient {
         GradientStop {
             position: 0.0
-            color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+            color: {
+                if (mouseArea.pressed) 
+                    return activePalette.dark
+                else 
+                    return activePalette.light
+            }
         }
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
     MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
 
-    Text {
-        id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
-    }
+    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
 }
 //![0]
diff --git a/examples/declarative/tutorials/samegame/samegame1/samegame.qml b/examples/declarative/tutorials/samegame/samegame1/samegame.qml
index ae881ba..b6e01fd 100644
--- a/examples/declarative/tutorials/samegame/samegame1/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/samegame.qml
@@ -3,37 +3,40 @@ import Qt 4.7
 
 Rectangle {
     id: screen
+
     width: 490; height: 720
 
     SystemPalette { id: activePalette }
 
     Item {
-        width: parent.width; anchors.top: parent.top; anchors.bottom: toolbar.top
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
 
         Image {
             id: background
-            anchors.fill: parent; source: "../shared/pics/background.jpg"
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
             fillMode: Image.PreserveAspectCrop
         }
     }
 
     Rectangle {
-        id: toolbar
+        id: toolBar
+        width: parent.width; height: 32
         color: activePalette.window
-        height: 32; width: parent.width
         anchors.bottom: screen.bottom
 
         Button {
-            text: "New Game"; onClicked: console.log("Starting a new game...");
-            anchors.left: parent.left; anchors.leftMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "New Game" 
+            onClicked: console.log("This doesn't do anything yet...")
         }
 
         Text {
             id: score
-            text: "Score: Who knows?"; font.bold: true
-            anchors.right: parent.right; anchors.rightMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "Score: Who knows?"
+            font.bold: true
         }
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame2/Block.qml b/examples/declarative/tutorials/samegame/samegame2/Block.qml
index 44ff5d7..88b3d79 100644
--- a/examples/declarative/tutorials/samegame/samegame2/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/Block.qml
@@ -1,10 +1,11 @@
 import Qt 4.7
 
 Item { 
-    id:block
+    id: block
     
-    Image { id: img
-        source: "../shared/pics/redStone.png";
+    Image {
+        id: img
         anchors.fill: parent
+        source: "../shared/pics/redStone.png";
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame2/Button.qml b/examples/declarative/tutorials/samegame/samegame2/Button.qml
index cf4c61b..8d322de5 100644
--- a/examples/declarative/tutorials/samegame/samegame2/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/Button.qml
@@ -3,24 +3,30 @@ import Qt 4.7
 Rectangle {
     id: container
 
-    signal clicked
     property string text: "Button"
 
-    color: activePalette.button; smooth: true
+    signal clicked
+
     width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+    smooth: true
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    radius: 8
 
+    // color the button with a gradient
     gradient: Gradient {
         GradientStop {
             position: 0.0
-            color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+            color: {
+                if (mouseArea.pressed) 
+                    return activePalette.dark
+                else 
+                    return activePalette.light
+            }
         }
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
     MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
 
-    Text {
-        id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
-    }
+    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame2/samegame.qml b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
index e0706c2..7a17d16 100644
--- a/examples/declarative/tutorials/samegame/samegame2/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
@@ -5,39 +5,42 @@ import "samegame.js" as SameGame
 
 Rectangle {
     id: screen
+
     width: 490; height: 720
 
     SystemPalette { id: activePalette }
 
     Item {
-        width: parent.width; anchors.top: parent.top; anchors.bottom: toolbar.top
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
 
         Image {
             id: background
-            anchors.fill: parent; source: "../shared/pics/background.jpg"
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
             fillMode: Image.PreserveAspectCrop
         }
     }
 
     Rectangle {
-        id: toolbar
+        id: toolBar
+        width: parent.width; height: 32
         color: activePalette.window
-        height: 32; width: parent.width
         anchors.bottom: screen.bottom
 
 //![1]
         Button {
-            text: "New Game"; onClicked: SameGame.startNewGame();
-            anchors.left: parent.left; anchors.leftMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "New Game" 
+            onClicked: SameGame.startNewGame()
         }
 //![1]
 
         Text {
             id: score
-            text: "Score: Who knows?"; font.bold: true
-            anchors.right: parent.right; anchors.rightMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "Score: Who knows?"
+            font.bold: true
         }
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame3/Block.qml b/examples/declarative/tutorials/samegame/samegame3/Block.qml
index bb48ac8..dd0fb48 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Block.qml
@@ -2,20 +2,22 @@
 import Qt 4.7
 
 Item { 
-    id:block
+    id: block
+
     property int type: 0
     
-    Image { id: img
+    Image {
+        id: img
+
+        anchors.fill: parent
         source: {
-            if(type == 0){
-                "../shared/pics/redStone.png";
-            } else if(type == 1) {
-                "../shared/pics/blueStone.png";
-            } else {
-                "../shared/pics/greenStone.png";
-            }
+            if (type == 0)
+                return "../shared/pics/redStone.png";
+            else if (type == 1) 
+                return "../shared/pics/blueStone.png";
+            else
+                return "../shared/pics/greenStone.png";
         }
-        anchors.fill: parent
     }
 }
 //![0]
diff --git a/examples/declarative/tutorials/samegame/samegame3/Button.qml b/examples/declarative/tutorials/samegame/samegame3/Button.qml
index cf4c61b..8d322de5 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Button.qml
@@ -3,24 +3,30 @@ import Qt 4.7
 Rectangle {
     id: container
 
-    signal clicked
     property string text: "Button"
 
-    color: activePalette.button; smooth: true
+    signal clicked
+
     width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+    smooth: true
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    radius: 8
 
+    // color the button with a gradient
     gradient: Gradient {
         GradientStop {
             position: 0.0
-            color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+            color: {
+                if (mouseArea.pressed) 
+                    return activePalette.dark
+                else 
+                    return activePalette.light
+            }
         }
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
     MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
 
-    Text {
-        id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
-    }
+    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
index a76b517..be3a7b7 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
@@ -3,21 +3,30 @@ import Qt 4.7
 
 Rectangle {
     id: page
+
+    signal closed
+
     function forceClose() {
         page.closed();
         page.opacity = 0;
     }
+
     function show(txt) {
         dialogText.text = txt;
         page.opacity = 1;
     }
-    signal closed();
-    color: "white"; border.width: 1; width: dialogText.width + 20; height: dialogText.height + 20;
+
+    width: dialogText.width + 20; height: dialogText.height + 20
+    color: "white"
+    border.width: 1
     opacity: 0
+
     Behavior on opacity { 
         NumberAnimation { duration: 1000 }
     }
+
     Text { id: dialogText; anchors.centerIn: parent; text: "Hello World!" }
+
     MouseArea { anchors.fill: parent; onClicked: forceClose(); }
 }
 //![0]
diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.qml b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
index cdf99d7..bc5f2f8 100644
--- a/examples/declarative/tutorials/samegame/samegame3/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
@@ -4,31 +4,37 @@ import "samegame.js" as SameGame
 
 Rectangle {
     id: screen
+
     width: 490; height: 720
 
     SystemPalette { id: activePalette }
 
     Item {
-        width: parent.width; anchors.top: parent.top; anchors.bottom: toolbar.top
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
 
         Image {
             id: background
-            anchors.fill: parent; source: "../shared/pics/background.jpg"
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
             fillMode: Image.PreserveAspectCrop
         }
 
 //![1]
         Item {
             id: gameCanvas
+
             property int score: 0
             property int blockSize: 40
 
-            z: 20; anchors.centerIn: parent
-            width: parent.width - (parent.width % blockSize);
-            height: parent.height - (parent.height % blockSize);
+            width: parent.width - (parent.width % blockSize)
+            height: parent.height - (parent.height % blockSize)
+            anchors.centerIn: parent
+            z: 20
 
             MouseArea {
-                anchors.fill: parent; onClicked: SameGame.handleClick(mouse.x,mouse.y);
+                anchors.fill: parent
+                onClicked: SameGame.handleClick(mouse.x, mouse.y)
             }
         }
 //![1]
@@ -39,22 +45,22 @@ Rectangle {
 //![2]
 
     Rectangle {
-        id: toolbar
+        id: toolBar
+        width: parent.width; height: 32
         color: activePalette.window
-        height: 32; width: parent.width
         anchors.bottom: screen.bottom
 
         Button {
-            text: "New Game"; onClicked: SameGame.startNewGame();
-            anchors.left: parent.left; anchors.leftMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "New Game" 
+            onClicked: SameGame.startNewGame()
         }
 
         Text {
             id: score
-            text: "Score: " + gameCanvas.score; font.bold: true
-            anchors.right: parent.right; anchors.rightMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "Score: Who knows?"
+            font.bold: true
         }
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
index 243df75..d3a9df7 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
@@ -1,9 +1,12 @@
 import Qt 4.7
 import Qt.labs.particles 1.0
 
-Item { id:block
+Item {
+    id: block
+
     property int type: 0
     property bool dying: false
+
     //![1]
     property bool spawned: false
     property int targetX: 0
@@ -14,47 +17,59 @@ Item { id:block
     //![1]
 
     //![2]
-    Image { id: img
+    Image { 
+        id: img
+
+        anchors.fill: parent
         source: {
-            if(type == 0){
-                "../../shared/pics/redStone.png";
-            } else if(type == 1) {
-                "../../shared/pics/blueStone.png";
-            } else {
-                "../../shared/pics/greenStone.png";
-            }
+            if (type == 0)
+                return "../../shared/pics/redStone.png";
+            else if (type == 1) 
+                return "../../shared/pics/blueStone.png";
+            else
+                return "../../shared/pics/greenStone.png";
         }
         opacity: 0
-        Behavior on opacity { NumberAnimation { properties:"opacity"; duration: 200 } }
-        anchors.fill: parent
+
+        Behavior on opacity { 
+            NumberAnimation { properties:"opacity"; duration: 200 }
+        }
     }
     //![2]
 
     //![3]
-    Particles { id: particles
-        width:1; height:1; anchors.centerIn: parent;
-        emissionRate: 0;
-        lifeSpan: 700; lifeSpanDeviation: 600;
+    Particles {
+        id: particles
+
+        width: 1; height: 1 
+        anchors.centerIn: parent
+
+        emissionRate: 0
+        lifeSpan: 700; lifeSpanDeviation: 600
         angle: 0; angleDeviation: 360;
-        velocity: 100; velocityDeviation:30;
+        velocity: 100; velocityDeviation: 30
         source: {
-            if(type == 0){
-                "../../shared/pics/redStar.png";
-            } else if (type == 1) {
-                "../../shared/pics/blueStar.png";
-            } else {
-                "../../shared/pics/greenStar.png";
-            }
+            if (type == 0)
+                return "../../shared/pics/redStar.png";
+            else if (type == 1) 
+                return "../../shared/pics/blueStar.png";
+            else
+                return "../../shared/pics/greenStar.png";
         }
     }
     //![3]
 
     //![4]
     states: [
-        State{ name: "AliveState"; when: spawned == true && dying == false
+        State {
+            name: "AliveState"
+            when: spawned == true && dying == false
             PropertyChanges { target: img; opacity: 1 }
         },
-        State{ name: "DeathState"; when: dying == true
+
+        State {
+            name: "DeathState"
+            when: dying == true
             StateChangeScript { script: particles.burst(50); }
             PropertyChanges { target: img; opacity: 0 }
             StateChangeScript { script: block.destroy(1000); }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
index cf4c61b..8d322de5 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
@@ -3,24 +3,30 @@ import Qt 4.7
 Rectangle {
     id: container
 
-    signal clicked
     property string text: "Button"
 
-    color: activePalette.button; smooth: true
+    signal clicked
+
     width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+    smooth: true
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    radius: 8
 
+    // color the button with a gradient
     gradient: Gradient {
         GradientStop {
             position: 0.0
-            color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+            color: {
+                if (mouseArea.pressed) 
+                    return activePalette.dark
+                else 
+                    return activePalette.light
+            }
         }
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
     MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
 
-    Text {
-        id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
-    }
+    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
index 15f5b19..adb3f9e 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
@@ -2,20 +2,29 @@ import Qt 4.7
 
 Rectangle {
     id: page
+
+    signal closed
+
     function forceClose() {
         page.closed();
         page.opacity = 0;
     }
+
     function show(txt) {
         dialogText.text = txt;
         page.opacity = 1;
     }
-    signal closed();
-    color: "white"; border.width: 1; width: dialogText.width + 20; height: dialogText.height + 20;
+
+    width: dialogText.width + 20; height: dialogText.height + 20
+    color: "white"
+    border.width: 1
     opacity: 0
+
     Behavior on opacity { 
         NumberAnimation { duration: 1000 }
     }
+
     Text { id: dialogText; anchors.centerIn: parent; text: "Hello World!" }
+
     MouseArea { anchors.fill: parent; onClicked: forceClose(); }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
index 47985de..7800b6e 100755
--- a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
+++ b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
@@ -13,8 +13,8 @@ function index(column, row) {
 }
 
 function startNewGame() {
+    //Delete blocks from previous game
     for (var i = 0; i < maxIndex; i++) {
-        //Delete blocks from previous game
         if (board[i] != null)
             board[i].destroy();
     }
diff --git a/examples/declarative/tutorials/samegame/samegame4/samegame.qml b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
index 5d5c81f..b2a490d 100644
--- a/examples/declarative/tutorials/samegame/samegame4/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
@@ -4,16 +4,19 @@ import "content/samegame.js" as SameGame
 
 Rectangle {
     id: screen
+
     width: 490; height: 720
 
     SystemPalette { id: activePalette }
 
     Item {
-        width: parent.width; anchors.top: parent.top; anchors.bottom: toolBar.top
+        width: parent.width
+        anchors { top: parent.top; bottom: toolBar.top }
 
         Image {
             id: background
-            anchors.fill: parent; source: "../shared/pics/background.jpg"
+            anchors.fill: parent
+            source: "../shared/pics/background.jpg"
             fillMode: Image.PreserveAspectCrop
         }
 
@@ -36,43 +39,49 @@ Rectangle {
 
     //![0]
     Dialog {
-        id: nameInputDialog; anchors.centerIn: parent; z: 22;
+        id: nameInputDialog
+
+        anchors.centerIn: parent
+        z: 22
+
         Text {
-            id: spacer
+            id: dialogText
             opacity: 0
             text: "   You won! Please enter your name:"
         }
+
         TextInput {
-            id: editor
+            id: nameInput
+            width: 72
+            anchors { verticalCenter: parent.verticalCenter; left: dialogText.right }
+            focus: true
+
             onAccepted: {
-                if(nameInputDialog.opacity==1&&editor.text!="")
-                    SameGame.saveHighScore(editor.text);
+                if (nameInputDialog.opacity == 1 && nameInput.text != "")
+                    SameGame.saveHighScore(nameInput.text);
                 nameInputDialog.forceClose();
             }
-            anchors.verticalCenter: parent.verticalCenter
-            width: 72; focus: true
-            anchors.left: spacer.right
         }
     }
     //![0]
 
     Rectangle {
         id: toolBar
+        width: parent.width; height: 32
         color: activePalette.window
-        height: 32; width: parent.width
         anchors.bottom: screen.bottom
 
         Button {
-            text: "New Game"; onClicked: SameGame.startNewGame();
-            anchors.left: parent.left; anchors.leftMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "New Game" 
+            onClicked: SameGame.startNewGame()
         }
 
         Text {
             id: score
-            text: "Score: " + gameCanvas.score; font.bold: true
-            anchors.right: parent.right; anchors.rightMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "Score: " + gameCanvas.score
+            font.bold: true
         }
     }
 }
diff --git a/examples/declarative/tvtennis/tvtennis.qml b/examples/declarative/tvtennis/tvtennis.qml
index 9d107ad..354a16f 100644
--- a/examples/declarative/tvtennis/tvtennis.qml
+++ b/examples/declarative/tvtennis/tvtennis.qml
@@ -8,13 +8,14 @@ Rectangle {
 
     // Make a ball to bounce
     Rectangle {
+        id: ball
+
         // Add a property for the target y coordinate
         property int targetY : page.height - 10
         property variant direction : "right"
 
-        id: ball
-        color: "Lime"
         x: 20; width: 20; height: 20; z: 1
+        color: "Lime"
 
         SoundEffect { id: paddle; source: "paddle.wav" }
         SoundEffect { id: wall; source: "click.wav" }
diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index a39ec94..433295b 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -18,10 +18,11 @@ Component {
         Repeater {
             model: notes
             Item {
+                id: stickyPage
+
                 property int randomX: Math.random() * 500 + 100
                 property int randomY: Math.random() * 200 + 50
 
-                id: stickyPage
                 x: randomX; y: randomY
 
                 SpringFollow on rotation {
@@ -32,26 +33,32 @@ Component {
                 Item {
                     id: sticky
                     scale: 0.7
+
                     Image {
                         id: stickyImage
-                        source: "note-yellow.png"; transformOrigin: Item.TopLeft
-                        smooth: true; y: -20; x: 8 + -width * 0.6 / 2; scale: 0.6
+                        x: 8 + -width * 0.6 / 2; y: -20
+                        source: "note-yellow.png"
+                        scale: 0.6; transformOrigin: Item.TopLeft
+                        smooth: true
                     }
 
                     TextEdit {
-                        id: myText; smooth: true; font.pixelSize: 24
-                        readOnly: false; x: -104; y: 36
-                        rotation: -8; text: noteText; width: 215; height: 200
+                        id: myText
+                        x: -104; y: 36; width: 215; height: 200
+                        smooth: true
+                        font.pixelSize: 24
+                        readOnly: false
+                        rotation: -8
+                        text: noteText
                     }
 
                     Item {
-                        y: -20
-                        x: stickyImage.x
+                        x: stickyImage.x; y: -20
                         width: stickyImage.width * stickyImage.scale
                         height: stickyImage.height * stickyImage.scale
+
                         MouseArea {
                             id: mouse
-                            onClicked: { myText.focus = true }
                             anchors.fill: parent
                             drag.target: stickyPage
                             drag.axis: "XandYAxis"
@@ -59,13 +66,15 @@ Component {
                             drag.maximumY: page.height - 80
                             drag.minimumX: 100
                             drag.maximumX: page.width - 140
+                            onClicked: { myText.focus = true }
                         }
                     }
                 }
 
                 Image {
-                    source: "tack.png"; transformOrigin: Item.TopLeft
-                    x: -width / 2; y: -height * 0.5 / 2; scale: 0.7
+                    x: -width / 2; y: -height * 0.5 / 2
+                    source: "tack.png"
+                    scale: 0.7; transformOrigin: Item.TopLeft
                 }
 
                 states: State {
diff --git a/examples/declarative/velocity/velocity.qml b/examples/declarative/velocity/velocity.qml
index 20821d6..871bafc 100644
--- a/examples/declarative/velocity/velocity.qml
+++ b/examples/declarative/velocity/velocity.qml
@@ -1,46 +1,75 @@
 import Qt 4.7
 
 Rectangle {
-    width: 800; height: 480; color: "#464646"
+    width: 800; height: 480
+    color: "#464646"
 
     ListModel {
         id: list
+
         ListElement {
             name: "Sunday"
-            notes: [ ListElement { noteText: "Lunch" }, ListElement { noteText: "Birthday Party" } ]
+            notes: [ 
+                ListElement { noteText: "Lunch" },
+                ListElement { noteText: "Birthday Party" }
+            ]
         }
+        
         ListElement {
             name: "Monday"
-            notes: [ ListElement { noteText: "Pickup kids from\nschool\n4.30pm" },
-            ListElement { noteText: "Checkout Qt" }, ListElement { noteText: "Read email" } ]
+            notes: [
+                ListElement { noteText: "Pickup kids from\nschool\n4.30pm" },
+                ListElement { noteText: "Checkout Qt" }, ListElement { noteText: "Read email" }
+            ]
         }
+
         ListElement {
             name: "Tuesday"
-            notes: [ ListElement { noteText: "Walk dog" }, ListElement { noteText: "Buy newspaper" } ]
+            notes: [
+                ListElement { noteText: "Walk dog" },
+                ListElement { noteText: "Buy newspaper" }
+            ]
         }
+
         ListElement {
-            name: "Wednesday"; notes: [ ListElement { noteText: "Cook dinner" } ]
+            name: "Wednesday"
+            notes: [ ListElement { noteText: "Cook dinner" } ]
         }
+
         ListElement {
             name: "Thursday"
-            notes: [ ListElement { noteText: "Meeting\n5.30pm" }, ListElement { noteText: "Weed garden" } ]
+            notes: [
+                ListElement { noteText: "Meeting\n5.30pm" },
+                ListElement { noteText: "Weed garden" }
+            ]
         }
+
         ListElement {
             name: "Friday"
-            notes: [ ListElement { noteText: "More work" }, ListElement { noteText: "Grocery shopping" } ]
+            notes: [
+                ListElement { noteText: "More work" },
+                ListElement { noteText: "Grocery shopping" }
+            ]
         }
+
         ListElement {
             name: "Saturday"
-            notes: [ ListElement { noteText: "Drink" }, ListElement { noteText: "Download Qt\nPlay with QML" } ]
+            notes: [
+                ListElement { noteText: "Drink" },
+                ListElement { noteText: "Download Qt\nPlay with QML" }
+            ]
         }
     }
 
     ListView {
         id: flickable
-        anchors.fill: parent; focus: true
-        model: list; delegate: Day { }
+
+        anchors.fill: parent
+        focus: true
         highlightRangeMode: ListView.StrictlyEnforceRange
         orientation: ListView.Horizontal
         snapMode: ListView.SnapOneItem
+        model: list
+        delegate: Day { }
     }
 }
diff --git a/examples/declarative/webview/alerts.qml b/examples/declarative/webview/alerts.qml
index 2ba4300..6a5a0d2 100644
--- a/examples/declarative/webview/alerts.qml
+++ b/examples/declarative/webview/alerts.qml
@@ -3,17 +3,17 @@ import org.webkit 1.0
 
 WebView {
     id: webView
-    onAlert: popup.show(message)
     width: 120
     height: 150
     url: "alerts.html"
 
+    onAlert: popup.show(message)
+
     Rectangle {
         id: popup
 
         color: "red"
-        border.color: "black"
-        border.width: 2
+        border.color: "black"; border.width: 2
         radius: 4
 
         y: parent.height // off "screen"
diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml
index c4a502e..9632883 100644
--- a/examples/declarative/webview/autosize.qml
+++ b/examples/declarative/webview/autosize.qml
@@ -5,15 +5,16 @@ import org.webkit 1.0
 // preferredWidth, and preferredHeight properties.
 Rectangle {
     id: rect
-    color: "white"
     width: 200
     height: layout.height
+
     Column {
         id: layout
         spacing: 2
         WebView {
             html: "No width defined."
-            Rectangle {                color: "#10000000"
+            Rectangle {
+                color: "#10000000"
                 anchors.fill: parent
             }
         }
diff --git a/examples/declarative/webview/googleMaps.qml b/examples/declarative/webview/googleMaps.qml
index 4702dea..5506012 100644
--- a/examples/declarative/webview/googleMaps.qml
+++ b/examples/declarative/webview/googleMaps.qml
@@ -14,15 +14,15 @@ Map {
     width: 300
     height: 300
     address: "Paris"
+
     Rectangle {
-        color: "white"
+        x: 70
         width: input.width + 20
         height: input.height + 4
+        anchors.bottom: parent.bottom; anchors.bottomMargin: 5
         radius: 5
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 5
         opacity: map.status == "Ready" ? 1 : 0
-        x: 70
+
         TextInput {
             id: input
             text: map.address
@@ -30,12 +30,14 @@ Map {
             Keys.onReturnPressed: map.address = input.text
         }
     }
+
     Text {
         id: loading
         anchors.centerIn: parent
         text: map.status == "Error" ? "Error" : "Loading"
         opacity: map.status == "Ready" ? 0 : 1
         font.pixelSize: 30
-        Behavior on opacity {NumberAnimation{}}
+
+        Behavior on opacity { NumberAnimation{} }
     }
 }
diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml
index a0676f4..e4efc31 100644
--- a/examples/declarative/webview/transparent.qml
+++ b/examples/declarative/webview/transparent.qml
@@ -7,6 +7,7 @@ Rectangle {
     color: "green"
     width: web.width
     height: web.height
+
     WebView {
         id: web
         html: "Hello <b>World!</b>"
diff --git a/examples/declarative/workerscript/workerscript.qml b/examples/declarative/workerscript/workerscript.qml
index 1c7a920..6c6253b 100644
--- a/examples/declarative/workerscript/workerscript.qml
+++ b/examples/declarative/workerscript/workerscript.qml
@@ -1,7 +1,7 @@
 import Qt 4.7
 
 Rectangle {
-    width: 480; height: 320;
+    width: 480; height: 320
 
     WorkerScript {
         id: myWorker
@@ -16,8 +16,7 @@ Rectangle {
 
     Rectangle {
         width: 200; height: 200
-        anchors.left: parent.left
-        anchors.leftMargin: 20
+        anchors.left: parent.left; anchors.leftMargin: 20
         color: "red"
 
         MouseArea { 
@@ -28,8 +27,7 @@ Rectangle {
 
     Rectangle {
         width: 200; height: 200
-        anchors.right: parent.right
-        anchors.rightMargin: 20
+        anchors.right: parent.right; anchors.rightMargin: 20
         color: "blue"
 
         MouseArea { 
@@ -40,8 +38,6 @@ Rectangle {
 
     Text {
         text: "Click a Rectangle!"
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 50
+        anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; bottomMargin: 50 }
     }
 }
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
index c5732c0..a1df809 100644
--- a/examples/declarative/xmldata/daringfireball.qml
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -24,15 +24,17 @@ Rectangle {
                 text: title; font.bold: true
             }
             Text {
+                anchors { left: titleText.right; leftMargin: 10 }
                 text: 'by ' + tagline
-                anchors.left: titleText.right; anchors.leftMargin: 10
                 font.italic: true
             }
             Text {
                 x: 10
-                text: content
+                width: 580
                 anchors.top: titleText.bottom
-                width: 580; wrapMode: Text.WordWrap
+                text: content
+                wrapMode: Text.WordWrap
+
                 onLinkActivated: { console.log('link clicked: ' + link) }
             }
         }
@@ -40,6 +42,7 @@ Rectangle {
 
     ListView {
         anchors.fill: parent
-        model: feedModel; delegate: feedDelegate
+        model: feedModel
+        delegate: feedDelegate
     }
 }
diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml
index e6cb373..668778e 100644
--- a/examples/declarative/xmldata/yahoonews.qml
+++ b/examples/declarative/xmldata/yahoonews.qml
@@ -1,11 +1,12 @@
 import Qt 4.7
 
 Rectangle {
+    width: 600; height: 600
+
     gradient: Gradient {
         GradientStop { position: 0; color: "black" }
         GradientStop { position: 1.0; color: "#AAAAAA" }
     }
-    width: 600; height: 600
 
     XmlListModel {
         id: feedModel
@@ -18,6 +19,7 @@ Rectangle {
 
     Component {
         id: feedDelegate
+
         Item {
             id: delegate
             height: wrapper.height + 10
@@ -30,25 +32,27 @@ Rectangle {
 
             Rectangle {
                 id: wrapper
-                y: 5; height: titleText.height + 10; width: 580
-                color: "#F0F0F0"; radius: 5
+
+                width: 580; y: 5; height: titleText.height + 10
+                color: "#F0F0F0"
+                radius: 5
+                
                 Text {
                     id: titleText
                     x: 10; y: 5
                     text: '<a href=\'' + link + '\'>' + title + '</a>'
-                    font.bold: true; font.family: "Helvetica"; font.pointSize: 14
+                    font { bold: true; family: "Helvetica"; pointSize: 14 }
+
                     onLinkActivated: { console.log('link clicked: ' + link) }
                 }
 
                 Text {
-                    x: 10
                     id: descriptionText
+                    x: 10; width: 560
+                    anchors.top: titleText.bottom; anchors.topMargin: 5
                     text: description
-                    width: 560
                     wrapMode: Text.WordWrap
                     font.family: "Helvetica"
-                    anchors.top: titleText.bottom
-                    anchors.topMargin: 5
                     opacity: 0
                 }
 
diff --git a/examples/declarative/xmlhttprequest/test.qml b/examples/declarative/xmlhttprequest/test.qml
index ef9d5f3..c7e7e6d 100644
--- a/examples/declarative/xmlhttprequest/test.qml
+++ b/examples/declarative/xmlhttprequest/test.qml
@@ -5,32 +5,32 @@ Rectangle {
 
     MouseArea {
         anchors.fill: parent
+
         onClicked: { 
+            var doc = new XMLHttpRequest();
+            doc.onreadystatechange = function() {
+                if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
+                    console.log("Headers -->");
+                    console.log(doc.getAllResponseHeaders ());
+                    console.log("Last modified -->");
+                    console.log(doc.getResponseHeader ("Last-Modified"));
+                }
+                else if (doc.readyState == XMLHttpRequest.DONE) {
 
-                var doc = new XMLHttpRequest();
-                doc.onreadystatechange = function() {
-                    if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
-                        console.log("Headers -->");
-                        console.log(doc.getAllResponseHeaders ());
-                        console.log("Last modified -->");
-                        console.log(doc.getResponseHeader ("Last-Modified"));
+                    var a = doc.responseXML.documentElement;
+                    for (var ii = 0; ii < a.childNodes.length; ++ii) {
+                        console.log(a.childNodes[ii].nodeName);
                     }
-                    else if (doc.readyState == XMLHttpRequest.DONE) {
-    
-                        var a = doc.responseXML.documentElement;
-                        for (var ii = 0; ii < a.childNodes.length; ++ii) {
-                            console.log(a.childNodes[ii].nodeName);
-                        }
-                        console.log("Headers -->");
-                        console.log(doc.getAllResponseHeaders ());
-                        console.log("Last modified -->");
-                        console.log(doc.getResponseHeader ("Last-Modified"));
+                    console.log("Headers -->");
+                    console.log(doc.getAllResponseHeaders ());
+                    console.log("Last modified -->");
+                    console.log(doc.getResponseHeader ("Last-Modified"));
 
-                    }
                 }
+            }
 
-                doc.open("GET", "test.xml");
-                doc.send();
+            doc.open("GET", "test.xml");
+            doc.send();
         }
     }
 }