<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- advtutorial.qdoc -->
<title>Qt 4.8: QML Advanced Tutorial 4 - Finishing Touches</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>QML Examples & Demos</li>
<li>QML Advanced Tutorial 4 - Finishing Touches</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="declarative-tutorials-samegame-samegame3.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="declarative-tutorials-samegame-samegame3.html">QML Advanced Tutorial 3 - Implementing the Game Logic</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level2"><a href="#adding-some-flair">Adding some flair</a></li>
<li class="level3"><a href="#animating-block-movement">Animating block movement</a></li>
<li class="level3"><a href="#animating-block-opacity-changes">Animating block opacity changes</a></li>
<li class="level3"><a href="#adding-particle-effects">Adding particle effects</a></li>
<li class="level2"><a href="#keeping-a-high-scores-table">Keeping a High Scores table</a></li>
<li class="level3"><a href="#storing-high-scores-offline">Storing high scores offline</a></li>
<li class="level3"><a href="#storing-high-scores-online">Storing high scores online</a></li>
<li class="level2"><a href="#that-s-it">That's it!</a></li>
</ul>
</div>
<h1 class="title">QML Advanced Tutorial 4 - Finishing Touches</h1>
<span class="subtitle"></span>
<!-- $$$declarative/tutorials/samegame/samegame4-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="declarative-tutorials-samegame-samegame4-samegame-qml.html">declarative/tutorials/samegame/samegame4/samegame.qml</a></li>
<li><a href="declarative-tutorials-samegame-samegame4-content-boomblock-qml.html">declarative/tutorials/samegame/samegame4/content/BoomBlock.qml</a></li>
<li><a href="declarative-tutorials-samegame-samegame4-content-button-qml.html">declarative/tutorials/samegame/samegame4/content/Button.qml</a></li>
<li><a href="declarative-tutorials-samegame-samegame4-content-dialog-qml.html">declarative/tutorials/samegame/samegame4/content/Dialog.qml</a></li>
<li><a href="declarative-tutorials-samegame-samegame4-content-samegame-js.html">declarative/tutorials/samegame/samegame4/content/samegame.js</a></li>
<li><a href="declarative-tutorials-samegame-samegame4-highscores-score-data-xml.html">declarative/tutorials/samegame/samegame4/highscores/score_data.xml</a></li>
<li><a href="declarative-tutorials-samegame-samegame4-samegame4-qmlproject.html">declarative/tutorials/samegame/samegame4/samegame4.qmlproject</a></li>
</ul>
<a name="adding-some-flair"></a>
<h3>Adding some flair</h3>
<p>Now we're going to do two things to liven up the game: animate the blocks and add a High Score system.</p>
<p>We've also cleaned up the directory structure for our application files. We now have a lot of files, so all the JavaScript and QML files outside of <tt>samegame.qml</tt> have been moved into a new sub-directory named "content".</p>
<p>In anticipation of the new block animations, <tt>Block.qml</tt> file is now renamed to <tt>BoomBlock.qml</tt>.</p>
<a name="animating-block-movement"></a>
<h4>Animating block movement</h4>
<p>First we will animate the blocks so that they move in a fluid manner. QML has a number of methods for adding fluid movement, and in this case we're going to use the <a href="qml-behavior.html">Behavior</a> element to add a <a href="qml-springanimation.html">SpringAnimation</a>. In <tt>BoomBlock.qml</tt>, we apply a <a href="qml-springanimation.html">SpringAnimation</a> behavior to the <tt>x</tt> and <tt>y</tt> properties so that the block will follow and animate its movement in a spring-like fashion towards the specified position (whose values will be set by <tt>samegame.js</tt>).Here is the code added to <tt>BoomBlock.qml</tt>:</p>
<pre class="qml"> property <span class="type">bool</span> <span class="name">spawned</span>: <span class="number">false</span>
Behavior on <span class="name">x</span> {
<span class="name">enabled</span>: <span class="name">spawned</span>;
<span class="type"><a href="qml-springanimation.html">SpringAnimation</a></span>{ <span class="name">spring</span>: <span class="number">2</span>; <span class="name">damping</span>: <span class="number">0.2</span> }
}
Behavior on <span class="name">y</span> {
<span class="type"><a href="qml-springanimation.html">SpringAnimation</a></span>{ <span class="name">spring</span>: <span class="number">2</span>; <span class="name">damping</span>: <span class="number">0.2</span> }
}</pre>
<p>The <tt>spring</tt> and <tt>damping</tt> values can be changed to modify the spring-like effect of the animation.</p>
<p>The <tt>enabled: spawned</tt> setting refers to the <tt>spawned</tt> value that is set from <tt>createBlock()</tt> in <tt>samegame.js</tt>. This ensures the <a href="qml-springanimation.html">SpringAnimation</a> on the <tt>x</tt> is only enabled after <tt>createBlock()</tt> has set the block to the correct position. Otherwise, the blocks will slide out of the corner (0,0) when a game begins, instead of falling from the top in rows. (Try commenting out <tt>enabled: spawned</tt> and see for yourself.)</p>
<a name="animating-block-opacity-changes"></a>
<h4>Animating block opacity changes</h4>
<p>Next, we will add a smooth exit animation. For this, we'll use a <a href="qml-behavior.html">Behavior</a> element, which allows us to specify a default animation when a property change occurs. In this case, when the <tt>opacity</tt> of a Block changes, we will animate the opacity value so that it gradually fades in and out, instead of abruptly changing between fully visible and invisible. To do this, we'll apply a <a href="qml-behavior.html">Behavior</a> on the <tt>opacity</tt> property of the <tt>Image</tt> element in <tt>BoomBlock.qml</tt>:</p>
<pre class="qml"> <span class="type"><a href="qml-image.html">Image</a></span> {
<span class="name">id</span>: <span class="name">img</span>
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">source</span>: {
<span class="keyword">if</span> (<span class="name">type</span> <span class="operator">==</span> <span class="number">0</span>)
<span class="keyword">return</span> <span class="string">"../../shared/pics/redStone.png"</span>;
else <span class="keyword">if</span> (<span class="name">type</span> <span class="operator">==</span> <span class="number">1</span>)
<span class="keyword">return</span> <span class="string">"../../shared/pics/blueStone.png"</span>;
else
<span class="keyword">return</span> <span class="string">"../../shared/pics/greenStone.png"</span>;
}
<span class="name">opacity</span>: <span class="number">0</span>
Behavior on <span class="name">opacity</span> {
<span class="type"><a href="qml-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>:<span class="string">"opacity"</span>; <span class="name">duration</span>: <span class="number">200</span> }
}
}</pre>
<p>Note the <tt>opacity: 0</tt> which means the block is transparent when it is first created. We could set the opacity in <tt>samegame.js</tt> when we create and destroy the blocks, but instead we'll use <a href="qdeclarativestates.html">states</a>, since this is useful for the next animation we're going to add. Initially, we add these States to the root element of <tt>BoomBlock.qml</tt>:</p>
<pre class="cpp"> property <span class="type">bool</span> dying: <span class="keyword">false</span>
states: <span class="operator">[</span>
State{ name: <span class="string">"AliveState"</span>; when: spawned <span class="operator">=</span><span class="operator">=</span> <span class="keyword">true</span> <span class="operator">&</span><span class="operator">&</span> dying <span class="operator">=</span><span class="operator">=</span> <span class="keyword">false</span>
PropertyChanges { target: img; opacity: <span class="number">1</span> }
}<span class="operator">,</span>
State{ name: <span class="string">"DeathState"</span>; when: dying <span class="operator">=</span><span class="operator">=</span> <span class="keyword">true</span>
PropertyChanges { target: img; opacity: <span class="number">0</span> }
}
<span class="operator">]</span></pre>
<p>Now blocks will automatically fade in, as we already set <tt>spawned</tt> to true when we implemented the block animations. To fade out, we set <tt>dying</tt> to true instead of setting opacity to 0 when a block is destroyed (in the <tt>floodFill()</tt> function).</p>
<a name="adding-particle-effects"></a>
<h4>Adding particle effects</h4>
<p>Finally, we'll add a cool-looking particle effect to the blocks when they are destroyed. To do this, we first add a <a href="qml-particles.html">Particles</a> element in <tt>BoomBlock.qml</tt>, like so:</p>
<pre class="qml"> <span class="type"><a href="qml-particles.html">Particles</a></span> {
<span class="name">id</span>: <span class="name">particles</span>
<span class="name">width</span>: <span class="number">1</span>; <span class="name">height</span>: <span class="number">1</span>
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">emissionRate</span>: <span class="number">0</span>
<span class="name">lifeSpan</span>: <span class="number">700</span>; <span class="name">lifeSpanDeviation</span>: <span class="number">600</span>
<span class="name">angle</span>: <span class="number">0</span>; <span class="name">angleDeviation</span>: <span class="number">360</span>;
<span class="name">velocity</span>: <span class="number">100</span>; <span class="name">velocityDeviation</span>: <span class="number">30</span>
<span class="name">source</span>: {
<span class="keyword">if</span> (<span class="name">type</span> <span class="operator">==</span> <span class="number">0</span>)
<span class="keyword">return</span> <span class="string">"../../shared/pics/redStar.png"</span>;
else <span class="keyword">if</span> (<span class="name">type</span> <span class="operator">==</span> <span class="number">1</span>)
<span class="keyword">return</span> <span class="string">"../../shared/pics/blueStar.png"</span>;
else
<span class="keyword">return</span> <span class="string">"../../shared/pics/greenStar.png"</span>;
}
}</pre>
<p>To fully understand this you should read the <a href="qml-particles.html">Particles</a> documentation, but it's important to note that <tt>emissionRate</tt> is set to zero so that particles are not emitted normally. Also, we extend the <tt>dying</tt> State, which creates a burst of particles by calling the <tt>burst()</tt> method on the particles element. The code for the states now look like this:</p>
<pre class="qml"> <span class="name">states</span>: [
<span class="type"><a href="qml-state.html">State</a></span> {
<span class="name">name</span>: <span class="string">"AliveState"</span>
<span class="name">when</span>: <span class="name">spawned</span> <span class="operator">==</span> <span class="number">true</span> <span class="operator">&&</span> <span class="name">dying</span> <span class="operator">==</span> <span class="number">false</span>
<span class="type"><a href="qml-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">img</span>; <span class="name">opacity</span>: <span class="number">1</span> }
},
<span class="type"><a href="qml-state.html">State</a></span> {
<span class="name">name</span>: <span class="string">"DeathState"</span>
<span class="name">when</span>: <span class="name">dying</span> <span class="operator">==</span> <span class="number">true</span>
<span class="type"><a href="qml-statechangescript.html">StateChangeScript</a></span> { <span class="name">script</span>: <span class="name">particles</span>.<span class="name">burst</span>(<span class="number">50</span>); }
<span class="type"><a href="qml-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">img</span>; <span class="name">opacity</span>: <span class="number">0</span> }
<span class="type"><a href="qml-statechangescript.html">StateChangeScript</a></span> { <span class="name">script</span>: <span class="name">block</span>.<span class="name">destroy</span>(<span class="number">1000</span>); }
}
]</pre>
<p>Now the game is beautifully animated, with subtle (or not-so-subtle) animations added for all of the player's actions. The end result is shown below, with a different set of images to demonstrate basic theming:</p>
<p class="centerAlign"><img src="images/declarative-adv-tutorial4.gif" alt="" /></p><p>The theme change here is produced simply by replacing the block images. This can be done at runtime by changing the <a href="qml-image.html">Image</a> <tt>source</tt> property, so for a further challenge, you could add a button that toggles between themes with different images.</p>
<a name="keeping-a-high-scores-table"></a>
<h3>Keeping a High Scores table</h3>
<p>Another feature we might want to add to the game is a method of storing and retrieving high scores.</p>
<p>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 <tt>Dialog.qml</tt>. In addition to a <tt>Text</tt> element, it now has a <tt>TextInput</tt> child item for receiving keyboard text input:</p>
<pre class="qml"> <span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">container</span>
...
<span class="type"><a href="qml-textinput.html">TextInput</a></span> {
<span class="name">id</span>: <span class="name">textInput</span>
<span class="type">anchors</span> { <span class="name">verticalCenter</span>: <span class="name">parent</span>.<span class="name">verticalCenter</span>; <span class="name">left</span>: <span class="name">dialogText</span>.<span class="name">right</span> }
<span class="name">width</span>: <span class="number">80</span>
<span class="name">text</span>: <span class="string">""</span>
<span class="name">onAccepted</span>: <span class="name">container</span>.<span class="name">hide</span>() <span class="comment">// close dialog when Enter is pressed</span>
}
...
}</pre>
<p>We'll also add a <tt>showWithInput()</tt> function. The text input will only be visible if this function is called instead of <tt>show()</tt>. When the dialog is closed, it emits a <tt>closed()</tt> signal, and other elements can retrieve the text entered by the user through an <tt>inputText</tt> property:</p>
<pre class="qml"> <span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">container</span>
property <span class="type">string</span> <span class="name">inputText</span>: <span class="name">textInput</span>.<span class="name">text</span>
signal <span class="type">closed</span>
<span class="keyword">function</span> <span class="name">show</span>(<span class="name">text</span>) {
<span class="name">dialogText</span>.<span class="name">text</span> <span class="operator">=</span> <span class="name">text</span>;
<span class="name">container</span>.<span class="name">opacity</span> <span class="operator">=</span> <span class="number">1</span>;
<span class="name">textInput</span>.<span class="name">opacity</span> <span class="operator">=</span> <span class="number">0</span>;
}
<span class="keyword">function</span> <span class="name">showWithInput</span>(<span class="name">text</span>) {
<span class="name">show</span>(<span class="name">text</span>);
<span class="name">textInput</span>.<span class="name">opacity</span> <span class="operator">=</span> <span class="number">1</span>;
<span class="name">textInput</span>.<span class="name">focus</span> <span class="operator">=</span> <span class="number">true</span>;
<span class="name">textInput</span>.<span class="name">text</span> <span class="operator">=</span> <span class="string">""</span>
}
<span class="keyword">function</span> <span class="name">hide</span>() {
<span class="name">textInput</span>.<span class="name">focus</span> <span class="operator">=</span> <span class="number">false</span>;
<span class="name">container</span>.<span class="name">opacity</span> <span class="operator">=</span> <span class="number">0</span>;
<span class="name">container</span>.<span class="name">closed</span>();
}
...
}</pre>
<p>Now the dialog can be used in <tt>samegame.qml</tt>:</p>
<pre class="qml"> <span class="type">Dialog</span> {
<span class="name">id</span>: <span class="name">nameInputDialog</span>
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">z</span>: <span class="number">100</span>
<span class="name">onClosed</span>: {
<span class="keyword">if</span> (<span class="name">nameInputDialog</span>.<span class="name">inputText</span> <span class="operator">!=</span> <span class="string">""</span>)
<span class="name">SameGame</span>.<span class="name">saveHighScore</span>(<span class="name">nameInputDialog</span>.<span class="name">inputText</span>);
}
}</pre>
<p>When the dialog emits the <tt>closed</tt> signal, we call the new <tt>saveHighScore()</tt> function in <tt>samegame.js</tt>, which stores the high score locally in an SQL database and also send the score to an online database if possible.</p>
<p>The <tt>nameInputDialog</tt> is activated in the <tt>victoryCheck()</tt> function in <tt>samegame.js</tt>:</p>
<pre class="js"> <span class="keyword">function</span> <span class="name">victoryCheck</span>() {
...
<span class="comment">//Check whether game has finished</span>
<span class="keyword">if</span> (<span class="name">deservesBonus</span> <span class="operator">||</span> !(<span class="name">floodMoveCheck</span>(<span class="number">0</span>, <span class="name">maxRow</span> <span class="operator">-</span> <span class="number">1</span>, -<span class="number">1</span>))) {
<span class="name">gameDuration</span> <span class="operator">=</span> new <span class="name">Date</span>() <span class="operator">-</span> <span class="name">gameDuration</span>;
<span class="name">nameInputDialog</span>.<span class="name">showWithInput</span>(<span class="string">"You won! Please enter your name: "</span>);
}
}</pre>
<a name="storing-high-scores-offline"></a>
<h4>Storing high scores offline</h4>
<p>Now we need to implement the functionality to actually save the High Scores table.</p>
<p>Here is the <tt>saveHighScore()</tt> function in <tt>samegame.js</tt>:</p>
<pre class="js"> <span class="keyword">function</span> <span class="name">saveHighScore</span>(<span class="name">name</span>) {
<span class="keyword">if</span> (<span class="name">scoresURL</span> <span class="operator">!=</span> <span class="string">""</span>)
<span class="name">sendHighScore</span>(<span class="name">name</span>);
var <span class="name">db</span> = <span class="name">openDatabaseSync</span>(<span class="string">"SameGameScores"</span>, <span class="string">"1.0"</span>, <span class="string">"Local SameGame High Scores"</span>, <span class="number">100</span>);
var <span class="name">dataStr</span> = <span class="string">"INSERT INTO Scores VALUES(?, ?, ?, ?)"</span>;
var <span class="name">data</span> = [<span class="name">name</span>, <span class="name">gameCanvas</span>.<span class="name">score</span>, <span class="name">maxColumn</span> <span class="operator">+</span> <span class="string">"x"</span> <span class="operator">+</span> <span class="name">maxRow</span>, <span class="name">Math</span>.<span class="name">floor</span>(<span class="name">gameDuration</span> <span class="operator">/</span> <span class="number">1000</span>)];
<span class="name">db</span>.<span class="name">transaction</span>(<span class="keyword">function</span>(<span class="name">tx</span>) {
<span class="name">tx</span>.<span class="name">executeSql</span>(<span class="string">'CREATE TABLE IF NOT EXISTS Scores(name TEXT, score NUMBER, gridSize TEXT, time NUMBER)'</span>);
<span class="name">tx</span>.<span class="name">executeSql</span>(<span class="name">dataStr</span>, <span class="name">data</span>);
var <span class="name">rs</span> = <span class="name">tx</span>.<span class="name">executeSql</span>(<span class="string">'SELECT * FROM Scores WHERE gridSize = "12x17" ORDER BY score desc LIMIT 10'</span>);
var <span class="name">r</span> = <span class="string">"\nHIGH SCORES for a standard sized grid\n\n"</span>
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="name">i</span> = <span class="number">0</span>; <span class="name">i</span> <span class="operator"><</span> <span class="name">rs</span>.<span class="name">rows</span>.<span class="name">length</span>; i++) {
<span class="name">r</span> <span class="operator">+=</span> (<span class="name">i</span> <span class="operator">+</span> <span class="number">1</span>) <span class="operator">+</span> <span class="string">". "</span> <span class="operator">+</span> <span class="name">rs</span>.<span class="name">rows</span>.<span class="name">item</span>(<span class="name">i</span>).<span class="name">name</span> <span class="operator">+</span> <span class="string">' got '</span> <span class="operator">+</span> <span class="name">rs</span>.<span class="name">rows</span>.<span class="name">item</span>(<span class="name">i</span>).<span class="name">score</span> <span class="operator">+</span> <span class="string">' points in '</span> <span class="operator">+</span> <span class="name">rs</span>.<span class="name">rows</span>.<span class="name">item</span>(<span class="name">i</span>).<span class="name">time</span> <span class="operator">+</span> <span class="string">' seconds.\n'</span>;
}
<span class="name">dialog</span>.<span class="name">show</span>(<span class="name">r</span>);
});
}</pre>
<p>First we call <tt>sendHighScore()</tt> (explained in the section below) if it is possible to send the high scores to an online database.</p>
<p>Then, we use the <a href="qdeclarativeglobalobject.html#offline-storage-api">Offline Storage API</a> to maintain a persistent SQL database unique to this application. We create an offline storage database for the high scores using <tt>openDatabase()</tt> and prepare the data and SQL query that we want to use to save it. The offline storage API uses SQL queries for data manipulation and retrieval, and in the <tt>db.transaction()</tt> call we use three SQL queries to initialize the database (if necessary), and then add to and retrieve high scores. To use the returned data, we turn it into a string with one line per row returned, and show a dialog containing that string.</p>
<p>This is one way of storing and displaying high scores locally, but certainly not the only way. A more complex alternative would be to create a high score dialog component, and pass it the results for processing and display (instead of reusing the <tt>Dialog</tt>). This would allow a more themeable dialog that could better present the high scores. If your QML is the UI for a C++ application, you could also have passed the score to a C++ function to store it locally in a variety of ways, including a simple format without SQL or in another SQL database.</p>
<a name="storing-high-scores-online"></a>
<h4>Storing high scores online</h4>
<p>You've seen how you can store high scores locally, but it is also easy to integrate a web-enabled high score storage into your QML application. The implementation we've done her is very simple: the high score data is posted to a php script running on a server somewhere, and that server then stores it and displays it to visitors. You could also request an XML or QML file from that same server, which contains and displays the scores, but that's beyond the scope of this tutorial. The php script we use here is available in the <tt>examples</tt> directory.</p>
<p>If the player entered their name we can send the data to the web service us</p>
<p>If the player enters a name, we send the data to the service using this code in <tt>samegame.js</tt>:</p>
<pre class="js"> <span class="keyword">function</span> <span class="name">sendHighScore</span>(<span class="name">name</span>) {
var <span class="name">postman</span> = new <span class="name">XMLHttpRequest</span>()
var <span class="name">postData</span> = <span class="string">"name="</span> <span class="operator">+</span> <span class="name">name</span> <span class="operator">+</span> <span class="string">"&score="</span> <span class="operator">+</span> <span class="name">gameCanvas</span>.<span class="name">score</span> <span class="operator">+</span> <span class="string">"&gridSize="</span> <span class="operator">+</span> <span class="name">maxColumn</span> <span class="operator">+</span> <span class="string">"x"</span> <span class="operator">+</span> <span class="name">maxRow</span> <span class="operator">+</span> <span class="string">"&time="</span> <span class="operator">+</span> <span class="name">Math</span>.<span class="name">floor</span>(<span class="name">gameDuration</span> <span class="operator">/</span> <span class="number">1000</span>);
<span class="name">postman</span>.<span class="name">open</span>(<span class="string">"POST"</span>, <span class="name">scoresURL</span>, <span class="number">true</span>);
<span class="name">postman</span>.<span class="name">setRequestHeader</span>(<span class="string">"Content-Type"</span>, <span class="string">"application/x-www-form-urlencoded"</span>);
<span class="name">postman</span>.<span class="name">onreadystatechange</span> <span class="operator">=</span> <span class="keyword">function</span>() {
<span class="keyword">if</span> (<span class="name">postman</span>.<span class="name">readyState</span> <span class="operator">==</span> <span class="name">postman</span>.<span class="name">DONE</span>) {
<span class="name">dialog</span>.<span class="name">show</span>(<span class="string">"Your score has been uploaded."</span>);
}
}
<span class="name">postman</span>.<span class="name">send</span>(<span class="name">postData</span>);
}</pre>
<p>The <a href="qdeclarativeglobalobject.html#xmlhttprequest">XMLHttpRequest</a> in this code is the same as the <tt>XMLHttpRequest()</tt> as you'll find in standard browser JavaScript, and can be used in the same way to dynamically get XML or QML from the web service to display the high scores. We don't worry about the response in this case - we just post the high score data to the web server. If it had returned a QML file (or a URL to a QML file) you could instantiate it in much the same way as you did with the blocks.</p>
<p>An alternate way to access and submit web-based data would be to use QML elements designed for this purpose. <a href="qml-xmllistmodel.html">XmlListModel</a> makes it very easy to fetch and display XML based data such as RSS in a QML application (see the Flickr demo for an example).</p>
<a name="that-s-it"></a>
<h3>That's it!</h3>
<p>By following this tutorial you've seen how you can write a fully functional application in QML:</p>
<ul>
<li>Build your application with <a href="qdeclarativeelements.html">QML elements</a></li>
<li>Add application logic <a href="qdeclarativejavascript.html">with JavaScript code</a></li>
<li>Add animations with <a href="qml-behavior.html">Behaviors</a> and <a href="qdeclarativestates.html">states</a></li>
<li>Store persistent application data using, for example, the <a href="qdeclarativeglobalobject.html#offline-storage-api">Offline Storage API</a> or <a href="qdeclarativeglobalobject.html#xmlhttprequest">XMLHttpRequest</a></li>
</ul>
<p>There is so much more to learn about QML that we haven't been able to cover in this tutorial. Check out all the demos and examples and the <a href="qtquick.html">documentation</a> to see all the things you can do with QML!</p>
</div>
<!-- @@@declarative/tutorials/samegame/samegame4 -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="declarative-tutorials-samegame-samegame3.html">QML Advanced Tutorial 3 - Implementing the Game Logic</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
