1 files changed, 13 insertions, 13 deletions
diff --git a/examples/threads/mandelbrot/renderthread.h b/examples/threads/mandelbrot/renderthread.h
index f332920..89d9264 100644
--- a/examples/threads/mandelbrot/renderthread.h
+++ b/examples/threads/mandelbrot/renderthread.h
@@ -9,8 +9,8 @@
 ** No Commercial Usage
 ** This file contains pre-release code and may not be distributed.
 ** You may use this file in accordance with the terms and conditions
-** contained in the either Technology Preview License Agreement or the
-** Beta Release License Agreement.
+** contained in the Technology Preview License Agreement accompanying
+** this package.
 **
 ** GNU Lesser General Public License Usage
 ** Alternatively, this file may be used under the terms of the GNU Lesser
@@ -21,20 +21,20 @@
 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
 **
 ** In addition, as a special exception, Nokia gives you certain
-** additional rights. These rights are described in the Nokia Qt LGPL
-** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
+** additional rights.  These rights are described in the Nokia Qt LGPL
+** Exception version 1.1, included in the file LGPL_EXCEPTION.txt in this
 ** package.
 **
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3.0 as published by the Free Software
-** Foundation and appearing in the file LICENSE.GPL included in the
-** packaging of this file.  Please review the following information to
-** ensure the GNU General Public License version 3.0 requirements will be
-** met: http://www.gnu.org/copyleft/gpl.html.
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
 **
-** If you are unsure which license is appropriate for your use, please
-** contact the sales department at http://qt.nokia.com/contact.
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
diff --git a/demos/declarative/minehunt/MinehuntCore/Explosion.qml b/demos/declarative/minehunt/MinehuntCore/Explosion.qml
index 526cd34..73ada60 100644
--- a/demos/declarative/minehunt/MinehuntCore/Explosion.qml
+++ b/demos/declarative/minehunt/MinehuntCore/Explosion.qml
@@ -17,11 +17,9 @@ Item {
         velocity: 100
         velocityDeviation: 20
         z: 100
-        opacity: 1
     }
-    states: [ State { name: "exploding"; when: explode == true
-            StateChangeScript {script: particles.burst(200); }
-        }
-    ]
+    states: State { name: "exploding"; when: explode
+        StateChangeScript {script: particles.burst(200); }
+    }
 
 }
