1 /****************************************************************************
3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
4 ** Contact: http://www.qt-project.org/
6 ** This file is part of the documentation of the Qt Toolkit.
8 ** $QT_BEGIN_LICENSE:FDL$
9 ** GNU Free Documentation License
10 ** Alternatively, this file may be used under the terms of the GNU Free
11 ** Documentation License version 1.3 as published by the Free Software
12 ** Foundation and appearing in the file included in the packaging of
16 ** Alternatively, this file may be used in accordance with the terms
17 ** and conditions contained in a signed written agreement between you
26 ****************************************************************************/
29 \page qdeclarativeexamples.html
30 \inqmlmodule QtQuick 2
32 \brief Building UIs with QML
36 Qt includes a set of examples that show how to use various aspects
37 of QML. The examples are demonstrations of particular QML components,
38 some are small code snippets, while others contain more complete and
39 functional applications.
41 To run the examples, open them in Qt Creator or use the included
42 \l {QML Viewer} tool. The \l {QML Viewer} can be run from the command line:
45 qmlviewer $QTDIR/examples/declarative/samegame/samegame.qml
48 On Mac OS X, you can run the included "QMLViewer" application from the
49 Finder, or use the command line:
52 QMLViewer.app/Contents/MacOS/QMLViewer $QTDIR/examples/declarative/samegame/samegame.qml
56 The examples can be found in Qt's \c examples/declarative directory.
59 \section1 Functional Applications
61 These QML examples integrate a variety of features to demonstrate how QML
62 can be used to produce sophisticated interfaces and applications:
69 \l{declarative/calculator}{Calculator}
70 \image qml-calculator-example-small.png
73 \l{declarative/flickr}{Flickr Mobile}
74 \image qml-flickr-demo-small.png
77 \l{declarative/minehunt}{Minehunt}
78 \image qml-minehunt-demo-small.png
83 \l{declarative/photoviewer}{Photo Viewer}
84 \image qml-photoviewer-demo-small.png
87 \l{declarative/rssnews}{RSS News Reader}
88 \image qml-rssnews-demo-small.png
91 \l{declarative/samegame}{Same Game}
92 \image qml-samegame-demo-small.png
97 \l{declarative/snake}{Snake}
98 \image qml-snake-demo-small.png
101 \l{declarative/twitter}{Twitter}
102 \image qml-twitter-demo-small.png
105 \l{declarative/webbrowser}{Web Browser}
106 \image qml-webbrowser-demo-small.png
110 \section1 Code Snippets
112 These QML examples are small, simple applications that show how to use a particular
113 QML component or feature. If you are new
114 to QML, you may also find the \l{QML Tutorial}{Hello World} and
115 \l {QML Advanced Tutorial}{Same Game} tutorials useful.
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
246 \o \l {QML Tutorial}{Hello World}
247 \o \l {QML Advanced Tutorial}{Same Game}
248 \o \l {Tutorial: Writing QML Extensions with C++}{Writing QML Extensions with C++}
249 \o \l {QML Dynamic View Ordering Tutorial}{Dynamic View Ordering}