diff options
Diffstat (limited to 'src/doc/src/examples/qml-examples.qdoc')
-rw-r--r-- | src/doc/src/examples/qml-examples.qdoc | 718 |
1 files changed, 718 insertions, 0 deletions
diff --git a/src/doc/src/examples/qml-examples.qdoc b/src/doc/src/examples/qml-examples.qdoc new file mode 100644 index 00000000..3975955a --- /dev/null +++ b/src/doc/src/examples/qml-examples.qdoc @@ -0,0 +1,718 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Free Documentation License Usage +** 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. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title Animation: Basics Example + \example declarative/animation/basics + + This example shows how to create and combine \l{QML Animation and Transitions}{animations} in QML. + + \table + \row + \li \image qml-coloranim-example.png + \row + \li color-animation.qml + \endtable + + \table + \row + \li \image qml-propertyanim-example.png + \row + \li property-animation.qml + \endtable +*/ + +/*! + \title Animation: Behavior Examples + \example declarative/animation/behaviors + + This example shows how to use QML behaviors. + + \image qml-behaviors-example.png +*/ + +/*! + \title Animation: Easing Example + \example declarative/animation/easing + + This example shows the different easing modes available for \l{QML Animation and Transitions}{animations}. + + \image qml-easing-example.png +*/ + +/*! + \title Animation: States Example + \example declarative/animation/states + + These examples show how to use \l{State}{states} and \l{Transition}{transitions}. + + 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. + + \table + \row + \li \image qml-states-example.png + \row + \li states.qml + \endtable + + \table + \row + \li \image qml-transitions-example.png + \row + \li transitions.qml + \endtable +*/ + +/*! + \title Image Elements: Border Image Example + \example declarative/imageelements/borderimage + + These examples show how to use the BorderImage element. + + \table + \row + \li \image qml-borderimage-example.png + \row + \li borderimage.qml + \endtable + + \table + \row + \li \image qml-borderimage-shadows-example.png + \row + \li shadows.qml + \endtable +*/ + +/*! + \title Image Elements: Image Example + \example declarative/imageelements/image + + 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 + + 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 + \li \l {declarative/cppextensions/referenceexamples/adding}{Adding Types} + \li \l {declarative/cppextensions/referenceexamples/properties}{Object and List Property Types} + \li \l {declarative/cppextensions/referenceexamples/coercion}{Inheritance and Coercion} + \li \l {declarative/cppextensions/referenceexamples/default}{Default Property} + \li \l {declarative/cppextensions/referenceexamples/grouped}{Grouped Properties} + \li \l {declarative/cppextensions/referenceexamples/attached}{Attached Properties} + \li \l {declarative/cppextensions/referenceexamples/signal}{Signal Support} + \li \l {declarative/cppextensions/referenceexamples/methods}{Methods Support} + \li \l {declarative/cppextensions/referenceexamples/valuesource}{Property Value Source} + \li \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 + + 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 + + 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 + + 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 + + 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 + + These examples show how to integrate \l{Graphics View Framework}{Graphics View} + layout components with QML: + + \list + \li \l{declarative/cppextensions/qgraphicslayouts/layoutitem}{LayoutItem} + \li \l{declarative/cppextensions/qgraphicslayouts/qgraphicsgridlayout}{QGraphicsGridLayout} + \li \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 + + 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 + + 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 + + This example shows how to use QDeclarativeNetworkAccessManagerFactory to create a QNetworkAccessManager + with a proxy. +*/ + +/*! + \title Internationalization Example + \example declarative/i18n + \ingroup internationalization + + 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 + + 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 + + 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 + + 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 + + This example shows how to use the 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 + + This example shows how to handle keyboard input and focus in QML. + + \image qml-focus-example.png + + \sa {Keyboard Focus in Qt Quick} +*/ + +/*! + \title Models and Views: AbstractItemModel Example + \example declarative/modelviews/abstractitemmodel + + 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 + + This example shows how to use the GridView element. + + \image qml-gridview-example.png +*/ + +/*! + \title Models and Views: ListView Example + \example declarative/modelviews/listview + + These examples show how to use the ListView element. + + \table + \row + \li \image qml-listview-dynamiclist-example.png + \row + \li dynamiclist.qml + \endtable + + \table + \row + \li \image qml-listview-expandingdelegates-example.png + \row + \li expandingdelegates.qml + \endtable + + \table + \row + \li \image qml-listview-highlight-example.png + \row + \li highlight.qml + \endtable + + \table + \row + \li \image qml-listview-highlightranges-example.png + \row + \li highlightranges.qml + \endtable + + \table + \row + \li \image qml-listview-sections-example.png + \row + \li sections.qml + \endtable +*/ + +/*! + \title Models and Views: PathView Example + \example declarative/modelviews/pathview + + 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 + + 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 + + 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 + + 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 + + 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 + + This example shows how to use the VisualItemModel element. + + \image qml-visualitemmodel-example.png +*/ + +/*! + \title Models and Views: WebView Example + \example declarative/modelviews/webview + + These examples show how to use the WebView element. + + \table + \row + \li \image qml-webview-alert-example.png + \row + \li alert.qml + \endtable + + \table + \row + \li \image qml-webview-autosize-example.png + \row + \li autosize.qml + \endtable + + \table + \row + \li \image qml-webview-googlemaps-example.png + \row + \li googlemaps.qml + \endtable + + \table + \row + \li \image qml-webview-inlinehtml-example.png + \row + \li inlinehtml.qml + \endtable + + \table + \row + \li \image qml-webview-newwindows-example.png + \row + \li newwindows.qml + \endtable +*/ + + +/*! + \title Screen Orientation + \example declarative/screenorientation + + This example shows how to implement screen orientation support for your application. +*/ + +/*! + \title SQL Local Storage Example + \example declarative/sqllocalstorage + + This example shows how to use the SQL Local Storage API in QML. +*/ + +/*! + \title Text: Fonts Example + \example declarative/text/fonts + + These examples show how to discover available fonts from QML and manipulate + text in various ways. + + \table + \row + \li \image qml-fonts-availableFonts-example.png + \row + \li availableFonts.qml + \endtable + + \table + \row + \li \image qml-fonts-banner-example.png + \row + \li banner.qml + \endtable + + \table + \row + \li \image qml-fonts-fonts-example.png + \row + \li fonts.qml + \endtable + + \table + \row + \li \image qml-fonts-hello-example.png + \row + \li hello.qml + \endtable +*/ + +/*! + \title Text: Text Selection Example + \example declarative/text/textselection + + 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 + + This example shows how to use a ListModel from multiple threads using + WorkerScript. +*/ + +/*! + \title Threading: WorkerScript Example + \example declarative/threading/workerscript + + This example shows how to use the WorkerScript element for threading in QML. +*/ + +/*! + \title Toys: Clocks Example + \example declarative/toys/clocks + + 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 + + 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 + + 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 + + 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 + + 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: MouseArea Example + \example declarative/touchinteraction/mousearea + + 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 + + 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 + + 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 + + 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 + + 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 + + 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 + + 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 + + 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 + + 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 + + This example shows how to use the \l XmlHttpRequest API in QML. + + \image qml-xmlhttprequest-example.png +*/ |