Make QML 'hello world' tutorial less confusing.

Task-number: QTBUG-9384

3 files changed, 19 insertions, 20 deletions

diff --git a/examples/declarative/tutorials/helloworld/Cell.qml b/examples/declarative/tutorials/helloworld/Cell.qml
index de4f3bb..9249ffe 100644
--- a/examples/declarative/tutorials/helloworld/Cell.qml
+++ b/examples/declarative/tutorials/helloworld/Cell.qml
@@ -5,10 +5,10 @@ import Qt 4.6
 Item {
     id: container
 //![4]
-    property alias color: rectangle.color
+    property alias cellColor: rectangle.color
 //![4]
 //![5]
-    signal clicked(color color)
+    signal clicked(color cellColor)
 //![5]
 
     width: 40; height: 25
@@ -25,7 +25,7 @@ Item {
 //![3]
     MouseArea {
         anchors.fill: parent
-        onClicked: container.clicked(container.color)
+        onClicked: container.clicked(container.cellColor)
     }
 //![3]
 }
diff --git a/examples/declarative/tutorials/helloworld/tutorial2.qml b/examples/declarative/tutorials/helloworld/tutorial2.qml
index 99889d7..38447e2 100644
--- a/examples/declarative/tutorials/helloworld/tutorial2.qml
+++ b/examples/declarative/tutorials/helloworld/tutorial2.qml
@@ -15,17 +15,17 @@ Rectangle {
 
     Grid {
         id: colorPicker
-        anchors.bottom: page.bottom
+        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
         rows: 2; columns: 3; spacing: 3
 
 //![1]
-        Cell { color: "red"; onClicked: helloText.color = color }
+        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
 //![1]
-        Cell { color: "green"; onClicked: helloText.color = color }
-        Cell { color: "blue"; onClicked: helloText.color = color }
-        Cell { color: "yellow"; onClicked: helloText.color = color }
-        Cell { color: "steelblue"; onClicked: helloText.color = color }
-        Cell { color: "black"; onClicked: helloText.color = color }
+        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
     }
 }
 //![0]
diff --git a/examples/declarative/tutorials/helloworld/tutorial3.qml b/examples/declarative/tutorials/helloworld/tutorial3.qml
index b8a4f77..d851c49 100644
--- a/examples/declarative/tutorials/helloworld/tutorial3.qml
+++ b/examples/declarative/tutorials/helloworld/tutorial3.qml
@@ -11,15 +11,14 @@ Rectangle {
         text: "Hello world!"
         font.pointSize: 24; font.bold: true
         y: 30; anchors.horizontalCenter: page.horizontalCenter
-        transformOrigin: Item.Center
 
 //![1]
-        MouseArea { id: mouseRegion; anchors.fill: parent }
+        MouseArea { id: mouseArea; anchors.fill: parent }
 //![1]
 
 //![2]
         states: State {
-            name: "down"; when: mouseRegion.pressed == true
+            name: "down"; when: mouseArea.pressed == true
             PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
         }
 //![2]
@@ -37,15 +36,15 @@ Rectangle {
 
     Grid {
         id: colorPicker
-        anchors.bottom: page.bottom
+        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
         rows: 2; columns: 3; spacing: 3
 
-        Cell { color: "red"; onClicked: helloText.color = color }
-        Cell { color: "green"; onClicked: helloText.color = color }
-        Cell { color: "blue"; onClicked: helloText.color = color }
-        Cell { color: "yellow"; onClicked: helloText.color = color }
-        Cell { color: "steelblue"; onClicked: helloText.color = color }
-        Cell { color: "black"; onClicked: helloText.color = color }
+        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
+        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
     }
 }
 //![0]