summaryrefslogtreecommitdiffstats
path: root/doc/src/declarative/advtutorial.qdoc
diff options
context:
space:
mode:
authorBea Lam <bea.lam@nokia.com>2010-04-09 00:47:00 (GMT)
committerBea Lam <bea.lam@nokia.com>2010-04-09 02:25:24 (GMT)
commit8ba89fea4df4045490d7b557dabb753e7f7ae836 (patch)
treed1114b0b4f341ad289ff4bcbe7aa114518fde32e /doc/src/declarative/advtutorial.qdoc
parentca266d0037713c05d19dd6db9ba04f0c01811676 (diff)
downloadQt-8ba89fea4df4045490d7b557dabb753e7f7ae836.zip
Qt-8ba89fea4df4045490d7b557dabb753e7f7ae836.tar.gz
Qt-8ba89fea4df4045490d7b557dabb753e7f7ae836.tar.bz2
More tutorial improvments
Diffstat (limited to 'doc/src/declarative/advtutorial.qdoc')
-rw-r--r--doc/src/declarative/advtutorial.qdoc26
1 files changed, 14 insertions, 12 deletions
diff --git a/doc/src/declarative/advtutorial.qdoc b/doc/src/declarative/advtutorial.qdoc
index 598f47b..4d3bfa8 100644
--- a/doc/src/declarative/advtutorial.qdoc
+++ b/doc/src/declarative/advtutorial.qdoc
@@ -160,18 +160,20 @@ we cannot use \l Repeater to define the blocks. Instead, we will
create the blocks in JavaScript.
Here is the JavaScript code for generating the blocks, contained in a new
-file, \c samegame.js:
+file, \c samegame.js. The code is explained below.
\snippet declarative/tutorials/samegame/samegame2/samegame.js 0
-The main function here is \c initBoard(). It creates an array to store all the game
-blocks, then calls \c createBlock() to create enough blocks to fill the game canvas.
+The \c startNewGame() function deletes the blocks created in the previous game and
+calculates the number of rows and columns of blocks required to fill the game window for the new game.
+Then, it creates an array to store all the game
+blocks, and calls \c createBlock() to create enough blocks to fill the game window.
-The \c createBlock() function creates a block using the \c Block.qml file
+The \c createBlock() function creates a block from the \c Block.qml file
and moves the new block to its position on the game canvas. This involves several steps:
\list
-\o \l {createComponent(url file)} is called to generate an element from \c Block.qml.
+\o \l {createComponent(url file)}{createComponent()} is called to generate an element from \c Block.qml.
If the component is ready, we can call \c createObject() to create an instance of the \c Block item.
(If a component is loaded remotely - over HTTP for example - then we would have to wait for the
component to finish loading before calling \c createObject()).
@@ -193,13 +195,13 @@ the JavaScript file as a \l{Modules#QML Modules}{module}:
\snippet declarative/tutorials/samegame/samegame2/samegame.qml 2
This allows us to refer to any functions within \c samegame.js using "SameGame"
-as a prefix: for example, \c SameGame.initBoard() or \c SameGame.createBlock().
-This means we can now connect the New Game button's \c onClicked handler to the \c initBoard()
+as a prefix: for example, \c SameGame.startNewGame() or \c SameGame.createBlock().
+This means we can now connect the New Game button's \c onClicked handler to the \c startNewGame()
function, like this:
\snippet declarative/tutorials/samegame/samegame2/samegame.qml 1
-So, when you click the New Game button, \c initBoard() is called and generates a field of blocks, like this:
+So, when you click the New Game button, \c startNewGame() is called and generates a field of blocks, like this:
\image declarative-adv-tutorial2.png
@@ -247,7 +249,7 @@ To make it easier for the JavaScript code to interface with the QML elements, we
The \c gameCanvas item is the exact size of the board, and has a \c score property and a \l MouseArea for input.
The blocks are now created as its children, and its dimensions are used to determine the board size so that
the application scales to the available screen size.
-Since its size is bound to a multiple of \c tileSize, \c tileSize needs to be moved out of \c samegame.js and into \c samegame.qml as a QML property.
+Since its size is bound to a multiple of \c blockSize, \c blockSize needs to be moved out of \c samegame.js and into \c samegame.qml as a QML property.
Note that it can still be accessed from the script.
The \l MouseArea simply calls \c{handleClick()} in \c samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates \c gameCanvas.score with the current score if necessary. Here is the \c handleClick() function:
@@ -258,7 +260,7 @@ Note that if \c score was a global variable in the \c{samegame.js} file you woul
\section3 Updating the score
-When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code:
+When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls \c victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code:
\snippet declarative/tutorials/samegame/samegame3/samegame.js 2
@@ -287,7 +289,7 @@ Here is a screenshot of what has been accomplished so far:
\image declarative-adv-tutorial3.png
-Here is the QML code as it is now in \c samegame.qml:
+This is what \c samegame.qml looks like now:
\snippet declarative/tutorials/samegame/samegame3/samegame.qml 0
@@ -439,7 +441,7 @@ By following this tutorial you've seen how you can write a fully functional appl
\o Build your application with \l {{QML Elements}}{QML elements}
\o Add application logic \l{Integrating JavaScript}{with JavaScript code}
\o Add animations with \l {Behavior}{Behaviors} and \l{QML States}{states}
-\o Store persistent application data through online and offline methods
+\o Store persistent application data using the \l{Offline Storage API} or \l XMLHttpRequest
\endlist
There is so much more to learn about QML that we haven't been able to cover in this tutorial. Check out all the