<?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" />
<!-- examples.qdoc -->
<title>Qt 4.8: QML Examples and Demos</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>
</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">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#demos">Demos</a></li>
<li class="level1"><a href="#examples">Examples</a></li>
<li class="level2"><a href="#animation">Animation</a></li>
<li class="level2"><a href="#image-elements">Image Elements</a></li>
<li class="level2"><a href="#text">Text</a></li>
<li class="level2"><a href="#positioners">Positioners</a></li>
<li class="level2"><a href="#key-interaction">Key Interaction</a></li>
<li class="level2"><a href="#touch-interaction">Touch Interaction</a></li>
<li class="level2"><a href="#ui-components">UI Components</a></li>
<li class="level2"><a href="#toys">Toys</a></li>
<li class="level2"><a href="#models-and-views">Models and Views</a></li>
<li class="level2"><a href="#xml">XML</a></li>
<li class="level2"><a href="#internationalization-i18n">Internationalization (i18n)</a></li>
<li class="level2"><a href="#right-to-left-user-interfaces">Right-to-left User Interfaces</a></li>
<li class="level2"><a href="#threading">Threading</a></li>
<li class="level2"><a href="#screen-orientation">Screen Orientation</a></li>
<li class="level2"><a href="#sql-local-storage">SQL Local Storage</a></li>
<li class="level2"><a href="#c-extensions">C++ Extensions</a></li>
<li class="level1"><a href="#labs">Labs</a></li>
</ul>
</div>
<h1 class="title">QML Examples and Demos</h1>
<span class="subtitle"></span>
<!-- $$$qdeclarativeexamples.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt includes a set of examples and demos that show how to use various aspects of QML. The examples are small demonstrations of particular QML components, while the demos contain more complete and functional applications.</p>
<p>To run the examples and demos, open them in Qt Creator or use the included <a href="qmlviewer.html">QML Viewer</a> tool. The <a href="qmlviewer.html">QML Viewer</a> can be run from the command line:</p>
<pre class="cpp"> qmlviewer $QTDIR<span class="operator">/</span>demos<span class="operator">/</span>declarative<span class="operator">/</span>samegame<span class="operator">/</span>samegame<span class="operator">.</span>qml</pre>
<p>On Mac OS X, you can run the included "QMLViewer" application from the Finder, or use the command line:</p>
<pre class="cpp"> <span class="type">QMLViewer</span><span class="operator">.</span>app<span class="operator">/</span>Contents<span class="operator">/</span>MacOS<span class="operator">/</span><span class="type">QMLViewer</span> $QTDIR<span class="operator">/</span>demos<span class="operator">/</span>declarative<span class="operator">/</span>samegame<span class="operator">/</span>samegame<span class="operator">.</span>qml</pre>
<a name="demos"></a>
<h2>Demos</h2>
<p>The QML demos integrate a variety of features to demonstrate how QML can be used to produce sophisticated interfaces and applications:</p>
<table class="generic">
<tr valign="top" class="odd"><td ><a href="demos-declarative-calculator.html">Calculator</a><p class="centerAlign"><img src="images/qml-calculator-example-small.png" alt="" /></p></td><td ><a href="demos-declarative-flickr.html">Flickr Mobile</a><p class="centerAlign"><img src="images/qml-flickr-demo-small.png" alt="" /></p></td><td ><a href="demos-declarative-minehunt.html">Minehunt</a><p class="centerAlign"><img src="images/qml-minehunt-demo-small.png" alt="" /></p></td></tr>
<tr valign="top" class="even"><td ><a href="demos-declarative-photoviewer.html">Photo Viewer</a><p class="centerAlign"><img src="images/qml-photoviewer-demo-small.png" alt="" /></p></td><td ><a href="demos-declarative-rssnews.html">RSS News Reader</a><p class="centerAlign"><img src="images/qml-rssnews-demo-small.png" alt="" /></p></td><td ><a href="demos-declarative-samegame.html">Same Game</a><p class="centerAlign"><img src="images/qml-samegame-demo-small.png" alt="" /></p></td></tr>
<tr valign="top" class="odd"><td ><a href="demos-declarative-snake.html">Snake</a><p class="centerAlign"><img src="images/qml-snake-demo-small.png" alt="" /></p></td><td ><a href="demos-declarative-twitter.html">Twitter</a><p class="centerAlign"><img src="images/qml-twitter-demo-small.png" alt="" /></p></td><td ><a href="demos-declarative-webbrowser.html">Web Browser</a><p class="centerAlign"><img src="images/qml-webbrowser-demo-small.png" alt="" /></p></td></tr>
</table>
<p>The demos can be found in Qt's <tt>demos/declarative</tt> directory.</p>
<a name="examples"></a>
<h2>Examples</h2>
<p>The QML examples are small, simple applications that show how to use a particular QML component or feature. If you are new to QML, you may also find the <a href="qml-tutorial.html">Hello World</a> and <a href="qml-advtutorial.html">Same Game</a> tutorials useful.</p>
<p>The examples can be found in Qt's <tt>examples/declarative</tt> directory.</p>
<a name="animation"></a>
<h3>Animation</h3>
<ul>
<li><a href="declarative-animation-basics-color-animation.html">Color Animation</a></li>
<li><a href="declarative-animation-behaviors-behavior-example.html">Behaviors</a></li>
<li><a href="declarative-animation-easing.html">Easing</a></li>
<li><a href="declarative-animation-basics-property-animation.html">Property Animation</a></li>
<li><a href="declarative-animation-states.html">States</a></li>
<li><a href="declarative-animation-behaviors-wigglytext.html">Wiggly Text</a></li>
</ul>
<a name="image-elements"></a>
<h3>Image Elements</h3>
<ul>
<li><a href="declarative-imageelements-borderimage.html">BorderImage</a></li>
<li><a href="declarative-imageelements-image.html">Image</a></li>
</ul>
<a name="text"></a>
<h3>Text</h3>
<ul>
<li><a href="declarative-text-fonts.html">Fonts</a></li>
<li><a href="declarative-text-textselection.html">Text Selection</a></li>
</ul>
<a name="positioners"></a>
<h3>Positioners</h3>
<ul>
<li><a href="declarative-positioners.html">Example</a></li>
</ul>
<a name="key-interaction"></a>
<h3>Key Interaction</h3>
<ul>
<li><a href="declarative-keyinteraction-focus.html">Focus</a></li>
</ul>
<a name="touch-interaction"></a>
<h3>Touch Interaction</h3>
<ul>
<li><a href="declarative-touchinteraction-mousearea.html">MouseArea</a></li>
</ul>
<a name="ui-components"></a>
<h3>UI Components</h3>
<ul>
<li><a href="declarative-ui-components-dialcontrol.html">Dial control</a></li>
<li><a href="declarative-ui-components-flipable.html">Flipable</a></li>
<li><a href="declarative-ui-components-progressbar.html">Progress bar</a></li>
<li><a href="declarative-ui-components-scrollbar.html">Scroll bar</a></li>
<li><a href="declarative-ui-components-searchbox.html">Search box</a></li>
<li><a href="declarative-ui-components-slideswitch.html">Slide switch</a></li>
<li><a href="declarative-ui-components-spinner.html">Spinner</a></li>
<li><a href="declarative-ui-components-tabwidget.html">Tab widget</a></li>
</ul>
<a name="toys"></a>
<h3>Toys</h3>
<ul>
<li><a href="declarative-toys-clocks.html">Clocks</a></li>
<li><a href="declarative-toys-corkboards.html">Corkboards</a></li>
<li><a href="declarative-toys-dynamicscene.html">Dynamic Scene</a></li>
<li><a href="declarative-toys-tic-tac-toe.html">Tic Tac Toe</a></li>
<li><a href="declarative-toys-tvtennis.html">TV Tennis</a></li>
</ul>
<a name="models-and-views"></a>
<h3>Models and Views</h3>
<ul>
<li><a href="declarative-modelviews-gridview.html">GridView</a></li>
<li><a href="qml-listview-examples.html">ListView</a></li>
<li><a href="declarative-modelviews-pathview.html">PathView</a></li>
<li><a href="declarative-modelviews-package.html">Package</a></li>
<li><a href="declarative-modelviews-parallax.html">Parallax</a></li>
<li><a href="declarative-modelviews-visualitemmodel.html">VisualItemModel</a></li>
<li><a href="declarative-modelviews-stringlistmodel.html">String ListModel</a></li>
<li><a href="declarative-modelviews-objectlistmodel.html">Object ListModel</a></li>
<li><a href="declarative-modelviews-abstractitemmodel.html">AbstractItemModel</a></li>
<li><a href="qml-webview-examples.html">WebView</a></li>
</ul>
<a name="xml"></a>
<h3>XML</h3>
<ul>
<li><a href="declarative-xml-xmlhttprequest.html">XmlHttpRequest</a></li>
</ul>
<a name="internationalization-i18n"></a>
<h3>Internationalization (i18n)</h3>
<ul>
<li><a href="declarative-i18n.html">Example</a></li>
</ul>
<a name="right-to-left-user-interfaces"></a>
<h3>Right-to-left User Interfaces</h3>
<ul>
<li><a href="declarative-righttoleft-layoutmirroring.html">Layout mirroring</a></li>
<li><a href="declarative-righttoleft-layoutdirection.html">Layout direction</a></li>
<li><a href="declarative-righttoleft-textalignment.html">Text alignment</a></li>
</ul>
<a name="threading"></a>
<h3>Threading</h3>
<ul>
<li><a href="declarative-threading-threadedlistmodel.html">Threaded ListModel</a></li>
<li><a href="declarative-threading-workerscript.html">WorkerScript</a></li>
</ul>
<a name="screen-orientation"></a>
<h3>Screen Orientation</h3>
<ul>
<li><a href="declarative-screenorientation.html">Example</a></li>
</ul>
<a name="sql-local-storage"></a>
<h3>SQL Local Storage</h3>
<ul>
<li><a href="declarative-sqllocalstorage.html">Example</a></li>
</ul>
<a name="c-extensions"></a>
<h3>C++ Extensions</h3>
<ul>
<li><a href="declarative-cppextensions-reference.html">Reference examples</a></li>
<li><a href="declarative-cppextensions-plugins.html">Plugins</a></li>
<li><a href="declarative-cppextensions-qgraphicslayouts.html">QGraphicsLayouts</a></li>
<li><a href="declarative-cppextensions-qwidgets.html">QWidgets</a></li>
<li><a href="declarative-cppextensions-imageprovider.html">Image provider</a></li>
<li><a href="declarative-cppextensions-networkaccessmanagerfactory.html">Network access manager factory</a></li>
</ul>
<a name="labs"></a>
<h2>Labs</h2>
<ul>
<li><a href="src-imports-folderlistmodel.html">Folder List Model</a> - a C++ model plugin</li>
<li><a href="declarative-shadereffects.html">Shader Effects</a></li>
</ul>
</div>
<!-- @@@qdeclarativeexamples.html -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
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>
Qt and respective logos are trademarks of The Qt Company Ltd
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>
