diff options
Diffstat (limited to 'doc/src/examples/qml-examples.qdoc')
| -rw-r--r-- | doc/src/examples/qml-examples.qdoc | 939 |
1 files changed, 939 insertions, 0 deletions
diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc new file mode 100644 index 00000000..4edfc286 --- /dev/null +++ b/doc/src/examples/qml-examples.qdoc @@ -0,0 +1,939 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title Animation: Basics Example + \example declarative/animation/basics/color-animation + \depends helper/qmlapplicationviewer + + \brief This example shows how to create and combine \l{QML Animation}{animations} in QML. + + \table + \row + \o \image qml-coloranim-example.png + \row + \o color-animation.qml + \endtable +*/ + +/*! + \title Animation: Basics Property Animation Example + \example declarative/animation/basics/property-animation + \depends helper/qmlapplicationviewer + + \brief This example shows how to create and combine \l{QML Animation}{animations} in QML. + + \table + \row + \o \image qml-propertyanim-example.png + \row + \o property-animation.qml + \endtable +*/ + +/*! + \title Animation: Behavior Example + \example declarative/animation/behaviors/behavior-example + \depends helper/qmlapplicationviewer + + \brief This example shows how to use QML behaviors. + + \image qml-behaviors-example.png +*/ + +/*! + \title Animation: Wiggly Text Example + \example declarative/animation/behaviors/wigglytext + \depends helper/qmlapplicationviewer + + \brief This example shows how to animate text. + +*/ + +/*! + \title Animation: Easing Example + \example declarative/animation/easing + \depends helper/qmlapplicationviewer + + \brief This example shows the different easing modes available for \l{QML Animation}{animations}. + + \image qml-easing-example.png +*/ + +/*! + \title Animation: States Example + \example declarative/animation/states + + \brief These examples show how to use states and transitions. + + \depends helper/qmlapplicationviewer + + The \c states.qml example shows how an item can change between states, and \c transitions.qml + shows how these state changes can be animated. + + \note Due to deployment configurations transitions.qml is opened by default when running this example. + states.qml can be opened by editing the main.cpp file. + + \table + \row + \o \image qml-states-example.png + \row + \o states.qml + \endtable + + \table + \row + \o \image qml-transitions-example.png + \row + \o transitions.qml + \endtable +*/ + +/*! + \title Image Elements: Border Image Example + \example declarative/imageelements/borderimage + + \brief These examples show how to use the BorderImage element. + + \depends helper/qmlapplicationviewer + + \table + \row + \o \image qml-borderimage-example.png + \row + \o borderimage.qml + \endtable +*/ + +/*! + \title Image Elements: Shadows Image Example + \example declarative/imageelements/shadows + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the BorderImage element. + + \table + \row + \o \image qml-borderimage-shadows-example.png + \row + \o shadows.qml + \endtable +*/ + +/*! + \title Image Elements: Image Example + \example declarative/imageelements/image + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the \l Image element and its \l{Image::fillMode}{fillModes}. + + + \image qml-image-example.png +*/ + +/*! + \page declarative-cppextensions-reference.html + \title C++ Extensions: Reference examples + + \brief These examples show how QML can be extended from C++ in various ways. + + The code for these examples is used throughout the \l {Extending QML Functionalities using C++} reference + documentation, which highlights the main principles demonstrated in each example. + + Furthermore, here are additional pages that discuss each example in detail: + + \list + \o \l {declarative/cppextensions/referenceexamples/adding}{Adding Types} + \o \l {declarative/cppextensions/referenceexamples/properties}{Object and List Property Types} + \o \l {declarative/cppextensions/referenceexamples/coercion}{Inheritance and Coercion} + \o \l {declarative/cppextensions/referenceexamples/default}{Default Property} + \o \l {declarative/cppextensions/referenceexamples/grouped}{Grouped Properties} + \o \l {declarative/cppextensions/referenceexamples/attached}{Attached Properties} + \o \l {declarative/cppextensions/referenceexamples/signal}{Signal Support} + \o \l {declarative/cppextensions/referenceexamples/methods}{Methods Support} + \o \l {declarative/cppextensions/referenceexamples/valuesource}{Property Value Source} + \o \l {declarative/cppextensions/referenceexamples/binding}{Binding} + \endlist + + \note These examples all print information to the console to demonstrate the concepts presented. + Ensure that you are able to view the application output when running these examples. + For example, the dbgView tool on Windows can be used to display application output. +*/ + +/*! + \title C++ Extensions: Plugins Example + \example declarative/cppextensions/plugins + + \brief This example shows how to create a C++ plugin extension by subclassing QDeclarativeExtensionPlugin. + + \image qml-plugins-example.png +*/ + +/*! + \title LayoutItem Example + \example declarative/cppextensions/qgraphicslayouts/layoutitem + + \brief This example show how to use the LayoutItem element to integrate QML items into an existing + \l{Graphics View Framework}{Graphics View}-based application. + + \image qml-layoutitem-example.png +*/ +/*! + \title QGraphicsGridLayout Example + \example declarative/cppextensions/qgraphicslayouts/qgraphicsgridlayout + + \brief This example shows how to use QGraphicsGridLayout to lay out QML items. This is + useful if you need to integrate Qt \l{Graphics View Framework}{Graphics View} layouts with + QML. + + \image qml-qgraphicsgridlayout-example.png +*/ +/*! + \title QGraphicsLinearLayout Example + \example declarative/cppextensions/qgraphicslayouts/qgraphicslinearlayout + + \brief This example shows how to use QGraphicsLinearLayout to lay out QML items. This is + useful if you need to integrate Qt \l{Graphics View Framework}{Graphics View} layouts with + QML. + + \image qml-qgraphicslinearlayout-example.png +*/ +/*! + \title C++ Extensions: QGraphicsLayouts examples + \page declarative-cppextensions-qgraphicslayouts.html + + \brief These examples show how to integrate \l{Graphics View Framework}{Graphics View} + layout components with QML: + + \list + \o \l{declarative/cppextensions/qgraphicslayouts/layoutitem}{LayoutItem} + \o \l{declarative/cppextensions/qgraphicslayouts/qgraphicsgridlayout}{QGraphicsGridLayout} + \o \l{declarative/cppextensions/qgraphicslayouts/qgraphicslinearlayout}{QGraphicsLinearLayout} + \endlist + + Also see \l {Integrating QML Code with Existing Qt UI Code} for information on using QML + in Qt applications that use the Graphics View framework or ordinary QWidget-based views. +*/ + +/*! + \title C++ Extensions: QWidgets Example + \example declarative/cppextensions/qwidgets + + \brief This example shows how to embed QWidget-based objects into QML using QGraphicsProxyWidget. + + \image qml-qwidgets-example.png +*/ + +/*! + \title C++ Extensions: Image Provider Example + \example declarative/cppextensions/imageprovider + + \brief This examples shows how to use QDeclarativeImageProvider to serve images + to QML image elements. + + \image qml-imageprovider-example.png +*/ + +/*! + \title C++ Extensions: Network Access Manager Factory Example + \example declarative/cppextensions/networkaccessmanagerfactory + + \brief This example shows how to use QDeclarativeNetworkAccessManagerFactory to create a QNetworkAccessManager + with a proxy. +*/ + +/*! + \title Internationalization Example + \example declarative/i18n + \ingroup internationalization + \depends helper/qmlapplicationviewer + + \brief This example shows how to enable text translation in QML. + + \image qml-i18n-example.png + + \section1 Introduction + + The QML runtime automatically loads a translation from the i18n subdirectory + of the root QML file, based on the system language. The translations are + held in QM files that must be generated from TS files. + + \section1 Updating Translations + + The \c{.ts} files are created and updated by running: + + \code + lupdate i18n.qml -ts i18n/base.ts + \endcode + + If no translation file exists, one will be created. If a file already exists, + it will be updated to contain the latest strings from the QML file. + + Translations for new languages are created by copying \c{i18n/base.ts} to + \c{i18n/qml_<lang>.ts} The TS files can then be edited with + \l{Qt Linguist Manual}{Qt Linguist}: + + \code + linguist i18n/qml_fr.ts + \endcode + + The run-time translation files are then generated by running: + + \code + lrelease i18n/*.ts + \endcode +*/ + +/*! + \title Right-to-left User Interfaces: Text Alignment Example + \example declarative/righttoleft/textalignment + \depends helper/qmlapplicationviewer + + \brief This example shows how the horizontal alignment of \l Text, + \l TextInput and \l TextEdit is affected by the reading direction + of the text and by the layout mirrroring. + + Click on the gray buttons + shown at the bottom of the example to toggle between different + horizontal alignment options. + + \sa {QML Right-to-left User Interfaces} +*/ + +/*! + \title Right-to-left User Interfaces: Layout Direction Example + \example declarative/righttoleft/layoutdirection + \depends helper/qmlapplicationviewer + + \ brief This example shows how to control the horizontal layout direction of + \l Row, \l Grid and \l Flow positioners, and \l ListView and \l GridView + model views. + + Click on the gray buttons shown at the bottom of the example + to toggle the layout direction of the shown elements. + + \image qml-righttoleft-layoutdirection-example.png + + \sa {QML Right-to-left User Interfaces} +*/ + + +/*! + \title Right-to-left User Interfaces: Layout Mirroring Example + \example declarative/righttoleft/layoutmirroring + \depends helper/qmlapplicationviewer + + \brief This example shows how to mirror the application layouts + using \l LayoutMirroring attached property. + + Click on the grey button shown at the bottom of the example to + enable or disable the layout mirroring. + + \image qml-righttoleft-layoutmirroring-example.png + + \sa {QML Right-to-left User Interfaces} +*/ + +/*! + \title Positioners Example + \example declarative/positioners + \depends helper/qmlapplicationviewer + + \brief This example shows how to use positioner elements such as \l Row, \l Column, + \l Grid and \l Flow. + + \image qml-positioners-example.png +*/ + +/*! + \title Key Interaction: Focus Example + \example declarative/keyinteraction/focus + \depends helper/qmlapplicationviewer + + \brief This example shows how to handle keyboard input and focus in QML. + + \image qml-focus-example.png +*/ + +/*! + \title Models and Views: AbstractItemModel Example + \example declarative/modelviews/abstractitemmodel + \depends helper/qmlapplicationviewer + + \brief This example shows how to use a QAbstractItemModel subclass as a model in QML. + + \image qml-abstractitemmodel-example.png +*/ + +/*! + \title Models and Views: GridView Example + \example declarative/modelviews/gridview + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the GridView element. + + \image qml-gridview-example.png +*/ + +/*! + \title Models and Views: ListView Examples + \page qml-listview-examples.html + + \list + \o \l {Models and Views: Dynamic List ListView Example} + \o \l {Models and Views: Expanding Delegate ListView Example} + \o \l {Models and Views: Highlight ListView Example} + \o \l {Models and Views: Highlight Ranges ListView Example} + \o \l {Models and Views: Sections ListView Example} + \endlist + +*/ + +/*! + \title Models and Views: Dynamic List ListView Example + \example declarative/modelviews/listview/dynamiclist + \depends helper/qmlapplicationviewer + + \brief This example shows how items can be dynamically added to + and removed from a ListModel, and how these list + modifications can be animated. + + \table + \row + \o \image qml-listview-dynamiclist-example.png + \row + \o dynamiclist.qml + \endtable +*/ + +/*! + \title Models and Views: Expanding Delegate ListView Example + \example declarative/modelviews/listview/expandingdelegates + \depends helper/qmlapplicationviewer + + \brief This example shows how to create a dynamic delegate, which + expands when selected. + + \table + \row + \o \image qml-listview-expandingdelegates-example.png + \row + \o expandingdelegates.qml + \endtable +*/ + +/*! + \title Models and Views: Highlight ListView Example + \example declarative/modelviews/listview/highlight + \depends helper/qmlapplicationviewer + + + \brief This example shows how to highlight one item + inside a ListView element. + + \table + \row + \o \image qml-listview-highlight-example.png + \row + \o highlight.qml + \endtable +*/ + +/*! + \title Models and Views: Highlight Ranges ListView Example + \example declarative/modelviews/listview/highlightranges + \depends helper/qmlapplicationviewer + + + \brief This example shows how to highlight ranges within a + ListView element. + + \table + \row + \o \image qml-listview-highlightranges-example.png + \row + \o highlightranges.qml + \endtable +*/ + +/*! + \title Models and Views: Sections ListView Example + \example declarative/modelviews/listview/sections + \depends helper/qmlapplicationviewer + + + \brief This example shows how to use the ListView element. + + \table + \row + \o \image qml-listview-sections-example.png + \row + \o sections.qml + \endtable +*/ + +/*! + \title Models and Views: PathView Example + \example declarative/modelviews/pathview + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the PathView element. + + \image qml-pathview-example.png +*/ + +/*! + \title Models and Views: Object ListModel Example + \example declarative/modelviews/objectlistmodel + \depends helper/qmlapplicationviewer + + \brief This example shows how to use a QList<QObject*> as a model in QML. + + \image qml-objectlistmodel-example.png +*/ + +/*! + \title Models and Views: Package Example + \example declarative/modelviews/package + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the \l Package element. + + \image qml-package-example.png +*/ + +/*! + \title Models and Views: Parallax Example + \example declarative/modelviews/parallax + \depends helper/qmlapplicationviewer + + \brief This example shows how to combine and switch between views. + + \image qml-parallax-example.png +*/ + +/*! + \title Models and Views: String ListModel Example + \example declarative/modelviews/stringlistmodel + \depends helper/qmlapplicationviewer + + \brief This example shows how to use a QStringList as a model in QML. + + \image qml-stringlistmodel-example.png +*/ + +/*! + \title Models and Views: VisualItemModel Example + \example declarative/modelviews/visualitemmodel + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the VisualItemModel element. + + \image qml-visualitemmodel-example.png +*/ + +/*! + \title Models and Views: WebView Examples + \page qml-webview-examples.html + + \brief These examples show how to use the WebView element. + + \list + \o \l {Models and Views: Alert WebView Example} + \o \l {Models and Views: Autosize WebView Example} + \o \l {Models and Views: GoogleMaps WebView Example} + \o \l {Models and Views: Inline HTML WebView Example} + \o \l {Models and Views: New Windows WebView Example} + \endlist + + +*/ +/*! + \title Models and Views: Alert WebView Example + \example declarative/modelviews/webview/alerts + \depends helper/qmlapplicationviewer + + \brief This example shows how to create an alert in the WebView element. + + \table + \row + \o \image qml-webview-alert-example.png + \row + \o alert.qml + \endtable +*/ + +/*! + \title Models and Views: Autosize WebView Example + \example declarative/modelviews/webview/autosize + \depends helper/qmlapplicationviewer + + \brief This example show how to use autosizing in the WebView element. + + \table + \row + \o \image qml-webview-autosize-example.png + \row + \o autosize.qml + \endtable +*/ + +/*! + \title Models and Views: GoogleMaps WebView Example + \example declarative/modelviews/webview/googlemaps + \depends helper/qmlapplicationviewer + + \brief This example shows how to use a web service API and the WebView element. + + \table + \row + \o \image qml-webview-googlemaps-example.png + \row + \o googlemaps.qml + \endtable +*/ + +/*! + \title Models and Views: Inline HTML WebView Example + \example declarative/modelviews/webview/inlinehtml + \depends helper/qmlapplicationviewer + + \brief This example shows how to use inline HTML with the WebView element. + + \table + \row + \o \image qml-webview-inlinehtml-example.png + \row + \o inlinehtml.qml + \endtable +*/ + +/*! + \title Models and Views: New Windows WebView Example + \example declarative/modelviews/webview/newwindows + \depends helper/qmlapplicationviewer + + \brief These examples show how to create new windows in the WebView element. + + \table + \row + \o \image qml-webview-newwindows-example.png + \row + \o newwindows.qml + \endtable +*/ + +/*! + \title Screen Orientation + \example declarative/screenorientation + \depends helper/qmlapplicationviewer + + \brief This example shows how to implement screen orientation support for your application. +*/ + +/*! + \title SQL Local Storage Example + \example declarative/sqllocalstorage + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the SQL Local Storage API in QML. +*/ + +/*! + \title Text: Fonts Example + \example declarative/text/fonts + \depends helper/qmlapplicationviewer + + \brief These examples show how to discover available fonts from QML. + + \table + \row + \o \image qml-fonts-availableFonts-example.png + \row + \o availableFonts.qml + \endtable +*/ + +/*! + \title Text: Banner Fonts Example + \example declarative/text/fonts/banner + \depends helper/qmlapplicationviewer + + \brief These example shows how to manipulate text in various ways. + + \table + \row + \o \image qml-fonts-banner-example.png + \row + \o banner.qml + \endtable +*/ + +/*! + \title Text: Fonts Example + \example declarative/text/fonts/fonts + \depends helper/qmlapplicationviewer + + \brief These examples shows how to display a text with multiple fonts. + + \table + \row + \o \image qml-fonts-fonts-example.png + \row + \o fonts.qml + \endtable +*/ + +/*! + \title Text: Hello Fonts Example + \example declarative/text/fonts/hello + \depends helper/qmlapplicationviewer + + \brief This example shows how to manipulate text in various ways. + + \table + \row + \o \image qml-fonts-hello-example.png + \row + \o hello.qml + \endtable +*/ + +/*! + \title Text: Text Selection Example + \example declarative/text/textselection + \depends helper/qmlapplicationviewer + + \brief This example shows how text selection, copy and paste operations + can be implemented on top of the TextEdit element. + + \image qml-textselection-example.png +*/ + +/*! + \title Threading: Threaded ListModel Example + \example declarative/threading/threadedlistmodel + \depends helper/qmlapplicationviewer + + \brief This example shows how to use a ListModel from multiple threads using + WorkerScript. +*/ + +/*! + \title Threading: WorkerScript Example + \example declarative/threading/workerscript + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the WorkerScript element for threading in QML. +*/ + +/*! + \title Toys: Clocks Example + \example declarative/toys/clocks + \depends helper/qmlapplicationviewer + + \brief This example displays a set of clocks with different times for different cities. + + Each clock is created by combining \l Image elements with \l Rotation transforms + and \l SpringAnimation behaviors. + + \image qml-clocks-example.png +*/ + +/*! + \title Toys: Corkboards Example + \example declarative/toys/corkboards + \depends helper/qmlapplicationviewer + + \brief This example presents a flickable set of interactive corkboards. It is created + through a combination of elements like \l ListModel, \l Repeater and \l TextEdit + together with rotation and scaling transforms, animation and mouse interaction. + + \image qml-corkboards-example.png +*/ + +/*! + \title Toys: Dynamic Scene Example + \example declarative/toys/dynamicscene + \depends helper/qmlapplicationviewer + + \brief This example presents an interactive drag-and-drop scene. It demonstrates + how to use QML's \l{Dynamic Object Creation} support to dynamically create and + destroy objects. + + \image qml-dynamicscene-example.png +*/ + +/*! + \title Toys: Tic-Tac-Toe Example + \example declarative/toys/tic-tac-toe + \depends helper/qmlapplicationviewer + + \brief This example presents a simple implementation of Tic Tac Toe. + + \image qml-tic-tac-toe-example.png +*/ + +/*! + \title Toys: TV Tennis Example + \example declarative/toys/tvtennis + \depends helper/qmlapplicationviewer + + \brief This example shows how to use animation components such as \l SpringAnimation, + \l SequentialAnimation and \l PropertyAction to create a game of TV tennis. + + \image qml-tvtennis-example.png +*/ + +/*! + \title Touch Interaction: Gestures Example + \example declarative/touchinteraction/gestures + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the GestureArea element. +*/ + +/*! + \title Touch Interaction: MouseArea Example + \example declarative/touchinteraction/mousearea + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the MouseArea element to access information + about mouse input. + + \image qml-mousearea-example.png +*/ + +/*! + \title UI Components: Dial Control Example + \example declarative/ui-components/dialcontrol + \depends helper/qmlapplicationviewer + + \brief This example shows how to create a dial-type control. It combines + \l Image elements with \l Rotation transforms and \l SpringAnimation behaviors + to produce an interactive speedometer-type dial. + + \image qml-dialcontrol-example.png +*/ + + +/*! + \title UI Components: Flipable Example + \example declarative/ui-components/flipable + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the \l Flipable element. + + \image qml-flipable-example.png +*/ + +/*! + \title UI Components: Progress Bars Example + \example declarative/ui-components/progressbar + \depends helper/qmlapplicationviewer + + \brief This example shows how to create a progress bar. + + \image qml-progressbar-example.png +*/ + +/*! + \title UI Components: Scroll Bar Example + \example declarative/ui-components/scrollbar + \depends helper/qmlapplicationviewer + + \brief This example shows how to create scroll bars for a \l Flickable element + using the \l {Flickable::visibleArea.xPosition}{Flickable::visibleArea} + properties. + + \image qml-scrollbar-example.png +*/ + +/*! + \title UI Components: Search Box Example + \example declarative/ui-components/searchbox + \depends helper/qmlapplicationviewer + + \brief This example shows how to combine TextInput, FocusScope and BorderImage + elements to display multiple text input fields. + + \image qml-searchbox-example.png +*/ + +/*! + \title UI Components: Slide Switch Example + \example declarative/ui-components/slideswitch + \depends helper/qmlapplicationviewer + + \brief This example shows how to create a slide switch control. + + \image qml-slideswitch-example.png +*/ + +/*! + \title UI Components: Spinner Example + \example declarative/ui-components/spinner + \depends helper/qmlapplicationviewer + + \brief This example shows how to create a spinner-type component using the PathView element. + + \image qml-spinner-example.png +*/ + +/*! + \title UI Components: Tab Widget Example + \example declarative/ui-components/tabwidget + \depends helper/qmlapplicationviewer + + \brief This example shows how to create a tab widget. It also demonstrates how + \l {Property aliases}{property aliases} and + \l {Introduction to the QML Language#Default Properties}{default properties} can be used to collect and + assemble the child items declared within an \l Item. + + \image qml-tabwidget-example.png +*/ + +/*! + \title XML: XMLHttpRequest Example + \example declarative/xml/xmlhttprequest + \depends helper/qmlapplicationviewer + + \brief This example shows how to use the \l XmlHttpRequest API in QML. + + \image qml-xmlhttprequest-example.png +*/ + +/*! + \title Labs: Shader Effects + \example declarative/shadereffects + \depends helper/qmlapplicationviewer + + \brief This example shows how to create visual effects by using OpenGL shading language together with QML using \l ShaderEffectItem and \l ShaderEffectSource APIs. + + \image qml-shadereffects-example.png +*/ + |