Example fixes

10 files changed, 110 insertions, 83 deletions

diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml
index 81f9aed..391eab7 100644
--- a/examples/declarative/layouts/layouts.qml
+++ b/examples/declarative/layouts/layouts.qml
@@ -1,15 +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/listview/dynamic.qml b/examples/declarative/listview/dynamic.qml
index efd0e10..236a9c5 100644
--- a/examples/declarative/listview/dynamic.qml
+++ b/examples/declarative/listview/dynamic.qml
@@ -3,6 +3,7 @@ import "content"
 import "../scrollbar"
 
 Rectangle {
+    id: container
     width: 640; height: 480
     color: "#343434"
 
@@ -54,7 +55,7 @@ Rectangle {
         id: fruitDelegate
 
         Item {
-            width: parent.width; height: 55
+            width: container.width; height: 55
             
             Column {
                 id: moveButtons
@@ -174,9 +175,9 @@ Rectangle {
                 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"}]
                     })
                 }
             }
@@ -189,9 +190,9 @@ Rectangle {
                 anchors.fill: parent;
                 onClicked: {
                     fruitModel.insert(0, {
-                        "name":"Pizza Supreme",
-                        "cost":9.95,
-                        "attributes":[{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
+                        "name": "Pizza Supreme",
+                        "cost": 9.95,
+                        "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
                     })
                 }
             }
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 2f7f2ca..50ba2f7 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -43,6 +43,7 @@ Rectangle {
             SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
         }
     }
+
     ListView {
         id: list1
         width: 200; height: parent.height
diff --git a/examples/declarative/listview/listview-example.qml b/examples/declarative/listview/listview-example.qml
index 9409356..6feedf6 100644
--- a/examples/declarative/listview/listview-example.qml
+++ b/examples/declarative/listview/listview-example.qml
@@ -58,25 +58,33 @@ Rectangle {
     ListView {
         id: list1
         width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate
+        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
+        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
         highlightRangeMode: "StrictlyEnforceRange"
diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml
index 6f13335..bc36df5 100644
--- a/examples/declarative/progressbar/content/ProgressBar.qml
+++ b/examples/declarative/progressbar/content/ProgressBar.qml
@@ -6,8 +6,8 @@ Item {
     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
@@ -29,8 +29,8 @@ Item {
         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 }
         }
 
     }
diff --git a/examples/declarative/searchbox/SearchBox.qml b/examples/declarative/searchbox/SearchBox.qml
index adeddd1..aae7ee9 100644
--- a/examples/declarative/searchbox/SearchBox.qml
+++ b/examples/declarative/searchbox/SearchBox.qml
@@ -21,7 +21,9 @@ FocusScope {
         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 }
@@ -29,7 +31,7 @@ FocusScope {
     TextInput {
         id: textInput
         anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
-        focus: if (1) true
+        focus: true
     }
 
     Image {
diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
index f8c1dd5..4429e78 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -5,53 +5,57 @@ Rectangle {
     width: 640; height: 480
     color: "#343434"
 
-    // A target region.  Clicking in here sets the state to the default state
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "user.png"
+    }
+
     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"
+        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"
+        color: "Transparent"; border.color: "Gray"; radius: 6
 
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
+        // 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"
+        color: "Transparent"; border.color: "Gray"; radius: 6
 
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
+        // Clicking in here sets the state to 'bottomLeft'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
     }
 
-    // The image which will be moved when my state changes
-    Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
-
     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 b475333..d1b1dd6 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,74 +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"
 
-    // A target region.  Clicking in here sets the state to the default state
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "user.png"
+    }
+
     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"
+        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"
+        color: "Transparent"; border.color: "Gray"; radius: 6
 
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
+        // 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"
+        color: "Transparent"; border.color: "Gray"; radius: 6
 
-        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
+        // Clicking in here sets the state to 'bottomLeft'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
     }
 
-    // The image which will be moved when my state changes
-    Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
-
     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/tic-tac-toe/content/Button.qml b/examples/declarative/tic-tac-toe/content/Button.qml
index 56e5ecd..ecf18cd 100644
--- a/examples/declarative/tic-tac-toe/content/Button.qml
+++ b/examples/declarative/tic-tac-toe/content/Button.qml
@@ -9,7 +9,7 @@ Rectangle {
     property string darkCol: "darkgray"
     property string lightCol: "white"
 
-    width: txtItem.width + 20; height: txtItem.height + 6
+    width: buttonLabel.width + 20; height: buttonLabel.height + 6
     border { width: 1; color: Qt.darker(mainCol) } 
     radius: 8;
     color: mainCol
@@ -28,12 +28,10 @@ Rectangle {
     MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() }
 
     Text {
-        id: txtItem
+        id: buttonLabel
 
         anchors.centerIn: container
         text: container.text;
-        color: "blue"
-        style: Text.Outline; styleColor: "white"
-        font.pixelSize: 14; font.bold: true
+        font.pixelSize: 14
     }
 }
diff --git a/examples/declarative/tic-tac-toe/tic-tac-toe.qml b/examples/declarative/tic-tac-toe/tic-tac-toe.qml
index 62bb56f..dd13052 100644
--- a/examples/declarative/tic-tac-toe/tic-tac-toe.qml
+++ b/examples/declarative/tic-tac-toe/tic-tac-toe.qml
@@ -5,8 +5,8 @@ import "content/tic-tac-toe.js" as Logic
 Item {
     id: game
 
-    property bool show: false;
-    property real difficulty: 1.0; //chance it will actually think
+    property bool show: false
+    property real difficulty: 1.0   //chance it will actually think
 
     width: 440
     height: 480
@@ -50,17 +50,17 @@ Item {
 
         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
         }
     }