1 /****************************************************************************
3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
4 ** All rights reserved.
5 ** Contact: Nokia Corporation (qt-info@nokia.com)
7 ** This file is part of the documentation of the Qt Toolkit.
9 ** $QT_BEGIN_LICENSE:FDL$
10 ** GNU Free Documentation License
11 ** Alternatively, this file may be used under the terms of the GNU Free
12 ** Documentation License version 1.3 as published by the Free Software
13 ** Foundation and appearing in the file included in the packaging of
17 ** Alternatively, this file may be used in accordance with the terms
18 ** and conditions contained in a signed written agreement between you
26 ****************************************************************************/
29 \page qdeclarativeexamples.html
30 \title QML Examples and Demos
31 \brief Building UIs with QML
35 Qt includes a set of examples and demos that show how to use various aspects
36 of QML. The examples are small demonstrations of particular QML components,
37 while the demos contain more complete and functional applications.
39 To run the examples and demos, open them in Qt Creator or use the included
40 \l {QML Viewer} tool. The \l {QML Viewer} can be run from the command line:
43 qmlviewer $QTDIR/demos/declarative/samegame/samegame.qml
46 On Mac OS X, you can run the included "QMLViewer" application from the
47 Finder, or use the command line:
50 QMLViewer.app/Contents/MacOS/QMLViewer $QTDIR/demos/declarative/samegame/samegame.qml
56 The QML demos integrate a variety of features to demonstrate how QML
57 can be used to produce sophisticated interfaces and applications:
64 \l{demos/declarative/calculator}{Calculator}
65 \image qml-calculator-example-small.png
68 \l{demos/declarative/flickr}{Flickr Mobile}
69 \image qml-flickr-demo-small.png
72 \l{demos/declarative/minehunt}{Minehunt}
73 \image qml-minehunt-demo-small.png
78 \l{demos/declarative/photoviewer}{Photo Viewer}
79 \image qml-photoviewer-demo-small.png
82 \l{demos/declarative/rssnews}{RSS News Reader}
83 \image qml-rssnews-demo-small.png
86 \l{demos/declarative/samegame}{Same Game}
87 \image qml-samegame-demo-small.png
92 \l{demos/declarative/snake}{Snake}
93 \image qml-snake-demo-small.png
96 \l{demos/declarative/twitter}{Twitter}
97 \image qml-twitter-demo-small.png
100 \l{demos/declarative/webbrowser}{Web Browser}
101 \image qml-webbrowser-demo-small.png
105 The demos can be found in Qt's \c demos/declarative directory.
110 The QML examples are small, simple applications that show how to use a particular
111 QML component or feature. If you are new
112 to QML, you may also find the \l{QML Tutorial}{Hello World} and
113 \l {QML Advanced Tutorial}{Same Game} tutorials useful.
115 The examples can be found in Qt's \c examples/declarative directory.
119 \o \l{declarative/animation/basics}{Basics}
120 \o \l{declarative/animation/behaviors}{Behaviors}
121 \o \l{declarative/animation/easing}{Easing}
122 \o \l{declarative/animation/states}{States}
125 \section2 Image Elements
127 \o \l{declarative/imageelements/borderimage}{BorderImage}
128 \o \l{declarative/imageelements/image}{Image}
133 \o \l{declarative/text/fonts}{Fonts}
134 \o \l{declarative/text/textselection}{Text Selection}
137 \section2 Positioners
139 \o \l{declarative/positioners}{Example}
142 \section2 Key Interaction
144 \o \l{declarative/keyinteraction/focus}{Focus}
147 \section2 Touch Interaction
149 \o \l{declarative/touchinteraction/mousearea}{MouseArea}
152 \section2 UI Components
154 \o \l{declarative/ui-components/dialcontrol}{Dial control}
155 \o \l{declarative/ui-components/flipable}{Flipable}
156 \o \l{declarative/ui-components/progressbar}{Progress bar}
157 \o \l{declarative/ui-components/scrollbar}{Scroll bar}
158 \o \l{declarative/ui-components/searchbox}{Search box}
159 \o \l{declarative/ui-components/slideswitch}{Slide switch}
160 \o \l{declarative/ui-components/spinner}{Spinner}
161 \o \l{declarative/ui-components/tabwidget}{Tab widget}
166 \o \l{declarative/toys/clocks}{Clocks}
167 \o \l{declarative/toys/corkboards}{Corkboards}
168 \o \l{declarative/toys/dynamicscene}{Dynamic Scene}
169 \o \l{declarative/toys/tic-tac-toe}{Tic Tac Toe}
170 \o \l{declarative/toys/tvtennis}{TV Tennis}
173 \section2 Models and Views
175 \o \l{declarative/modelviews/gridview}{GridView}
176 \o \l{declarative/modelviews/listview}{ListView}
177 \o \l{declarative/modelviews/pathview}{PathView}
178 \o \l{declarative/modelviews/package}{Package}
179 \o \l{declarative/modelviews/parallax}{Parallax}
180 \o \l{declarative/modelviews/visualitemmodel}{VisualItemModel}
182 \o \l{declarative/modelviews/stringlistmodel}{String ListModel}
183 \o \l{declarative/modelviews/objectlistmodel}{Object ListModel}
184 \o \l{declarative/modelviews/abstractitemmodel}{AbstractItemModel}
186 \o \l{declarative/modelviews/webview}{WebView}
191 \o \l{declarative/xml/xmlhttprequest}{XmlHttpRequest}
194 \section2 Internationalization (i18n)
196 \o \l{declarative/i18n}{Example}
199 \section2 Right-to-left User Interfaces
201 \o \l{declarative/righttoleft/layoutmirroring}{Layout mirroring}
202 \o \l{declarative/righttoleft/layoutdirection}{Layout direction}
203 \o \l{declarative/righttoleft/textalignment}{Text alignment}
208 \o \l{declarative/threading/threadedlistmodel}{Threaded ListModel}
209 \o \l{declarative/threading/workerscript}{WorkerScript}
212 \section2 Screen Orientation
214 \o \l{declarative/screenorientation}{Example}
217 \section2 SQL Local Storage
219 \o \l{declarative/sqllocalstorage}{Example}
222 \section2 C++ Extensions
224 \o \l{declarative-cppextensions-reference.html}{Reference examples}
225 \o \l{declarative/cppextensions/plugins}{Plugins}
226 \o \l{declarative-cppextensions-qgraphicslayouts.html}{QGraphicsLayouts}
227 \o \l{declarative/cppextensions/qwidgets}{QWidgets}
228 \o \l{declarative/cppextensions/imageprovider}{Image provider}
229 \o \l{declarative/cppextensions/networkaccessmanagerfactory}{Network access manager factory}
234 \o \l{declarative/painteditem/textballoons}{Painted Item}
240 \o \l{src/imports/folderlistmodel}{Folder List Model} - a C++ model plugin