diff options
19 files changed, 208 insertions, 118 deletions
diff --git a/doc/src/declarative/advtutorial.qdoc b/doc/src/declarative/advtutorial.qdoc index 42ce246..7d2967e 100644 --- a/doc/src/declarative/advtutorial.qdoc +++ b/doc/src/declarative/advtutorial.qdoc @@ -109,12 +109,16 @@ Notice the anchors for the \c Item, \c Button and \c Text elements are set using \section2 Adding \c Button and \c Block components -The \c Button item in the code above is defined in a separate file named \c Button.qml. +The \c Button item in the code above is defined in a separate component file named \c Button.qml. To create a functional button, we use the QML elements \l Text and \l MouseArea inside a \l Rectangle. Here is the \c Button.qml code: \snippet declarative/tutorials/samegame/samegame1/Button.qml 0 +This essentially defines a rectangle that contains text and can be clicked. The \l MouseArea +has an \c onClicked() handler that is implemented to emit the \c clicked() signal of the +\c container when the area is clicked. + In Same Game, the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate \c Block.qml file: @@ -226,14 +230,14 @@ until it is won or lost. To do this, we have added the following functions to \c samegame.js: \list -\o function \c{handleClick(x,y)} -\o function \c{floodFill(xIdx,yIdx,type)} -\o function \c{shuffleDown()} -\o function \c{victoryCheck()} -\o function \c{floodMoveCheck(xIdx, yIdx, type)} +\o \c{handleClick(x,y)} +\o \c{floodFill(xIdx,yIdx,type)} +\o \c{shuffleDown()} +\o \c{victoryCheck()} +\o \c{floodMoveCheck(xIdx, yIdx, type)} \endlist -As this is a tutorial about QML, not game design, we will only discuss \c handleClick() and \c victoryCheck() below since they interface directly with the QML elements. Note that although the game logic here is written in JavaScript, it could have been written in C++ and then exposed to JavaScript. +As this is a tutorial about QML, not game design, we will only discuss \c handleClick() and \c victoryCheck() below since they interface directly with the QML elements. Note that although the game logic here is written in JavaScript, it could have been written in C++ and then exposed to QML. \section3 Enabling mouse click interaction @@ -269,6 +273,8 @@ And this is how it is used in the main \c samegame.qml file: \snippet declarative/tutorials/samegame/samegame3/samegame.qml 2 +We give the dialog a \l {Item::z}{z} value of 100 to ensure it is displayed on top of our other components. The default \c z value for an item is 0. + \section3 A dash of color @@ -383,15 +389,41 @@ The theme change here is produced simply by replacing the block images. This can Another feature we might want to add to the game is a method of storing and retrieving high scores. -In \c samegame.qml we now pop up a dialog when the game is over and requests the player's name so it can be added to a High Scores table. The dialog is created using \c Dialog.qml: +To do this, we will show a dialog when the game is over to request the player's name and add it to a High Scores table. +This requires a few changes to \c Dialog.qml. In addition to a \c Text element, it now has a +\c TextInput child item for receiving keyboard text input: + +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 0 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 2 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3 + +We'll also add a \c showWithInput() function. The text input will only be visible if this function +is called instead of \c show(). When the dialog is closed, it emits a \c closed() signal, and +other elements can retrieve the text entered by the user through an \c inputText property: + +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 0 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 1 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3 + +Now the dialog can be used in \c samegame.qml: \snippet declarative/tutorials/samegame/samegame4/samegame.qml 0 -When the dialog is closed, we call the new \c saveHighScore() function in \c samegame.js, which stores the high score locally in an SQL database and also send the score to an online database if possible. +When the dialog emits the \c closed signal, we call the new \c saveHighScore() function in \c samegame.js, which stores the high score locally in an SQL database and also send the score to an online database if possible. +The \c nameInputDialog is activated in the \c victoryCheck() function in \c samegame.js: + +\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 3 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 4 \section3 Storing high scores offline +Now we need to implement the functionality to actually save the High Scores table. + Here is the \c saveHighScore() function in \c samegame.js: \snippet declarative/tutorials/samegame/samegame4/content/samegame.js 2 diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc index 1a93d05..4cfb999 100644 --- a/doc/src/declarative/tutorial.qdoc +++ b/doc/src/declarative/tutorial.qdoc @@ -86,7 +86,7 @@ Here is the QML code for the application: \section2 Import First, we need to import the types that we need for this example. Most QML files will import the built-in QML -types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with: +types (like \l{Rectangle}, \l{Image}, ...) that come with Qt, using: \snippet examples/declarative/tutorials/helloworld/tutorial1.qml 3 @@ -95,7 +95,7 @@ types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with: \snippet examples/declarative/tutorials/helloworld/tutorial1.qml 1 We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML. -We give it an \c{id} to be able to refer to it later. In this case, we call it \e page. +We give it an \c{id} to be able to refer to it later. In this case, we call it "page". We also set the \c width, \c height and \c color properties. The \l{Rectangle} element contains many other properties (such as \c x and \c y), but these are left at their default values. @@ -103,15 +103,16 @@ The \l{Rectangle} element contains many other properties (such as \c x and \c y) \snippet examples/declarative/tutorials/helloworld/tutorial1.qml 2 -We add a \l Text element as a child of our root element that will display the text 'Hello world!'. +We add a \l Text element as a child of the root Rectangle element that displays the text 'Hello world!'. The \c y property is used to position the text vertically at 30 pixels from the top of its parent. -The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{dot properties}{dot notation}. - The \c anchors.horizontalCenter property refers to the horizontal center of an element. In this case, we specify that our text element should be horizontally centered in the \e page element (see \l{anchor-layout}{Anchor-based Layout}). +The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{dot properties}{dot notation}. + + \section2 Viewing the example To view what you have created, run the \l{Qt Declarative UI Runtime}{qml} tool (located in the \c bin directory) with your filename as the first argument. @@ -134,10 +135,10 @@ This chapter adds a color picker to change the color of the text. \image declarative-tutorial2.png Our color picker is made of six cells with different colors. -To avoid writing the same code multiple times, we first create a new \c Cell component. +To avoid writing the same code multiple times for each cell, we create a new \c Cell component. A component provides a way of defining a new type that we can re-use in other QML files. A QML component is like a black-box and interacts with the outside world through properties, signals and slots and is generally -defined in its own QML file (for more details, see \l {Defining new Components}). +defined in its own QML file. (For more details, see \l {Defining new Components}). The component's filename must always start with a capital letter. Here is the QML code for \c Cell.qml: diff --git a/examples/declarative/tutorials/helloworld/tutorial1.qml b/examples/declarative/tutorials/helloworld/tutorial1.qml index 5e27b45..04cd155 100644 --- a/examples/declarative/tutorials/helloworld/tutorial1.qml +++ b/examples/declarative/tutorials/helloworld/tutorial1.qml @@ -14,8 +14,9 @@ Rectangle { Text { id: helloText text: "Hello world!" + y: 30 + anchors.horizontalCenter: page.horizontalCenter font.pointSize: 24; font.bold: true - y: 30; anchors.horizontalCenter: page.horizontalCenter } //![2] } diff --git a/examples/declarative/tutorials/helloworld/tutorial2.qml b/examples/declarative/tutorials/helloworld/tutorial2.qml index 085efa4..66be509 100644 --- a/examples/declarative/tutorials/helloworld/tutorial2.qml +++ b/examples/declarative/tutorials/helloworld/tutorial2.qml @@ -9,8 +9,9 @@ Rectangle { Text { id: helloText text: "Hello world!" + y: 30 + anchors.horizontalCenter: page.horizontalCenter font.pointSize: 24; font.bold: true - y: 30; anchors.horizontalCenter: page.horizontalCenter } Grid { diff --git a/examples/declarative/tutorials/helloworld/tutorial3.qml b/examples/declarative/tutorials/helloworld/tutorial3.qml index 4bf4970..041d9a9 100644 --- a/examples/declarative/tutorials/helloworld/tutorial3.qml +++ b/examples/declarative/tutorials/helloworld/tutorial3.qml @@ -9,8 +9,9 @@ Rectangle { Text { id: helloText text: "Hello world!" + y: 30 + anchors.horizontalCenter: page.horizontalCenter font.pointSize: 24; font.bold: true - y: 30; anchors.horizontalCenter: page.horizontalCenter //![1] MouseArea { id: mouseArea; anchors.fill: parent } 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 } } } |