From 30105126adc136dbc2d8bd0f7fb6d5aa106d050f Mon Sep 17 00:00:00 2001 From: Venugopal Shivashankar Date: Tue, 4 Dec 2012 17:26:27 +0100 Subject: Doc: Added documentation for the Qt Quick1 examples Task-number: QTBUG-27515 Change-Id: I7a38158e44e69ac151842a0a49865fe72224ece8 Reviewed-by: Jerome Pasion --- doc/src/examples/qml-examples.qdoc | 365 ++++++++----------------------------- 1 file changed, 72 insertions(+), 293 deletions(-) (limited to 'doc') diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc index 4df8b76d..3975955a 100644 --- a/doc/src/examples/qml-examples.qdoc +++ b/doc/src/examples/qml-examples.qdoc @@ -27,25 +27,16 @@ /*! \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. + \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 -*/ - -/*! - \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. + \endtable \table \row @@ -56,30 +47,19 @@ */ /*! - \title Animation: Behavior Example - \example declarative/animation/behaviors/behavior-example - \depends helper/qmlapplicationviewer + \title Animation: Behavior Examples + \example declarative/animation/behaviors - \brief This example shows how to use QML behaviors. + 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}. + This example shows the different easing modes available for \l{QML Animation and Transitions}{animations}. \image qml-easing-example.png */ @@ -88,16 +68,11 @@ \title Animation: States Example \example declarative/animation/states - \brief These examples show how to use states and transitions. - - \depends helper/qmlapplicationviewer + 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. - \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 \li \image qml-states-example.png @@ -117,9 +92,7 @@ \title Image Elements: Border Image Example \example declarative/imageelements/borderimage - \brief These examples show how to use the BorderImage element. - - \depends helper/qmlapplicationviewer + These examples show how to use the BorderImage element. \table \row @@ -127,14 +100,6 @@ \row \li 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 @@ -147,10 +112,8 @@ /*! \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}. + This example shows how to use the \l Image element and its \l{Image::fillMode}{fillModes}. \image qml-image-example.png */ @@ -159,8 +122,8 @@ \page declarative-cppextensions-reference.html \title C++ Extensions: Reference examples - \brief These examples show how QML can be extended from C++ in various ways. - + 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. @@ -188,7 +151,7 @@ \title C++ Extensions: Plugins Example \example declarative/cppextensions/plugins - \brief This example shows how to create a C++ plugin extension by subclassing QDeclarativeExtensionPlugin. + This example shows how to create a C++ plugin extension by subclassing QDeclarativeExtensionPlugin. \image qml-plugins-example.png */ @@ -197,7 +160,7 @@ \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 + 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 @@ -206,7 +169,7 @@ \title QGraphicsGridLayout Example \example declarative/cppextensions/qgraphicslayouts/qgraphicsgridlayout - \brief This example shows how to use QGraphicsGridLayout to lay out QML items. This is + 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. @@ -216,7 +179,7 @@ \title QGraphicsLinearLayout Example \example declarative/cppextensions/qgraphicslayouts/qgraphicslinearlayout - \brief This example shows how to use QGraphicsLinearLayout to lay out QML items. This is + 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. @@ -226,7 +189,7 @@ \title C++ Extensions: QGraphicsLayouts examples \page declarative-cppextensions-qgraphicslayouts.html - \brief These examples show how to integrate \l{Graphics View Framework}{Graphics View} + These examples show how to integrate \l{Graphics View Framework}{Graphics View} layout components with QML: \list @@ -243,7 +206,7 @@ \title C++ Extensions: QWidgets Example \example declarative/cppextensions/qwidgets - \brief This example shows how to embed QWidget-based objects into QML using QGraphicsProxyWidget. + This example shows how to embed QWidget-based objects into QML using QGraphicsProxyWidget. \image qml-qwidgets-example.png */ @@ -252,7 +215,7 @@ \title C++ Extensions: Image Provider Example \example declarative/cppextensions/imageprovider - \brief This examples shows how to use QDeclarativeImageProvider to serve images + This examples shows how to use QDeclarativeImageProvider to serve images to QML image elements. \image qml-imageprovider-example.png @@ -262,7 +225,7 @@ \title C++ Extensions: Network Access Manager Factory Example \example declarative/cppextensions/networkaccessmanagerfactory - \brief This example shows how to use QDeclarativeNetworkAccessManagerFactory to create a QNetworkAccessManager + This example shows how to use QDeclarativeNetworkAccessManagerFactory to create a QNetworkAccessManager with a proxy. */ @@ -270,9 +233,8 @@ \title Internationalization Example \example declarative/i18n \ingroup internationalization - \depends helper/qmlapplicationviewer - \brief This example shows how to enable text translation in QML. + This example shows how to enable text translation in QML. \image qml-i18n-example.png @@ -311,13 +273,10 @@ /*! \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, + 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 + 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. @@ -327,13 +286,10 @@ /*! \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 + 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 + 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 @@ -345,13 +301,11 @@ /*! \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. + 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 @@ -361,9 +315,8 @@ /*! \title Positioners Example \example declarative/positioners - \depends helper/qmlapplicationviewer - \brief This example shows how to use positioner elements such as \l Row, \l Column, + 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 @@ -372,19 +325,19 @@ /*! \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. + 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 - \depends helper/qmlapplicationviewer - \brief This example shows how to use a QAbstractItemModel subclass as a model in QML. + This example shows how to use a QAbstractItemModel subclass as a model in QML. \image qml-abstractitemmodel-example.png */ @@ -392,35 +345,17 @@ /*! \title Models and Views: GridView Example \example declarative/modelviews/gridview - \depends helper/qmlapplicationviewer - \brief This example shows how to use the GridView element. + 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 - \li \l {Models and Views: Dynamic List ListView Example} - \li \l {Models and Views: Expanding Delegate ListView Example} - \li \l {Models and Views: Highlight ListView Example} - \li \l {Models and Views: Highlight Ranges ListView Example} - \li \l {Models and Views: Sections ListView Example} - \endlist - -*/ - -/*! - \title Models and Views: Dynamic List ListView Example - \example declarative/modelviews/listview/dynamiclist - \depends helper/qmlapplicationviewer + \title Models and Views: ListView Example + \example declarative/modelviews/listview - \brief This example shows how items can be dynamically added to - and removed from a ListModel, and how these list - modifications can be animated. + These examples show how to use the ListView element. \table \row @@ -428,15 +363,6 @@ \row \li 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 @@ -444,16 +370,6 @@ \row \li 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 @@ -461,16 +377,6 @@ \row \li 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 @@ -478,15 +384,6 @@ \row \li 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 @@ -499,9 +396,8 @@ /*! \title Models and Views: PathView Example \example declarative/modelviews/pathview - \depends helper/qmlapplicationviewer - \brief This example shows how to use the PathView element. + This example shows how to use the PathView element. \image qml-pathview-example.png */ @@ -509,9 +405,8 @@ /*! \title Models and Views: Object ListModel Example \example declarative/modelviews/objectlistmodel - \depends helper/qmlapplicationviewer - \brief This example shows how to use a QList as a model in QML. + This example shows how to use a QList as a model in QML. \image qml-objectlistmodel-example.png */ @@ -519,9 +414,8 @@ /*! \title Models and Views: Package Example \example declarative/modelviews/package - \depends helper/qmlapplicationviewer - \brief This example shows how to use the \l Package element. + This example shows how to use the \l Package element. \image qml-package-example.png */ @@ -529,9 +423,8 @@ /*! \title Models and Views: Parallax Example \example declarative/modelviews/parallax - \depends helper/qmlapplicationviewer - \brief This example shows how to combine and switch between views. + This example shows how to combine and switch between views. \image qml-parallax-example.png */ @@ -539,9 +432,8 @@ /*! \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. + This example shows how to use a QStringList as a model in QML. \image qml-stringlistmodel-example.png */ @@ -549,35 +441,17 @@ /*! \title Models and Views: VisualItemModel Example \example declarative/modelviews/visualitemmodel - \depends helper/qmlapplicationviewer - \brief This example shows how to use the VisualItemModel element. + 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 - \li \l {Models and Views: Alert WebView Example} - \li \l {Models and Views: Autosize WebView Example} - \li \l {Models and Views: GoogleMaps WebView Example} - \li \l {Models and Views: Inline HTML WebView Example} - \li \l {Models and Views: New Windows WebView Example} - \endlist - - -*/ -/*! - \title Models and Views: Alert WebView Example - \example declarative/modelviews/webview/alerts - \depends helper/qmlapplicationviewer + \title Models and Views: WebView Example + \example declarative/modelviews/webview - \brief This example shows how to create an alert in the WebView element. + These examples show how to use the WebView element. \table \row @@ -585,14 +459,6 @@ \row \li 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 @@ -600,14 +466,6 @@ \row \li 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 @@ -615,14 +473,6 @@ \row \li 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 @@ -630,14 +480,6 @@ \row \li 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 @@ -647,28 +489,27 @@ \endtable */ + /*! \title Screen Orientation \example declarative/screenorientation - \depends helper/qmlapplicationviewer - \brief This example shows how to implement screen orientation support for your application. + 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. + 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. + These examples show how to discover available fonts from QML and manipulate + text in various ways. \table \row @@ -676,14 +517,6 @@ \row \li 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 @@ -691,14 +524,6 @@ \row \li 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 @@ -706,14 +531,6 @@ \row \li 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 @@ -726,9 +543,8 @@ /*! \title Text: Text Selection Example \example declarative/text/textselection - \depends helper/qmlapplicationviewer - \brief This example shows how text selection, copy and paste operations + This example shows how text selection, copy and paste operations can be implemented on top of the TextEdit element. \image qml-textselection-example.png @@ -737,28 +553,24 @@ /*! \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 + 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. + 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 + 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 @@ -767,9 +579,8 @@ /*! \title Toys: Corkboards Example \example declarative/toys/corkboards - \depends helper/qmlapplicationviewer - \brief This example presents a flickable set of interactive corkboards. It is created + 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. @@ -779,9 +590,8 @@ /*! \title Toys: Dynamic Scene Example \example declarative/toys/dynamicscene - \depends helper/qmlapplicationviewer - \brief This example presents an interactive drag-and-drop scene. It demonstrates + 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. @@ -791,9 +601,8 @@ /*! \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. + This example presents a simple implementation of Tic Tac Toe. \image qml-tic-tac-toe-example.png */ @@ -801,28 +610,18 @@ /*! \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, + 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 + This example shows how to use the MouseArea element to access information about mouse input. \image qml-mousearea-example.png @@ -831,9 +630,8 @@ /*! \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 + 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. @@ -844,9 +642,8 @@ /*! \title UI Components: Flipable Example \example declarative/ui-components/flipable - \depends helper/qmlapplicationviewer - \brief This example shows how to use the \l Flipable element. + This example shows how to use the \l Flipable element. \image qml-flipable-example.png */ @@ -854,9 +651,8 @@ /*! \title UI Components: Progress Bars Example \example declarative/ui-components/progressbar - \depends helper/qmlapplicationviewer - \brief This example shows how to create a progress bar. + This example shows how to create a progress bar. \image qml-progressbar-example.png */ @@ -864,9 +660,8 @@ /*! \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 + This example shows how to create scroll bars for a \l Flickable element using the \l {Flickable::visibleArea.xPosition}{Flickable::visibleArea} properties. @@ -876,9 +671,8 @@ /*! \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 + This example shows how to combine TextInput, FocusScope and BorderImage elements to display multiple text input fields. \image qml-searchbox-example.png @@ -887,9 +681,8 @@ /*! \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. + This example shows how to create a slide switch control. \image qml-slideswitch-example.png */ @@ -897,9 +690,8 @@ /*! \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. + This example shows how to create a spinner-type component using the PathView element. \image qml-spinner-example.png */ @@ -907,9 +699,8 @@ /*! \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 + 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. @@ -920,20 +711,8 @@ /*! \title XML: XMLHttpRequest Example \example declarative/xml/xmlhttprequest - \depends helper/qmlapplicationviewer - \brief This example shows how to use the \l XmlHttpRequest API in QML. + 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 -*/ - -- cgit v1.2.3