Doc improvements, simplify example code

14 files changed, 153 insertions, 99 deletions

diff --git a/examples/declarative/tutorials/samegame/samegame1/Block.qml b/examples/declarative/tutorials/samegame/samegame1/Block.qml
index a23654b..11fd844 100644
--- a/examples/declarative/tutorials/samegame/samegame1/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/Block.qml
@@ -7,7 +7,7 @@ Item {
     Image {
         id: img
         anchors.fill: parent
-        source: "../shared/pics/redStone.png";
+        source: "../shared/pics/redStone.png"
     }
 }
 //![0]
diff --git a/examples/declarative/tutorials/samegame/samegame1/Button.qml b/examples/declarative/tutorials/samegame/samegame1/Button.qml
index e84b1ce..96a80eb 100644
--- a/examples/declarative/tutorials/samegame/samegame1/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/Button.qml
@@ -8,9 +8,9 @@ Rectangle {
 
     signal clicked
 
-    width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    smooth: true
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
     border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
     radius: 8
 
     // color the button with a gradient
@@ -27,8 +27,17 @@ Rectangle {
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
-    MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
 
-    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
 }
 //![0]
diff --git a/examples/declarative/tutorials/samegame/samegame1/samegame.qml b/examples/declarative/tutorials/samegame/samegame1/samegame.qml
index b6e01fd..f2974be 100644
--- a/examples/declarative/tutorials/samegame/samegame1/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/samegame.qml
@@ -22,21 +22,20 @@ Rectangle {
 
     Rectangle {
         id: toolBar
-        width: parent.width; height: 32
+        width: parent.width; height: 30
         color: activePalette.window
         anchors.bottom: screen.bottom
 
         Button {
-            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
             text: "New Game" 
             onClicked: console.log("This doesn't do anything yet...")
         }
 
         Text {
             id: score
-            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
             text: "Score: Who knows?"
-            font.bold: true
         }
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame2/Block.qml b/examples/declarative/tutorials/samegame/samegame2/Block.qml
index 4e71e60..39da84e 100644
--- a/examples/declarative/tutorials/samegame/samegame2/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/Block.qml
@@ -6,6 +6,6 @@ Item {
     Image {
         id: img
         anchors.fill: parent
-        source: "../shared/pics/redStone.png";
+        source: "../shared/pics/redStone.png"
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame2/Button.qml b/examples/declarative/tutorials/samegame/samegame2/Button.qml
index 737d886..4ed856b 100644
--- a/examples/declarative/tutorials/samegame/samegame2/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/Button.qml
@@ -7,9 +7,9 @@ Rectangle {
 
     signal clicked
 
-    width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    smooth: true
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
     border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
     radius: 8
 
     // color the button with a gradient
@@ -26,7 +26,16 @@ Rectangle {
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
-    MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
 
-    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame2/samegame.qml b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
index a7d1fba..9b4d4d5 100644
--- a/examples/declarative/tutorials/samegame/samegame2/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
@@ -30,7 +30,7 @@ Rectangle {
 
 //![1]
         Button {
-            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
             text: "New Game"
             onClicked: SameGame.startNewGame()
         }
@@ -38,9 +38,8 @@ Rectangle {
 
         Text {
             id: score
-            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
             text: "Score: Who knows?"
-            font.bold: true
         }
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame3/Button.qml b/examples/declarative/tutorials/samegame/samegame3/Button.qml
index 737d886..4ed856b 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Button.qml
@@ -7,9 +7,9 @@ Rectangle {
 
     signal clicked
 
-    width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    smooth: true
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
     border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
     radius: 8
 
     // color the button with a gradient
@@ -26,7 +26,16 @@ Rectangle {
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
-    MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
 
-    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
index 15b3b2f..3efed2f 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
@@ -2,31 +2,30 @@
 import Qt 4.7
 
 Rectangle {
-    id: page
+    id: container
 
-    signal closed
-
-    function forceClose() {
-        page.closed();
-        page.opacity = 0;
+    function show(text) {
+        dialogText.text = text;
+        container.opacity = 1;
     }
 
-    function show(txt) {
-        dialogText.text = txt;
-        page.opacity = 1;
+    function hide() {
+        container.opacity = 0;
     }
 
-    width: dialogText.width + 20; height: dialogText.height + 20
-    color: "white"
-    border.width: 1
+    width: dialogText.width + 20
+    height: dialogText.height + 20
     opacity: 0
 
-    Behavior on opacity {
-        NumberAnimation { duration: 1000 }
+    Text {
+        id: dialogText
+        anchors.centerIn: parent
+        text: ""
     }
 
-    Text { id: dialogText; anchors.centerIn: parent; text: "Hello World!" }
-
-    MouseArea { anchors.fill: parent; onClicked: forceClose(); }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: hide();
+    }
 }
 //![0]
diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.js b/examples/declarative/tutorials/samegame/samegame3/samegame.js
index 4256aee..84439fc 100644
--- a/examples/declarative/tutorials/samegame/samegame3/samegame.js
+++ b/examples/declarative/tutorials/samegame/samegame3/samegame.js
@@ -17,7 +17,7 @@ function startNewGame() {
     maxIndex = maxRow * maxColumn;
 
     //Close dialogs
-    dialog.forceClose();
+    dialog.hide();
 
     //Initialize Board
     board = new Array(maxIndex);
@@ -59,10 +59,9 @@ function createBlock(column, row) {
     return true;
 }
 
-var fillFound;
-//Set after a floodFill call to the number of blocks found
-var floodBoard;
-//Set to 1 if the floodFill reaches off that node
+var fillFound; //Set after a floodFill call to the number of blocks found
+var floodBoard; //Set to 1 if the floodFill reaches off that node
+
 //![1]
 function handleClick(xPos, yPos) {
     var column = Math.floor(xPos / gameCanvas.blockSize);
diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.qml b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
index 50f9d5d..ac93eb1 100644
--- a/examples/declarative/tutorials/samegame/samegame3/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
@@ -30,7 +30,6 @@ Rectangle {
             width: parent.width - (parent.width % blockSize)
             height: parent.height - (parent.height % blockSize)
             anchors.centerIn: parent
-            z: 20
 
             MouseArea {
                 anchors.fill: parent
@@ -41,26 +40,29 @@ Rectangle {
     }
 
 //![2]
-    Dialog { id: dialog; anchors.centerIn: parent; z: 21 }
+    Dialog {
+        id: dialog
+        anchors.centerIn: parent
+        z: 100
+    }
 //![2]
 
     Rectangle {
         id: toolBar
-        width: parent.width; height: 32
+        width: parent.width; height: 30
         color: activePalette.window
         anchors.bottom: screen.bottom
 
         Button {
-            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
             text: "New Game"
             onClicked: SameGame.startNewGame()
         }
 
         Text {
             id: score
-            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
             text: "Score: Who knows?"
-            font.bold: true
         }
     }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
index 737d886..4ed856b 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
@@ -7,9 +7,9 @@ Rectangle {
 
     signal clicked
 
-    width: buttonLabel.width + 20; height: buttonLabel.height + 6
-    smooth: true
+    width: buttonLabel.width + 20; height: buttonLabel.height + 5
     border { width: 1; color: Qt.darker(activePalette.button) }
+    smooth: true
     radius: 8
 
     // color the button with a gradient
@@ -26,7 +26,16 @@ Rectangle {
         GradientStop { position: 1.0; color: activePalette.button }
     }
 
-    MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked();
+    }
 
-    Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
+    Text {
+        id: buttonLabel
+        anchors.centerIn: container
+        color: activePalette.buttonText
+        text: container.text
+    }
 }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
index 6848534..2f45362 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
@@ -1,30 +1,59 @@
 import Qt 4.7
 
+//![0]
 Rectangle {
-    id: page
+    id: container
+//![0]
 
+//![1]
+    property string inputText: textInput.text
     signal closed
 
-    function forceClose() {
-        page.closed();
-        page.opacity = 0;
+    function show(text) {
+        dialogText.text = text;
+        container.opacity = 1;
+        textInput.opacity = 0;
     }
 
-    function show(txt) {
-        dialogText.text = txt;
-        page.opacity = 1;
+    function showWithInput(text) {
+        show(text);
+        textInput.opacity = 1;
+        textInput.text = ""
     }
 
-    width: dialogText.width + 20; height: dialogText.height + 20
-    color: "white"
-    border.width: 1
+    function hide() {
+        container.opacity = 0;
+        container.closed();
+    }
+//![1]
+
+    width: dialogText.width + textInput.width + 20
+    height: dialogText.height + 20
     opacity: 0
 
-    Behavior on opacity {
-        NumberAnimation { duration: 1000 }
+    Text {
+        id: dialogText
+        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 10 }
+        text: ""
+    }
+
+//![2]
+    TextInput {
+        id: textInput
+        anchors { verticalCenter: parent.verticalCenter; left: dialogText.right }
+        width: 80
+        focus: true
+        text: ""
+
+        onAccepted: container.hide()    // close dialog when Enter is pressed
     }
+//![2]
 
-    Text { id: dialogText; anchors.centerIn: parent; text: "Hello World!" }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: hide();
+    }
 
-    MouseArea { anchors.fill: parent; onClicked: forceClose(); }
+//![3]
 }
+//![3]
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
index 961cd66..06d21e6 100755
--- a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
+++ b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
@@ -25,8 +25,8 @@ function startNewGame() {
     maxIndex = maxRow * maxColumn;
 
     //Close dialogs
-    nameInputDialog.forceClose();
-    dialog.forceClose();
+    nameInputDialog.hide();
+    dialog.hide();
 
     //Initialize Board
     board = new Array(maxIndex);
@@ -72,10 +72,9 @@ function createBlock(column, row) {
     return true;
 }
 
-var fillFound;
-//Set after a floodFill call to the number of blocks found
-var floodBoard;
-//Set to 1 if the floodFill reaches off that node
+var fillFound; //Set after a floodFill call to the number of blocks found
+var floodBoard; //Set to 1 if the floodFill reaches off that node
+
 function handleClick(xPos, yPos) {
     var column = Math.floor(xPos / gameCanvas.blockSize);
     var row = Math.floor(yPos / gameCanvas.blockSize);
@@ -157,7 +156,9 @@ function shuffleDown() {
     }
 }
 
+//![3]
 function victoryCheck() {
+//![3]
     //Award bonus points if no blocks left
     var deservesBonus = true;
     for (var column = maxColumn - 1; column >= 0; column--)
@@ -166,12 +167,14 @@ function victoryCheck() {
     if (deservesBonus)
         gameCanvas.score += 500;
 
+//![4]
     //Check whether game has finished
     if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1))) {
         gameDuration = new Date() - gameDuration;
-        nameInputDialog.show("You won! Please enter your name:                 ");
+        nameInputDialog.showWithInput("You won! Please enter your name: ");
     }
 }
+//![4]
 
 //only floods up and right, to see if it can find adjacent same-typed blocks 
 function floodMoveCheck(column, row, type) {
diff --git a/examples/declarative/tutorials/samegame/samegame4/samegame.qml b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
index 404af0a..feb61fd 100644
--- a/examples/declarative/tutorials/samegame/samegame4/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
@@ -25,7 +25,7 @@ Rectangle {
             property int score: 0
             property int blockSize: 40
 
-            z: 20; anchors.centerIn: parent
+            anchors.centerIn: parent
             width: parent.width - (parent.width % blockSize);
             height: parent.height - (parent.height % blockSize);
 
@@ -35,53 +35,41 @@ Rectangle {
         }
     }
 
-    Dialog { id: dialog; anchors.centerIn: parent; z: 21 }
+    Dialog {
+        id: dialog
+        anchors.centerIn: parent
+        z: 100
+    }
 
     //![0]
     Dialog {
         id: nameInputDialog
-
         anchors.centerIn: parent
-        z: 22
+        z: 100
 
-        Text {
-            id: dialogText
-            opacity: 0
-            text: "   You won! Please enter your name:"
-        }
-
-        TextInput {
-            id: nameInput
-            width: 72
-            anchors { verticalCenter: parent.verticalCenter; left: dialogText.right }
-            focus: true
-
-            onAccepted: {
-                if (nameInputDialog.opacity == 1 && nameInput.text != "")
-                    SameGame.saveHighScore(nameInput.text);
-                nameInputDialog.forceClose();
-            }
+        onClosed: {
+            if (nameInputDialog.inputText != "")
+                SameGame.saveHighScore(nameInputDialog.inputText);
         }
     }
     //![0]
 
     Rectangle {
         id: toolBar
-        width: parent.width; height: 32
+        width: parent.width; height: 30
         color: activePalette.window
         anchors.bottom: screen.bottom
 
         Button {
-            anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
             text: "New Game"
             onClicked: SameGame.startNewGame()
         }
 
         Text {
             id: score
-            anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
             text: "Score: " + gameCanvas.score
-            font.bold: true
         }
     }
 }