Make QML 'hello world' tutorial less confusing.

Task-number: QTBUG-9384

4 files changed, 22 insertions, 23 deletions

diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc
index 66de741792..1a93d05b45 100644
--- a/doc/src/declarative/tutorial.qdoc
+++ b/doc/src/declarative/tutorial.qdoc
@@ -155,13 +155,13 @@ An \l Item is the most basic visual element in QML and is often used as a contai
 
 \snippet examples/declarative/tutorials/helloworld/Cell.qml 4
 
-We declare a \c color property. This property is accessible from  \e outside our component, this allows us
+We declare a \c cellColor property. This property is accessible from  \e outside our component, this allows us
 to instantiate the cells with different colors.
 This property is just an alias to an existing property - the color of the rectangle that compose the cell (see \l{intro-properties}{Properties}).
 
 \snippet examples/declarative/tutorials/helloworld/Cell.qml 5
 
-We want our component to also have a signal that we call \e clicked with a \e color parameter.
+We want our component to also have a signal that we call \e clicked with a \e cellColor parameter of type \e color.
 We will use this signal to change the color of the text in the main QML file later.
 
 \snippet examples/declarative/tutorials/helloworld/Cell.qml 2
@@ -189,7 +189,7 @@ We create the color picker by putting 6 cells with different colors in a grid.
 
 \snippet examples/declarative/tutorials/helloworld/tutorial2.qml 1
 
-When the \e clicked signal of our cell is triggered, we want to set the color of the text to the color passed as a parameter.
+When the \e clicked signal of our cell is triggered, we want to set the color of the text to the \e cellColor passed as a parameter.
 We can react to any signal of our component through a property of the name \e 'onSignalName' (see \l{Signal Handlers}).
 */
 
diff --git a/examples/declarative/tutorials/helloworld/Cell.qml b/examples/declarative/tutorials/helloworld/Cell.qml
index de4f3bb5af..9249ffeb09 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 99889d73f4..38447e212c 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 b8a4f7709e..d851c497f4 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]