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 66de741..1a93d05 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 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]