diff options
Diffstat (limited to 'doc/src/declarative/advtutorial.qdoc')
| -rw-r--r-- | doc/src/declarative/advtutorial.qdoc | 50 |
1 files changed, 41 insertions, 9 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 |