diff --git a/demos/declarative/minehunt/MinehuntCore/Tile.qml b/demos/declarative/minehunt/MinehuntCore/Tile.qml
new file mode 100644
index 0000000..f3620f4
--- /dev/null
+++ b/demos/declarative/minehunt/MinehuntCore/Tile.qml
@@ -0,0 +1,87 @@
+import Qt 4.7
+
+Flipable {
+    id: flipable
+    property int angle: 0
+
+    width: 40;  height: 40
+    transform: Rotation { origin.x: 20; origin.y: 20; axis.x: 1; axis.z: 0; angle: flipable.angle }
+
+    front: Image {
+        source: "pics/front.png"; width: 40; height: 40
+
+        Image {
+            anchors.centerIn: parent
+            source: "pics/flag.png"; opacity: modelData.hasFlag
+
+            Behavior on opacity { NumberAnimation {} }
+        }
+    }
+
+    back: Image {
+        source: "pics/back.png"
+        width: 40; height: 40
+
+        Text {
+            anchors.centerIn: parent
+            text: modelData.hint; color: "white"; font.bold: true
+            opacity: !modelData.hasMine && modelData.hint > 0
+        }
+
+        Image {
+            anchors.centerIn: parent
+            source: "pics/bomb.png"; opacity: modelData.hasMine
+        }
+
+        Explosion { id: expl }
+    }
+
+    states: State {
+        name: "back"; when: modelData.flipped
+        PropertyChanges { target: flipable; angle: 180 }
+    }
+
+    property real pauseDur: 250
+    transitions: Transition {
+        SequentialAnimation {
+            ScriptAction {
+                script: {
+                    var ret = Math.abs(flipable.x - field.clickx)
+                        + Math.abs(flipable.y - field.clicky);
+                    if (modelData.hasMine && modelData.flipped)
+                        pauseDur = ret * 3
+                    else
+                        pauseDur = ret
+                }
+            }
+            PauseAnimation {
+                duration: pauseDur
+            }
+            RotationAnimation { easing.type: "InOutQuad" }
+            ScriptAction { script: if (modelData.hasMine && modelData.flipped) { expl.explode = true } }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: {
+            field.clickx = flipable.x
+            field.clicky = flipable.y
+            var row = Math.floor(index / 9)
+            var col = index - (Math.floor(index / 9) * 9)
+            if (mouse.button == undefined || mouse.button == Qt.RightButton) {
+                flag(row, col)
+            } else {
+                flip(row, col)
+            }
+        }
+        onPressAndHold: {
+            field.clickx = flipable.x
+            field.clicky = flipable.y
+            var row = Math.floor(index / 9)
+            var col = index - (Math.floor(index / 9) * 9)
+            flag(row, col)
+        }
+    }
+}
diff --git a/demos/declarative/minehunt/MinehuntCore/qmldir b/demos/declarative/minehunt/MinehuntCore/qmldir
index 862c396..95bccc8 100644
--- a/demos/declarative/minehunt/MinehuntCore/qmldir
+++ b/demos/declarative/minehunt/MinehuntCore/qmldir
@@ -1,2 +1,3 @@
 plugin minehunt
 Explosion 1.0 Explosion.qml
+Tile 1.0 Tile.qml
diff --git a/demos/declarative/minehunt/README b/demos/declarative/minehunt/README
index 1b6cf81..b9f1d2a 100644
--- a/demos/declarative/minehunt/README
+++ b/demos/declarative/minehunt/README
@@ -1,5 +1,3 @@
 To compile the C++ part, do 'qmake && make'. Minehunt will not run properly if the C++ plugin is not compiled.
 
 To run, simply load the minehunt.qml file with the qml runtime.
-
-Note that on X11, this demo has problems with the native graphicssystem. If you are using the X11 window system, please pass -graphicssystem raster to the qml binary.
diff --git a/demos/declarative/minehunt/minehunt.cpp b/demos/declarative/minehunt/minehunt.cpp
index a953c5a..d4b0039 100644
--- a/demos/declarative/minehunt/minehunt.cpp
+++ b/demos/declarative/minehunt/minehunt.cpp
@@ -48,11 +48,11 @@
 #include <QTime>
 #include <QTimer>
 
-class Tile : public QObject
+class TileData : public QObject
 {
     Q_OBJECT
 public:
-    Tile() : _hasFlag(false), _hasMine(false), _hint(-1), _flipped(false) {}
+    TileData() : _hasFlag(false), _hasMine(false), _hint(-1), _flipped(false) {}
 
     Q_PROPERTY(bool hasFlag READ hasFlag WRITE setHasFlag NOTIFY hasFlagChanged)
     bool hasFlag() const { return _hasFlag; }
@@ -91,8 +91,8 @@ class MinehuntGame : public QObject
 public:
     MinehuntGame();
 
-    Q_PROPERTY(QDeclarativeListProperty<Tile> tiles READ tiles CONSTANT)
-    QDeclarativeListProperty<Tile> tiles();
+    Q_PROPERTY(QDeclarativeListProperty<TileData> tiles READ tiles CONSTANT)
+    QDeclarativeListProperty<TileData> tiles();
 
     Q_PROPERTY(bool isPlaying READ isPlaying NOTIFY isPlayingChanged)
     bool isPlaying() {return playing;}
@@ -120,11 +120,11 @@ signals:
 
 private:
     bool onBoard( int r, int c ) const { return r >= 0 && r < numRows && c >= 0 && c < numCols; }
-    Tile *tile( int row, int col ) { return onBoard(row, col) ? _tiles[col+numRows*row] : 0; }
+    TileData *tile( int row, int col ) { return onBoard(row, col) ? _tiles[col+numRows*row] : 0; }
     int getHint(int row, int col);
     void setPlaying(bool b){if(b==playing) return; playing=b; emit isPlayingChanged();}
 
-    QList<Tile *> _tiles;
+    QList<TileData *> _tiles;
     int numCols;
     int numRows;
     bool playing;
@@ -134,25 +134,25 @@ private:
     int nFlags;
 };
 
-void tilesPropAppend(QDeclarativeListProperty<Tile>* prop, Tile* value)
+void tilesPropAppend(QDeclarativeListProperty<TileData>* prop, TileData* value)
 {
     Q_UNUSED(prop);
     Q_UNUSED(value);
     return; //Append not supported
 }
 
-int tilesPropCount(QDeclarativeListProperty<Tile>* prop)
+int tilesPropCount(QDeclarativeListProperty<TileData>* prop)
 {
-    return static_cast<QList<Tile*>*>(prop->data)->count();
+    return static_cast<QList<TileData*>*>(prop->data)->count();
 }
 
-Tile* tilesPropAt(QDeclarativeListProperty<Tile>* prop, int index)
+TileData* tilesPropAt(QDeclarativeListProperty<TileData>* prop, int index)
 {
-    return static_cast<QList<Tile*>*>(prop->data)->at(index);
+    return static_cast<QList<TileData*>*>(prop->data)->at(index);
 }
 
-QDeclarativeListProperty<Tile> MinehuntGame::tiles(){
-    return QDeclarativeListProperty<Tile>(this, &_tiles, &tilesPropAppend,
+QDeclarativeListProperty<TileData> MinehuntGame::tiles(){
+    return QDeclarativeListProperty<TileData>(this, &_tiles, &tilesPropAppend,
             &tilesPropCount, &tilesPropAt, 0);
 }
 
@@ -164,7 +164,7 @@ MinehuntGame::MinehuntGame()
 
     //initialize array
     for(int ii = 0; ii < numRows * numCols; ++ii) {
-        _tiles << new Tile;
+        _tiles << new TileData;
     }
     reset();
 
@@ -172,7 +172,7 @@ MinehuntGame::MinehuntGame()
 
 void MinehuntGame::setBoard()
 {
-    foreach(Tile* t, _tiles){
+    foreach(TileData* t, _tiles){
         t->setHasMine(false);
         t->setHint(-1);
     }
@@ -183,7 +183,7 @@ void MinehuntGame::setBoard()
         int col = int((double(rand()) / double(RAND_MAX)) * numCols);
         int row = int((double(rand()) / double(RAND_MAX)) * numRows);
 
-        Tile* t = tile( row, col );
+        TileData* t = tile( row, col );
 
         if (t && !t->hasMine()) {
             t->setHasMine( true );
@@ -194,7 +194,7 @@ void MinehuntGame::setBoard()
     //set hints
     for (int r = 0; r < numRows; r++)
         for (int c = 0; c < numCols; c++) {
-            Tile* t = tile(r, c);
+            TileData* t = tile(r, c);
             if (t && !t->hasMine()) {
                 int hint = getHint(r,c);
                 t->setHint(hint);
@@ -206,7 +206,7 @@ void MinehuntGame::setBoard()
 
 void MinehuntGame::reset()
 {
-    foreach(Tile* t, _tiles){
+    foreach(TileData* t, _tiles){
         t->unflip();
         t->setHasFlag(false);
     }
@@ -221,7 +221,7 @@ int MinehuntGame::getHint(int row, int col)
     int hint = 0;
     for (int c = col-1; c <= col+1; c++)
         for (int r = row-1; r <= row+1; r++) {
-            Tile* t = tile(r, c);
+            TileData* t = tile(r, c);
             if (t && t->hasMine())
                 hint++;
         }
@@ -233,7 +233,7 @@ bool MinehuntGame::flip(int row, int col)
     if(!playing)
         return false;
 
-    Tile *t = tile(row, col);
+    TileData *t = tile(row, col);
     if (!t || t->hasFlag())
         return false;
 
@@ -241,7 +241,7 @@ bool MinehuntGame::flip(int row, int col)
         int flags = 0;
         for (int c = col-1; c <= col+1; c++)
             for (int r = row-1; r <= row+1; r++) {
-                Tile *nearT = tile(r, c);
+                TileData *nearT = tile(r, c);
                 if(!nearT || nearT == t)
                     continue;
                 if(nearT->hasFlag())
@@ -251,7 +251,7 @@ bool MinehuntGame::flip(int row, int col)
             return false;
         for (int c = col-1; c <= col+1; c++)
             for (int r = row-1; r <= row+1; r++) {
-                Tile *nearT = tile(r, c);
+                TileData *nearT = tile(r, c);
                 if (nearT && !nearT->flipped() && !nearT->hasFlag()) {
                     flip( r, c );
                 }
@@ -264,7 +264,7 @@ bool MinehuntGame::flip(int row, int col)
     if (t->hint() == 0) {
         for (int c = col-1; c <= col+1; c++)
             for (int r = row-1; r <= row+1; r++) {
-                Tile* t = tile(r, c);
+                TileData* t = tile(r, c);
                 if (t && !t->flipped()) {
                     flip( r, c );
                 }
@@ -274,7 +274,7 @@ bool MinehuntGame::flip(int row, int col)
     if(t->hasMine()){
         for (int r = 0; r < numRows; r++)//Flip all other mines
             for (int c = 0; c < numCols; c++) {
-                Tile* t = tile(r, c);
+                TileData* t = tile(r, c);
                 if (t && t->hasMine()) {
                     flip(r, c);
                 }
@@ -295,7 +295,7 @@ bool MinehuntGame::flip(int row, int col)
 
 bool MinehuntGame::flag(int row, int col)
 {
-    Tile *t = tile(row, col);
+    TileData *t = tile(row, col);
     if(!t)
         return false;
 
@@ -305,8 +305,7 @@ bool MinehuntGame::flag(int row, int col)
     return true;
 }
 
-QML_DECLARE_TYPE(Tile);
-QML_DECLARE_TYPE(MinehuntGame);
+QML_DECLARE_TYPE(TileData);
 
 class MinehuntExtensionPlugin : public QDeclarativeExtensionPlugin
 {
@@ -314,8 +313,8 @@ class MinehuntExtensionPlugin : public QDeclarativeExtensionPlugin
 
     public:
     void registerTypes(const char *uri) {
-        qmlRegisterType<Tile>(uri, 0, 1, "Tile");
-        qmlRegisterType<MinehuntGame>(uri, 0, 1, "Game");
+        Q_UNUSED(uri);
+        qmlRegisterType<TileData>();
     }
 
     void initializeEngine(QDeclarativeEngine *engine, const char *uri) {
diff --git a/demos/declarative/minehunt/minehunt.pro b/demos/declarative/minehunt/minehunt.pro
index 8a5667d..41640f5 100644
--- a/demos/declarative/minehunt/minehunt.pro
+++ b/demos/declarative/minehunt/minehunt.pro
@@ -16,6 +16,7 @@ target.path = $$[QT_INSTALL_DEMOS]/declarative/minehunt/MinehuntCore
 
 MinehuntCore_sources.files = \
     MinehuntCore/Explosion.qml \
+    MinehuntCore/Tile.qml \
     MinehuntCore/pics \
     MinehuntCore/qmldir
 MinehuntCore_sources.path = $$[QT_INSTALL_DEMOS]/declarative/minehunt/MinehuntCore
@@ -26,7 +27,7 @@ symbian:{
     load(data_caging_paths)
     TARGET.EPOCALLOWDLLDATA = 1
     include($$QT_SOURCE_TREE/demos/symbianpkgrules.pri)
-
+    TARGET.CAPABILITY = NetworkServices ReadUserData
     importFiles.sources = minehunt.dll \
     MinehuntCore/Explosion.qml \
     MinehuntCore/pics \
diff --git a/demos/declarative/minehunt/minehunt.qml b/demos/declarative/minehunt/minehunt.qml
index 98955e2..5ed78fb 100644
--- a/demos/declarative/minehunt/minehunt.qml
+++ b/demos/declarative/minehunt/minehunt.qml
@@ -8,101 +8,6 @@ Item {
 
     width: 450; height: 450
 
-    Component {
-        id: tile
-
-        Flipable {
-            id: flipable
-            property int angle: 0
-
-            width: 40;  height: 40
-            transform: Rotation { origin.x: 20; origin.y: 20; axis.x: 1; axis.z: 0; angle: flipable.angle }
-
-            front: Image {
-                source: "MinehuntCore/pics/front.png"; width: 40; height: 40
-
-                Image {
-                    anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter
-                    source: "MinehuntCore/pics/flag.png"; opacity: modelData.hasFlag
-
-                    Behavior on opacity { NumberAnimation { property: "opacity"; duration: 250 } }
-                }
-            }
-
-            back: Image {
-                source: "MinehuntCore/pics/back.png"
-                width: 40; height: 40
-
-                Text {
-                    anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter
-                    text: modelData.hint; color: "white"; font.bold: true
-                    opacity: !modelData.hasMine && modelData.hint > 0
-                }
-
-                Image {
-                    anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter
-                    source: "MinehuntCore/pics/bomb.png"; opacity: modelData.hasMine
-                }
-
-                Explosion { id: expl }
-            }
-
-            states: State {
-                name: "back"; when: modelData.flipped
-                PropertyChanges { target: flipable; angle: 180 }
-            }
-
-            transitions: Transition {
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: {
-                            var ret
-                            if (flipable.parent != null)
-                                ret = Math.abs(flipable.parent.x - field.clickx)
-                                + Math.abs(flipable.parent.y - field.clicky)
-                                else
-                                    ret = 0
-                            if (ret > 0) {
-                                if (modelData.hasMine && modelData.flipped) {
-                                    ret * 3
-                                } else {
-                                    ret
-                                }
-                            } else {
-                                0
-                            }
-                        }
-                    }
-                    NumberAnimation { easing.type: "InOutQuad"; properties: "angle" }
-                    ScriptAction { script: if (modelData.hasMine && modelData.flipped) { expl.explode = true } }
-                }
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
-                onClicked: {
-                    field.clickx = flipable.parent.x
-                    field.clicky = flipable.parent.y
-                    var row = Math.floor(index / 9)
-                    var col = index - (Math.floor(index / 9) * 9)
-                    if (mouse.button == undefined || mouse.button == Qt.RightButton) {
-                        flag(row, col)
-                    } else {
-                        flip(row, col)
-                    }
-                }
-                onPressAndHold: {
-                    field.clickx = flipable.parent.x
-                    field.clicky = flipable.parent.y
-                    var row = Math.floor(index / 9)
-                    var col = index - (Math.floor(index / 9) * 9)
-                    flag(row, col)
-                }
-            }
-        }
-    }
-
     Image { source: "MinehuntCore/pics/No-Ones-Laughing-3.jpg"; anchors.fill: parent; fillMode: Image.Tile }
 
     Grid {
@@ -112,7 +17,7 @@ Item {
         Repeater {
             id: repeater
             model: tiles
-            Component { Loader { sourceComponent: tile } }
+            delegate: Tile {}
         }
     }
 
@@ -143,8 +48,10 @@ Item {
         MouseArea { anchors.fill: parent; onPressed: reset() }
     }
     Text {
-        anchors.fill: parent; wrapMode: Text.WordWrap
-        text: "Minehunt will not run properly if the C++ plugin is not compiled.\nPlease see README."
+        anchors.centerIn: parent; width: parent.width - 20
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.WordWrap
+        text: "Minehunt will not run properly if the C++ plugin is not compiled.\n\nPlease see README."
         color: "white"; font.bold: true; font.pixelSize: 14
         visible: tiles == undefined
     }
diff --git a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
index b494651..cd9ecbc 100644
--- a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
+++ b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
@@ -79,9 +79,9 @@ Component {
 
             GridView.onAdd: NumberAnimation { target: albumWrapper; properties: "scale"; from: 0.0; to: 1.0 }
             GridView.onRemove: SequentialAnimation {
-                PropertyAction { target: albumWrapper.GridView; property: "delayRemove"; value: true }
+                PropertyAction { target: albumWrapper; property: "GridView.delayRemove"; value: true }
                 NumberAnimation { target: albumWrapper; property: "scale"; from: 1.0; to: 0.0 }
-                PropertyAction { target: albumWrapper.GridView; property: "delayRemove"; value: false }
+                PropertyAction { target: albumWrapper; property: "GridView.delayRemove"; value: false }
             }
 
             transitions: [
diff --git a/demos/declarative/samegame/SamegameCore/BoomBlock.qml b/demos/declarative/samegame/SamegameCore/BoomBlock.qml
index db43182..bad1bf4 100644
--- a/demos/declarative/samegame/SamegameCore/BoomBlock.qml
+++ b/demos/declarative/samegame/SamegameCore/BoomBlock.qml
@@ -26,12 +26,16 @@ Item { id:block
         anchors.fill: parent
     }
 
-    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){
                 "pics/redStar.png";
@@ -44,10 +48,13 @@ Item { id:block
     }
 
     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/demos/declarative/samegame/SamegameCore/Button.qml b/demos/declarative/samegame/SamegameCore/Button.qml
index 9c7986b..0faabc9 100644
--- a/demos/declarative/samegame/SamegameCore/Button.qml
+++ b/demos/declarative/samegame/SamegameCore/Button.qml
@@ -3,23 +3,32 @@ import Qt 4.7
 Rectangle {
     id: container
 
-    signal clicked
     property string text: "Button"
 
-    color: activePalette.button; smooth: true
-    width: txtItem.width + 20; height: txtItem.height + 6
-    border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+    signal clicked
+
+    width: buttonLabel.width + 20; height: buttonLabel.height + 6
+    smooth: true
+    border { width: 1; color: Qt.darker(activePalette.button) }
+    radius: 8
+    color: activePalette.button
 
     gradient: Gradient {
         GradientStop {
-            id: topGrad; position: 0.0
-            color: if (mr.pressed) { activePalette.dark } else { activePalette.light } }
+            position: 0.0
+            color: {
+                if (mouseArea.pressed) 
+                    return activePalette.dark
+                else 
+                    return activePalette.light
+            }
+        }
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
-    MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() }
+    MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
 
     Text {
-        id: txtItem; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
+        id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
     }
 }
diff --git a/demos/declarative/samegame/SamegameCore/Dialog.qml b/demos/declarative/samegame/SamegameCore/Dialog.qml
index 7f1189e..8784348 100644
--- a/demos/declarative/samegame/SamegameCore/Dialog.qml
+++ b/demos/declarative/samegame/SamegameCore/Dialog.qml
@@ -2,21 +2,32 @@ import Qt 4.7
 
 Rectangle {
     id: page
+
+    property Item text: dialogText
+
+    signal closed
+
     function forceClose() {
         page.closed();
         page.opacity = 0;
     }
+
     function show(txt) {
-        myText.text = txt;
+        dialogText.text = txt;
         page.opacity = 1;
     }
-    signal closed();
-    property Item text: myText
-    color: "white"; border.width: 1; width: myText.width + 20; height: myText.height + 40;
+
+    width: dialogText.width + 20; height: dialogText.height + 20
+    color: "white"
+    border.width: 1
     opacity: 0
-    Behavior on opacity {
+
+    Behavior on opacity { 
         NumberAnimation { duration: 1000 }
     }
-    Text { id: myText; anchors.centerIn: parent; text: "Hello World!" }
-    MouseArea { id: mr; anchors.fill: parent; onClicked: forceClose(); }
+
+    Text { id: dialogText; anchors.centerIn: parent; text: "Hello World!" }
+
+    MouseArea { anchors.fill: parent; onClicked: forceClose(); }
 }
+
diff --git a/demos/declarative/samegame/SamegameCore/samegame.js b/demos/declarative/samegame/SamegameCore/samegame.js
index a119a88..3888381 100755
--- a/demos/declarative/samegame/SamegameCore/samegame.js
+++ b/demos/declarative/samegame/SamegameCore/samegame.js
@@ -1,18 +1,18 @@
 /* This script file handles the game logic */
-//Note that X/Y referred to here are in game coordinates
-var maxX = 10;//Nums are for gameCanvas.tileSize 40
-var maxY = 15;
-var maxIndex = maxX*maxY;
+
+var maxColumn = 10;
+var maxRow = 15;
+var maxIndex = maxColumn*maxRow;
 var board = new Array(maxIndex);
-var tileSrc = "SamegameCore/BoomBlock.qml";
+var blockSrc = "SamegameCore/BoomBlock.qml";
 var scoresURL = "http://qtfx-nokia.trolltech.com.au/samegame/scores.php";
 var scoresURL = "";
-var timer;
-var component = createComponent(tileSrc);
+var gameDuration;
+var component = createComponent(blockSrc);
 
 //Index function used instead of a 2D array
-function index(xIdx,yIdx) {
-    return xIdx + (yIdx * maxX);
+function index(column,row) {
+    return column + (row * maxColumn);
 }
 
 function timeStr(msecs) {
@@ -22,51 +22,48 @@ function timeStr(msecs) {
     return ret;
 }
 
-function initBoard()
+function startNewGame()
 {
+    //Delete blocks from previous game
     for(var i = 0; i<maxIndex; i++){
-        //Delete old blocks
         if(board[i] != null)
             board[i].destroy();
     }
 
     //Calculate board size
-    maxX = Math.floor(gameCanvas.width/gameCanvas.tileSize);
-    maxY = Math.floor(gameCanvas.height/gameCanvas.tileSize);
-    maxIndex = maxY*maxX;
+    maxColumn = Math.floor(gameCanvas.width/gameCanvas.blockSize);
+    maxRow = Math.floor(gameCanvas.height/gameCanvas.blockSize);
+    maxIndex = maxRow*maxColumn;
 
     //Close dialogs
-    scoreName.forceClose();
+    nameInputDialog.forceClose();
     dialog.forceClose();
 
-    var a = new Date();
     //Initialize Board
     board = new Array(maxIndex);
     gameCanvas.score = 0;
-    for(var xIdx=0; xIdx<maxX; xIdx++){
-        for(var yIdx=0; yIdx<maxY; yIdx++){
-            board[index(xIdx,yIdx)] = null;
-            createBlock(xIdx,yIdx);
+    for(var column=0; column<maxColumn; column++){
+        for(var row=0; row<maxRow; row++){
+            board[index(column,row)] = null;
+            createBlock(column,row);
         }
     }
-    timer = new Date();
-
-    //print(timer.valueOf() - a.valueOf());
+    gameDuration = new Date();
 }
 
-var fillFound;//Set after a floodFill call to the number of tiles found
+var fillFound;//Set after a floodFill call to the number of blocks found
 var floodBoard;//Set to 1 if the floodFill reaches off that node
 //NOTE: Be careful with vars named x,y, as the calling object's x,y are still in scope
 function handleClick(x,y)
 {
-    var xIdx = Math.floor(x/gameCanvas.tileSize);
-    var yIdx = Math.floor(y/gameCanvas.tileSize);
-    if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0)
+    var column = Math.floor(x/gameCanvas.blockSize);
+    var row = Math.floor(y/gameCanvas.blockSize);
+    if(column >= maxColumn || column < 0 || row >= maxRow || row < 0)
         return;
-    if(board[index(xIdx, yIdx)] == null)
+    if(board[index(column, row)] == null)
         return;
-    //If it's a valid tile, remove it and all connected (does nothing if it's not connected)
-    floodFill(xIdx,yIdx, -1);
+    //If it's a valid block, remove it and all connected (does nothing if it's not connected)
+    floodFill(column,row, -1);
     if(fillFound <= 0)
         return;
     gameCanvas.score += (fillFound - 1) * (fillFound - 1);
@@ -74,67 +71,67 @@ function handleClick(x,y)
     victoryCheck();
 }
 
-function floodFill(xIdx,yIdx,type)
+function floodFill(column,row,type)
 {
-    if(board[index(xIdx, yIdx)] == null)
+    if(board[index(column, row)] == null)
         return;
     var first = false;
     if(type == -1){
         first = true;
-        type = board[index(xIdx,yIdx)].type;
+        type = board[index(column,row)].type;
         
         //Flood fill initialization
         fillFound = 0;
         floodBoard = new Array(maxIndex);
     }
-    if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0)
+    if(column >= maxColumn || column < 0 || row >= maxRow || row < 0)
         return;
-    if(floodBoard[index(xIdx, yIdx)] == 1 || (!first && type != board[index(xIdx,yIdx)].type))
+    if(floodBoard[index(column, row)] == 1 || (!first && type != board[index(column,row)].type))
         return;
-    floodBoard[index(xIdx, yIdx)] = 1;
-    floodFill(xIdx+1,yIdx,type);
-    floodFill(xIdx-1,yIdx,type);
-    floodFill(xIdx,yIdx+1,type);
-    floodFill(xIdx,yIdx-1,type);
+    floodBoard[index(column, row)] = 1;
+    floodFill(column+1,row,type);
+    floodFill(column-1,row,type);
+    floodFill(column,row+1,type);
+    floodFill(column,row-1,type);
     if(first==true && fillFound == 0)
-        return;//Can't remove single tiles
-    board[index(xIdx,yIdx)].dying = true;
-    board[index(xIdx,yIdx)] = null;
+        return;//Can't remove single blocks
+    board[index(column,row)].dying = true;
+    board[index(column,row)] = null;
     fillFound += 1;
 }
 
 function shuffleDown()
 {
     //Fall down
-    for(var xIdx=0; xIdx<maxX; xIdx++){
+    for(var column=0; column<maxColumn; column++){
         var fallDist = 0;
-        for(var yIdx=maxY-1; yIdx>=0; yIdx--){
-            if(board[index(xIdx,yIdx)] == null){
+        for(var row=maxRow-1; row>=0; row--){
+            if(board[index(column,row)] == null){
                 fallDist += 1;
             }else{
                 if(fallDist > 0){
-                    var obj = board[index(xIdx,yIdx)];
-                    obj.targetY += fallDist * gameCanvas.tileSize;
-                    board[index(xIdx,yIdx+fallDist)] = obj;
-                    board[index(xIdx,yIdx)] = null;
+                    var obj = board[index(column,row)];
+                    obj.targetY += fallDist * gameCanvas.blockSize;
+                    board[index(column,row+fallDist)] = obj;
+                    board[index(column,row)] = null;
                 }
             }
         }
     }
     //Fall to the left
     fallDist = 0;
-    for(xIdx=0; xIdx<maxX; xIdx++){
-        if(board[index(xIdx, maxY - 1)] == null){
+    for(column=0; column<maxColumn; column++){
+        if(board[index(column, maxRow - 1)] == null){
             fallDist += 1;
         }else{
             if(fallDist > 0){
-                for(yIdx=0; yIdx<maxY; yIdx++){
-                    obj = board[index(xIdx,yIdx)];
+                for(row=0; row<maxRow; row++){
+                    obj = board[index(column,row)];
                     if(obj == null)
                         continue;
-                    obj.targetX -= fallDist * gameCanvas.tileSize;
-                    board[index(xIdx-fallDist,yIdx)] = obj;
-                    board[index(xIdx,yIdx)] = null;
+                    obj.targetX -= fallDist * gameCanvas.blockSize;
+                    board[index(column-fallDist,row)] = obj;
+                    board[index(column,row)] = null;
                 }
             }
         }
@@ -143,40 +140,38 @@ function shuffleDown()
 
 function victoryCheck()
 {
-    //awards bonuses for no tiles left
+    //awards bonuses for no blocks left
     var deservesBonus = true;
-    for(var xIdx=maxX-1; xIdx>=0; xIdx--)
-        if(board[index(xIdx, maxY - 1)] != null)
+    for(var column=maxColumn-1; column>=0; column--)
+        if(board[index(column, maxRow - 1)] != null)
             deservesBonus = false;
     if(deservesBonus)
         gameCanvas.score += 500;
     //Checks for game over
-    if(deservesBonus || !(floodMoveCheck(0,maxY-1, -1))){
-        timer = new Date() - timer;
-        //scoreName.show("You won! Please enter your name:                 ");
-        scoreName.show("You won! Please enter your name:                 ");
-        scoreName.initialWidth = scoreName.text.width + 20;
-        scoreName.width = scoreName.initialWidth;
-        scoreName.text.opacity = 0;//Just a spacer
-        //dialog.show("Game Over. Your score is " + gameCanvas.score);
+    if(deservesBonus || !(floodMoveCheck(0,maxRow-1, -1))){
+        gameDuration = new Date() - gameDuration;
+        nameInputDialog.show("You won! Please enter your name:                 ");
+        nameInputDialog.initialWidth = nameInputDialog.text.width + 20;
+        nameInputDialog.width = nameInputDialog.initialWidth;
+        nameInputDialog.text.opacity = 0;//Just a spacer
     }
 }
 
-//only floods up and right, to see if it can find adjacent same-typed tiles 
-function floodMoveCheck(xIdx, yIdx, type)
+//only floods up and right, to see if it can find adjacent same-typed blocks 
+function floodMoveCheck(column, row, type)
 {
-    if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0)
+    if(column >= maxColumn || column < 0 || row >= maxRow || row < 0)
         return false;
-    if(board[index(xIdx, yIdx)] == null)
+    if(board[index(column, row)] == null)
         return false;
-    var myType = board[index(xIdx, yIdx)].type;
+    var myType = board[index(column, row)].type;
     if(type == myType)
         return true;
-    return floodMoveCheck(xIdx + 1, yIdx, myType) ||
-           floodMoveCheck(xIdx, yIdx - 1, board[index(xIdx,yIdx)].type);
+    return floodMoveCheck(column + 1, row, myType) ||
+           floodMoveCheck(column, row - 1, board[index(column,row)].type);
 }
 
-function createBlock(xIdx,yIdx){
+function createBlock(column,row){
     // Note that we don't wait for the component to become ready. This will
     // only work if the block QML is a local file. Otherwise the component will
     // not be ready immediately. There is a statusChanged signal on the
@@ -190,14 +185,14 @@ function createBlock(xIdx,yIdx){
         }
         dynamicObject.type = Math.floor(Math.random() * 3);
         dynamicObject.parent = gameCanvas;
-        dynamicObject.x = xIdx*gameCanvas.tileSize;
-        dynamicObject.targetX = xIdx*gameCanvas.tileSize;
-        dynamicObject.targetY = yIdx*gameCanvas.tileSize;
-        dynamicObject.width = gameCanvas.tileSize;
-        dynamicObject.height = gameCanvas.tileSize;
+        dynamicObject.x = column*gameCanvas.blockSize;
+        dynamicObject.targetX = column*gameCanvas.blockSize;
+        dynamicObject.targetY = row*gameCanvas.blockSize;
+        dynamicObject.width = gameCanvas.blockSize;
+        dynamicObject.height = gameCanvas.blockSize;
         dynamicObject.spawned = true;
-        board[index(xIdx,yIdx)] = dynamicObject;
-    }else{//isError or isLoading
+        board[index(column,row)] = dynamicObject;
+    }else{
         print("error loading block component");
         print(component.errorsString());
         return false;
@@ -211,14 +206,14 @@ function saveHighScore(name) {
     //OfflineStorage
     var db = openDatabaseSync("SameGameScores", "1.0", "Local SameGame High Scores",100);
     var dataStr = "INSERT INTO Scores VALUES(?, ?, ?, ?)";
-    var data = [name, gameCanvas.score, maxX+"x"+maxY ,Math.floor(timer/1000)];
+    var data = [name, gameCanvas.score, maxColumn+"x"+maxRow ,Math.floor(gameDuration/1000)];
     db.transaction(
         function(tx) {
             tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(name TEXT, score NUMBER, gridSize TEXT, time NUMBER)');
             tx.executeSql(dataStr, data);
 
             //Only show results for the current grid size
-            var rs = tx.executeSql('SELECT * FROM Scores WHERE gridSize = "'+maxX+"x"+maxY+'" ORDER BY score desc LIMIT 10');
+            var rs = tx.executeSql('SELECT * FROM Scores WHERE gridSize = "'+maxColumn+"x"+maxRow+'" ORDER BY score desc LIMIT 10');
             var r = "\nHIGH SCORES for this grid size\n\n"
             for(var i = 0; i < rs.rows.length; i++){
                 r += (i+1)+". " + rs.rows.item(i).name +' got '
@@ -233,7 +228,7 @@ function saveHighScore(name) {
 function sendHighScore(name) {
     var postman = new XMLHttpRequest()
     var postData = "name="+name+"&score="+gameCanvas.score
-        +"&gridSize="+maxX+"x"+maxY +"&time="+Math.floor(timer/1000);
+        +"&gridSize="+maxColumn+"x"+maxRow +"&time="+Math.floor(gameDuration/1000);
     postman.open("POST", scoresURL, true);
     postman.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     postman.onreadystatechange = function() { 
diff --git a/demos/declarative/samegame/samegame.qml b/demos/declarative/samegame/samegame.qml
index 94f5c24..92201f5 100644
--- a/demos/declarative/samegame/samegame.qml
+++ b/demos/declarative/samegame/samegame.qml
@@ -9,85 +9,95 @@ Rectangle {
     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: "SamegameCore/pics/background.png"
+            anchors.fill: parent
+            source: "SamegameCore/pics/background.png"
             fillMode: Image.PreserveAspectCrop
-            smooth: true
         }
 
         Item {
             id: gameCanvas
             property int score: 0
-            property int tileSize: 40
+            property int blockSize: 40
 
             z: 20; anchors.centerIn: parent
-            width: parent.width - (parent.width % tileSize);
-            height: parent.height - (parent.height % tileSize);
+            width: parent.width - (parent.width % blockSize);
+            height: parent.height - (parent.height % blockSize);
 
             MouseArea {
-                id: gameMR
                 anchors.fill: parent; onClicked: Logic.handleClick(mouse.x,mouse.y);
             }
         }
     }
 
     Dialog { id: dialog; anchors.centerIn: parent; z: 21 }
+
     Dialog {
-        id: scoreName; anchors.centerIn: parent; z: 22;
+        id: nameInputDialog
+        
         property int initialWidth: 0
-        Behavior on width {NumberAnimation{} enabled: initialWidth!=0}
+
+        anchors.centerIn: parent
+        z: 22;
+
+        Behavior on width {
+            NumberAnimation {} 
+            enabled: initialWidth != 0
+        }
+
         Text {
-            id: spacer
-            anchors.left: scoreName.left
-            anchors.leftMargin: 20
-            anchors.verticalCenter: parent.verticalCenter
+            id: dialogText
+            anchors { left: nameInputDialog.left; leftMargin: 20; verticalCenter: parent.verticalCenter }
             text: "You won! Please enter your name: "
         }
+
         TextInput {
-            id: editor
+            id: nameInputText
+            anchors { verticalCenter: parent.verticalCenter; left: dialogText.right }
+            focus: true
+
             onTextChanged: {
-                var newWidth = editor.width + spacer.width + 40;
-                if((newWidth > scoreName.width && newWidth < screen.width) 
-                        || (scoreName.width > scoreName.initialWidth))
-                    scoreName.width = newWidth;
+                var newWidth = nameInputText.width + dialogText.width + 40;
+                if ( (newWidth > nameInputDialog.width && newWidth < screen.width) 
+                        || (nameInputDialog.width > nameInputDialog.initialWidth) )
+                    nameInputDialog.width = newWidth;
             }
             onAccepted: {
-                if(scoreName.opacity==1&&editor.text!="")
-                    Logic.saveHighScore(editor.text);
-                scoreName.forceClose();
+                if (nameInputDialog.opacity == 1 && nameInputText.text != "")
+                    Logic.saveHighScore(nameInputText.text);
+                nameInputDialog.forceClose();
             }
-            anchors.verticalCenter: parent.verticalCenter
-            focus: true
-            anchors.left: spacer.right
         }
     }
 
     Rectangle {
         id: toolBar
+        width: parent.width; height: 32
         color: activePalette.window
-        height: 32; width: parent.width
         anchors.bottom: screen.bottom
 
         Button {
-            id: btnA; text: "New Game"; onClicked: Logic.initBoard();
-            anchors.left: parent.left; anchors.leftMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            id: newGameButton
+            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            text: "New Game" 
+            onClicked: Logic.startNewGame()
         }
 
         Button {
-            id: btnB; text: "Quit"; onClicked: Qt.quit();
-            anchors.left: btnA.right; anchors.leftMargin: 3
-            anchors.verticalCenter: parent.verticalCenter
+            text: "Quit"
+            anchors { left: newGameButton.right; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            onClicked: Qt.quit();
         }
 
         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
             color: activePalette.windowText
         }
     }
diff --git a/doc/src/declarative/advtutorial.qdoc b/doc/src/declarative/advtutorial.qdoc
index 4807fd2..3a70eee 100644
--- a/doc/src/declarative/advtutorial.qdoc
+++ b/doc/src/declarative/advtutorial.qdoc
@@ -101,6 +101,9 @@ One item you may not recognize here
 is the \l SystemPalette item. This provides access to the Qt system palette
 and is used to give the button a more native look-and-feel.
 
+Notice the anchors for the \c Item, \c Button and \c Text elements are set using
+\l {Grouped Properties}{group notation} for readability.
+
 \section2 Adding \c Button and \c Block components
 
 The \c Button item in the code above is defined in a separate file named \c Button.qml.
diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc
index a4f4bc7..a2a5283 100644
--- a/doc/src/declarative/declarativeui.qdoc
+++ b/doc/src/declarative/declarativeui.qdoc
@@ -77,6 +77,7 @@ completely new applications.  QML is fully \l {Extending QML in C++}{extensible
 \o \l {QML Advanced Tutorial}{Tutorial: 'Same Game'}
 \o \l {QML Examples and Walkthroughs}
 \o \l {Using QML in C++ Applications}
+\o \l {QML for Qt programmers}
 \endlist
 
 \section1 Core QML Features:
@@ -102,6 +103,7 @@ completely new applications.  QML is fully \l {Extending QML in C++}{extensible
 \o \l {QML Elements}
 \o \l {QML Global Object}
 \o \l {Extending QML in C++}
+\o \l {Integrating QML with existing Qt UI code}
 \o \l {QML Internationalization}
 \o \l {QML Security}
 \o \l {QtDeclarative Module}
diff --git a/doc/src/declarative/qdeclarativesecurity.qdoc b/doc/src/declarative/qdeclarativesecurity.qdoc
index ab75a57..290d78f 100644
--- a/doc/src/declarative/qdeclarativesecurity.qdoc
+++ b/doc/src/declarative/qdeclarativesecurity.qdoc
@@ -70,7 +70,7 @@ perform appropriate checks on untrusted data it loads.
 A non-exhaustive list of the ways you could shoot yourself in the foot is:
 
 \list
-    \i Using \c import to import QML or JavaScropt you do not control. BAD
+    \i Using \c import to import QML or JavaScript you do not control. BAD
     \i Using \l Loader to import QML you do not control. BAD
     \i Using \l{XMLHttpRequest()}{XMLHttpRequest} to load data you do not control and executing it. BAD
 \endlist
diff --git a/doc/src/declarative/qmlruntime.qdoc b/doc/src/declarative/qmlruntime.qdoc
index 8bb3ec7..fbe82c6 100644
--- a/doc/src/declarative/qmlruntime.qdoc
+++ b/doc/src/declarative/qmlruntime.qdoc
@@ -70,7 +70,7 @@
     \code
     qml myQmlFile.qml
     \endcode
-    
+
     Deploying a QML application via the \c qml executable allows for QML only deployments, but can also
     include custom C++ modules just as easily. Below is an example of how you might structure
     a complex application deployed via the qml runtime, it is a listing of the files that would
@@ -101,7 +101,7 @@
     import "MyAppCore"
     import "OtherModule" 1.0 as Other
     \endcode
-    
+
     \section1 \c qml application functionality
     The \c qml application implements some additional functionality to help it serve the role of a launcher
     for myriad applications. If you implement your own launcher application, you may also wish to reimplement
@@ -134,23 +134,25 @@
     Any QML can be used in the dummy data files. You could even animate the
     fictional data!
 
-    \section2 Screen Orientation
+    \section2 Runtime Object
+
+    All applications using the qmlruntime will have access to the 'runtime'
+    property on the root context. This property contains several information
+    about the runtime environment of the application.
+
+    \section3 Screen Orientation
 
     A special piece of dummy data which is integrated into the runtime is
     a simple orientation property. The orientation can be set via the
     settings menu in the application, or by pressing Ctrl+T to toggle it.
 
-    To use this from within your QML file, import QDeclarativeViewer 1.0 and create a
-    Screen object. This object has a property, orientation, which can be either
-    Screen.Landscape or Screen.Portrait and which can be bound to in your
+    To use this from within your QML file, access runtime.orientation,
+    which can be either Orientation.Landscape or Orientation.Portrait and which can be bound to in your
     application. An example is below:
 
 \code
-    import QDeclarativeViewer 1.0 as QDeclarativeViewer
-    
     Item {
-        QDeclarativeViewer.Screen { id: screen }
-        state: (screen.orientation == QDeclarativeViewer.Screen.Landscape) ? 'landscape' : ''
+        state: (runtime.orientation == Orientation.Landscape) ? 'landscape' : ''
     }
 \endcode
 
@@ -158,4 +160,28 @@
     will automatically update this on some platforms (currently the N900 only) to match the physical
     screen's orientation. On other plaforms orientation changes will only happen when explictly asked for.
 
+    \section3 Window Active
+
+    The runtime.isActiveWindow property tells whether the main window of the qml runtime is currently active
+    or not. This is specially useful for embedded devices when you want to pause parts of your application,
+    including animations, when your application looses focus or goes to the background.
+
+    The example below, stops the animation when the application's window is deactivated and resumes on activation:
+
+\code
+    Item {
+        width: 300; height: 200
+        Rectangle {
+            width: 100; height: 100
+            color: "green"
+            SequentialAnimation on x {
+                running: runtime.isActiveWindow
+                loops: Animation.Infinite
+                NumberAnimation {to: 200}
+                NumberAnimation {to: 0}
+            }
+        }
+    }
+\endcode
+
 */
diff --git a/doc/src/declarative/qtbinding.qdoc b/doc/src/declarative/qtbinding.qdoc
index 181c504..d024ff2 100644
--- a/doc/src/declarative/qtbinding.qdoc
+++ b/doc/src/declarative/qtbinding.qdoc
@@ -73,9 +73,9 @@ QML component instances can then be created by calling the QDeclarativeComponent
 an example of loading a QML document, and creating an object from it.
 
 \code
-QDeclarativeEngine *engine = new QDeclarativeEngine(parent);
-QDeclarativeComponent component(engine, QUrl("main.qml"));
-QObject *myObject = component.create();
+    QDeclarativeEngine *engine = new QDeclarativeEngine(parent);
+    QDeclarativeComponent component(engine, QUrl::fromLocalFile("main.qml"));
+    QObject *myObject = component.create();
 \endcode
 
 \section1 Exposing Data
@@ -91,40 +91,28 @@ the root context is available to all object instances.
 
 To expose data to a QML component instance, applications set \l {QDeclarativeContext::setContextProperty()}
 {context properties} which are then accessible by name from QML  \l {Property Binding}s and JavaScript.
-The following example shows how to expose a background color to a QML file.
+The following example shows how to expose a background color to a QML file through QDeclarativeView:
 
 \table
 \row
 \o
-\code
-// main.cpp
-QDeclarativeContext *windowContext = new QDeclarativeContext(engine->rootContext());
-windowContext->setContextProperty("backgroundColor", 
-                                  QColor(Qt::lightsteelblue));
+\c {// main.cpp}
+\snippet doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp 0
 
-QDeclarativeComponent component(&engine, "main.qml");
-QObject *window = component.create(windowContext);
-\endcode
 \o
-\code
-// main.qml
-import Qt 4.7
+\c {// main.qml}
+\snippet doc/src/declarative/snippets/qtbinding/contextproperties/main.qml 0
 
-Rectangle {
-    color: backgroundColor
-
-    Text {
-        anchors.centerIn: parent
-        text: "Hello Light Steel Blue World!"
-    }
-}
-\endcode
 \endtable
 
+Or, if you want \c main.cpp to create the component without showing it in a QDeclarativeView, you could create an instance of QDeclarativeContext using QDeclarativeEngine::rootContext() instead:
+
+\snippet doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp 1
+
 Context properties work just like normal properties in QML bindings - if the \c backgroundColor
-context property in the previous example was changed to red, the component object instances would
+context property in this example was changed to red, the component object instances would
 all be automatically updated.  Note that it is the responsibility of the creator to delete any
-QDeclarativeContext it constructs.  If the \c windowContext in the example above is no longer needed when
+QDeclarativeContext it constructs.  If the \c windowContext is no longer needed when
 the \c window component instantiation is destroyed, the \c windowContext must be destroyed
 explicitly.  The simplest way to ensure this is to set \c window as \c windowContext's parent.
 
@@ -147,78 +135,15 @@ allow QML to set values.
 The following example creates a \c CustomPalette object, and sets it as the \c palette context
 property.
 
-\code
-class CustomPalette : public QObject
-{
-Q_OBJECT
-Q_PROPERTY(QColor background READ background WRITE setBackground NOTIFY backgroundChanged)
-Q_PROPERTY(QColor text READ text WRITE setText NOTIFY textChanged)
-public:
-    CustomPalette() : m_background(Qt::white), m_text(Qt::black) {}
-
-    QColor background() const { return m_background; }
-    void setBackground(const QColor &c) { 
-        if (c != m_background) {
-            m_background = c;
-            emit backgroundChanged();
-        }
-    }
-
-    QColor text() const { return m_text; }
-    void setText(const QColor &c) { 
-        if (c != m_text) {
-            m_text = c;
-            emit textChanged();
-        }
-    }
-signals:
-    void textChanged();
-    void backgroundChanged():
-
-private:
-    QColor m_background;
-    QColor m_text;
-};
+\snippet doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h 0
 
-int main(int argc, char **argv) 
-{
-    // ...
-
-    QDeclarativeContext *windowContext = new QDeclarativeContext(engine->rootContext());
-    windowContext->setContextProperty("palette", new CustomPalette);
-
-    QDeclarativeComponent component(&engine, "main.qml");
-    QObject *window = component.create(windowContext);
-}
-\endcode
+\snippet doc/src/declarative/snippets/qtbinding/custompalette/main.cpp 0
 
 The QML that follows references the palette object, and its properties, to set the appropriate
 background and text colors.  When the window is clicked, the palette's text color is changed, and
 the window text will update accordingly.
 
-\code
-// main.qml
-import Qt 4.7
-
-Rectangle {
-    width: 240
-    height: 320
-    color: palette.background
-
-    Text {
-        anchors.centerIn: parent
-        color: palette.text
-        text: "Hello Colorful World!"
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            palette.text = "blue";
-        }
-    }
-}
-\endcode
+\snippet doc/src/declarative/snippets/qtbinding/custompalette/main.qml 0
 
 To detect when a C++ property value - in this case the \c CustomPalette's \c text property - 
 changes, the property must have a corresponding NOTIFY signal.  The NOTIFY signal specifies a signal
@@ -254,57 +179,23 @@ the following types:
 \o QVariant
 \endlist
 
-This example toggles the "LED Blinker" when the MouseArea is clicked:
+This example toggles the "Stopwatch" object on/off when the MouseArea is clicked:
 
 \table
 \row
 \o
-\code
-// main.cpp
-class LEDBlinker : public QObject
-{
-    Q_OBJECT
-public:
-    LEDBlinker();
-
-    Q_INVOKABLE bool isRunning();
+\c {// main.cpp}
+\snippet doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h 0
+\snippet doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp 0
 
-public slots:
-    void start();
-    void stop();
-};
-
-int main(int argc, char **argv)
-{
-    // ...
-
-    QDeclarativeContext *context = engine->rootContext();
-    context->setContextProperty("ledBlinker", new LEDBlinker);
-
-    // ...
-}
-\endcode
 \o
-\code
-// main.qml
-import Qt 4.7
+\c {// main.qml}
+\snippet doc/src/declarative/snippets/qtbinding/stopwatch/main.qml 0
 
-Rectangle {
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            if (ledBlinker.isRunning())
-                ledBlinker.stop()
-            else
-                ledBlicker.start();
-        }
-    }
-}
-\endcode
 \endtable
 
 Note that in this particular example a better way to achieve the same result
-is to have a "running" property.  This leads to much nicer QML code:
+is to have a "running" property in \c main.qml.  This leads to much nicer QML code:
 
 \table
 \row
@@ -316,13 +207,12 @@ import Qt 4.7
 Rectangle {
     MouseArea {
         anchors.fill: parent
-        onClicked: ledBlinker.running = !ledBlinker.running
+        onClicked: stopwatch.running = !stopwatch.running
     }
 }
 \endcode
 \endtable
 
-
 Of course, it is also possible to call \l {Adding new methods}{functions declared in QML from C++}.
 
 
@@ -367,35 +257,17 @@ void MyApplication::continueLoading()
 QML content can be loaded from \l {The Qt Resource System} using the \e qrc: URL scheme.
 For example:
 
-\code
-<!DOCTYPE RCC><RCC version="1.0">
-<qresource>
-    <file>main.qml</file>
-    <file>images/background.png</file>
-</qresource>
-</RCC>
-\endcode
-\code
-// main.cpp
-MyApplication::MyApplication()
-{
-    // ...
-    component = new QDeclarativeComponent(engine, QUrl("qrc:/main.qml"));
-    if (component->isError()) {
-        qWarning() << component->errors();
-    } else {
-        QObject *myObject = component->create();
-    }
-}
-\endcode
-\code
-// main.qml
-import Qt 4.7
+\c [project/example.qrc]
+\quotefile doc/src/declarative/snippets/qtbinding/resources/example.qrc 
 
-Image {
-    source: "images/background.png"
-}
-\endcode
+\c [project/project.pro]
+\quotefile doc/src/declarative/snippets/qtbinding/resources/resources.pro 
+
+\c [project/main.cpp]
+\snippet doc/src/declarative/snippets/qtbinding/resources/main.cpp 0
+
+\c [project/main.qml]
+\snippet doc/src/declarative/snippets/qtbinding/resources/main.qml 0
 
 */
 
diff --git a/doc/src/declarative/qtdeclarative.qdoc b/doc/src/declarative/qtdeclarative.qdoc
index 8013b92..cbb2146 100644
--- a/doc/src/declarative/qtdeclarative.qdoc
+++ b/doc/src/declarative/qtdeclarative.qdoc
@@ -69,6 +69,10 @@
 /*!
   \macro QML_DECLARE_TYPE()
   \relates QDeclarativeEngine
+
+  Declares a C++ type to be usable in the QML system. In addition
+  to this, a type must also be registered with the QML system using
+  qmlRegisterType().
 */
 
 
@@ -79,6 +83,7 @@
   This template function registers the C++ type in the QML system with
   the name \a qmlName. in the library imported from \a uri having the
   version number composed from \a versionMajor and \a versionMinor.
+  The type should also haved been declared with the QML_DECLARE_TYPE() macro.
 
   Returns the QML type id.
 
@@ -109,6 +114,8 @@
 
   This template function registers the C++ type in the QML system
   under the name \a typeName.
+  The type should also haved been declared with the QML_DECLARE_TYPE() macro.
+
 
   Returns the QML type id.
   */
diff --git a/doc/src/declarative/snippets/qtbinding/contextproperties/contextproperties.pro b/doc/src/declarative/snippets/qtbinding/contextproperties/contextproperties.pro
new file mode 100644
index 0000000..68eeaf2
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/contextproperties/contextproperties.pro
@@ -0,0 +1,2 @@
+QT += declarative
+SOURCES += main.cpp
diff --git a/doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp b/doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp
new file mode 100644
index 0000000..15e3d4c
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QDeclarativeComponent>
+#include <QDeclarativeEngine>
+
+//![0]
+#include <QApplication>
+#include <QDeclarativeView>
+#include <QDeclarativeContext>
+
+int main(int argc, char *argv[])
+{
+    QApplication app(argc, argv);
+
+    QDeclarativeView view;
+    QDeclarativeContext *context = view.rootContext();
+    context->setContextProperty("backgroundColor",
+                                QColor(Qt::yellow));
+
+    view.setSource(QUrl("main.qml"));
+    view.show();
+
+    return app.exec();
+}
+//![0]
+
+static void alternative()
+{
+    // Alternatively, if we don't actually want to display main.qml:
+//![1]
+    QDeclarativeEngine engine;
+    QDeclarativeContext *windowContext = new QDeclarativeContext(engine.rootContext());
+    windowContext->setContextProperty("backgroundColor", QColor(Qt::yellow));
+
+    QDeclarativeComponent component(&engine, "main.qml");
+    QObject *window = component.create(windowContext);
+//![1]
+}
+
+
diff --git a/doc/src/declarative/snippets/qtbinding/contextproperties/main.qml b/doc/src/declarative/snippets/qtbinding/contextproperties/main.qml
new file mode 100644
index 0000000..1053f73
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/contextproperties/main.qml
@@ -0,0 +1,15 @@
+//![0]
+import Qt 4.7
+
+Rectangle {
+    width: 300
+    height: 300
+
+    color: backgroundColor
+
+    Text {
+        anchors.centerIn: parent
+        text: "Hello Yellow World!"
+    }
+}
+//![0]
diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h b/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h
new file mode 100644
index 0000000..d0d253a
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QObject>
+#include <QColor>
+
+//![0]
+class CustomPalette : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QColor background READ background WRITE setBackground NOTIFY backgroundChanged)
+    Q_PROPERTY(QColor text READ text WRITE setText NOTIFY textChanged)
+
+public:
+    CustomPalette() : m_background(Qt::white), m_text(Qt::black) {}
+    
+    QColor background() const { return m_background; }
+    void setBackground(const QColor &c) {
+        if (c != m_background) {
+            m_background = c;
+            emit backgroundChanged();
+        }
+    }
+    
+    QColor text() const { return m_text; }
+    void setText(const QColor &c) {
+        if (c != m_text) {
+            m_text = c;
+            emit textChanged();
+        }
+    }
+
+signals:
+    void textChanged();
+    void backgroundChanged();
+    
+private:
+    QColor m_background;
+    QColor m_text;
+};
+
+//![0]
diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.pro b/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.pro
new file mode 100644
index 0000000..e6af0d0
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.pro
@@ -0,0 +1,3 @@
+QT += declarative
+HEADERS += custompalette.h
+SOURCES += main.cpp
diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/main.cpp b/doc/src/declarative/snippets/qtbinding/custompalette/main.cpp
new file mode 100644
index 0000000..c723688
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/custompalette/main.cpp
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QApplication>
+#include <QDeclarativeView>
+#include <QDeclarativeContext>
+
+#include "custompalette.h"
+
+//![0]
+int main(int argc, char *argv[])
+{
+    QApplication app(argc, argv);
+
+    QDeclarativeView view;
+    view.rootContext()->setContextProperty("palette", new CustomPalette);
+
+    view.setSource(QUrl("main.qml"));
+    view.show();
+
+    return app.exec();
+}
+//![0]
+
diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/main.qml b/doc/src/declarative/snippets/qtbinding/custompalette/main.qml
new file mode 100644
index 0000000..f1a3b4f
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/custompalette/main.qml
@@ -0,0 +1,22 @@
+//![0]
+import Qt 4.7
+
+Rectangle {
+    width: 240
+    height: 320
+    color: palette.background
+    
+    Text {
+        anchors.centerIn: parent
+        color: palette.text
+        text: "Click me to change color!"
+    }
+    
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            palette.text = "blue";
+        }
+    }
+}
+//![0]
diff --git a/doc/src/declarative/snippets/qtbinding/resources/example.qrc b/doc/src/declarative/snippets/qtbinding/resources/example.qrc
new file mode 100644
index 0000000..5e49415
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/resources/example.qrc
@@ -0,0 +1,10 @@
+<!DOCTYPE RCC>
+<RCC version="1.0">
+
+<qresource prefix="/">
+    <file>main.qml</file>
+    <file>images/background.png</file>
+</qresource>
+
+</RCC>
+
diff --git a/doc/src/declarative/snippets/qtbinding/resources/images/background.png b/doc/src/declarative/snippets/qtbinding/resources/images/background.png
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/resources/images/background.png
diff --git a/doc/src/declarative/snippets/qtbinding/resources/main.cpp b/doc/src/declarative/snippets/qtbinding/resources/main.cpp
new file mode 100644
index 0000000..5459b9e
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/resources/main.cpp
@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QApplication>
+#include <QDeclarativeView>
+#include <QDeclarativeContext>
+
+//![0]
+int main(int argc, char *argv[])
+{
+    QApplication app(argc, argv);
+
+    QDeclarativeView view;
+    view.setSource(QUrl("qrc:/main.qml"));
+    view.show();
+
+    return app.exec();
+}
+//![0]
+
diff --git a/doc/src/declarative/snippets/qtbinding/resources/main.qml b/doc/src/declarative/snippets/qtbinding/resources/main.qml
new file mode 100644
index 0000000..dfe923f
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/resources/main.qml
@@ -0,0 +1,7 @@
+//![0]
+import Qt 4.7
+
+Image {
+    source: "images/background.png"
+}
+//![0]
diff --git a/doc/src/declarative/snippets/qtbinding/resources/resources.pro b/doc/src/declarative/snippets/qtbinding/resources/resources.pro
new file mode 100644
index 0000000..cc01ee1
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/resources/resources.pro
@@ -0,0 +1,4 @@
+QT += declarative
+
+SOURCES += main.cpp
+RESOURCES += example.qrc
diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp b/doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp
new file mode 100644
index 0000000..13e3b9f
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "stopwatch.h"
+
+#include <QDeclarativeView>
+#include <QDeclarativeContext>
+#include <QApplication>
+
+//![0]
+int main(int argc, char *argv[])
+{
+    QApplication app(argc, argv);
+
+    QDeclarativeView view;
+    view.rootContext()->setContextProperty("stopwatch",
+                                           new Stopwatch);
+
+    view.setSource(QUrl("main.qml"));
+    view.show();
+
+    return app.exec();
+}
+//![0]
+
diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/main.qml b/doc/src/declarative/snippets/qtbinding/stopwatch/main.qml
new file mode 100644
index 0000000..2efa542
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/stopwatch/main.qml
@@ -0,0 +1,18 @@
+//![0]
+import Qt 4.7
+
+Rectangle {
+    width: 300
+    height: 300
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (stopwatch.isRunning())
+                stopwatch.stop()
+            else
+                stopwatch.start();
+        }
+    }
+}
+//![0]
diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.cpp b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.cpp
new file mode 100644
index 0000000..4954a5f
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.cpp
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "stopwatch.h"
+
+Stopwatch::Stopwatch()
+    : m_running(false)
+{
+}
+
+bool Stopwatch::isRunning() const
+{
+    return m_running;
+}
+
+void Stopwatch::start()
+{
+    m_running = true;
+}
+
+void Stopwatch::stop()
+{
+    m_running = false;
+}
+
diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h
new file mode 100644
index 0000000..8d17121
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QObject>
+
+//![0]
+class Stopwatch : public QObject
+{
+    Q_OBJECT
+public:
+    Stopwatch();
+    
+    Q_INVOKABLE bool isRunning() const;
+    
+public slots:
+    void start();
+    void stop();
+
+private:
+    bool m_running;
+};
+
+//![0]
+
diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.pro b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.pro
new file mode 100644
index 0000000..d803e6a
--- /dev/null
+++ b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.pro
@@ -0,0 +1,3 @@
+QT += declarative
+HEADERS += stopwatch.h
+SOURCES += main.cpp stopwatch.cpp
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