From 5f99a6388abf87c34e052f3d7e266c48852a52dd Mon Sep 17 00:00:00 2001 From: Jerome Pasion Date: Wed, 28 May 2014 16:19:08 +0200 Subject: Doc: Updated "Qt Quick Examples" pages. -added instructions about running the example (using \include) -used the example names as sections in the collection pages -general editing and documentation polishing -updated copyright information Change-Id: I044f29fcc1921a541040505d5821acb06dc4cb35 Reviewed-by: Sze Howe Koh Reviewed-by: Jerome Pasion --- examples/quick/animation/doc/src/animation.qdoc | 73 ++++++++++++++++------ examples/quick/canvas/doc/src/canvas.qdoc | 44 +++++++++---- .../quick/draganddrop/doc/src/draganddrop.qdoc | 28 ++++++--- .../doc/src/externaldraganddrop.qdoc | 14 +++-- .../quick/imageelements/doc/src/imageelements.qdoc | 44 ++++++++----- .../keyinteraction/doc/src/keyinteraction.qdoc | 12 +++- .../quick/localstorage/doc/src/localstorage.qdoc | 12 ++-- examples/quick/mousearea/doc/src/mousearea.qdoc | 25 +++++--- .../quick/positioners/doc/src/positioners.qdoc | 33 +++++++--- .../quick-accessibility/doc/src/accessibility.qdoc | 17 +++-- .../quick/righttoleft/doc/src/righttoleft.qdoc | 19 ++++-- .../quick/shadereffects/doc/src/shadereffects.qdoc | 30 ++++++--- examples/quick/text/doc/src/text.qdoc | 55 ++++++++++------ examples/quick/threading/doc/src/threading.qdoc | 33 +++++++--- .../touchinteraction/doc/src/touchinteraction.qdoc | 50 +++++++++++---- examples/quick/views/doc/src/views.qdoc | 69 ++++++++++++++------ examples/quick/window/doc/src/window.qdoc | 59 ++++++++++------- 17 files changed, 435 insertions(+), 182 deletions(-) (limited to 'examples/quick') diff --git a/examples/quick/animation/doc/src/animation.qdoc b/examples/quick/animation/doc/src/animation.qdoc index 34a1eeb488..c76a53723b 100644 --- a/examples/quick/animation/doc/src/animation.qdoc +++ b/examples/quick/animation/doc/src/animation.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -32,44 +32,81 @@ \image qml-animations-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to animation. Each example is - a small QML file emphasizing a particular type or feature. + \e Animation is a collection of small QML examples relating to animation. + Each example is a small QML file emphasizing a particular type or feature. - ColorAnimation demonstrates using a color animation to fade a sky from day to night. + For more information about animations, visit + \l{Important Concepts in Qt Quick - States, Transitions and Animations}. + + \include examples-run.qdocinc + + \section1 ColorAnimation + + \e ColorAnimation uses color animations to fade a sky from day to + night. \snippet animation/basics/color-animation.qml 0 - PropertyAnimation demonstrates using a number animation to bounce a circle up and down. + \section1 PropertyAnimation + + \e PropertyAnimation uses number animations to bounce a + circle up and down. \snippet animation/basics/property-animation.qml 0 - Animators demonstrates using a animators to bounce an icon up and down. + \section1 Animators + + \e Animators uses animators to bounce an icon up and down. \snippet animation/basics/animators.qml 0 - Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click. + \section1 Behaviors + + \e Behaviors uses behaviors to move a rectangle to where you click. \snippet animation/behaviors/behavior-example.qml 0 - Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it. - It does this by assigning a complex binding to each letter: + \section1 Wiggly Text + + \e{Wiggly Text} demonstrates using more complex behaviors to animate and + wiggle some text around as you drag it. It does this by assigning a complex + binding to each letter: \snippet animation/behaviors/wigglytext.qml 0 - Then, it uses behaviors to animate the movement on each letter: + + Then, it uses behaviors to animate the movement of each letter: \snippet animation/behaviors/wigglytext.qml 1 - Tv Tennis demonstrates using more complex behaviors to get paddles following a ball for an infinite game. - Again a binding which depends on other values is applied to the position and a behavior provided the animation. + \section1 Tv Tennis + + \e{Tv Tennis} uses complex behaviors to make the paddles follow a ball to + simulate an infinite tennis game. Again, a binding which depends on other + values is applied to the position and a behavior provided the animation. \snippet animation/behaviors/tvtennis.qml 0 - Easing Curves shows off all the easing curves available in Qt Quick animations. + \section1 Easing Curves + + \e{Easing Curves} shows off all the easing curves available in Qt Quick + animations. + + \section1 States + + \e States demonstrates how the properties of an item can vary between + \l{Qt Quick States}{states}. - States demonstrates how the properties of an item can vary between states. It defines several states: \snippet animation/states/states.qml 0 - Note that there is also the implicit 'base state' from properties set directly on objects. - Transitions takes the States example and animates the property changes by setting transitions: + \section1 Transitions + + \e Transitions takes the States example and animates the property changes + by setting transitions: \snippet animation/states/transitions.qml 0 - PathAnimation animates an image along a beizer curve using a PathAnimation. + \section1 PathAnimation + + \e PathAnimation animates an image along a bezier curve using a + \l PathAnimation. \snippet animation/pathanimation/pathanimation.qml 0 - PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead. + \section1 PathInterpolator + + \e PathInterpolator animates an image along the same bezier curve, using a + \l PathInterpolator instead. \snippet animation/pathinterpolator/pathinterpolator.qml 0 */ diff --git a/examples/quick/canvas/doc/src/canvas.qdoc b/examples/quick/canvas/doc/src/canvas.qdoc index f3eb78e1d1..2c4bd1f752 100644 --- a/examples/quick/canvas/doc/src/canvas.qdoc +++ b/examples/quick/canvas/doc/src/canvas.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -32,27 +32,49 @@ \image qml-canvas-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to Canvas item. Each example is - a small QML file emphasizing a particular type or feature. + \e Canvas is a collection of small QML examples relating to the \l Canvas + type. Each example is a small QML file emphasizing a particular type or + feature. - Red heart demonstrates using a bezierCurve API to stroke and fill a red heart. + \include examples-run.qdocinc + + \section1 Red heart + + \e{Red heart} uses the bezier curve API to stroke and fill a red heart. \snippet canvas/bezierCurve/bezierCurve.qml 0 - Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble: + \section1 Talk bubble + + \e{Talk bubble} uses the quadraticCurveTo() API to stroke and fill a + customized talk bubble: \snippet canvas/quadraticCurveTo/quadraticCurveTo.qml 0 - This example also demonstrates the fillText API: + + This example also demonstrates the fillText() API: \snippet canvas/quadraticCurveTo/quadraticCurveTo.qml 1 - Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle. + \section1 Squircle + + \e Squircle uses a collection of simple moveTo() and lineTo() path APIs to + draw a smooth squircle. - Rounded rectangle demonstrates using a collection if lineTo/arcTo path APIs to draw a rounded rectangle. + \section1 Rounded rectangle - Smile face demonstrates using several complex path APIs to draw an fill a smile face. + \e{Rounded rectangle} uses a collection of lineTo() and arcTo() path APIs to + draw a rounded rectangle. - Clip demonstrates using clip API to clip a given image. + \section1 Smile face + + \e{Smile face} uses several paths to draw and fill a smiling face. + + \section1 Clip + + \e Clip uses the clip API to clip a given image. \snippet canvas/clip/clip.qml 0 - Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings. + \section1 Tiger + + \e Tiger uses the SVG path API to draw a tiger with a collection + of SVG path strings. \snippet canvas/tiger/tiger.qml 0 */ diff --git a/examples/quick/draganddrop/doc/src/draganddrop.qdoc b/examples/quick/draganddrop/doc/src/draganddrop.qdoc index 2c62e271e6..909f2676bd 100644 --- a/examples/quick/draganddrop/doc/src/draganddrop.qdoc +++ b/examples/quick/draganddrop/doc/src/draganddrop.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -31,11 +31,19 @@ \image qml-draganddrop-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to drag and drop functionality. + \e{Drag and Drop} is a collection of small QML examples relating to drag + and drop functionality. For more information, visit the \l{Drag and Drop} + page. - \section2 Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid. + \include examples-run.qdocinc - It has a DragTile component which uses a MouseArea to move an item when dragged: + \section1 Tiles + + \e Tiles adds drag and drop to simple rectangles, which you can drag into a + specific grid. + + It has a DragTile component which uses a MouseArea to move an item when + dragged: \snippet draganddrop/tiles/DragTile.qml 0 \snippet draganddrop/tiles/DragTile.qml 1 @@ -44,15 +52,15 @@ \snippet draganddrop/tiles/DropTile.qml 0 - The keys property of the DropArea will only allow an item with matching key in - it's Drag.keys property to be dropped on it. + The keys property of the DropArea will only allow an item with a matching + key in its Drag.keys property to be dropped on it. - \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list. + \section1 GridView - It uses a DelegateModel to move a delegate item to the position of another item - it is dragged over. + \e GridView adds drag and drop to a \l GridView, allowing you to reorder the + list. It also uses a \l DelegateModel to move a delegate item to the + position of another item it is dragged over. \snippet draganddrop/views/gridview.qml 0 \snippet draganddrop/views/gridview.qml 1 */ - diff --git a/examples/quick/externaldraganddrop/doc/src/externaldraganddrop.qdoc b/examples/quick/externaldraganddrop/doc/src/externaldraganddrop.qdoc index 1251e6e1eb..51e5eddf04 100644 --- a/examples/quick/externaldraganddrop/doc/src/externaldraganddrop.qdoc +++ b/examples/quick/externaldraganddrop/doc/src/externaldraganddrop.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -27,12 +27,18 @@ /*! \title Qt Quick Examples - externaldraganddrop \example externaldraganddrop - \brief This is an example of drag and drop between Qml and other applications + \brief This is an example of drag-and-drop among QML applications. \image qml-dnd2-example.png \ingroup qtquickexamples - This example shows you how to respond to do drag and drop using MouseArea and DropArea. + \e externaldraganddrop demonstrates how to perform drag and + drop with \l MouseArea and \l DropArea. - Drag text between boxes, out of boxes into other applications, and from other applications into the boxes. Use option/ctrl to copy rather than move text when dragging between boxes. + The example allows you to drag the text to other boxes, out of boxes into + other applications, and from other applications into the boxes. Use the + option or CTRL keys to copy rather than move text when dragging between + boxes. + + \include examples-run.qdocinc */ diff --git a/examples/quick/imageelements/doc/src/imageelements.qdoc b/examples/quick/imageelements/doc/src/imageelements.qdoc index d88201faf9..07c09a02db 100644 --- a/examples/quick/imageelements/doc/src/imageelements.qdoc +++ b/examples/quick/imageelements/doc/src/imageelements.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -31,29 +31,43 @@ \image qml-imageelements-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to image types. + \e{Image Elements} is a collection of small QML examples relating to image + types. For more information, visit \l{Use Case - Visual Elements In QML}. - 'BorderImage' shows off the various scaling modes of the BorderImage item - by setting its horizontalTileMode and verticalTileMode properties. + \include examples-run.qdocinc - 'Image' shows off the various fill modes of the Image item. + \section1 BorderImage - 'Shadows' shows how to create a drop shadow effect for a rectangular item - using a BorderImage: + \e BorderImage shows off the various scaling modes of the \l BorderImage + type by setting its horizontalTileMode and verticalTileMode properties. + + \section1 Image + + \e Image shows off the various fill modes of the \l Image type. + + \section1 Shadows + + \e Shadows shows how to create a drop shadow effect for a rectangular item + using a \l BorderImage: \snippet imageelements/content/ShadowRectangle.qml shadow - 'AnimatedSprite' shows how to display a simple animation using an - AnimatedSprite object: + \section1 AnimatedSprite + + \e AnimatedSprite shows how to display a simple animation using an + \l AnimatedSprite object: \snippet imageelements/animatedsprite.qml sprite - The sprite animation will loop 3 times. + The sprite animation will loop three times. + + \section1 SpriteSequence - 'SpriteSequence' demonstrates using a sprite sequence to draw an animated - and interactive bear. - The SpriteSequence defines 5 different sprites. The bear is initially in - a 'still' state: + \e SpriteSequence demonstrates using a sprite sequence to draw an animated + and interactive bear. The \l SpriteSequence object defines five different + sprites. The bear is initially in a \e still state: \snippet imageelements/spritesequence.qml still + When the scene is clicked, an animation sets the sprite sequence to the - 'falling' states and animates the bear's y property. + \e falling states and animates the bear's y property. \snippet imageelements/spritesequence.qml animation + At the end of the animation the bear is set back to its initial state. */ diff --git a/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc b/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc index d29536c66c..fa9fdcfde0 100644 --- a/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc +++ b/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -31,5 +31,13 @@ \image qml-keyinteraction-example.png \ingroup qtquickexamples - This example demonstrates combining various methods of interacting with keyboard focus. + \e{Keyboard Focus in Qt Quick} combines various methods of + handling keyboard focus. For more information, visit + \l{Keyboard Focus in Qt Quick}. + + \include examples-run.qdocinc + + Using the keyboard arrow keys, the focus shifts to the menus and + the \l GridView. + */ diff --git a/examples/quick/localstorage/doc/src/localstorage.qdoc b/examples/quick/localstorage/doc/src/localstorage.qdoc index 0a5d1cd6fd..3e2fd7f006 100644 --- a/examples/quick/localstorage/doc/src/localstorage.qdoc +++ b/examples/quick/localstorage/doc/src/localstorage.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -30,9 +30,13 @@ \brief A collection of QML local storage examples. \image qml-localstorage-example.png - This is a collection of small QML examples relating to local storage functionality. + \e{Local Storage} is a collection of small QML examples relating to + Qt Quick's \l{local storage} functionality. - \e {Hello World} demonstrates creating a simple SQL table and doing insert/select operations. + \include examples-run.qdocinc -*/ + \section1 Hello World + \e {Hello World} demonstrates creating a simple SQL table and doing + insert and select operations. +*/ diff --git a/examples/quick/mousearea/doc/src/mousearea.qdoc b/examples/quick/mousearea/doc/src/mousearea.qdoc index 091be69e5d..827e5497ee 100644 --- a/examples/quick/mousearea/doc/src/mousearea.qdoc +++ b/examples/quick/mousearea/doc/src/mousearea.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -27,20 +27,27 @@ /*! \title Qt Quick Examples - MouseArea \example mousearea - \brief This is an example of the MouseArea type in QML + \brief This is an example of the MouseArea type in QML. \image qml-mousearea-example.png \ingroup qtquickexamples - This example shows you how to respond to clicks and drags with a MouseArea. + \e MouseArea example shows how to respond to clicks and drags with a + \l MouseArea. For more information, visit + \l{Important Concepts In Qt Quick - User Input}. - When you click inside the red square, the Text type will list several properties - of that click which are available to QML. + \include examples-run.qdocinc - Signals are emitted by the MouseArea when clicks or other discrete operations occur within it + \section1 MouseArea Behavior + + When you click inside the red square, the \l Text type will list several + properties of that click which are available to QML. + + Signals are emitted by the MouseArea when clicks or other discrete + operations occur within it. \snippet mousearea/mousearea.qml clicks - The MouseArea can also be used to drag items around. By setting the parameters of the drag property, - the target item will be dragged around if the user starts to drag within the MouseArea. + \l MouseArea can also be used to drag items around. By setting the + parameters of the drag property, the target item will be dragged around if + the user starts to drag within the mouse area boundary. \snippet mousearea/mousearea.qml drag - */ diff --git a/examples/quick/positioners/doc/src/positioners.qdoc b/examples/quick/positioners/doc/src/positioners.qdoc index 794b3b25f9..4acd42821a 100644 --- a/examples/quick/positioners/doc/src/positioners.qdoc +++ b/examples/quick/positioners/doc/src/positioners.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -31,22 +31,35 @@ \image qml-positioners-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to positioners. Each example is - a small QML file emphasizing a particular type or feature. + \e Positioners is a collection of small QML examples relating to + positioners. Each example is a small QML file emphasizing a particular type + or feature. For more information, visit + \l{Important Concepts In Qt Quick - Positioning}. - Transitions shows animated transitions when showing or hiding items in a positioner. - It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow. - Each positioner has animations described as Transitions. + \include examples-run.qdocinc + + \section1 Transitions + + \e Transitions shows animated transitions when showing or hiding items in a + positioner. It consists of a scene populated with items in a variety of + positioners: \l Column, \l Row, \l Grid, and \l Flow. Each positioner has + animations described as Transitions. \snippet positioners/positioners-transitions.qml move - The move transition specifies how items inside a positioner will animate when they are displaced by the appearance or disappearance of other items. + The move transition specifies how items inside a positioner will animate + when they are displaced by the appearance or disappearance of other items. \snippet positioners/positioners-transitions.qml add - The add transition specifies how items will appear when they are added to a positioner. + The add transition specifies how items will appear when they are added to a + positioner. \snippet positioners/positioners-transitions.qml populate - The populate transition specifies how items will appear when their parent positioner is first created. + The populate transition specifies how items will appear when their parent + positioner is first created. + + \section1 Attached Properties - Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner. + \e{Attached Properties} shows how the Positioner attached property can be + used to determine where an item is within a positioner. \snippet positioners/positioners-attachedproperties.qml 0 */ diff --git a/examples/quick/quick-accessibility/doc/src/accessibility.qdoc b/examples/quick/quick-accessibility/doc/src/accessibility.qdoc index 5ad60d1c0f..da89333835 100644 --- a/examples/quick/quick-accessibility/doc/src/accessibility.qdoc +++ b/examples/quick/quick-accessibility/doc/src/accessibility.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -27,14 +27,21 @@ /*! \title Qt Quick Examples - Accessibility \example quick-accessibility - \brief This example has accessible buttons. + \brief This example demonstrates the implementation of accessible buttons. \ingroup qtquickexamples - Types in this example are augmented with meta-data for accessiblity systems. + \e Accessibility demonstrates QML types that are augmented with meta-data + for accessibility systems. For more information, visit the + \l{Accessibility} page. - For example, the button identifies itself and its functionality to the accessibility system: + \include examples-run.qdocinc + + \section1 Implementing Accessible Buttons + + The button identifies itself and its functionality to the + accessibility system: \snippet quick-accessibility/content/Button.qml button - As do Text types inside the example: + Similarly, \l Text types inside the example also identify themselves: \snippet quick-accessibility/accessibility.qml text */ diff --git a/examples/quick/righttoleft/doc/src/righttoleft.qdoc b/examples/quick/righttoleft/doc/src/righttoleft.qdoc index 6a207f7233..1671f9b1ad 100644 --- a/examples/quick/righttoleft/doc/src/righttoleft.qdoc +++ b/examples/quick/righttoleft/doc/src/righttoleft.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -31,9 +31,18 @@ \image qml-righttoleft-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to right to left(RTL) localization support. + \e{Right to Left} is a collection of small QML examples relating to + right to left (RTL) localization support. For more information, + visit \l{Right-to-left User Interfaces}. - Layout direction shows RTL layouting. - Layout mirroring shows automatic mirroring of horizontal layouts in RTL locales. - Text Alignment shows automatic mirroring of text alignment in RTL locales. + These are the examples in Right to Left: + \list + \li \e{Layout Direction} - shows RTL layout direction + \li \e{Layout Mirroring} - shows automatic mirroring of horizontal layouts + in RTL locales + \li \e{Text Alignment} - shows automatic mirroring of text alignment in RTL + locales + \endlist + + \include examples-run.qdocinc */ diff --git a/examples/quick/shadereffects/doc/src/shadereffects.qdoc b/examples/quick/shadereffects/doc/src/shadereffects.qdoc index 3d5f42eacc..448ee9f3e3 100644 --- a/examples/quick/shadereffects/doc/src/shadereffects.qdoc +++ b/examples/quick/shadereffects/doc/src/shadereffects.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -28,24 +28,34 @@ \title Qt Quick Examples - Shader Effects \example shadereffects \image qml-shadereffects-example.png - \brief This is a shader effects example + \brief This is a shader effects example. \ingroup qtquickexamples This example demonstrates a couple of visual effects that you can perform - with shaders in \l {Qt Quick}. + with shaders in Qt Quick. For more information, visit + \l{Important Concepts In Qt Quick - Graphical Effects} - ShaderEffects typically operate on other types, using a ShaderEffectSource + \include examples-run.qdocinc + + \section1 Using ShaderEffect + + The \l ShaderEffect type typically operates on other types, using a + \l ShaderEffectSource: \snippet shadereffects/shadereffects.qml source - In the above snippet, theItem is the id of a complex QML object in the file. - ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader. + In the above snippet, \c theItem is the ID of a complex QML object in the + file. + + ShaderEffects can use this ShaderEffectSource as a texture in their fragment + shader: \snippet shadereffects/shadereffects.qml fragment - You can use any custom property on the ShaderEffect in your shader. This makes - animated shader code very easy. + You can use any custom property on the ShaderEffect in your shader. This + makes animated shader code very easy: \snippet shadereffects/shadereffects.qml properties - ShaderEffects can also have a custom vertext shader. Setting the mesh property on ShaderEffect - provides more vertices for you to manipulate, enabling many effects. + ShaderEffects can also have a custom vertext shader. Setting the mesh + property on ShaderEffect provides more vertices for you to manipulate, + enabling more effects. \snippet shadereffects/shadereffects.qml vertex */ diff --git a/examples/quick/text/doc/src/text.qdoc b/examples/quick/text/doc/src/text.qdoc index 3a300fbcf3..8ef79ab9d9 100644 --- a/examples/quick/text/doc/src/text.qdoc +++ b/examples/quick/text/doc/src/text.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -27,44 +27,61 @@ /*! \title Qt Quick Examples - Text \example text - \brief This is a collection of QML examples relating to text + \brief This is a collection of QML examples relating to text. \image qml-text-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to text. Each example is - a small QML file, usually containing or emphasizing a particular type or + \e Text is a collection of small QML examples relating to text. Each example + is a small QML file, usually containing or emphasizing a particular type or feature. You can run and observe the behavior of each example. - 'Hello' shows how to change and animate the letter spacing of a Text type. - It uses a sequential animation to first animate the font.letterSpacing property - from 0 to 50 over 3 seconds and then move the text to a random position on screen: + \section1 Hello + + \e Hello shows how to change and animate the letter spacing of a \l Text + type. It uses a sequential animation to first animate the font.letterSpacing + property from \c 0 to \c 50 over three seconds and then move the text to a + random position on screen: \snippet text/fonts/hello.qml letterspacing - 'Fonts' shows different ways of using fonts with the Text type. + \section1 Fonts + + \e Fonts shows different ways of using fonts with the \l Text type. Simply by name, using the font.family property directly: \snippet text/fonts/fonts.qml name - or using a FontLoader type: + + or using a \l FontLoader type: \snippet text/fonts/fonts.qml fontloader + or using a FontLoader and specifying a local font file: \snippet text/fonts/fonts.qml fontloaderlocal + or finally using a FontLoader and specifying a remote font file: \snippet text/fonts/fonts.qml fontloaderremote - 'Available Fonts' shows how to use the QML \l{QtQml::Qt}{Qt} global object and a list view - to display all the fonts available on the system. - The ListView type uses the list of fonts available as its model: + \section1 Available Fonts + + \e{Available Fonts} shows how to use the QML \l{QtQml::Qt}{Qt} global object + and a list view to display all the fonts available on the system. + The \l ListView type uses the list of fonts available as its model: \snippet text/fonts/availableFonts.qml model + Inside the delegate, the font family is set with the modelData: \snippet text/fonts/availableFonts.qml delegate - 'Banner' is a simple example showing how to create a banner using a row of text - types and a NumberAnimation. + \section1 Banner + + \e Banner is a simple example showing how to create a banner using a row of + text types and a \l NumberAnimation. + + \section1 Img tag + + \e{Img tag} shows different ways of displaying images in text objects using + the \c{} tag. - 'Img tag' shows different ways of displaying images in a text types using - the tag. + \section1 Text Layout - 'Text Layout' shows how to create a more complex layout for a text item. - This example lays out the text in two columns using the onLineLaidOut handler - that allows you to position and resize each line: + \e{Text Layout} shows how to create a more complex layout for a text item. + This example lays out the text in two columns using the onLineLaidOut + handler that allows you to position and resize each line: \snippet text/styledtext-layout.qml layout */ diff --git a/examples/quick/threading/doc/src/threading.qdoc b/examples/quick/threading/doc/src/threading.qdoc index 1cced3b9d3..1695a2da6f 100644 --- a/examples/quick/threading/doc/src/threading.qdoc +++ b/examples/quick/threading/doc/src/threading.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -27,23 +27,42 @@ /*! \title Qt Quick Examples - Threading \example threading - \brief This is a collection of QML Multithreading examples. + \brief This is a collection of QML multithreading examples. \image qml-threading-example.png \ingroup qtquickexamples - Threaded ListModel contains a ListView and a ListModel. The ListModel is updated asynchronusly in another thread, and the results propagate back to the main thread. - A timer requests updates from the worker thread periodically: + \e Threading is a collection of QML multithreading examples. + + \include examples-run.qdocinc + + \section1 Threaded ListModel + + \e{Threaded ListModel} contains a \l ListView and a \l ListModel. + The ListModel object is updated asynchronously in another thread, and the + results propagate back to the main thread. A timer requests updates from the + worker thread periodically: \snippet threading/threadedlistmodel/timedisplay.qml 0 - Inside the worker thread, the ListModel is synchronized once the data is finished loading: + Inside the worker thread, the ListModel is synchronized once the data is + finished loading: \snippet threading/threadedlistmodel/dataloader.js 0 - WorkerScript contains an example of using a WorkerScript to offload expensive calculations into another thread. This keeps the UI from being blocked. This example calculates numbers in Pascal's Triangle, and not in a very optimal way, so it will often take several seconds to complete the calculation. By doing this in a WorkerScript in another thread, the UI is not blocked during this time. + \section1 WorkerScript + + \e WorkerScript contains an example of using a \l WorkerScript to offload + expensive calculations into another thread. This keeps the UI from being + blocked. This example calculates numbers in Pascal's Triangle, and not in a + very optimal way, so it will often take several seconds to complete the + calculation. By doing this in a WorkerScript in another thread, the UI is + not blocked during this time. When the UI needs another value, a request is sent to the WorkerScript: \snippet threading/workerscript/workerscript.qml 0 + The workerscript then is free to take a really long time to calculate it: \snippet threading/workerscript/workerscript.js 0 - When it's done, the result returns to the main scene via the WorkerScript type: + + When it's done, the result returns to the main scene via the WorkerScript + type: \snippet threading/workerscript/workerscript.qml 1 */ diff --git a/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc index 09a5f51105..245cd00592 100644 --- a/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc +++ b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -27,29 +27,53 @@ /*! \title Qt Quick Examples - Touch Interaction \example touchinteraction - \brief This is a collection of QML Touch Interaction examples. + \brief A collection of QML Touch Interaction examples. \image qml-touchinteraction-example.png - This is a collection of small QML examples relating to touch interaction methods. + \e{Touch Interaction} is a collection of small QML examples relating to + touch interaction methods. For more information, visit + \l{Important Concepts In Qt Quick - User Input}. + + \include examples-run.qdocinc + + \section1 Multipoint Flames + + \e{Multipoint Flames} demonstrates distinguishing different fingers in a + \l MultiPointTouchArea, by assigning a different colored flame to each touch + point. - Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assigning a different colored flame to each touch point. The MultipointTouchArea sets up multiple touch points: \snippet touchinteraction/multipointtouch/multiflame.qml 0 - The flames are then simply bound to the coordiates of the touch point, and whether it is currently pressed, like so: + + The flames are then simply bound to the coordinates of the touch point, and + whether it is currently pressed, as follows: \snippet touchinteraction/multipointtouch/multiflame.qml 1 - Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game. The interaction with the game - is done through a SpriteGoal that follows the TouchPoint. The TouchPoints added to the MultiPointTouchArea are a component with all - this logic embedded into it: + \section1 Bear-Whack + + \e{Bear-Whack} demonstrates using \l MultiPointTouchArea to add multiple + finger support to a simple game. The interaction with the game + is done through a SpriteGoal that follows the TouchPoint. The TouchPoints + added to the MultiPointTouchArea are a component with the relevant logic + embedded into it: \snippet touchinteraction/multipointtouch/content/AugmentedTouchPoint.qml 0 - Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior. This is easily achieved just by listening to the PinchArea signals and responding - to user input. + \section1 Flick Resize + + \e{Flick Resize} uses a \l PinchArea to implement a \e{pinch-to-resize} + behavior. This is easily achieved by listening to the PinchArea signals and + responding to user input. \snippet touchinteraction/pincharea/flickresize.qml 0 - Flickable is a simple example demonstrating the Flickable type. The object inside the flickable is very big, but the flickable itself is very small: + \section1 Flickable + + \e Flickable is a simple example demonstrating the \l Flickable type. \snippet touchinteraction/flickable/basic-flickable.qml 0 - Corkboards shows a more complex Flickable usecase, with types on the flickable that respond to mouse and keyboard interaction. - This doesn't require special code, the Qt Quick types automatically cooperate with Flickable for accepting the touch events. + \section1 Corkboards + + \e Corkboards shows another use for \l Flickable, with QML types within the + flickable object that respond to mouse and keyboard interaction. This + behavior does not require special code as the Qt Quick types already + cooperate with the Flickable type for accepting touch events. */ diff --git a/examples/quick/views/doc/src/views.qdoc b/examples/quick/views/doc/src/views.qdoc index 2d664c9bd9..d25d9f40c9 100644 --- a/examples/quick/views/doc/src/views.qdoc +++ b/examples/quick/views/doc/src/views.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -28,55 +28,86 @@ /*! \title Qt Quick Examples - Views \example views - \brief This is a collection of QML model/view examples + \brief This is a collection of QML model-view examples. \image qml-modelviews-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the \l {Qt Quick} view types. + \e Views is a collection of small QML examples relating to model and view + functionality. They demonstrate how to show data from a model using the + Qt Quick view types. For more information, visit the + \l{Models and Views in Qt Quick} page. - \section2 GridView and PathView demonstrate usage of these types to display views. + \include examples-run.qdocinc + + \section1 GridView and PathView + + \e GridView and \e PathView demonstrate usage of these types to display + views. \snippet views/gridview/gridview-example.qml 0 - \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView. + \section1 Dynamic List + + \e{Dynamic List} demonstrates animation of runtime additions and removals to + a \l ListView. - The ListView.onAdd signal handler runs an animation when new items are added to the - view, and the ListView.onRemove another when they are removed. + The ListView.onAdd signal handler runs an animation when new items are added + to the view, and the ListView.onRemove another when they are removed. \snippet views/listview/dynamiclist.qml 0 \snippet views/listview/dynamiclist.qml 1 - \section2 Expanding Delegates demonstrates delegates that expand when activated. + \section2 Expanding Delegates - It has a complex delegate the size and appearance of which can change, displacing - other items in the view. + \e{Expanding Delegates} demonstrates delegates that expand when activated. + + It has a complex delegate the size and appearance of which can change, + displacing other items in the view. \snippet views/listview/expandingdelegates.qml 0 \snippet views/listview/expandingdelegates.qml 1 \snippet views/listview/expandingdelegates.qml 2 \snippet views/listview/expandingdelegates.qml 3 - \section2 Highlight demonstrates adding a custom highlight to a ListView. + \section1 Highlight + + \e Highlight demonstrates adding a custom highlight to a \l ListView. \snippet views/listview/highlight.qml 0 - \section2 Highlight Ranges shows the three different highlight range modes of ListView. + \section1 Highlight Ranges + + \e{Highlight Ranges} shows the three different highlight range modes of + ListView. \snippet views/listview/highlightranges.qml 0 \snippet views/listview/highlightranges.qml 1 \snippet views/listview/highlightranges.qml 2 - \section2 Sections demonstrates the various section headers and footers available to ListView. + \section1 Sections + + \e Sections demonstrates the various section headers and footers available + to \l ListView. \snippet views/listview/sections.qml 0 - \section2 Packages demonstrates using Packages to transition delegates between two views. + \section1 Packages + + \e Packages uses the \l Package type to transition delegates between + two views. - It has a Package which defines delegate items for each view and an item that can - be transferred between delegates. + It has a Package object which defines delegate items for each view and an + item that can be transferred between delegates. \snippet views/package/Delegate.qml 0 - A DelegateModel allows the individual views to access their specific items from - the shared package delegate. + A \l DelegateModel allows the individual views to access their specific + items from the shared package delegate. \snippet views/package/view.qml 0 - \section2 ObjectModel uses an ObjectModel for the model instead of a ListModel. + \section1 ObjectModel + + \e ObjectModel uses an ObjectModel for the model instead of a \l ListModel. \snippet views/objectmodel/objectmodel.qml 0 + + \section1 Display Margins + + \e{Display Margins} uses delegates to display items and implements a simple + header and footer components. */ diff --git a/examples/quick/window/doc/src/window.qdoc b/examples/quick/window/doc/src/window.qdoc index 07d2f115c1..7725f39a46 100644 --- a/examples/quick/window/doc/src/window.qdoc +++ b/examples/quick/window/doc/src/window.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Copyright (C) 2014 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. @@ -31,22 +31,35 @@ \image qml-window-example.png \ingroup qtquickexamples - This example shows you how to create a Window in QML, how to control its - \l {QQuickWindow::visibility} {visibility}, how to present a splash screen - during application startup, and how to access the properties of the - \l Screen. It also demonstrates how to package QML into - \l {The Qt Resource System} {resources} and provide an - \l {Setting the Application Icon} {icon} to create a standalone QML desktop application. + \e{Window and Screen} shows how to: + + \list + \li create a window in QML + \li control its \l {QQuickWindow::visibility} {visibility} + \li present a splash screen during application startup + \li access the properties of the \l Screen + \endlist + + It also demonstrates how to package QML into \l {The Qt Resource System} + {resources} and provide an \l {Setting the Application Icon} {icon} to + create a standalone QML desktop application. + + \include examples-run.qdocinc + + \section1 Window Implementation + + A splash screen can be created with the \l {Qt::SplashScreen} + {Qt.SplashScreen} flag, and should be \l {Qt::ApplicationModal} + {ApplicationModal} to prevent interaction with the main window. If the + splash window is also transparent, and showing a partially transparent + image, then it will look like a shaped window. - A splash screen can be created with the \l {Qt::SplashScreen} {Qt.SplashScreen} flag, - and should be \l {Qt::ApplicationModal} {ApplicationModal} to prevent interaction - with the main window. If the splash window is also transparent, and showing a - partially transparent image, then it will look like a shaped window. \snippet window/Splash.qml splash-properties In this example a \l Timer will automatically dismiss the splash screen, but in a real application you might want to connect to a signal from the application logic to hide the splash when initialization is complete. + \snippet window/Splash.qml timer The main window in this example is the control window, with some buttons @@ -54,18 +67,22 @@ window. Each checkbox has a binding to the property whose state it is displaying, and also an onClicked handler to change the state. This is the typical pattern to create a two-way binding while avoiding binding loops. + \snippet window/window.qml windowedCheckbox - The \l Screen has several properties which are generally useful to applications - which need to rotate some content when the screen orientation changes, to position - windows on the screen or to convert real units to logical pixel units. ScreenInfo.qml - (which is displayed inline in window.qml, or can be run by itself with qmlscene) - simply displays the property values, while the splash screen uses them to - center the window on the screen. + \l Screen has several properties which are generally useful to + applications which need to rotate some content when the screen orientation + changes, to position windows on the screen or to convert real units to + logical pixel units. ScreenInfo.qml (which is displayed inline in + window.qml, or can be run by itself with qmlscene) simply displays the + property values, while the splash screen uses them to center the window on + the screen. + \snippet window/Splash.qml screen-properties - If a Window is nested inside an \l Item or another Window, the inner window - becomes "transient for" the outer one (see \l Window for more explanation). - But if you want to create multiple top-level windows as unrelated peers, you - can create them inside a non-visual \l QtObject root item, as this example does. + If a \l Window is nested inside an \l Item or another Window, the inner + window becomes \e{transient for} the outer one (see \l Window for more + explanation). But if you want to create multiple top-level windows as + unrelated peers, you can create them inside a non-visual \l QtObject root + item, as this example does. */ -- cgit v1.2.3