diff options
author | Martin Jones <martin.jones@nokia.com> | 2010-05-05 04:40:10 (GMT) |
---|---|---|
committer | Martin Jones <martin.jones@nokia.com> | 2010-05-05 04:40:10 (GMT) |
commit | 72b0e21133534b58b5f760b72f97d071a79ad874 (patch) | |
tree | 605e660a418d0dbd9adc55e836a25ba15bc90326 /doc/src/declarative | |
parent | ce9bc843443f2c61361afa75a62a7d39029557e6 (diff) | |
parent | 9719866c686805d69b0026f555c97594e09c836f (diff) | |
download | Qt-72b0e21133534b58b5f760b72f97d071a79ad874.zip Qt-72b0e21133534b58b5f760b72f97d071a79ad874.tar.gz Qt-72b0e21133534b58b5f760b72f97d071a79ad874.tar.bz2 |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7
Diffstat (limited to 'doc/src/declarative')
-rw-r--r-- | doc/src/declarative/advtutorial.qdoc | 50 | ||||
-rw-r--r-- | doc/src/declarative/qmlruntime.qdoc | 17 | ||||
-rw-r--r-- | doc/src/declarative/tutorial.qdoc | 15 |
3 files changed, 66 insertions, 16 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/qmlruntime.qdoc b/doc/src/declarative/qmlruntime.qdoc index a724c7d..23c5c32 100644 --- a/doc/src/declarative/qmlruntime.qdoc +++ b/doc/src/declarative/qmlruntime.qdoc @@ -112,6 +112,23 @@ When run with the \c -help option, qml shows available options. + \section2 Translations + + When the runtime loads an initial QML file, it will install a translation file from + a "i18n" subdirectory relative to that initial QML file. The actual translation file + loaded will be according to the system locale and have the form + "qml_<language>.qm", where <language> is a two-letter ISO 639 language, + such as "qml_fr.qm", optionally followed by an underscore and an uppercase two-letter ISO 3166 country + code, such as "qml_fr_FR.qm" or "qml_fr_CA.qm". + + Such files can be created using \l{Qt Linguist}. + + See \l{scripting.html#internationalization} for information about how to make + the JavaScript in QML files use translatable strings. + + Additionally, the QML runtime will load translation files specified on the + command line via the \c -translation option. + \section2 Dummy Data The secondary use of the qml runtime is to allow QML files to be viewed with 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: |