Update 'hello world' tutorial.

5 files changed, 97 insertions, 77 deletions

diff --git a/examples/declarative/tutorials/helloworld/t1/tutorial1.qml b/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
index e2c6650..93d3c34 100644
--- a/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
+++ b/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
@@ -1,16 +1,22 @@
+//![0]
+//![3]
 import Qt 4.6
+//![3]
 
+//![1]
 Rectangle {
     id: page
-    width: 480
-    height: 200
-    color: "LightGrey"
+    width: 500; height: 200
+    color: "lightgray"
+//![1]
+
+//![2]
     Text {
         id: helloText
         text: "Hello world!"
-        font.pointSize: 24
-        font.bold: true
-        y: 30
-        anchors.horizontalCenter: page.horizontalCenter
+        font.pointSize: 24; font.bold: true
+        y: 30; anchors.horizontalCenter: page.horizontalCenter
     }
+//![2]
 }
+//![0]
diff --git a/examples/declarative/tutorials/helloworld/t2/Cell.qml b/examples/declarative/tutorials/helloworld/t2/Cell.qml
index bfd835d..ab6e565 100644
--- a/examples/declarative/tutorials/helloworld/t2/Cell.qml
+++ b/examples/declarative/tutorials/helloworld/t2/Cell.qml
@@ -1,18 +1,32 @@
+//![0]
 import Qt 4.6
 
+//![1]
 Item {
-    property var color
+    id: container
+//![4]
+    property alias color: rectangle.color
+//![4]
+//![5]
+    signal clicked(string color)
+//![5]
 
-    id: cellContainer
-    width: 40
-    height: 25
+    width: 40; height: 25
+//![1]
 
+//![2]
     Rectangle {
+        id: rectangle
+        border.color: "white"
         anchors.fill: parent
-        color: cellContainer.color
     }
+//![2]
+
+//![3]
     MouseRegion {
         anchors.fill: parent
-        onClicked: { helloText.color = cellContainer.color }
+        onClicked: container.clicked(container.color)
     }
+//![3]
 }
+//![0]
diff --git a/examples/declarative/tutorials/helloworld/t2/tutorial2.qml b/examples/declarative/tutorials/helloworld/t2/tutorial2.qml
index aee9032..99889d7 100644
--- a/examples/declarative/tutorials/helloworld/t2/tutorial2.qml
+++ b/examples/declarative/tutorials/helloworld/t2/tutorial2.qml
@@ -1,29 +1,31 @@
+//![0]
 import Qt 4.6
 
 Rectangle {
     id: page
-    width: 480
-    height: 200
-    color: "LightGrey"
+    width: 500; height: 200
+    color: "lightgray"
+
     Text {
         id: helloText
         text: "Hello world!"
-        font.pointSize: 24
-        font.bold: true
-        y: 30
-        anchors.horizontalCenter: page.horizontalCenter
+        font.pointSize: 24; font.bold: true
+        y: 30; anchors.horizontalCenter: page.horizontalCenter
     }
+
     Grid {
         id: colorPicker
-        x: 0
         anchors.bottom: page.bottom
-        width: 120; height: 50
-        rows: 2; columns: 3
-        Cell { color: "#ff0000" }
-        Cell { color: "#00ff00" }
-        Cell { color: "#0000ff" }
-        Cell { color: "#ffff00" }
-        Cell { color: "#00ffff" }
-        Cell { color: "#ff00ff" }
+        rows: 2; columns: 3; spacing: 3
+
+//![1]
+        Cell { color: "red"; onClicked: helloText.color = color }
+//![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 }
     }
 }
+//![0]
diff --git a/examples/declarative/tutorials/helloworld/t3/Cell.qml b/examples/declarative/tutorials/helloworld/t3/Cell.qml
index 6feb7a9..578369d 100644
--- a/examples/declarative/tutorials/helloworld/t3/Cell.qml
+++ b/examples/declarative/tutorials/helloworld/t3/Cell.qml
@@ -1,17 +1,20 @@
 import Qt 4.6
 
 Item {
-    property var color
+    id: container
+    property alias color: rectangle.color
+    signal clicked(string color)
+
+    width: 40; height: 25
 
-    id: cellContainer
-    width: 40
-    height: 25
     Rectangle {
+        id: rectangle
+        border.color: "white"
         anchors.fill: parent
-        color: cellContainer.color
     }
+
     MouseRegion {
         anchors.fill: parent
-        onClicked: { helloText.color = cellContainer.color }
+        onClicked: container.clicked(container.color)
     }
 }
diff --git a/examples/declarative/tutorials/helloworld/t3/tutorial3.qml b/examples/declarative/tutorials/helloworld/t3/tutorial3.qml
index b80065d..d641eba 100644
--- a/examples/declarative/tutorials/helloworld/t3/tutorial3.qml
+++ b/examples/declarative/tutorials/helloworld/t3/tutorial3.qml
@@ -1,56 +1,51 @@
+//![0]
 import Qt 4.6
 
 Rectangle {
     id: page
-    width: 480
-    height: 200
-    color: "LightGrey"
+    width: 500; height: 200
+    color: "lightgray"
+
     Text {
         id: helloText
         text: "Hello world!"
-        font.pointSize: 24
-        font.bold: true
-        y: 30
-        anchors.horizontalCenter: page.horizontalCenter
-        states: [
-            State {
-                name: "down"
-                when: mouseRegion.pressed == true
-                PropertyChanges {
-                    target: helloText
-                    y: 160
-                    color: "red"
-                }
-            }
-        ]
-        transitions: [
-            Transition {
-                from: "*"
-                to: "down"
-                reversible: true
-                ParallelAnimation {
-                    NumberAnimation {
-                        properties: "y"
-                        duration: 500
-                        easing: "easeOutBounce"
-                    }
-                    ColorAnimation { property: "color"; duration: 500 }
-                }
+        font.pointSize: 24; font.bold: true
+        y: 30; anchors.horizontalCenter: page.horizontalCenter
+        transformOrigin: "Center"
+
+//![1]
+        MouseRegion { id: mouseRegion; anchors.fill: parent }
+//![1]
+
+//![2]
+        states: State {
+            name: "down"; when: mouseRegion.pressed == true
+            PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
+        }
+//![2]
+
+//![3]
+        transitions: Transition {
+            from: ""; to: "down"; reversible: true
+            ParallelAnimation {
+                NumberAnimation { properties: "y,rotation"; duration: 500; easing: "easeInOutQuad" }
+                ColorAnimation { property: "color"; duration: 500 }
             }
-        ]
+        }
+//![3]
     }
-    MouseRegion { id: mouseRegion; anchors.fill: helloText }
+
     Grid {
         id: colorPicker
-        x: 0
         anchors.bottom: page.bottom
-        width: 120; height: 50
-        rows: 2; columns: 3
-        Cell { color: "#ff0000" }
-        Cell { color: "#00ff00" }
-        Cell { color: "#0000ff" }
-        Cell { color: "#ffff00" }
-        Cell { color: "#00ffff" }
-        Cell { color: "#ff00ff" }
+        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 }
     }
 }
+//![0]