From 5c88efc06d152ac675b4369d854699b137631fa0 Mon Sep 17 00:00:00 2001 From: Jerome Pasion Date: Wed, 8 Aug 2012 12:18:55 +0200 Subject: Examples: Moved example documentation. -inline \example pages into separate .qdoc files -fixed broken links to paths -moved ui-components under examples/quick Change-Id: I6e009b9213be3e1f4bed51bdbeb76a7a2142c80b Reviewed-by: Martin Smith --- examples/demos/calqlatr/calqlatr.qdoc | 38 - examples/demos/calqlatr/doc/src/calqlatr.qdoc | 38 + examples/demos/clocks/clocks.qdoc | 37 - examples/demos/maroon/maroon.qdoc | 43 - examples/demos/samegame/samegame.qdoc | 38 - examples/demos/stocqt/stocqt.qdoc | 39 - examples/demos/tweetsearch/tweetsearch.qdoc | 51 -- examples/localstorage/doc/src/localstorage.qdoc | 38 + examples/localstorage/localstorage.qml | 54 ++ .../localstorage/localstorage/localstorage.qml | 14 +- examples/particles/affectors/affectors.qml | 86 -- .../particles/affectors/doc/src/affectors.qdoc | 113 +++ .../particles/customparticle/customparticle.qml | 28 - .../customparticle/doc/src/customparticle.qdoc | 54 ++ examples/particles/emitters/doc/src/emitters.qdoc | 60 ++ examples/particles/emitters/emitters.qml | 35 - .../imageparticle/doc/src/imageparticle.qdoc | 62 ++ examples/particles/imageparticle/imageparticle.qml | 36 - examples/particles/system/doc/src/system.qdoc | 59 ++ examples/particles/system/system.qml | 32 - .../qml/dynamicscene/doc/src/dynamicscene.qdoc | 34 + examples/qml/dynamicscene/dynamicscene.qml | 7 - examples/qml/i18n/doc/src/i18n.qdoc | 48 ++ examples/qml/i18n/i18n.qml | 24 - .../qml/xmlhttprequest/doc/src/xmlhttprequest.qdoc | 38 + examples/qml/xmlhttprequest/xmlhttprequest.qml | 14 +- examples/quick/accessibility/accessibility.qml | 13 - .../quick/accessibility/doc/src/accessibility.qdoc | 40 + examples/quick/animation/animation.qml | 45 -- examples/quick/animation/doc/src/animation.qdoc | 71 ++ examples/quick/canvas/canvas.qml | 31 - examples/quick/canvas/doc/src/canvas.qdoc | 58 ++ .../quick/customitems/painteditem/textballoons.qml | 7 +- examples/quick/doc/customgeometry.qdoc | 201 ----- .../quick/draganddrop/doc/src/draganddrop.qdoc | 57 ++ examples/quick/draganddrop/draganddrop.qml | 31 - .../quick/imageelements/doc/src/imageelements.qdoc | 59 ++ examples/quick/imageelements/imageelements.qml | 33 - .../keyinteraction/doc/src/keyinteraction.qdoc | 34 + examples/quick/keyinteraction/keyinteraction.qml | 9 - examples/quick/modelviews/doc/src/modelviews.qdoc | 82 ++ examples/quick/modelviews/modelviews.qml | 55 -- examples/quick/mousearea/doc/src/mousearea.qdoc | 46 ++ examples/quick/mousearea/mousearea.qml | 20 - .../textballoons/doc/src/textballoons.qdoc | 32 + .../quick/positioners/doc/src/positioners.qdoc | 52 ++ examples/quick/positioners/positioners.qml | 26 - .../quick/righttoleft/doc/src/righttoleft.qdoc | 38 + examples/quick/righttoleft/righttoleft.qml | 13 - .../customgeometry/doc/src/customgeometry.qdoc | 201 +++++ .../quick/shadereffects/doc/src/shadereffects.qdoc | 51 ++ examples/quick/shadereffects/shadereffects.qml | 24 - examples/quick/text/doc/src/text.qdoc | 69 ++ examples/quick/text/text.qml | 43 - examples/quick/threading/doc/src/threading.qdoc | 48 ++ examples/quick/threading/threading.qml | 23 - .../touchinteraction/doc/src/touchinteraction.qdoc | 56 ++ .../quick/touchinteraction/touchinteraction.qml | 30 - .../ui-components/dialcontrol/content/Dial.qml | 86 ++ .../dialcontrol/content/QuitButton.qml | 52 ++ .../dialcontrol/content/background.png | Bin 0 -> 35876 bytes .../ui-components/dialcontrol/content/needle.png | Bin 0 -> 342 bytes .../dialcontrol/content/needle_shadow.png | Bin 0 -> 632 bytes .../ui-components/dialcontrol/content/overlay.png | Bin 0 -> 3564 bytes .../ui-components/dialcontrol/content/quit.png | Bin 0 -> 583 bytes .../ui-components/dialcontrol/dialcontrol.qml | 100 +++ .../ui-components/flipable/content/5_heart.png | Bin 0 -> 3872 bytes .../ui-components/flipable/content/9_club.png | Bin 0 -> 6135 bytes .../quick/ui-components/flipable/content/Card.qml | 80 ++ .../quick/ui-components/flipable/content/back.png | Bin 0 -> 1418 bytes examples/quick/ui-components/flipable/flipable.qml | 55 ++ .../progressbar/content/ProgressBar.qml | 83 ++ .../progressbar/content/background.png | Bin 0 -> 426 bytes examples/quick/ui-components/progressbar/main.qml | 73 ++ .../quick/ui-components/scrollbar/ScrollBar.qml | 74 ++ examples/quick/ui-components/scrollbar/main.qml | 93 +++ .../ui-components/scrollbar/pics/niagara_falls.jpg | Bin 0 -> 142510 bytes .../ui-components/scrollbar/scrollbar.qmlproject | 16 + .../quick/ui-components/searchbox/SearchBox.qml | 109 +++ .../quick/ui-components/searchbox/images/clear.png | Bin 0 -> 429 bytes .../searchbox/images/lineedit-bg-focus.png | Bin 0 -> 526 bytes .../ui-components/searchbox/images/lineedit-bg.png | Bin 0 -> 426 bytes examples/quick/ui-components/searchbox/main.qml | 60 ++ .../ui-components/searchbox/searchbox.qmlproject | 16 + .../ui-components/slideswitch/content/Switch.qml | 117 +++ .../slideswitch/content/background.png | Bin 0 -> 3091 bytes .../slideswitch/content/background.svg | 23 + .../ui-components/slideswitch/content/knob.png | Bin 0 -> 3101 bytes .../ui-components/slideswitch/content/knob.svg | 867 +++++++++++++++++++++ .../ui-components/slideswitch/slideswitch.qml | 51 ++ .../ui-components/spinner/content/Spinner.qml | 70 ++ .../ui-components/spinner/content/spinner-bg.png | Bin 0 -> 345 bytes .../spinner/content/spinner-select.png | Bin 0 -> 320 bytes examples/quick/ui-components/spinner/main.qml | 61 ++ .../quick/ui-components/spinner/spinner.qmlproject | 16 + .../quick/ui-components/tabwidget/TabWidget.qml | 102 +++ examples/quick/ui-components/tabwidget/main.qml | 99 +++ examples/quick/ui-components/tabwidget/tab.png | Bin 0 -> 507 bytes .../ui-components/tabwidget/tabwidget.qmlproject | 16 + 99 files changed, 3914 insertions(+), 1123 deletions(-) delete mode 100644 examples/demos/calqlatr/calqlatr.qdoc create mode 100644 examples/demos/calqlatr/doc/src/calqlatr.qdoc delete mode 100644 examples/demos/clocks/clocks.qdoc delete mode 100644 examples/demos/maroon/maroon.qdoc delete mode 100644 examples/demos/samegame/samegame.qdoc delete mode 100644 examples/demos/stocqt/stocqt.qdoc delete mode 100644 examples/demos/tweetsearch/tweetsearch.qdoc create mode 100644 examples/localstorage/doc/src/localstorage.qdoc create mode 100644 examples/localstorage/localstorage.qml create mode 100644 examples/particles/affectors/doc/src/affectors.qdoc create mode 100644 examples/particles/customparticle/doc/src/customparticle.qdoc create mode 100644 examples/particles/emitters/doc/src/emitters.qdoc create mode 100644 examples/particles/imageparticle/doc/src/imageparticle.qdoc create mode 100644 examples/particles/system/doc/src/system.qdoc create mode 100644 examples/qml/dynamicscene/doc/src/dynamicscene.qdoc create mode 100644 examples/qml/i18n/doc/src/i18n.qdoc create mode 100644 examples/qml/xmlhttprequest/doc/src/xmlhttprequest.qdoc create mode 100644 examples/quick/accessibility/doc/src/accessibility.qdoc create mode 100644 examples/quick/animation/doc/src/animation.qdoc create mode 100644 examples/quick/canvas/doc/src/canvas.qdoc delete mode 100644 examples/quick/doc/customgeometry.qdoc create mode 100644 examples/quick/draganddrop/doc/src/draganddrop.qdoc create mode 100644 examples/quick/imageelements/doc/src/imageelements.qdoc create mode 100644 examples/quick/keyinteraction/doc/src/keyinteraction.qdoc create mode 100644 examples/quick/modelviews/doc/src/modelviews.qdoc create mode 100644 examples/quick/mousearea/doc/src/mousearea.qdoc create mode 100644 examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc create mode 100644 examples/quick/positioners/doc/src/positioners.qdoc create mode 100644 examples/quick/righttoleft/doc/src/righttoleft.qdoc create mode 100644 examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc create mode 100644 examples/quick/shadereffects/doc/src/shadereffects.qdoc create mode 100644 examples/quick/text/doc/src/text.qdoc create mode 100644 examples/quick/threading/doc/src/threading.qdoc create mode 100644 examples/quick/touchinteraction/doc/src/touchinteraction.qdoc create mode 100644 examples/quick/ui-components/dialcontrol/content/Dial.qml create mode 100644 examples/quick/ui-components/dialcontrol/content/QuitButton.qml create mode 100644 examples/quick/ui-components/dialcontrol/content/background.png create mode 100644 examples/quick/ui-components/dialcontrol/content/needle.png create mode 100644 examples/quick/ui-components/dialcontrol/content/needle_shadow.png create mode 100644 examples/quick/ui-components/dialcontrol/content/overlay.png create mode 100644 examples/quick/ui-components/dialcontrol/content/quit.png create mode 100644 examples/quick/ui-components/dialcontrol/dialcontrol.qml create mode 100644 examples/quick/ui-components/flipable/content/5_heart.png create mode 100644 examples/quick/ui-components/flipable/content/9_club.png create mode 100644 examples/quick/ui-components/flipable/content/Card.qml create mode 100644 examples/quick/ui-components/flipable/content/back.png create mode 100644 examples/quick/ui-components/flipable/flipable.qml create mode 100644 examples/quick/ui-components/progressbar/content/ProgressBar.qml create mode 100644 examples/quick/ui-components/progressbar/content/background.png create mode 100644 examples/quick/ui-components/progressbar/main.qml create mode 100644 examples/quick/ui-components/scrollbar/ScrollBar.qml create mode 100644 examples/quick/ui-components/scrollbar/main.qml create mode 100644 examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg create mode 100644 examples/quick/ui-components/scrollbar/scrollbar.qmlproject create mode 100644 examples/quick/ui-components/searchbox/SearchBox.qml create mode 100644 examples/quick/ui-components/searchbox/images/clear.png create mode 100644 examples/quick/ui-components/searchbox/images/lineedit-bg-focus.png create mode 100644 examples/quick/ui-components/searchbox/images/lineedit-bg.png create mode 100644 examples/quick/ui-components/searchbox/main.qml create mode 100644 examples/quick/ui-components/searchbox/searchbox.qmlproject create mode 100644 examples/quick/ui-components/slideswitch/content/Switch.qml create mode 100644 examples/quick/ui-components/slideswitch/content/background.png create mode 100644 examples/quick/ui-components/slideswitch/content/background.svg create mode 100644 examples/quick/ui-components/slideswitch/content/knob.png create mode 100644 examples/quick/ui-components/slideswitch/content/knob.svg create mode 100644 examples/quick/ui-components/slideswitch/slideswitch.qml create mode 100644 examples/quick/ui-components/spinner/content/Spinner.qml create mode 100644 examples/quick/ui-components/spinner/content/spinner-bg.png create mode 100644 examples/quick/ui-components/spinner/content/spinner-select.png create mode 100644 examples/quick/ui-components/spinner/main.qml create mode 100644 examples/quick/ui-components/spinner/spinner.qmlproject create mode 100644 examples/quick/ui-components/tabwidget/TabWidget.qml create mode 100644 examples/quick/ui-components/tabwidget/main.qml create mode 100644 examples/quick/ui-components/tabwidget/tab.png create mode 100644 examples/quick/ui-components/tabwidget/tabwidget.qmlproject diff --git a/examples/demos/calqlatr/calqlatr.qdoc b/examples/demos/calqlatr/calqlatr.qdoc deleted file mode 100644 index 3e0e1f1eb0..0000000000 --- a/examples/demos/calqlatr/calqlatr.qdoc +++ /dev/null @@ -1,38 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** GNU Free Documentation License -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. -** -** Other Usage -** Alternatively, this file may be used in accordance with the terms -** and conditions contained in a signed written agreement between you -** and Nokia. -** -** -** -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \title QML Demo - Calqlatr - \example demos/calqlatr - \brief This is an example calculator written in QML. - \image qml-calqlatr-demo-small.png - - This demo implements a simple calculator app, designed for portrait devices. - - This app has the logic implemented in Javascipt and the appearance implemented in QML. -*/ - diff --git a/examples/demos/calqlatr/doc/src/calqlatr.qdoc b/examples/demos/calqlatr/doc/src/calqlatr.qdoc new file mode 100644 index 0000000000..3e0e1f1eb0 --- /dev/null +++ b/examples/demos/calqlatr/doc/src/calqlatr.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QML Demo - Calqlatr + \example demos/calqlatr + \brief This is an example calculator written in QML. + \image qml-calqlatr-demo-small.png + + This demo implements a simple calculator app, designed for portrait devices. + + This app has the logic implemented in Javascipt and the appearance implemented in QML. +*/ + diff --git a/examples/demos/clocks/clocks.qdoc b/examples/demos/clocks/clocks.qdoc deleted file mode 100644 index 54479bae17..0000000000 --- a/examples/demos/clocks/clocks.qdoc +++ /dev/null @@ -1,37 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** GNU Free Documentation License -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. -** -** Other Usage -** Alternatively, this file may be used in accordance with the terms -** and conditions contained in a signed written agreement between you -** and Nokia. -** -** -** -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \title QML Demo - Clocks - \example demos/clocks - \brief This example demonstrates creating components and using them multiple times. - \image qml-clocks-example.png - - This demo give a simple world clock application, containing multiple clocks from around the world. - - In doing this, it reuses a signle Clock component with some slight changes to the parameters. -*/ diff --git a/examples/demos/maroon/maroon.qdoc b/examples/demos/maroon/maroon.qdoc deleted file mode 100644 index 1b3003304e..0000000000 --- a/examples/demos/maroon/maroon.qdoc +++ /dev/null @@ -1,43 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** GNU Free Documentation License -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. -** -** Other Usage -** Alternatively, this file may be used in accordance with the terms -** and conditions contained in a signed written agreement between you -** and Nokia. -** -** -** -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \title QML Demos - Maroon in Trouble - \example demos/maroon - \brief This is an example game written in QML. - \image qml-maroon-demo-icon.png - - The Maroon in Trouble game demonstrates some of the UI effects that QtQuick provides to - make UIs more visually rich. It take a simple tower defense game and then jazzes it up with - animated sprites, particle effects, and sound effects (if the QtMultimedia module is available). - - The game also demonstrates the extensibility of QML, by making it easy to add more types of tower - for the player to build. Advanced QML users should be able to play around with adding additional - types of towers or mobs. - -*/ - diff --git a/examples/demos/samegame/samegame.qdoc b/examples/demos/samegame/samegame.qdoc deleted file mode 100644 index 7a311600c6..0000000000 --- a/examples/demos/samegame/samegame.qdoc +++ /dev/null @@ -1,38 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** GNU Free Documentation License -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. -** -** Other Usage -** Alternatively, this file may be used in accordance with the terms -** and conditions contained in a signed written agreement between you -** and Nokia. -** -** -** -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \title QML Demo - SameGame - \example demos/samegame - \brief This is an example game written in QML. - \image qml-samegame-demo-small.png - - The SameGame demo implements a simple game in QML. It is written for desktop and portrait devices. - - This game has the logic implemented in Javascipt and the appearance implemented in QML. -*/ - diff --git a/examples/demos/stocqt/stocqt.qdoc b/examples/demos/stocqt/stocqt.qdoc deleted file mode 100644 index eb03c073de..0000000000 --- a/examples/demos/stocqt/stocqt.qdoc +++ /dev/null @@ -1,39 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** GNU Free Documentation License -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. -** -** Other Usage -** Alternatively, this file may be used in accordance with the terms -** and conditions contained in a signed written agreement between you -** and Nokia. -** -** -** -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \title QML Demo - StocQt - \example demos/StocQt - \brief This is an example stock chart viewer written in QML. - \image qml-stocqt-demo-small.png - - This demo implements a simple stock chart viewer, designed for portrait devices. - - This app requests online data, which it processes in javascript. It then paints a chart depiction of the data using - the Canvas imperative drawing API. -*/ - diff --git a/examples/demos/tweetsearch/tweetsearch.qdoc b/examples/demos/tweetsearch/tweetsearch.qdoc deleted file mode 100644 index 1cff976156..0000000000 --- a/examples/demos/tweetsearch/tweetsearch.qdoc +++ /dev/null @@ -1,51 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the examples of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:BSD$ -** You may use this file under the terms of the BSD license as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor -** the names of its contributors may be used to endorse or promote -** products derived from this software without specific prior written -** permission. -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \title QML Demo - Tweet Search - \example demos/tweetsearch - \brief This is simple twitter application written in QML. - - The Tweet Search demo shows how to write a simple twitter application. - It uses the twitter search API to search for tweets with specific words or hashtag - or from a specific user. The tweets are presented in a list that can be pulled to - be updated. -*/ - diff --git a/examples/localstorage/doc/src/localstorage.qdoc b/examples/localstorage/doc/src/localstorage.qdoc new file mode 100644 index 0000000000..3fdf233931 --- /dev/null +++ b/examples/localstorage/doc/src/localstorage.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Local Storage + \example localstorage + \brief This is 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. + + Hello World demos creating a simple SQL table and how to do inserting/selecting operations. + +*/ + diff --git a/examples/localstorage/localstorage.qml b/examples/localstorage/localstorage.qml new file mode 100644 index 0000000000..a4d6d85376 --- /dev/null +++ b/examples/localstorage/localstorage.qml @@ -0,0 +1,54 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import "../shared" as Examples + +Item { + height: 480 + width: 320 + Examples.LauncherList { + id: ll + anchors.fill: parent + Component.onCompleted: { + addExample("Hello World", "Simple SQL operations with local storage API", Qt.resolvedUrl("hello.qml")); + } + } +} diff --git a/examples/localstorage/localstorage/localstorage.qml b/examples/localstorage/localstorage/localstorage.qml index f492b65e0b..f8ef50a776 100644 --- a/examples/localstorage/localstorage/localstorage.qml +++ b/examples/localstorage/localstorage/localstorage.qml @@ -1,4 +1,4 @@ -/**************************************************************************** + /**************************************************************************** ** ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). ** Contact: http://www.qt-project.org/ @@ -41,18 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Local Storage - \example localstorage - \brief This is 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. - - Hello World demos creating a simple SQL table and how to do inserting/selecting operations. - -*/ - Item { height: 480 width: 320 diff --git a/examples/particles/affectors/affectors.qml b/examples/particles/affectors/affectors.qml index 08f1dfe1a0..5e031dd971 100644 --- a/examples/particles/affectors/affectors.qml +++ b/examples/particles/affectors/affectors.qml @@ -41,92 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick.Particles Examples - Affectors - \example particles/affectors - \brief This is a collection of examples using Affectors in the QML particle system. - \image qml-affectors-example.png - - This is a collection of small QML examples relating to using Affectors in the particle system. - Each example is a small QML file emphasizing a particular element or feature. - - Age demonstrates using an Age affector to prematurely end the lives of particles. - \snippet examples/particles/affectors/content/age.qml 0 - - As you move the affector around the screen, the particles inside it - (which haven't already been affected) jump to a period near the end - of their life. This gives them a short period to finish fading out, - but changing lifeLeft to 0 (the default), would cause them to reach - the end of their life instantly. - - Attractor demonstrates using an Attractor affector to simulate a black hole - \snippet examples/particles/affectors/content/attractor.qml 0 - - All particles in the scene, including the rocket ship's exhaust and pellets, are pulled - towards the black hole. This effect is stronger closer to the black hole, so the - asteroids near the top of the screen are barely affected at all, while the ones - towards the middle sometimes curve drastically. To complete the effect, an Age - affector covers the black hole to destroy particles which come in contact with it. - - Custom Affector manipulates the properties of the particles directly in javascript. - One Affector is used to make the leaves rock back and forth as they fall, looking more - leaf-like than just spinning in circles: - \snippet examples/particles/affectors/content/customaffector.qml 0 - Another is used to provide a slightly varying friction to the leaves as they 'land', - to look more natural: - \snippet examples/particles/affectors/content/customaffector.qml 1 - - Friction is similar to the falling leaves in the custom affector, except that it uses a - flat friction the whole way down instead of custom affectors. - \snippet examples/particles/affectors/content/friction.qml 0 - - Gravity is a convenience affector for applying a constant acceleration to particles inside it - \snippet examples/particles/affectors/content/gravity.qml 0 - - GroupGoal sets up two particle groups for flaming and non-flaming balls, and gives you various - ways to transition between them. - \snippet examples/particles/affectors/content/groupgoal.qml unlit - The non-flaming balls have a one in a hundred chance of lighting on their own each second, but they also - have a GroupGoal set on the whole group. This affector affects all particles of the unlit group, when colliding - with particles in the lit group, and cause them to move to the lighting group. - \snippet examples/particles/affectors/content/groupgoal.qml lighting - lighting is an intermediate group so that the glow builds up and the transition is less jarring. So it automatically - moves into the lit group after 100ms. - \snippet examples/particles/affectors/content/groupgoal.qml lit - The lit group also has TrailEmitters on it for additional fire and smoke, but does not transition anywhere. - There are two more GroupGoal elements that allow particles in the unlit group to transition to the lighting group - (and then to the lit group). - \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-pilot - The first is just an area bound to the location of an image of a pilot flame. When unlit balls pass through the flame, - they go straight to lit because the pilot flame is so hot. - \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-ma - The second is bound to the location of the last pointer interaction, so that touching or clicking on unlit balls (which - is hard due to their constant movement) causes them to move to the lighting group. - - Move shows some simple effects you can get by altering trajectory midway. - The red particles have an affector that affects their position, jumping them forwards by 120px. - \snippet examples/particles/affectors/content/move.qml A - The green particles have an affector that affects their velocity, but with some angle variation. By adding some random direction - velocity to their existing forwards velocity, they begin to spray off in a cone. - \snippet examples/particles/affectors/content/move.qml B - The blue particles have an affector that affects their acceleration, and because it sets relative to false this resets the acceleration instead of - adding to it. Once the blue particles reach the affector, their horizontal velocity stops increasing as their vertical velocity decreases. - \snippet examples/particles/affectors/content/move.qml C - - SpriteGoal has an affector which interacts with the sprite engine of particles, if they are being drawn as sprites by ImageParticle. - \snippet examples/particles/affectors/content/spritegoal.qml 0 - The SpriteGoal follows the image of the rocket ship on screen, and when it interacts with particles drawn by ImageParticle as sprites, - it instructs them to move immediately to the "explode" state, which in this case is the animation of the asteroid breaking into many pieces. - - Turbulence has a flame with smoke, and both sets of particles being affected by a Turbulence affector. This gives a faint wind effect. - \snippet examples/particles/affectors/content/turbulence.qml 0 - To make the wind change direction, subsitute a black and white noise image in the noiseSource parameter (it currently uses a default noise source). - - Wander uses a Wander affector to add some horizontal drift to snowflakes as they fall down. - \snippet examples/particles/affectors/content/wander.qml 0 - There are different movements given by applying the Wander to different attributes of the trajectory, so the example makes it easy to play around and see the difference. -*/ - Item { height: 480 width: 320 diff --git a/examples/particles/affectors/doc/src/affectors.qdoc b/examples/particles/affectors/doc/src/affectors.qdoc new file mode 100644 index 0000000000..9f653fc1f1 --- /dev/null +++ b/examples/particles/affectors/doc/src/affectors.qdoc @@ -0,0 +1,113 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick.Particles Examples - Affectors + \example particles/affectors + \brief This is a collection of examples using Affectors in the QML particle system. + \image qml-affectors-example.png + + This is a collection of small QML examples relating to using Affectors in the particle system. + Each example is a small QML file emphasizing a particular element or feature. + + Age demonstrates using an Age affector to prematurely end the lives of particles. + \snippet examples/particles/affectors/content/age.qml 0 + + As you move the affector around the screen, the particles inside it + (which haven't already been affected) jump to a period near the end + of their life. This gives them a short period to finish fading out, + but changing lifeLeft to 0 (the default), would cause them to reach + the end of their life instantly. + + Attractor demonstrates using an Attractor affector to simulate a black hole + \snippet examples/particles/affectors/content/attractor.qml 0 + + All particles in the scene, including the rocket ship's exhaust and pellets, are pulled + towards the black hole. This effect is stronger closer to the black hole, so the + asteroids near the top of the screen are barely affected at all, while the ones + towards the middle sometimes curve drastically. To complete the effect, an Age + affector covers the black hole to destroy particles which come in contact with it. + + Custom Affector manipulates the properties of the particles directly in javascript. + One Affector is used to make the leaves rock back and forth as they fall, looking more + leaf-like than just spinning in circles: + \snippet examples/particles/affectors/content/customaffector.qml 0 + Another is used to provide a slightly varying friction to the leaves as they 'land', + to look more natural: + \snippet examples/particles/affectors/content/customaffector.qml 1 + + Friction is similar to the falling leaves in the custom affector, except that it uses a + flat friction the whole way down instead of custom affectors. + \snippet examples/particles/affectors/content/friction.qml 0 + + Gravity is a convenience affector for applying a constant acceleration to particles inside it + \snippet examples/particles/affectors/content/gravity.qml 0 + + GroupGoal sets up two particle groups for flaming and non-flaming balls, and gives you various + ways to transition between them. + \snippet examples/particles/affectors/content/groupgoal.qml unlit + The non-flaming balls have a one in a hundred chance of lighting on their own each second, but they also + have a GroupGoal set on the whole group. This affector affects all particles of the unlit group, when colliding + with particles in the lit group, and cause them to move to the lighting group. + \snippet examples/particles/affectors/content/groupgoal.qml lighting + lighting is an intermediate group so that the glow builds up and the transition is less jarring. So it automatically + moves into the lit group after 100ms. + \snippet examples/particles/affectors/content/groupgoal.qml lit + The lit group also has TrailEmitters on it for additional fire and smoke, but does not transition anywhere. + There are two more GroupGoal elements that allow particles in the unlit group to transition to the lighting group + (and then to the lit group). + \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-pilot + The first is just an area bound to the location of an image of a pilot flame. When unlit balls pass through the flame, + they go straight to lit because the pilot flame is so hot. + \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-ma + The second is bound to the location of the last pointer interaction, so that touching or clicking on unlit balls (which + is hard due to their constant movement) causes them to move to the lighting group. + + Move shows some simple effects you can get by altering trajectory midway. + The red particles have an affector that affects their position, jumping them forwards by 120px. + \snippet examples/particles/affectors/content/move.qml A + The green particles have an affector that affects their velocity, but with some angle variation. By adding some random direction + velocity to their existing forwards velocity, they begin to spray off in a cone. + \snippet examples/particles/affectors/content/move.qml B + The blue particles have an affector that affects their acceleration, and because it sets relative to false this resets the acceleration instead of + adding to it. Once the blue particles reach the affector, their horizontal velocity stops increasing as their vertical velocity decreases. + \snippet examples/particles/affectors/content/move.qml C + + SpriteGoal has an affector which interacts with the sprite engine of particles, if they are being drawn as sprites by ImageParticle. + \snippet examples/particles/affectors/content/spritegoal.qml 0 + The SpriteGoal follows the image of the rocket ship on screen, and when it interacts with particles drawn by ImageParticle as sprites, + it instructs them to move immediately to the "explode" state, which in this case is the animation of the asteroid breaking into many pieces. + + Turbulence has a flame with smoke, and both sets of particles being affected by a Turbulence affector. This gives a faint wind effect. + \snippet examples/particles/affectors/content/turbulence.qml 0 + To make the wind change direction, subsitute a black and white noise image in the noiseSource parameter (it currently uses a default noise source). + + Wander uses a Wander affector to add some horizontal drift to snowflakes as they fall down. + \snippet examples/particles/affectors/content/wander.qml 0 + There are different movements given by applying the Wander to different attributes of the trajectory, so the example makes it easy to play around and see the difference. +*/ + diff --git a/examples/particles/customparticle/customparticle.qml b/examples/particles/customparticle/customparticle.qml index eb4f772e97..694dfb0fc6 100644 --- a/examples/particles/customparticle/customparticle.qml +++ b/examples/particles/customparticle/customparticle.qml @@ -41,34 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick.Particles Examples - CustomParticle - \example particles/customparticle - \brief This is a collection of examples using CustomParticle in the QML particle system. - \image qml-customparticle-example.png - - This is a collection of small QML examples relating to using CustomParticle in the particle system. - Each example is a small QML file emphasizing a different way to use CustomParticle. - - Blur Particles adds a blur effect to the particles, which increases over the particle's life time. - It uses a custom vertex shader: - \snippet examples/particles/customparticle/content/blurparticles.qml vertex - to propagate life time simulation to a custom fragment shader: - \snippet examples/particles/customparticle/content/blurparticles.qml fragment - which has access to both the normal image sampler and a blurred sampler, the image plus a ShaderEffect. - - Fragment Shader just uses the particle system as a vertex delivery system. - \snippet examples/particles/customparticle/content/fragmentshader.qml 0 - - Image Colors uses CustomParticle to assign colors to particles based on their location in a picture. - The vertex shader, - \snippet examples/particles/customparticle/content/imagecolors.qml vertex - passes along the starting position for each vertex to the fragment shader, - \snippet examples/particles/customparticle/content/imagecolors.qml fragment - which uses it to determine the color for that particle. - -*/ - Item { height: 480 width: 320 diff --git a/examples/particles/customparticle/doc/src/customparticle.qdoc b/examples/particles/customparticle/doc/src/customparticle.qdoc new file mode 100644 index 0000000000..8faaf4b8c7 --- /dev/null +++ b/examples/particles/customparticle/doc/src/customparticle.qdoc @@ -0,0 +1,54 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick.Particles Examples - CustomParticle + \example particles/customparticle + \brief This is a collection of examples using CustomParticle in the QML particle system. + \image qml-customparticle-example.png + + This is a collection of small QML examples relating to using CustomParticle in the particle system. + Each example is a small QML file emphasizing a different way to use CustomParticle. + + Blur Particles adds a blur effect to the particles, which increases over the particle's life time. + It uses a custom vertex shader: + \snippet examples/particles/customparticle/content/blurparticles.qml vertex + to propagate life time simulation to a custom fragement shader: + \snippet examples/particles/customparticle/content/blurparticles.qml fragment + which has access to both the normal image sampler and a blurred sampler, the image plus a ShaderEffect. + + Fragment Shader just uses the particle system as a vertex delivery system. + \snippet examples/particles/customparticle/content/fragmentshader.qml 0 + + Image Colors uses CustomParticle to assign colors to particles based on their location in a picture. + The vertex shader, + \snippet examples/particles/customparticle/content/imagecolors.qml vertex + passes along the starting position for each vertex to the fragment shader, + \snippet examples/particles/customparticle/content/imagecolors.qml fragment + which uses it to determine the color for that particle. + +*/ diff --git a/examples/particles/emitters/doc/src/emitters.qdoc b/examples/particles/emitters/doc/src/emitters.qdoc new file mode 100644 index 0000000000..f6a9fd3db4 --- /dev/null +++ b/examples/particles/emitters/doc/src/emitters.qdoc @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick.Particles Examples - Emitters + \example particles/emitters + \brief This is a collection of examples using Emitters in the QML particle system. + \image qml-emitters-example.png + + This is a collection of small QML examples relating to using Emitters in the particle system. + Each example is a small QML file emphasizing a particular element or feature. + + Velocity from motion gives the effect of strong particle motion through primarily moving the emitters: + \snippet examples/particles/emitters/content/velocityfrommotion.qml 0 + + Burst and pulse calls the burst and pulse methods on two idential emitters. + \snippet examples/particles/emitters/content/burstandpulse.qml 0 + Note how burst takes an argument of number of particles to emit, and pulse takes an argument of number of milliseconds to emit for. + This gives a slightly different behaviour, which is easy to see in this example. + + Custom Emitter connects to the emitParticles signal to set arbitrary values on particle data as they're emitted; + \snippet examples/particles/emitters/content/customemitter.qml 0 + This is used to emit curving particles in six rotating spokes. + + Emit mask sets an image mask on the Emitter, to emit out of an arbitrary shape. + \snippet examples/particles/emitters/content/emitmask.qml 0 + + Maximum emitted emits no more than a certain number of particles at a time. This example makes it easy to see what happens when the limit is reached. + + Shape and Direction emits particles out of an unfilled Ellipse shape, using a TargetDirection + \snippet examples/particles/emitters/content/shapeanddirection.qml 0 + This sends the particles towards the center of the ellipse with proportional speed, keeping the ellipse outline as they move to the center. + + TrailEmitter uses that element to add smoke particles to trail the fire particles in the scene. + \snippet examples/particles/emitters/content/trailemitter.qml 0 + +*/ diff --git a/examples/particles/emitters/emitters.qml b/examples/particles/emitters/emitters.qml index d6537569cf..75e77e5d4f 100644 --- a/examples/particles/emitters/emitters.qml +++ b/examples/particles/emitters/emitters.qml @@ -41,41 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick.Particles Examples - Emitters - \example particles/emitters - \brief This is a collection of examples using Emitters in the QML particle system. - \image qml-emitters-example.png - - This is a collection of small QML examples relating to using Emitters in the particle system. - Each example is a small QML file emphasizing a particular element or feature. - - Velocity from motion gives the effect of strong particle motion through primarily moving the emitters: - \snippet examples/particles/emitters/content/velocityfrommotion.qml 0 - - Burst and pulse calls the burst and pulse methods on two idential emitters. - \snippet examples/particles/emitters/content/burstandpulse.qml 0 - Note how burst takes an argument of number of particles to emit, and pulse takes an argument of number of milliseconds to emit for. - This gives a slightly different behaviour, which is easy to see in this example. - - Custom Emitter connects to the emitParticles signal to set arbitrary values on particle data as they're emitted; - \snippet examples/particles/emitters/content/customemitter.qml 0 - This is used to emit curving particles in six rotating spokes. - - Emit mask sets an image mask on the Emitter, to emit out of an arbitrary shape. - \snippet examples/particles/emitters/content/emitmask.qml 0 - - Maximum emitted emits no more than a certain number of particles at a time. This example makes it easy to see what happens when the limit is reached. - - Shape and Direction emits particles out of an unfilled Ellipse shape, using a TargetDirection - \snippet examples/particles/emitters/content/shapeanddirection.qml 0 - This sends the particles towards the center of the ellipse with proportional speed, keeping the ellipse outline as they move to the center. - - TrailEmitter uses that element to add smoke particles to trail the fire particles in the scene. - \snippet examples/particles/emitters/content/trailemitter.qml 0 - -*/ - Item { height: 480 width: 320 diff --git a/examples/particles/imageparticle/doc/src/imageparticle.qdoc b/examples/particles/imageparticle/doc/src/imageparticle.qdoc new file mode 100644 index 0000000000..d74db05e5f --- /dev/null +++ b/examples/particles/imageparticle/doc/src/imageparticle.qdoc @@ -0,0 +1,62 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick.Particles Examples - Affectors + \example particles/imageparticle + \brief This is a collection of examples using Affectors in the QML particle system. + \image qml-imageparticle-example.png + + This is a collection of small QML examples relating to using Affectors in the particle system. + Each example is a small QML file emphasizing a particular element or feature. + + All at once shows off several of the features of ImageParticle at the same time. + \snippet examples/particles/imageparticle/content/allatonce.qml 0 + + Colored shows a simple ImageParticle with some color variation. + \snippet examples/particles/imageparticle/content/colored.qml 0 + + Color Table sets the color over life on the particles to provide a fixed rainbow effect. + \snippet examples/particles/imageparticle/content/colortable.qml 0 + + Deformation spins and squishes a starfish particle. + \snippet examples/particles/imageparticle/content/colortable.qml spin + \snippet examples/particles/imageparticle/content/colortable.qml deform + + Rotation demonstrates the autoRotate property, so that particles rotate in the direction that they travel. + + Sharing demonstrates what happens when multiple ImageParticles try to render the same particle. + The following ImageParticle renders the particles inside the ListView: + \snippet examples/particles/imageparticle/content/sharing.qml 0 + The following ImageParticle is placed inside the list highlight, and renders the particles above the other ImageParticle. + \snippet examples/particles/imageparticle/content/sharing.qml 1 + Note that because it sets the color and alpha in this ImageParticle, it renders the particles in a different color. + Since it doesn't specify anything about the rotation, it shares the rotation with the other ImageParticle so that the flowers are rotated the same way in both. + Note that you can undo rotation in another ImageParticle, you just need to explicity set rotationVariation to 0. + + Sprites demonstrates using an image particle to render animated sprites instead of static images for each particle. +*/ diff --git a/examples/particles/imageparticle/imageparticle.qml b/examples/particles/imageparticle/imageparticle.qml index 0635fd7010..c6caa1c29c 100644 --- a/examples/particles/imageparticle/imageparticle.qml +++ b/examples/particles/imageparticle/imageparticle.qml @@ -41,42 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick.Particles Examples - Affectors - \example particles/imageparticle - \brief This is a collection of examples using Affectors in the QML particle system. - \image qml-imageparticle-example.png - - This is a collection of small QML examples relating to using Affectors in the particle system. - Each example is a small QML file emphasizing a particular element or feature. - - All at once shows off several of the features of ImageParticle at the same time. - \snippet examples/particles/imageparticle/content/allatonce.qml 0 - - Colored shows a simple ImageParticle with some color variation. - \snippet examples/particles/imageparticle/content/colored.qml 0 - - Color Table sets the color over life on the particles to provide a fixed rainbow effect. - \snippet examples/particles/imageparticle/content/colortable.qml 0 - - Deformation spins and squishes a starfish particle. - \snippet examples/particles/imageparticle/content/colortable.qml spin - \snippet examples/particles/imageparticle/content/colortable.qml deform - - Rotation demonstrates the autoRotate property, so that particles rotate in the direction that they travel. - - Sharing demonstrates what happens when multiple ImageParticles try to render the same particle. - The following ImageParticle renders the particles inside the ListView: - \snippet examples/particles/imageparticle/content/sharing.qml 0 - The following ImageParticle is placed inside the list highlight, and renders the particles above the other ImageParticle. - \snippet examples/particles/imageparticle/content/sharing.qml 1 - Note that because it sets the color and alpha in this ImageParticle, it renders the particles in a different color. - Since it doesn't specify anything about the rotation, it shares the rotation with the other ImageParticle so that the flowers are rotated the same way in both. - Note that you can undo rotation in another ImageParticle, you just need to explicitly set rotationVariation to 0. - - Sprites demonstrates using an image particle to render animated sprites instead of static images for each particle. -*/ - Item { height: 480 width: 320 diff --git a/examples/particles/system/doc/src/system.qdoc b/examples/particles/system/doc/src/system.qdoc new file mode 100644 index 0000000000..a52bd0d55c --- /dev/null +++ b/examples/particles/system/doc/src/system.qdoc @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick.Particles Examples - Affectors + \example particles/system + \brief This is a collection of examples using Affectors in the QML particle system. + \image qml-system-example.png + + This is a collection of small QML examples relating to using Affectors in the particle system. + Each example is a small QML file emphasizing a particular element or feature. + + Dynamic comparison compares using the particle system to getting a similar effect with the following code that dynamically instantiates Image elements. + \snippet examples/particles/system/content/dynamiccomparison.qml fake + Note how the Image elements are not able to be randomly colorized. + + Start and Stop simply sets the running and paused states of a ParticleSystem. While the system does not perform any simulation when stopped or paused, a restart restarts the simulation from the beginning, while unpausing resumes the simulation from where it was. + + Timed group changes is an example that highlights the ParticleGroup element. While normally referring to groups with a string name is sufficent, additional effects can be + done by setting properties on groups. + The first group has a variable duration on it, but always transitions to the second group. + \snippet examples/particles/system/content/timedgroupchanges.qml 0 + The second group has a TrailEmitter on it, and a fixed duration for emitting into the third group. By placing the TrailEmitter as a direct child of the ParticleGroup, it automatically selects that group to follow. + \snippet examples/particles/system/content/timedgroupchanges.qml 1 + The third group has an Affector as a direct child, which makes the affector automatically target this group. The affector means that as soon as particles enter this group, a burst function can be called on another emitter, using the x,y positions of this particle. + \snippet examples/particles/system/content/timedgroupchanges.qml 2 + + If TrailEmitter does not suit your needs for multiple emitters, you can also dynamically create Emitters while still using the same ParticleSystem and image particle + \snippet examples/particles/system/content/dynamicemitters.qml 0 + Note that this effect, a flurry of flying rainbow spears, would be better served with TrailEmitter. It is only done with dynamic emitters in this example to show the concept more simply. + + Multiple Painters shows how to control paint ordering of individual particles. While the paint ordering of particles within one ImagePainter is not strictly defined, ImageParticle elements follow the normal Z-ordering rules for QtQuick items. This example allow you to paint the inside of the particles above the black borders using a pair of ImageParticles each painting different parts of the same logical particle. + +*/ + diff --git a/examples/particles/system/system.qml b/examples/particles/system/system.qml index 2177f60987..ccf147e410 100644 --- a/examples/particles/system/system.qml +++ b/examples/particles/system/system.qml @@ -41,38 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick.Particles Examples - Affectors - \example particles/system - \brief This is a collection of examples using Affectors in the QML particle system. - \image qml-system-example.png - - This is a collection of small QML examples relating to using Affectors in the particle system. - Each example is a small QML file emphasizing a particular element or feature. - - Dynamic comparison compares using the particle system to getting a similar effect with the following code that dynamically instantiates Image elements. - \snippet examples/particles/system/content/dynamiccomparison.qml fake - Note how the Image elements are not able to be randomly colorized. - - Start and Stop simply sets the running and paused states of a ParticleSystem. While the system does not perform any simulation when stopped or paused, a restart restarts the simulation from the beginning, while unpausing resumes the simulation from where it was. - - Timed group changes is an example that highlights the ParticleGroup element. While normally referring to groups with a string name is sufficient, additional effects can be - done by setting properties on groups. - The first group has a variable duration on it, but always transitions to the second group. - \snippet examples/particles/system/content/timedgroupchanges.qml 0 - The second group has a TrailEmitter on it, and a fixed duration for emitting into the third group. By placing the TrailEmitter as a direct child of the ParticleGroup, it automatically selects that group to follow. - \snippet examples/particles/system/content/timedgroupchanges.qml 1 - The third group has an Affector as a direct child, which makes the affector automatically target this group. The affector means that as soon as particles enter this group, a burst function can be called on another emitter, using the x,y positions of this particle. - \snippet examples/particles/system/content/timedgroupchanges.qml 2 - - If TrailEmitter does not suit your needs for multiple emitters, you can also dynamically create Emitters while still using the same ParticleSystem and image particle - \snippet examples/particles/system/content/dynamicemitters.qml 0 - Note that this effect, a flurry of flying rainbow spears, would be better served with TrailEmitter. It is only done with dynamic emitters in this example to show the concept more simply. - - Multiple Painters shows how to control paint ordering of individual particles. While the paint ordering of particles within one ImagePainter is not strictly defined, ImageParticle elements follow the normal Z-ordering rules for QtQuick items. This example allow you to paint the inside of the particles above the black borders using a pair of ImageParticles each painting different parts of the same logical particle. - -*/ - Item { height: 480 width: 320 diff --git a/examples/qml/dynamicscene/doc/src/dynamicscene.qdoc b/examples/qml/dynamicscene/doc/src/dynamicscene.qdoc new file mode 100644 index 0000000000..53a19e0561 --- /dev/null +++ b/examples/qml/dynamicscene/doc/src/dynamicscene.qdoc @@ -0,0 +1,34 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QML Example - Dynamic Scene + \example qml/dynamicscene + \brief This example demonstrates creating components dynamically. + \image qml-dynamicscene-example.png +*/ + + diff --git a/examples/qml/dynamicscene/dynamicscene.qml b/examples/qml/dynamicscene/dynamicscene.qml index 4771742621..66521b8caa 100644 --- a/examples/qml/dynamicscene/dynamicscene.qml +++ b/examples/qml/dynamicscene/dynamicscene.qml @@ -38,13 +38,6 @@ ** ****************************************************************************/ -/*! - \title QML Example - Dynamic Scene - \example qml/dynamicscene - \brief This example demonstrates creating components dynamically. - \image qml-dynamicscene-example.png -*/ - import QtQuick 2.0 import QtQuick.Particles 2.0 import "content" diff --git a/examples/qml/i18n/doc/src/i18n.qdoc b/examples/qml/i18n/doc/src/i18n.qdoc new file mode 100644 index 0000000000..d9f3eaaf58 --- /dev/null +++ b/examples/qml/i18n/doc/src/i18n.qdoc @@ -0,0 +1,48 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QML Examples - Internationalization + \example qml/i18n + \image qml-i18n-example.png + \brief This is an internationalization example + + The QML runtime automatically loads a translation from the i18n subdirectory of the root + QML file, based on the system language. + + The files are created/updated by running: + + lupdate i18n.qml -ts i18n/base.ts + + Translations for new languages are created by copying i18n/base.ts to i18n/qml_.ts + The .ts files can then be edited with Linguist: + + linguist i18n/qml_fr.ts + + The run-time translation files are then generated by running: + + lrelease i18n/*.ts +*/ diff --git a/examples/qml/i18n/i18n.qml b/examples/qml/i18n/i18n.qml index 2ffdd1914f..b924fb07c9 100644 --- a/examples/qml/i18n/i18n.qml +++ b/examples/qml/i18n/i18n.qml @@ -40,30 +40,6 @@ import QtQuick 2.0 -/*! - \title QML Examples - Internationalization - \example qml/i18n - \image qml-i18n-example.png - \brief This is an internationalization example - - The QML runtime automatically loads a translation from the i18n subdirectory of the root - QML file, based on the system language. - - The files are created/updated by running: - - lupdate i18n.qml -ts i18n/base.ts - - Translations for new languages are created by copying i18n/base.ts to i18n/qml_.ts - The .ts files can then be edited with Linguist: - - linguist i18n/qml_fr.ts - - The run-time translation files are then generated by running: - - lrelease i18n/*.ts -*/ - - Rectangle { width: 640; height: 480 diff --git a/examples/qml/xmlhttprequest/doc/src/xmlhttprequest.qdoc b/examples/qml/xmlhttprequest/doc/src/xmlhttprequest.qdoc new file mode 100644 index 0000000000..ae76c28d16 --- /dev/null +++ b/examples/qml/xmlhttprequest/doc/src/xmlhttprequest.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - XMLHttpRequst + \example qml/xmlhttprequest + \brief This is a collection of XMLHttpRequest examples + \image qml-xmlhttprequest-example.png + + This is a collection of small QML examples relating to XML HTTP request functionality. + + Get data demos sending get XML request and showing the received header and XML body. + +*/ + diff --git a/examples/qml/xmlhttprequest/xmlhttprequest.qml b/examples/qml/xmlhttprequest/xmlhttprequest.qml index efe7d428db..5f950adc52 100644 --- a/examples/qml/xmlhttprequest/xmlhttprequest.qml +++ b/examples/qml/xmlhttprequest/xmlhttprequest.qml @@ -41,18 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - XMLHttpRequst - \example qtquick/xmlhttprequest - \brief This is a collection of XMLHttpRequest examples - \image qml-xmlhttprequest-example.png - - This is a collection of small QML examples relating to XML HTTP request functionality. - - Get data demos sending get XML request and showing the received header and XML body. - -*/ - Item { height: 480 width: 320 @@ -63,4 +51,4 @@ Item { addExample("Get data", "Send get request and show received header and body", Qt.resolvedUrl("get.qml")); } } -} \ No newline at end of file +} diff --git a/examples/quick/accessibility/accessibility.qml b/examples/quick/accessibility/accessibility.qml index b8e929e007..7e3986bda4 100644 --- a/examples/quick/accessibility/accessibility.qml +++ b/examples/quick/accessibility/accessibility.qml @@ -42,19 +42,6 @@ import QtQuick 2.0 import "content" -/*! - \title QtQuick Examples - Accessibility - \example quick/accessibility - \brief This example has accessible buttons. - - Elements in this example are augmented with meta-data for accessiblity systems. - - For example, the button identifies itself and its functionality to the accessibility system: - \snippet examples/quick/accessibility/content/Button.qml button - - As do Text elements inside the example: - \snippet examples/quick/accessibility/accessibility.qml text -*/ Rectangle { id: window diff --git a/examples/quick/accessibility/doc/src/accessibility.qdoc b/examples/quick/accessibility/doc/src/accessibility.qdoc new file mode 100644 index 0000000000..d7a005dd7c --- /dev/null +++ b/examples/quick/accessibility/doc/src/accessibility.qdoc @@ -0,0 +1,40 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Accessibility + \example quick/accessibility + \brief This example has accessible buttons. + + Elements in this example are augmented with meta-data for accessiblity systems. + + For example, the button identifies itself and its functionality to the accessibility system: + \snippet examples/quick/accessibility/content/Button.qml button + + As do Text elements inside the example: + \snippet examples/quick/accessibility/accessibility.qml text +*/ + diff --git a/examples/quick/animation/animation.qml b/examples/quick/animation/animation.qml index a6735efcc2..812da3a5d5 100644 --- a/examples/quick/animation/animation.qml +++ b/examples/quick/animation/animation.qml @@ -41,51 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Animation - \example quick/animation - \brief This is a collection of QML Animation examples. - \image qml-animations-example.png - - This is a collection of small QML examples relating to animation. Each example is - a small QML file emphasizing a particular element or feature. - - ColorAnimation demonstrates using a color animation to fade a sky from day to night. - \snippet examples/quick/animation/basics/color-animation.qml 0 - - PropertyAnimation demonstrates using a number animation to bounce a circle up and down. - \snippet examples/quick/animation/basics/property-animation.qml 0 - - Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click. - \snippet examples/quick/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: - \snippet examples/quick/animation/behaviors/wigglytext.qml 0 - Then, it uses behaviors to animate the movement on each letter: - \snippet examples/quick/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. - \snippet examples/quick/animation/behaviors/tvtennis.qml 0 - - Easing Curves shows off all the easing curves available in Qt Quick animations. - - States demonstrates how the properties of an item can vary between states. - It defines several states: - \snippet examples/quick/animation/states/states.qml 0 - Note that there is also the implicit 'base state' from properties set directly on elements. - - Transitions takes the States example and animates the property changes by setting transitions: - \snippet examples/quick/animation/states/transitions.qml 0 - - PathAnimation animates an image along a beizer curve using a PathAnimation. - \snippet examples/quick/animation/pathanimation/pathanimation.qml 0 - - PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead. - \snippet examples/quick/animation/pathinterpolator/pathinterpolator.qml 0 -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/animation/doc/src/animation.qdoc b/examples/quick/animation/doc/src/animation.qdoc new file mode 100644 index 0000000000..3e3e9e6d3f --- /dev/null +++ b/examples/quick/animation/doc/src/animation.qdoc @@ -0,0 +1,71 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick Examples - Animation + \example quick/animation + \brief This is a collection of QML Animation examples. + \image qml-animations-example.png + + This is a collection of small QML examples relating to animation. Each example is + a small QML file emphasizing a particular element or feature. + + ColorAnimation demonstrates using a color animation to fade a sky from day to night. + \snippet examples/quick/animation/basics/color-animation.qml 0 + + PropertyAnimation demonstrates using a number animation to bounce a circle up and down. + \snippet examples/quick/animation/basics/property-animation.qml 0 + + Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click. + \snippet examples/quick/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: + \snippet examples/quick/animation/behaviors/wigglytext.qml 0 + Then, it uses behaviors to animate the movement on each letter: + \snippet examples/quick/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. + \snippet examples/quick/animation/behaviors/tvtennis.qml 0 + + Easing Curves shows off all the easing curves available in Qt Quick animations. + + States demonstrates how the properties of an item can vary between states. + It defines several states: + \snippet examples/quick/animation/states/states.qml 0 + Note that there is also the implicit 'base state' from properties set directly on elements. + + Transitions takes the States example and animates the property changes by setting transitions: + \snippet examples/quick/animation/states/transitions.qml 0 + + PathAnimation animates an image along a beizer curve using a PathAnimation. + \snippet examples/quick/animation/pathanimation/pathanimation.qml 0 + + PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead. + \snippet examples/quick/animation/pathinterpolator/pathinterpolator.qml 0 +*/ diff --git a/examples/quick/canvas/canvas.qml b/examples/quick/canvas/canvas.qml index afb6fbf74e..dc4e50c0f2 100644 --- a/examples/quick/canvas/canvas.qml +++ b/examples/quick/canvas/canvas.qml @@ -41,37 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Canvas - \example quick/canvas - \brief This is a collection of QML Canvas examples. - \image qml-canvas-example.png - - This is a collection of small QML examples relating to Canvas item. Each example is - a small QML file emphasizing a particular element or feature. - - Red heart demonstrates using a bezierCurve API to stroke and fill a red heart. - \snippet examples/quick/canvas/bezierCurve/bezierCurve.qml 0 - - Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble: - \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 0 - This example also demonstrates the fillText API: - \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 1 - - Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle. - - Rounded rectangle demonstrates using a collection if lineTo/arcTo path APIs to draw a rounded rectangle. - - Smile face demonstrates using several complex path APIs to draw an fill a smile face. - - Clip demonstrates using clip API to clip a given image. - \snippet examples/quick/canvas/clip/clip.qml 0 - - Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings. - \snippet examples/quick/canvas/tiger/tiger.qml 0 - -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/canvas/doc/src/canvas.qdoc b/examples/quick/canvas/doc/src/canvas.qdoc new file mode 100644 index 0000000000..87c07b614a --- /dev/null +++ b/examples/quick/canvas/doc/src/canvas.qdoc @@ -0,0 +1,58 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick Examples - Canvas + \example quick/canvas + \brief This is a collection of QML Canvas examples. + \image qml-canvas-example.png + + This is a collection of small QML examples relating to Canvas item. Each example is + a small QML file emphasizing a particular element or feature. + + Red heart demonstrates using a bezierCurve API to stroke and fill a red heart. + \snippet examples/quick/canvas/bezierCurve/bezierCurve.qml 0 + + Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble: + \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 0 + This example also demonstrates the fillText API: + \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 1 + + Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle. + + Rounded rectangle demonstrates using a collection if lineTo/arcTo path APIs to draw a rounded rectangle. + + Smile face demonstrates using several complex path APIs to draw an fill a smile face. + + Clip demonstrates using clip API to clip a given image. + \snippet examples/quick/canvas/clip/clip.qml 0 + + Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings. + \snippet examples/quick/canvas/tiger/tiger.qml 0 + +*/ + diff --git a/examples/quick/customitems/painteditem/textballoons.qml b/examples/quick/customitems/painteditem/textballoons.qml index d5151c9553..eec20f8c4b 100644 --- a/examples/quick/customitems/painteditem/textballoons.qml +++ b/examples/quick/customitems/painteditem/textballoons.qml @@ -42,11 +42,6 @@ import QtQuick 2.0 import TextBalloonPlugin 1.0 -/*! - \title QtQuick Examples - Painted Text Balloons - \example quick/painteditem/textballoons - \brief This is a simple example that draws text balloons using QPainter -*/ Item { height: 480 width: 320 @@ -82,7 +77,7 @@ Item { //! [1] Rectangle { id: controls - + anchors.bottom: parent.bottom anchors.left: parent.left anchors.margins: 1 diff --git a/examples/quick/doc/customgeometry.qdoc b/examples/quick/doc/customgeometry.qdoc deleted file mode 100644 index e17990cc56..0000000000 --- a/examples/quick/doc/customgeometry.qdoc +++ /dev/null @@ -1,201 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** GNU Free Documentation License -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. -** -** Other Usage -** Alternatively, this file may be used in accordance with the terms -** and conditions contained in a signed written agreement between you -** and Nokia. -** -** -** -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -/*! - \example quick/scenegraph/customgeometry - \title Custom Geometry Example - \ingroup examples - - The custom geometry example shows how to create a QQuickItem which - uses the scene graph API to build a custom geometry for the scene - graph. It does this by creating a BezierCurve item which is made - part of the CustomGeometry module and makes use of this in a QML - file. - - \image custom-geometry-example.png - - \section1 BezierCurve Declaration - - \snippet quick/scenegraph/customgeometry/beziercurve.h 1 - - The item declaration subclasses the QQuickItem class and adds five - properties. One for each of the four control points in the bezier - curve and a parameter to control the number of segments the curve - is subdivided into. For each of the properties we have - corresponding getter and setter functions. Since these properties - can be bound to in QML, it is also preferable to have notifier - signals for each of them so changes will be picked up the QML - engine and used accordingly. - - \snippet quick/scenegraph/customgeometry/beziercurve.h 2 - - The synchronization point between the QML scene and the rendering - scene graph is the virtual function \l - QQuickItem::updatePaintNode() which all items with custom scene - graph logic must implement. - - \e { The scene graph will on many hardware configurations be - rendering on a separate thread. It is therefore crucial that - interaction with the scene graph happens in a controlled - manner, first and foremost through the \l - QQuickItem::updatePaintNode() function. } - - \section1 BezierCurve Implementation - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 1 - - The BezierCurve constructor sets up default values for the - control points and the number of segments. The bezier curve - is specified in normalized coordinates relative to the item's - bounding rectangle. - - The constructor also sets the flag \l - QQuickItem::ItemHasContents. This flags tells the canvas that this - item provides visual content and will call \l - QQuickItem::updatePaintNode() when it is time for the QML scene to - be synchronized with the rendering scene graph. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 2 - - The BezierCurve class has no data members that need to be cleaned - up so the destructor does nothing. It is worth mentioning that the - rendering scene graph is managed by the scene graph it self, - potentially in a different thread, so one should never retain - QSGNode references in the QQuickItem class nor try to clean them - up explicitly. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 3 - - The setter function for the p1 property checks if the value is - unchanged and exits early if this is the case. Then it updates the - internal value and emits the changed signal. It then proceeds to - call the \l QQuickItem::update() function which will notify the - rendering scene graph, that the state of this object has changed - and needs to be synchronized with the rendering scene graph. - A call to update() will result in a call to - QQuickItem::updatePaintNode() at a later time. - - The other property setters are equivalent, and are omitted from - this example. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 4 - - The updatePaintNode() function is the primary integration point - for synchronizing the state of the QML scene with the rendering - scene graph. The function gets passed a QSGNode which is the - instance that was returned on the last call to the function. It - will be null the first time the function gets called and we create - our QSGGeometryNode which we will fill with geometry and a - material. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 5 - - We then create the geometry and add it to the node. The first - argument to the QSGGeometry constructor is a definition of the - vertex type, called an "attribute set". Since the graphics often - used in QML centers around a few common standard attribute sets, - these are provided by default. Here we use the Point2D attribute - set which has two floats, one for x coordinates and one for y - coordinates. The second argument is the vertex count. - - \e {Custom attribute sets can also created, but that is not - covered in this example}. - - Since we do not have any special needs for memory managing the - geometry, we specify that the QSGGeometryNode should own the - geometry. - - \e {To minimize allocations, reduce memory fragmentation and - improve performance, it would also be possible to make the - geometry a member of a QSGGeometryNode subclass, in which case, we - would not have set the QSGGeometryNode::OwnsGeometry flag}. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 6 - - The scene graph API provides a few commonly used used material - implementations. In this example we use the QSGFlatColorMaterial - which will fill the shape defined by the geometry with a solid - color. Again we pass the ownership of the material to the node, so - it can be cleaned up by the scene graph. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 7 - - In the case where the QML item has changed and we only want to - modify the existing node's geometry, we cast the \c oldNode to a - QSGGeometryNode instance and extract it's geometry. In case the - segment count has changed, we call QSGGeometry::allocate() to make - sure it has the right number of vertices. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 8 - - To fill the geometry, we first extract the vertex array from - it. Since we are using one of the default attribute sets, we can - use the convenience function QSGGeometry::vertexDataAsPoint2D(). - Then we go through each segment and calculate its position and - write that value to the vertex. - - \snippet quick/scenegraph/customgeometry/beziercurve.cpp 9 - - In the end of the function, we return the node so the scene graph - can render it. - - \section1 Application Entry-Point - - \snippet quick/scenegraph/customgeometry/main.cpp 1 - - The application is a straightforward QML application, with a - QGuiApplication and a QQuickView that we pass a .qml file. To make - use of the BezierCurve item, we need to register it in the QML - engine, using the qmlRegisterType function. We give it the name - BezierCurve and make it part of the \c {CustomGeometry 1.0} - module. - - \section1 Using the Item - - \snippet quick/scenegraph/customgeometry/LineTester.qml 1 - - Our .qml file imports the \c {QtQuick 2.0} module to get the - standard elements and also our own \c {CustomGeometry 1.0} module - which contains our newly created BezierCurve element. - - \snippet quick/scenegraph/customgeometry/LineTester.qml 2 - - Then we create the our root item and an instance of the - BezierCurve which we anchor to fill the root. - - \snippet quick/scenegraph/customgeometry/LineTester.qml 3 - - To make the example a bit more interesting we add an animation to - change the two control points in the curve. The end points stay - unchanged. - - \snippet quick/scenegraph/customgeometry/LineTester.qml 4 - - Finally we overlay a short text outlining what the example shows. - - */ - diff --git a/examples/quick/draganddrop/doc/src/draganddrop.qdoc b/examples/quick/draganddrop/doc/src/draganddrop.qdoc new file mode 100644 index 0000000000..6c4e878187 --- /dev/null +++ b/examples/quick/draganddrop/doc/src/draganddrop.qdoc @@ -0,0 +1,57 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Drag and Drop + \example quick/draganddrop + \brief This is a collection of QML drag and drop examples + \image qml-draganddrop-example.png + + This is a collection of small QML examples relating to drag and drop functionality. + + \section2 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 examples/quick/draganddrop/tiles/DragTile.qml 0 + \snippet examples/quick/draganddrop/tiles/DragTile.qml 1 + + And a DropTile component which the dragged tiles can be dropped onto: + + \snippet examples/quick/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. + + \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list. + + It uses a VisualDataModel to move a delegate item to the position of another item + it is dragged over. + + \snippet examples/quick/draganddrop/views/gridview.qml 0 + \snippet examples/quick/draganddrop/views/gridview.qml 1 +*/ + diff --git a/examples/quick/draganddrop/draganddrop.qml b/examples/quick/draganddrop/draganddrop.qml index f30ca7d70f..0e75c96470 100644 --- a/examples/quick/draganddrop/draganddrop.qml +++ b/examples/quick/draganddrop/draganddrop.qml @@ -41,37 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Drag and Drop - \example quick/draganddrop - \brief This is a collection of QML drag and drop examples - \image qml-draganddrop-example.png - - This is a collection of small QML examples relating to drag and drop functionality. - - \section2 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 examples/quick/draganddrop/tiles/DragTile.qml 0 - \snippet examples/quick/draganddrop/tiles/DragTile.qml 1 - - And a DropTile component which the dragged tiles can be dropped onto: - - \snippet examples/quick/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. - - \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list. - - It uses a VisualDataModel to move a delegate item to the position of another item - it is dragged over. - - \snippet examples/quick/draganddrop/views/gridview.qml 0 - \snippet examples/quick/draganddrop/views/gridview.qml 1 -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/imageelements/doc/src/imageelements.qdoc b/examples/quick/imageelements/doc/src/imageelements.qdoc new file mode 100644 index 0000000000..0dc626a94c --- /dev/null +++ b/examples/quick/imageelements/doc/src/imageelements.qdoc @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QML Examples - Image Elements + \example quick/imageelements + \brief This is a collection of QML examples + \image qml-imageelements-example.png + + This is a collection of small QML examples relating to image elements. + + 'BorderImage' shows off the various scaling modes of the BorderImage item + by setting its horizontalTileMode and verticalTileMode properties. + + 'Image' shows off the various fill modes of the Image item. + + 'Shadows' shows how to create a drop shadow effect for a rectangular item + using a BorderImage: + \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate + + 'AnimatedSprite' shows how to display a simple animation using an + AnimatedSprite element: + \snippet examples/quick/imageelements/animatedsprite.qml sprite + The sprite animation will loop 3 times. + + '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: + \snippet examples/quick/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. + \snippet examples/quick/imageelements/spritesequence.qml animation + At the end of the animation the bear is set back to its initial state. +*/ + diff --git a/examples/quick/imageelements/imageelements.qml b/examples/quick/imageelements/imageelements.qml index 572715fe9a..86dcc37fbe 100644 --- a/examples/quick/imageelements/imageelements.qml +++ b/examples/quick/imageelements/imageelements.qml @@ -41,39 +41,6 @@ import QtQuick 2.0 import "../../shared" -/*! - \title QML Examples - Image Elements - \example quick/imageelements - \brief This is a collection of QML examples - \image qml-imageelements-example.png - - This is a collection of small QML examples relating to image elements. - - 'BorderImage' shows off the various scaling modes of the BorderImage item - by setting its horizontalTileMode and verticalTileMode properties. - - 'Image' shows off the various fill modes of the Image item. - - 'Shadows' shows how to create a drop shadow effect for a rectangular item - using a BorderImage: - \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate - - 'AnimatedSprite' shows how to display a simple animation using an - AnimatedSprite element: - \snippet examples/quick/imageelements/animatedsprite.qml sprite - The sprite animation will loop 3 times. - - '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: - \snippet examples/quick/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. - \snippet examples/quick/imageelements/spritesequence.qml animation - At the end of the animation the bear is set back to its initial state. -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc b/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc new file mode 100644 index 0000000000..b529836843 --- /dev/null +++ b/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc @@ -0,0 +1,34 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Key Interaction + \example quick/keyinteraction + \brief This is a collection of QML keyboard interaction examples. + \image qml-keyinteraction-example.png + + This example demonstrates combining various methods of interacting with keyboard focus. +*/ diff --git a/examples/quick/keyinteraction/keyinteraction.qml b/examples/quick/keyinteraction/keyinteraction.qml index 546ba4cf05..6798491791 100644 --- a/examples/quick/keyinteraction/keyinteraction.qml +++ b/examples/quick/keyinteraction/keyinteraction.qml @@ -41,15 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Key Interaction - \example quick/keyinteraction - \brief This is a collection of QML keyboard interaction examples. - \image qml-keyinteraction-example.png - - This example demonstrates combining various methods of interacting with keyboard focus. -*/ - Loader {//Just loader, since there's only one. source: "focus/focus.qml" focus: true diff --git a/examples/quick/modelviews/doc/src/modelviews.qdoc b/examples/quick/modelviews/doc/src/modelviews.qdoc new file mode 100644 index 0000000000..a568dc61ec --- /dev/null +++ b/examples/quick/modelviews/doc/src/modelviews.qdoc @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick Examples - ModelViews + \example quick/modelviews + \brief This is a collection of QML drag and drop examples + \image qml-modelviews-example.png + + This is a collection of small QML examples relating to model and view functionality. + + \section2 GridView and PathView demonstrate usage of these elements to display views. + \snippet examples/quick/modelviews/gridview/gridview-example.qml 0 + + \section2 Dynamic List demonstrates animation of runtime additions and removals to a 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. + \snippet examples/quick/modelviews/listview/dynamiclist.qml 0 + \snippet examples/quick/modelviews/listview/dynamiclist.qml 1 + + \section2 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 examples/quick/modelviews/listview/expandingdelegates.qml 0 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2 + \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3 + + \section2 Highlight demonstrates adding a custom highlight to a ListView. + \snippet examples/quick/modelviews/listview/highlight.qml 0 + + \section2 Highlight Ranges shows the three different highlight range modes of ListView. + \snippet examples/quick/modelviews/listview/highlightranges.qml 0 + \snippet examples/quick/modelviews/listview/highlightranges.qml 1 + \snippet examples/quick/modelviews/listview/highlightranges.qml 2 + + \section2 Sections demonstrates the various section headers and footers available to ListView. + \snippet examples/quick/modelviews/listview/sections.qml 0 + + \section2 Packages demonstrates using Packages 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. + + \snippet examples/quick/modelviews/package/Delegate.qml 0 + + A VisualDataModel allows the individual views to access their specific items from + the shared package delegate. + + \snippet examples/quick/modelviews/package/view.qml 0 + + \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + + \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0 +*/ + diff --git a/examples/quick/modelviews/modelviews.qml b/examples/quick/modelviews/modelviews.qml index ab92fead4c..a48eb06516 100644 --- a/examples/quick/modelviews/modelviews.qml +++ b/examples/quick/modelviews/modelviews.qml @@ -41,61 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - ModelViews - \example quick/modelviews - \brief This is a collection of QML drag and drop examples - \image qml-modelviews-example.png - - This is a collection of small QML examples relating to model and view functionality. - - \section2 GridView and PathView demonstrate usage of these elements to display views. - \snippet examples/quick/modelviews/gridview/gridview-example.qml 0 - - \section2 Dynamic List demonstrates animation of runtime additions and removals to a 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. - \snippet examples/quick/modelviews/listview/dynamiclist.qml 0 - \snippet examples/quick/modelviews/listview/dynamiclist.qml 1 - - \section2 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 examples/quick/modelviews/listview/expandingdelegates.qml 0 - \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1 - \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2 - \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3 - - \section2 Highlight demonstrates adding a custom highlight to a ListView. - \snippet examples/quick/modelviews/listview/highlight.qml 0 - - \section2 Highlight Ranges shows the three different highlight range modes of ListView. - \snippet examples/quick/modelviews/listview/highlightranges.qml 0 - \snippet examples/quick/modelviews/listview/highlightranges.qml 1 - \snippet examples/quick/modelviews/listview/highlightranges.qml 2 - - \section2 Sections demonstrates the various section headers and footers available to ListView. - \snippet examples/quick/modelviews/listview/sections.qml 0 - - \section2 Packages demonstrates using Packages 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. - - \snippet examples/quick/modelviews/package/Delegate.qml 0 - - A VisualDataModel allows the individual views to access their specific items from - the shared package delegate. - - \snippet examples/quick/modelviews/package/view.qml 0 - - \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. - - \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0 -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/mousearea/doc/src/mousearea.qdoc b/examples/quick/mousearea/doc/src/mousearea.qdoc new file mode 100644 index 0000000000..159620dd3b --- /dev/null +++ b/examples/quick/mousearea/doc/src/mousearea.qdoc @@ -0,0 +1,46 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - MouseArea + \example quick/mousearea + \brief This is a collection of QML Animation examples. + \image qml-mousearea-example.png + + This example shows you how to respond to clicks and drags with a MouseArea. + + When you click inside the red square, the Text element 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 examples/quick/mousearea/mousearea.qml clicks + + The MouseArea can also be used to drag elements 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. + \snippet examples/quick/mousearea/mousearea.qml drag + +*/ + diff --git a/examples/quick/mousearea/mousearea.qml b/examples/quick/mousearea/mousearea.qml index cdc2364b1f..9488f72a4c 100644 --- a/examples/quick/mousearea/mousearea.qml +++ b/examples/quick/mousearea/mousearea.qml @@ -40,26 +40,6 @@ import QtQuick 2.0 -/*! - \title QtQuick Examples - MouseArea - \example quick/mousearea - \brief This is a collection of QML Animation examples. - \image qml-mousearea-example.png - - This example shows you how to respond to clicks and drags with a MouseArea. - - When you click inside the red square, the Text element 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 examples/quick/mousearea/mousearea.qml clicks - - The MouseArea can also be used to drag elements 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. - \snippet examples/quick/mousearea/mousearea.qml drag - -*/ - Rectangle { id: box width: 320; height: 480 diff --git a/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc new file mode 100644 index 0000000000..2b60f53c79 --- /dev/null +++ b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc @@ -0,0 +1,32 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QtQuick Examples - Painted Text Balloons + \example quick/painteditem/textballoons + \brief This is a simple example that draws text balloons using QPainter +*/ diff --git a/examples/quick/positioners/doc/src/positioners.qdoc b/examples/quick/positioners/doc/src/positioners.qdoc new file mode 100644 index 0000000000..6166aa2eb6 --- /dev/null +++ b/examples/quick/positioners/doc/src/positioners.qdoc @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Positioners + \example quick/positioners + \brief This is a collection of QML Positioner examples. + \image qml-positioners-example.png + + This is a collection of small QML examples relating to positioners. Each example is + a small QML file emphasizing a particular element or feature. + + 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. + + \snippet examples/quick/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. + + \snippet examples/quick/positioners/positioners-transitions.qml add + The add transition specifies how items will appear when they are added to a positioner. + + \snippet examples/quick/positioners/positioners-transitions.qml populate + The populate transition specifies how items will appear when their parent positioner is first created. + + Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner. + \snippet examples/quick/positioners/positioners-attachedproperties.qml 0 +*/ + diff --git a/examples/quick/positioners/positioners.qml b/examples/quick/positioners/positioners.qml index 859d6bd6c5..ccbdb2b23a 100644 --- a/examples/quick/positioners/positioners.qml +++ b/examples/quick/positioners/positioners.qml @@ -41,32 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Positioners - \example quick/positioners - \brief This is a collection of QML Positioner examples. - \image qml-positioners-example.png - - This is a collection of small QML examples relating to positioners. Each example is - a small QML file emphasizing a particular element or feature. - - 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. - - \snippet examples/quick/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. - - \snippet examples/quick/positioners/positioners-transitions.qml add - The add transition specifies how items will appear when they are added to a positioner. - - \snippet examples/quick/positioners/positioners-transitions.qml populate - The populate transition specifies how items will appear when their parent positioner is first created. - - Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner. - \snippet examples/quick/positioners/positioners-attachedproperties.qml 0 -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/righttoleft/doc/src/righttoleft.qdoc b/examples/quick/righttoleft/doc/src/righttoleft.qdoc new file mode 100644 index 0000000000..9d8240fb8e --- /dev/null +++ b/examples/quick/righttoleft/doc/src/righttoleft.qdoc @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Right to Left + \example quick/righttoleft + \brief This is a collection of QML Right to Left examples. + \image qml-righttoleft-example.png + + This is a collection of small QML examples relating to right to left(RTL) localization support. + + 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. +*/ diff --git a/examples/quick/righttoleft/righttoleft.qml b/examples/quick/righttoleft/righttoleft.qml index b95f671d95..e2f2a9a535 100644 --- a/examples/quick/righttoleft/righttoleft.qml +++ b/examples/quick/righttoleft/righttoleft.qml @@ -41,19 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Right to Left - \example quick/righttoleft - \brief This is a collection of QML Right to Left examples. - \image qml-righttoleft-example.png - - This is a collection of small QML examples relating to right to left(RTL) localization support. - - 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. -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc b/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc new file mode 100644 index 0000000000..e17990cc56 --- /dev/null +++ b/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc @@ -0,0 +1,201 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \example quick/scenegraph/customgeometry + \title Custom Geometry Example + \ingroup examples + + The custom geometry example shows how to create a QQuickItem which + uses the scene graph API to build a custom geometry for the scene + graph. It does this by creating a BezierCurve item which is made + part of the CustomGeometry module and makes use of this in a QML + file. + + \image custom-geometry-example.png + + \section1 BezierCurve Declaration + + \snippet quick/scenegraph/customgeometry/beziercurve.h 1 + + The item declaration subclasses the QQuickItem class and adds five + properties. One for each of the four control points in the bezier + curve and a parameter to control the number of segments the curve + is subdivided into. For each of the properties we have + corresponding getter and setter functions. Since these properties + can be bound to in QML, it is also preferable to have notifier + signals for each of them so changes will be picked up the QML + engine and used accordingly. + + \snippet quick/scenegraph/customgeometry/beziercurve.h 2 + + The synchronization point between the QML scene and the rendering + scene graph is the virtual function \l + QQuickItem::updatePaintNode() which all items with custom scene + graph logic must implement. + + \e { The scene graph will on many hardware configurations be + rendering on a separate thread. It is therefore crucial that + interaction with the scene graph happens in a controlled + manner, first and foremost through the \l + QQuickItem::updatePaintNode() function. } + + \section1 BezierCurve Implementation + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 1 + + The BezierCurve constructor sets up default values for the + control points and the number of segments. The bezier curve + is specified in normalized coordinates relative to the item's + bounding rectangle. + + The constructor also sets the flag \l + QQuickItem::ItemHasContents. This flags tells the canvas that this + item provides visual content and will call \l + QQuickItem::updatePaintNode() when it is time for the QML scene to + be synchronized with the rendering scene graph. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 2 + + The BezierCurve class has no data members that need to be cleaned + up so the destructor does nothing. It is worth mentioning that the + rendering scene graph is managed by the scene graph it self, + potentially in a different thread, so one should never retain + QSGNode references in the QQuickItem class nor try to clean them + up explicitly. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 3 + + The setter function for the p1 property checks if the value is + unchanged and exits early if this is the case. Then it updates the + internal value and emits the changed signal. It then proceeds to + call the \l QQuickItem::update() function which will notify the + rendering scene graph, that the state of this object has changed + and needs to be synchronized with the rendering scene graph. + A call to update() will result in a call to + QQuickItem::updatePaintNode() at a later time. + + The other property setters are equivalent, and are omitted from + this example. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 4 + + The updatePaintNode() function is the primary integration point + for synchronizing the state of the QML scene with the rendering + scene graph. The function gets passed a QSGNode which is the + instance that was returned on the last call to the function. It + will be null the first time the function gets called and we create + our QSGGeometryNode which we will fill with geometry and a + material. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 5 + + We then create the geometry and add it to the node. The first + argument to the QSGGeometry constructor is a definition of the + vertex type, called an "attribute set". Since the graphics often + used in QML centers around a few common standard attribute sets, + these are provided by default. Here we use the Point2D attribute + set which has two floats, one for x coordinates and one for y + coordinates. The second argument is the vertex count. + + \e {Custom attribute sets can also created, but that is not + covered in this example}. + + Since we do not have any special needs for memory managing the + geometry, we specify that the QSGGeometryNode should own the + geometry. + + \e {To minimize allocations, reduce memory fragmentation and + improve performance, it would also be possible to make the + geometry a member of a QSGGeometryNode subclass, in which case, we + would not have set the QSGGeometryNode::OwnsGeometry flag}. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 6 + + The scene graph API provides a few commonly used used material + implementations. In this example we use the QSGFlatColorMaterial + which will fill the shape defined by the geometry with a solid + color. Again we pass the ownership of the material to the node, so + it can be cleaned up by the scene graph. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 7 + + In the case where the QML item has changed and we only want to + modify the existing node's geometry, we cast the \c oldNode to a + QSGGeometryNode instance and extract it's geometry. In case the + segment count has changed, we call QSGGeometry::allocate() to make + sure it has the right number of vertices. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 8 + + To fill the geometry, we first extract the vertex array from + it. Since we are using one of the default attribute sets, we can + use the convenience function QSGGeometry::vertexDataAsPoint2D(). + Then we go through each segment and calculate its position and + write that value to the vertex. + + \snippet quick/scenegraph/customgeometry/beziercurve.cpp 9 + + In the end of the function, we return the node so the scene graph + can render it. + + \section1 Application Entry-Point + + \snippet quick/scenegraph/customgeometry/main.cpp 1 + + The application is a straightforward QML application, with a + QGuiApplication and a QQuickView that we pass a .qml file. To make + use of the BezierCurve item, we need to register it in the QML + engine, using the qmlRegisterType function. We give it the name + BezierCurve and make it part of the \c {CustomGeometry 1.0} + module. + + \section1 Using the Item + + \snippet quick/scenegraph/customgeometry/LineTester.qml 1 + + Our .qml file imports the \c {QtQuick 2.0} module to get the + standard elements and also our own \c {CustomGeometry 1.0} module + which contains our newly created BezierCurve element. + + \snippet quick/scenegraph/customgeometry/LineTester.qml 2 + + Then we create the our root item and an instance of the + BezierCurve which we anchor to fill the root. + + \snippet quick/scenegraph/customgeometry/LineTester.qml 3 + + To make the example a bit more interesting we add an animation to + change the two control points in the curve. The end points stay + unchanged. + + \snippet quick/scenegraph/customgeometry/LineTester.qml 4 + + Finally we overlay a short text outlining what the example shows. + + */ + diff --git a/examples/quick/shadereffects/doc/src/shadereffects.qdoc b/examples/quick/shadereffects/doc/src/shadereffects.qdoc new file mode 100644 index 0000000000..75199daffe --- /dev/null +++ b/examples/quick/shadereffects/doc/src/shadereffects.qdoc @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QML Examples - Shader Effects + \example quick/shadereffects + \image qml-shadereffects-example.png + \brief This is a shader effects example + + This example demonstrates a couple of visual effects that you can perform + with shaders in QtQuick 2.0 + + ShaderEffects typically operate on other elements, using a ShaderEffectSource + \snippet examples/quick/shadereffects/shadereffects.qml source + In the above snippet, theItem is the id of a complex QML element in the file. + + ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader. + \snippet examples/quick/shadereffects/shadereffects.qml fragment + + You can use any custom property on the ShaderEffect in your shader. This makes + animated shader code very easy. + \snippet examples/quick/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. + \snippet examples/quick/shadereffects/shadereffects.qml vertex +*/ + diff --git a/examples/quick/shadereffects/shadereffects.qml b/examples/quick/shadereffects/shadereffects.qml index 9fdbde97d5..207a1a14ac 100644 --- a/examples/quick/shadereffects/shadereffects.qml +++ b/examples/quick/shadereffects/shadereffects.qml @@ -46,30 +46,6 @@ Rectangle { id: root width: 320 height: 480 -/*! - \title QML Examples - Shader Effects - \example quick/shadereffects - \image qml-shadereffects-example.png - \brief This is a shader effects example - - This example demonstrates a couple of visual effects that you can perform - with shaders in QtQuick 2.0 - - ShaderEffects typically operate on other elements, using a ShaderEffectSource - \snippet examples/quick/shadereffects/shadereffects.qml source - In the above snippet, theItem is the id of a complex QML element in the file. - - ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader. - \snippet examples/quick/shadereffects/shadereffects.qml fragment - - You can use any custom property on the ShaderEffect in your shader. This makes - animated shader code very easy. - \snippet examples/quick/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. - \snippet examples/quick/shadereffects/shadereffects.qml vertex -*/ property color col: "lightsteelblue" gradient: Gradient { GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") } diff --git a/examples/quick/text/doc/src/text.qdoc b/examples/quick/text/doc/src/text.qdoc new file mode 100644 index 0000000000..32ccfca355 --- /dev/null +++ b/examples/quick/text/doc/src/text.qdoc @@ -0,0 +1,69 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QML Examples - Text + \example quick/text + \brief This is a collection of QML examples + \image qml-text-example.png + + This is a collection of small QML examples relating to text. Each example is + a small QML file, usually containing or emphasizing a particular element 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 element. + 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: + \snippet examples/quick/text/fonts/hello.qml letterspacing + + 'Fonts' shows different ways of using fonts with the Text element. + Simply by name, using the font.family property directly: + \snippet examples/quick/text/fonts/fonts.qml name + or using a FontLoader element: + \snippet examples/quick/text/fonts/fonts.qml fontloader + or using a FontLoader and specifying a local font file: + \snippet examples/quick/text/fonts/fonts.qml fontloaderlocal + or finally using a FontLoader and specifying a remote font file: + \snippet examples/quick/text/fonts/fonts.qml fontloaderremote + + 'Available Fonts' shows how to use the QML global Qt object and a list view + to display all the fonts available on the system. + The ListView element uses the list of fonts available as its model: + \snippet examples/quick/text/fonts/availableFonts.qml model + Inside the delegate, the font family is set with the modelData: + \snippet examples/quick/text/fonts/availableFonts.qml delegate + + 'Banner' is a simple example showing how to create a banner using a row of text + elements and a NumberAnimation. + + 'Img tag' shows different ways of displaying images in a text elements using + the tag. + + 'Text Layout' shows how to create a more complex layout for a text element. + This example lays out the text in two columns using the onLineLaidOut handler + that allows you to position and resize each line: + \snippet examples/quick/text/styledtext-layout.qml layout +*/ diff --git a/examples/quick/text/text.qml b/examples/quick/text/text.qml index 4b11b93189..83b1699bd6 100644 --- a/examples/quick/text/text.qml +++ b/examples/quick/text/text.qml @@ -40,49 +40,6 @@ import QtQuick 2.0 import "../../shared" -/*! - \title QML Examples - Text - \example quick/text - \brief This is a collection of QML examples - \image qml-text-example.png - - This is a collection of small QML examples relating to text. Each example is - a small QML file, usually containing or emphasizing a particular element 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 element. - 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: - \snippet examples/quick/text/fonts/hello.qml letterspacing - - 'Fonts' shows different ways of using fonts with the Text element. - Simply by name, using the font.family property directly: - \snippet examples/quick/text/fonts/fonts.qml name - or using a FontLoader element: - \snippet examples/quick/text/fonts/fonts.qml fontloader - or using a FontLoader and specifying a local font file: - \snippet examples/quick/text/fonts/fonts.qml fontloaderlocal - or finally using a FontLoader and specifying a remote font file: - \snippet examples/quick/text/fonts/fonts.qml fontloaderremote - - 'Available Fonts' shows how to use the QML global Qt object and a list view - to display all the fonts available on the system. - The ListView element uses the list of fonts available as its model: - \snippet examples/quick/text/fonts/availableFonts.qml model - Inside the delegate, the font family is set with the modelData: - \snippet examples/quick/text/fonts/availableFonts.qml delegate - - 'Banner' is a simple example showing how to create a banner using a row of text - elements and a NumberAnimation. - - 'Img tag' shows different ways of displaying images in a text elements using - the tag. - - 'Text Layout' shows how to create a more complex layout for a text element. - This example lays out the text in two columns using the onLineLaidOut handler - that allows you to position and resize each line: - \snippet examples/quick/text/styledtext-layout.qml layout -*/ Item { height: 480 diff --git a/examples/quick/threading/doc/src/threading.qdoc b/examples/quick/threading/doc/src/threading.qdoc new file mode 100644 index 0000000000..d645b2bcb4 --- /dev/null +++ b/examples/quick/threading/doc/src/threading.qdoc @@ -0,0 +1,48 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Threading + \example quick/threading + \brief This is a collection of QML Multithreading examples. + \image qml-threading-example.png + + 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: + \snippet examples/threading/threadedlistmodel/timedisplay.qml 0 + + Inside the worker thread, the ListModel is synchronized once the data is finished loading: + \snippet examples/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. + + When the UI needs another value, a request is sent to the WorkerScript: + \snippet examples/threading/workerscript/workerscript.qml 0 + The workerscript then is free to take a really long time to calculate it: + \snippet examples/threading/workerscript/workerscript.js 0 + When it's done, the result returns to the main scene via the WorkerScript element: + \snippet examples/threading/workerscript/workerscript.qml 1 +*/ diff --git a/examples/quick/threading/threading.qml b/examples/quick/threading/threading.qml index cff4dd83b9..1b1906734b 100644 --- a/examples/quick/threading/threading.qml +++ b/examples/quick/threading/threading.qml @@ -41,29 +41,6 @@ import QtQuick 2.0 import "../../shared" as Examples -/*! - \title QtQuick Examples - Threading - \example quick/threading - \brief This is a collection of QML Multithreading examples. - \image qml-threading-example.png - - 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: - \snippet examples/threading/threadedlistmodel/timedisplay.qml 0 - - Inside the worker thread, the ListModel is synchronized once the data is finished loading: - \snippet examples/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. - - When the UI needs another value, a request is sent to the WorkerScript: - \snippet examples/threading/workerscript/workerscript.qml 0 - The workerscript then is free to take a really long time to calculate it: - \snippet examples/threading/workerscript/workerscript.js 0 - When it's done, the result returns to the main scene via the WorkerScript element: - \snippet examples/threading/workerscript/workerscript.qml 1 -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc new file mode 100644 index 0000000000..48c7b0b4ab --- /dev/null +++ b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc @@ -0,0 +1,56 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. +** +** Other Usage +** Alternatively, this file may be used in accordance with the terms +** and conditions contained in a signed written agreement between you +** and Nokia. +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +/*! + \title QtQuick Examples - Touch Interaction + \example quick/touchinteraction + \brief This is 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. + + 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 examples/quick/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: + \snippet examples/quick/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: + \snippet examples/quick/touchinteraction/multipointtouch/bearwhack/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. + \snippet examples/quick/touchinteraction/pincharea/flickresize.qml 0 + + Flickable is a simple example demonstrating the Flickable element. The element inside the flickable is very big, but the flickable itself is very small: + \snippet examples/quick/touchinteraction/flickable/basic-flickable.qml 0 + + Corkboards shows a more complex Flickable usecase, with elements on the flickable that respond to mouse and keyboard interaction. + This doesn't require special code, the QtQuick elements automatically cooperate with Flickable for accepting the touch events. +*/ + diff --git a/examples/quick/touchinteraction/touchinteraction.qml b/examples/quick/touchinteraction/touchinteraction.qml index c8285438ef..f72500eaa2 100644 --- a/examples/quick/touchinteraction/touchinteraction.qml +++ b/examples/quick/touchinteraction/touchinteraction.qml @@ -41,36 +41,6 @@ import QtQuick 2.0 import "../../shared" -/*! - \title QtQuick Examples - Touch Interaction - \example quick/touchinteraction - \brief This is 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. - - 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 examples/quick/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: - \snippet examples/quick/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: - \snippet examples/quick/touchinteraction/multipointtouch/bearwhack/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. - \snippet examples/quick/touchinteraction/pincharea/flickresize.qml 0 - - Flickable is a simple example demonstrating the Flickable element. The element inside the flickable is very big, but the flickable itself is very small: - \snippet examples/quick/touchinteraction/flickable/basic-flickable.qml 0 - - Corkboards shows a more complex Flickable usecase, with elements on the flickable that respond to mouse and keyboard interaction. - This doesn't require special code, the QtQuick elements automatically cooperate with Flickable for accepting the touch events. -*/ - Item { height: 480 width: 320 diff --git a/examples/quick/ui-components/dialcontrol/content/Dial.qml b/examples/quick/ui-components/dialcontrol/content/Dial.qml new file mode 100644 index 0000000000..c61adee364 --- /dev/null +++ b/examples/quick/ui-components/dialcontrol/content/Dial.qml @@ -0,0 +1,86 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: root + property real value : 0 + + width: 210; height: 210 + + Image { source: "background.png" } + +//! [needle_shadow] + Image { + x: 96 + y: 35 + source: "needle_shadow.png" + transform: Rotation { + origin.x: 9; origin.y: 67 + angle: needleRotation.angle + } + } +//! [needle_shadow] +//! [needle] + Image { + id: needle + x: 98; y: 33 + smooth: true + source: "needle.png" + transform: Rotation { + id: needleRotation + origin.x: 5; origin.y: 65 + //! [needle angle] + angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133) + Behavior on angle { + SpringAnimation { + spring: 1.4 + damping: .15 + } + } + //! [needle angle] + } + } +//! [needle] +//! [overlay] + Image { x: 21; y: 18; source: "overlay.png" } +//! [overlay] +} diff --git a/examples/quick/ui-components/dialcontrol/content/QuitButton.qml b/examples/quick/ui-components/dialcontrol/content/QuitButton.qml new file mode 100644 index 0000000000..702b892d23 --- /dev/null +++ b/examples/quick/ui-components/dialcontrol/content/QuitButton.qml @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +Image { + source: "quit.png" + scale: quitMouse.pressed ? 0.8 : 1.0 + smooth: quitMouse.pressed + MouseArea { + id: quitMouse + anchors.fill: parent + anchors.margins: -10 + onClicked: Qt.quit() + } +} diff --git a/examples/quick/ui-components/dialcontrol/content/background.png b/examples/quick/ui-components/dialcontrol/content/background.png new file mode 100644 index 0000000000..75d555d7ab Binary files /dev/null and b/examples/quick/ui-components/dialcontrol/content/background.png differ diff --git a/examples/quick/ui-components/dialcontrol/content/needle.png b/examples/quick/ui-components/dialcontrol/content/needle.png new file mode 100644 index 0000000000..2d19f75039 Binary files /dev/null and b/examples/quick/ui-components/dialcontrol/content/needle.png differ diff --git a/examples/quick/ui-components/dialcontrol/content/needle_shadow.png b/examples/quick/ui-components/dialcontrol/content/needle_shadow.png new file mode 100644 index 0000000000..8d8a928cc5 Binary files /dev/null and b/examples/quick/ui-components/dialcontrol/content/needle_shadow.png differ diff --git a/examples/quick/ui-components/dialcontrol/content/overlay.png b/examples/quick/ui-components/dialcontrol/content/overlay.png new file mode 100644 index 0000000000..3860a7b590 Binary files /dev/null and b/examples/quick/ui-components/dialcontrol/content/overlay.png differ diff --git a/examples/quick/ui-components/dialcontrol/content/quit.png b/examples/quick/ui-components/dialcontrol/content/quit.png new file mode 100644 index 0000000000..b822057d4e Binary files /dev/null and b/examples/quick/ui-components/dialcontrol/content/quit.png differ diff --git a/examples/quick/ui-components/dialcontrol/dialcontrol.qml b/examples/quick/ui-components/dialcontrol/dialcontrol.qml new file mode 100644 index 0000000000..467a558696 --- /dev/null +++ b/examples/quick/ui-components/dialcontrol/dialcontrol.qml @@ -0,0 +1,100 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//! [imports] +import QtQuick 2.0 +import "content" +//! [imports] + +//! [0] +Rectangle { + color: "#545454" + width: 300; height: 300 + + //! [the dial in use] + // Dial with a slider to adjust it + Dial { + id: dial + anchors.centerIn: parent + value: slider.x * 100 / (container.width - 34) + } + //! [the dial in use] + + Rectangle { + id: container + anchors { bottom: parent.bottom; left: parent.left + right: parent.right; leftMargin: 20; rightMargin: 20 + bottomMargin: 10 + } + height: 16 + + radius: 8 + opacity: 0.7 + smooth: true + gradient: Gradient { + GradientStop { position: 0.0; color: "gray" } + GradientStop { position: 1.0; color: "white" } + } + + Rectangle { + id: slider + x: 1; y: 1; width: 30; height: 14 + radius: 6 + smooth: true + gradient: Gradient { + GradientStop { position: 0.0; color: "#424242" } + GradientStop { position: 1.0; color: "black" } + } + + MouseArea { + anchors.fill: parent + anchors.margins: -16 // Increase mouse area a lot outside the slider + drag.target: parent; drag.axis: Drag.XAxis + drag.minimumX: 2; drag.maximumX: container.width - 32 + } + } + } + QuitButton { + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: 10 + } +} +//! [0] diff --git a/examples/quick/ui-components/flipable/content/5_heart.png b/examples/quick/ui-components/flipable/content/5_heart.png new file mode 100644 index 0000000000..fb59d81453 Binary files /dev/null and b/examples/quick/ui-components/flipable/content/5_heart.png differ diff --git a/examples/quick/ui-components/flipable/content/9_club.png b/examples/quick/ui-components/flipable/content/9_club.png new file mode 100644 index 0000000000..2545001904 Binary files /dev/null and b/examples/quick/ui-components/flipable/content/9_club.png differ diff --git a/examples/quick/ui-components/flipable/content/Card.qml b/examples/quick/ui-components/flipable/content/Card.qml new file mode 100644 index 0000000000..6f9f80b88d --- /dev/null +++ b/examples/quick/ui-components/flipable/content/Card.qml @@ -0,0 +1,80 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Flipable { + id: container + + property alias source: frontImage.source + property bool flipped: true + property int xAxis: 0 + property int yAxis: 0 + property int angle: 0 + + width: front.width; height: front.height + + front: Image { id: frontImage; smooth: true } + back: Image { source: "back.png"; smooth: true } + + state: "back" + + MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped } + + transform: Rotation { + id: rotation; origin.x: container.width / 2; origin.y: container.height / 2 + axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0 + } + + states: State { + name: "back"; when: container.flipped + PropertyChanges { target: rotation; angle: container.angle } + } + + transitions: Transition { + ParallelAnimation { + NumberAnimation { target: rotation; properties: "angle"; duration: 600 } + SequentialAnimation { + NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 } + NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 } + } + } + } +} diff --git a/examples/quick/ui-components/flipable/content/back.png b/examples/quick/ui-components/flipable/content/back.png new file mode 100644 index 0000000000..f715d7487e Binary files /dev/null and b/examples/quick/ui-components/flipable/content/back.png differ diff --git a/examples/quick/ui-components/flipable/flipable.qml b/examples/quick/ui-components/flipable/flipable.qml new file mode 100644 index 0000000000..41733e3adf --- /dev/null +++ b/examples/quick/ui-components/flipable/flipable.qml @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import "content" + +Rectangle { + id: window + + width: 480; height: 320 + color: "darkgreen" + + Row { + anchors.centerIn: parent; spacing: 30 + Card { source: "content/9_club.png"; angle: 180; yAxis: 1 } + Card { source: "content/5_heart.png"; angle: 540; xAxis: 1 } + } +} diff --git a/examples/quick/ui-components/progressbar/content/ProgressBar.qml b/examples/quick/ui-components/progressbar/content/ProgressBar.qml new file mode 100644 index 0000000000..c9be8d7336 --- /dev/null +++ b/examples/quick/ui-components/progressbar/content/ProgressBar.qml @@ -0,0 +1,83 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: progressbar + + property int minimum: 0 + property int maximum: 100 + property int value: 0 + property alias color: gradient1.color + property alias secondColor: gradient2.color + + width: 250; height: 23 + clip: true + + BorderImage { + source: "background.png" + width: parent.width; height: parent.height + border { left: 4; top: 4; right: 4; bottom: 4 } + } + + Rectangle { + id: highlight + + property int widthDest: ((progressbar.width * (value - minimum)) / (maximum - minimum) - 6) + + width: highlight.widthDest + Behavior on width { SmoothedAnimation { velocity: 1200 } } + + anchors { left: parent.left; top: parent.top; bottom: parent.bottom; margins: 3 } + radius: 1 + gradient: Gradient { + GradientStop { id: gradient1; position: 0.0 } + GradientStop { id: gradient2; position: 1.0 } + } + + } + Text { + anchors { right: highlight.right; rightMargin: 6; verticalCenter: parent.verticalCenter } + color: "white" + font.bold: true + text: Math.floor((value - minimum) / (maximum - minimum) * 100) + '%' + } +} diff --git a/examples/quick/ui-components/progressbar/content/background.png b/examples/quick/ui-components/progressbar/content/background.png new file mode 100644 index 0000000000..9044226f85 Binary files /dev/null and b/examples/quick/ui-components/progressbar/content/background.png differ diff --git a/examples/quick/ui-components/progressbar/main.qml b/examples/quick/ui-components/progressbar/main.qml new file mode 100644 index 0000000000..367e4c1265 --- /dev/null +++ b/examples/quick/ui-components/progressbar/main.qml @@ -0,0 +1,73 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import "content" + +Rectangle { + id: main + + width: 600; height: 405 + color: "#edecec" + + Flickable { + anchors.fill: parent + contentHeight: column.height + 20 + + Column { + id: column + x: 10; y: 10 + spacing: 10 + + Repeater { + model: 25 + + ProgressBar { + property int r: Math.floor(Math.random() * 5000 + 1000) + width: main.width - 20 + + NumberAnimation on value { duration: r; from: 0; to: 100; loops: Animation.Infinite } + ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; loops: Animation.Infinite } + ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; loops: Animation.Infinite } + } + } + } + } +} diff --git a/examples/quick/ui-components/scrollbar/ScrollBar.qml b/examples/quick/ui-components/scrollbar/ScrollBar.qml new file mode 100644 index 0000000000..a3d0d3841c --- /dev/null +++ b/examples/quick/ui-components/scrollbar/ScrollBar.qml @@ -0,0 +1,74 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: scrollBar + + // The properties that define the scrollbar's state. + // position and pageSize are in the range 0.0 - 1.0. They are relative to the + // height of the page, i.e. a pageSize of 0.5 means that you can see 50% + // of the height of the view. + // orientation can be either Qt.Vertical or Qt.Horizontal + property real position + property real pageSize + property variant orientation : Qt.Vertical + + // A light, semi-transparent background + Rectangle { + id: background + anchors.fill: parent + radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1) + color: "white" + opacity: 0.3 + } + + // Size the bar to the required size, depending upon the orientation. + Rectangle { + x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1) + y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1 + width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2)) + height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2) + radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1) + color: "black" + opacity: 0.7 + } +} diff --git a/examples/quick/ui-components/scrollbar/main.qml b/examples/quick/ui-components/scrollbar/main.qml new file mode 100644 index 0000000000..a7d602b437 --- /dev/null +++ b/examples/quick/ui-components/scrollbar/main.qml @@ -0,0 +1,93 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Rectangle { + width: 640 + height: 480 + + // Create a flickable to view a large image. + Flickable { + id: view + anchors.fill: parent + contentWidth: picture.width + contentHeight: picture.height + + Image { + id: picture + source: "pics/niagara_falls.jpg" + asynchronous: true + } + + // Only show the scrollbars when the view is moving. + states: State { + name: "ShowBars" + when: view.movingVertically || view.movingHorizontally + PropertyChanges { target: verticalScrollBar; opacity: 1 } + PropertyChanges { target: horizontalScrollBar; opacity: 1 } + } + + transitions: Transition { + NumberAnimation { properties: "opacity"; duration: 400 } + } + } + + // Attach scrollbars to the right and bottom edges of the view. + ScrollBar { + id: verticalScrollBar + width: 12; height: view.height-12 + anchors.right: view.right + opacity: 0 + orientation: Qt.Vertical + position: view.visibleArea.yPosition + pageSize: view.visibleArea.heightRatio + } + + ScrollBar { + id: horizontalScrollBar + width: view.width-12; height: 12 + anchors.bottom: view.bottom + opacity: 0 + orientation: Qt.Horizontal + position: view.visibleArea.xPosition + pageSize: view.visibleArea.widthRatio + } +} diff --git a/examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg b/examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg new file mode 100644 index 0000000000..e625c0d3e6 Binary files /dev/null and b/examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg differ diff --git a/examples/quick/ui-components/scrollbar/scrollbar.qmlproject b/examples/quick/ui-components/scrollbar/scrollbar.qmlproject new file mode 100644 index 0000000000..e5a8bf02ca --- /dev/null +++ b/examples/quick/ui-components/scrollbar/scrollbar.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.1 + +Project { + mainFile: "main.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} diff --git a/examples/quick/ui-components/searchbox/SearchBox.qml b/examples/quick/ui-components/searchbox/SearchBox.qml new file mode 100644 index 0000000000..1168d05dd3 --- /dev/null +++ b/examples/quick/ui-components/searchbox/SearchBox.qml @@ -0,0 +1,109 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +FocusScope { + id: focusScope + width: 250; height: 28 + + BorderImage { + source: "images/lineedit-bg.png" + width: parent.width; height: parent.height + border { left: 4; top: 4; right: 4; bottom: 4 } + } + + BorderImage { + source: "images/lineedit-bg-focus.png" + width: parent.width; height: parent.height + border { left: 4; top: 4; right: 4; bottom: 4 } + visible: parent.activeFocus ? true : false + } + + Text { + id: typeSomething + anchors.fill: parent; anchors.leftMargin: 8 + verticalAlignment: Text.AlignVCenter + text: "Type something..." + color: "gray" + font.italic: true + } + + MouseArea { + anchors.fill: parent + onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); } + } + + TextInput { + id: textInput + anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter } + focus: true + selectByMouse: true + } + + Image { + id: clear + anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter } + source: "images/clear.png" + opacity: 0 + + MouseArea { + anchors.fill: parent + onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); } + } + } + + states: State { + name: "hasText"; when: textInput.text != '' + PropertyChanges { target: typeSomething; opacity: 0 } + PropertyChanges { target: clear; opacity: 1 } + } + + transitions: [ + Transition { + from: ""; to: "hasText" + NumberAnimation { exclude: typeSomething; properties: "opacity" } + }, + Transition { + from: "hasText"; to: "" + NumberAnimation { properties: "opacity" } + } + ] +} diff --git a/examples/quick/ui-components/searchbox/images/clear.png b/examples/quick/ui-components/searchbox/images/clear.png new file mode 100644 index 0000000000..91eb270695 Binary files /dev/null and b/examples/quick/ui-components/searchbox/images/clear.png differ diff --git a/examples/quick/ui-components/searchbox/images/lineedit-bg-focus.png b/examples/quick/ui-components/searchbox/images/lineedit-bg-focus.png new file mode 100644 index 0000000000..bbfac38d2d Binary files /dev/null and b/examples/quick/ui-components/searchbox/images/lineedit-bg-focus.png differ diff --git a/examples/quick/ui-components/searchbox/images/lineedit-bg.png b/examples/quick/ui-components/searchbox/images/lineedit-bg.png new file mode 100644 index 0000000000..9044226f85 Binary files /dev/null and b/examples/quick/ui-components/searchbox/images/lineedit-bg.png differ diff --git a/examples/quick/ui-components/searchbox/main.qml b/examples/quick/ui-components/searchbox/main.qml new file mode 100644 index 0000000000..6e9731cf9c --- /dev/null +++ b/examples/quick/ui-components/searchbox/main.qml @@ -0,0 +1,60 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Rectangle { + id: page + width: 500; height: 250 + color: "#edecec" + + MouseArea { + anchors.fill: parent + onClicked: page.focus = false; + } + Column { + anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } + spacing: 10 + + SearchBox { id: search1; KeyNavigation.tab: search2; KeyNavigation.backtab: search3; focus: true } + SearchBox { id: search2; KeyNavigation.tab: search3; KeyNavigation.backtab: search1 } + SearchBox { id: search3; KeyNavigation.tab: search1; KeyNavigation.backtab: search2 } + } +} diff --git a/examples/quick/ui-components/searchbox/searchbox.qmlproject b/examples/quick/ui-components/searchbox/searchbox.qmlproject new file mode 100644 index 0000000000..e5a8bf02ca --- /dev/null +++ b/examples/quick/ui-components/searchbox/searchbox.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.1 + +Project { + mainFile: "main.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} diff --git a/examples/quick/ui-components/slideswitch/content/Switch.qml b/examples/quick/ui-components/slideswitch/content/Switch.qml new file mode 100644 index 0000000000..482e3eadfd --- /dev/null +++ b/examples/quick/ui-components/slideswitch/content/Switch.qml @@ -0,0 +1,117 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +//![0] +import QtQuick 2.0 + +Item { + id: toggleswitch + width: background.width; height: background.height + +//![1] + property bool on: false +//![1] + +//![2] + function toggle() { + if (toggleswitch.state == "on") + toggleswitch.state = "off"; + else + toggleswitch.state = "on"; + } +//![2] + +//![3] + function releaseSwitch() { + if (knob.x == 1) { + if (toggleswitch.state == "off") return; + } + if (knob.x == 78) { + if (toggleswitch.state == "on") return; + } + toggle(); + } +//![3] + +//![4] + Image { + id: background + source: "background.png" + MouseArea { anchors.fill: parent; onClicked: toggle() } + } +//![4] + +//![5] + Image { + id: knob + x: 1; y: 2 + source: "knob.png" + + MouseArea { + anchors.fill: parent + drag.target: knob; drag.axis: Drag.XAxis; drag.minimumX: 1; drag.maximumX: 78 + onClicked: toggle() + onReleased: releaseSwitch() + } + } +//![5] + +//![6] + states: [ + State { + name: "on" + PropertyChanges { target: knob; x: 78 } + PropertyChanges { target: toggleswitch; on: true } + }, + State { + name: "off" + PropertyChanges { target: knob; x: 1 } + PropertyChanges { target: toggleswitch; on: false } + } + ] +//![6] + +//![7] + transitions: Transition { + NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 200 } + } +//![7] +} +//![0] diff --git a/examples/quick/ui-components/slideswitch/content/background.png b/examples/quick/ui-components/slideswitch/content/background.png new file mode 100644 index 0000000000..d736815870 Binary files /dev/null and b/examples/quick/ui-components/slideswitch/content/background.png differ diff --git a/examples/quick/ui-components/slideswitch/content/background.svg b/examples/quick/ui-components/slideswitch/content/background.svg new file mode 100644 index 0000000000..d82fd8fb83 --- /dev/null +++ b/examples/quick/ui-components/slideswitch/content/background.svg @@ -0,0 +1,23 @@ + + + +]> + + + + + + + + + + + + + + diff --git a/examples/quick/ui-components/slideswitch/content/knob.png b/examples/quick/ui-components/slideswitch/content/knob.png new file mode 100644 index 0000000000..ee0a436f84 Binary files /dev/null and b/examples/quick/ui-components/slideswitch/content/knob.png differ diff --git a/examples/quick/ui-components/slideswitch/content/knob.svg b/examples/quick/ui-components/slideswitch/content/knob.svg new file mode 100644 index 0000000000..a14019298d --- /dev/null +++ b/examples/quick/ui-components/slideswitch/content/knob.svg @@ -0,0 +1,867 @@ + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/quick/ui-components/slideswitch/slideswitch.qml b/examples/quick/ui-components/slideswitch/slideswitch.qml new file mode 100644 index 0000000000..60a331407c --- /dev/null +++ b/examples/quick/ui-components/slideswitch/slideswitch.qml @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import "content" + +Rectangle { + color: "white" + width: 400; height: 250 + +//![0] + Switch { anchors.centerIn: parent; on: false } +//![0] +} diff --git a/examples/quick/ui-components/spinner/content/Spinner.qml b/examples/quick/ui-components/spinner/content/Spinner.qml new file mode 100644 index 0000000000..d7bbeb33ee --- /dev/null +++ b/examples/quick/ui-components/spinner/content/Spinner.qml @@ -0,0 +1,70 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Image { + property alias model: view.model + property alias delegate: view.delegate + property alias currentIndex: view.currentIndex + property real itemHeight: 30 + + source: "spinner-bg.png" + clip: true + + PathView { + id: view + anchors.fill: parent + + pathItemCount: height/itemHeight + preferredHighlightBegin: 0.5 + preferredHighlightEnd: 0.5 + highlight: Image { source: "spinner-select.png"; width: view.width; height: itemHeight+4 } + dragMargin: view.width/2 + + path: Path { + startX: view.width/2; startY: -itemHeight/2 + PathLine { x: view.width/2; y: view.pathItemCount*itemHeight + itemHeight } + } + } + + Keys.onDownPressed: view.incrementCurrentIndex() + Keys.onUpPressed: view.decrementCurrentIndex() +} diff --git a/examples/quick/ui-components/spinner/content/spinner-bg.png b/examples/quick/ui-components/spinner/content/spinner-bg.png new file mode 100644 index 0000000000..b3556f1f9f Binary files /dev/null and b/examples/quick/ui-components/spinner/content/spinner-bg.png differ diff --git a/examples/quick/ui-components/spinner/content/spinner-select.png b/examples/quick/ui-components/spinner/content/spinner-select.png new file mode 100644 index 0000000000..95a17a1fe2 Binary files /dev/null and b/examples/quick/ui-components/spinner/content/spinner-select.png differ diff --git a/examples/quick/ui-components/spinner/main.qml b/examples/quick/ui-components/spinner/main.qml new file mode 100644 index 0000000000..7584c98396 --- /dev/null +++ b/examples/quick/ui-components/spinner/main.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import "content" + +Rectangle { + width: 240; height: 320 + + Column { + y: 20; x: 20; spacing: 20 + + Spinner { + id: spinner + width: 200; height: 240 + focus: true + model: 20 + itemHeight: 30 + delegate: Text { font.pixelSize: 25; text: index; height: 30 } + } + + Text { text: "Current item index: " + spinner.currentIndex } + } +} diff --git a/examples/quick/ui-components/spinner/spinner.qmlproject b/examples/quick/ui-components/spinner/spinner.qmlproject new file mode 100644 index 0000000000..e5a8bf02ca --- /dev/null +++ b/examples/quick/ui-components/spinner/spinner.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.1 + +Project { + mainFile: "main.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} diff --git a/examples/quick/ui-components/tabwidget/TabWidget.qml b/examples/quick/ui-components/tabwidget/TabWidget.qml new file mode 100644 index 0000000000..560ed1f58a --- /dev/null +++ b/examples/quick/ui-components/tabwidget/TabWidget.qml @@ -0,0 +1,102 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: tabWidget + + // Setting the default property to stack.children means any child items + // of the TabWidget are actually added to the 'stack' item's children. + // See the "Property Binding" + // documentation for details on default properties. + default property alias content: stack.children + + property int current: 0 + + onCurrentChanged: setOpacities() + Component.onCompleted: setOpacities() + + function setOpacities() { + for (var i = 0; i < stack.children.length; ++i) { + stack.children[i].opacity = (i == current ? 1 : 0) + } + } + + Row { + id: header + + Repeater { + model: stack.children.length + delegate: Rectangle { + width: tabWidget.width / stack.children.length; height: 36 + + Rectangle { + width: parent.width; height: 1 + anchors { bottom: parent.bottom; bottomMargin: 1 } + color: "#acb2c2" + } + BorderImage { + anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 } + border { left: 7; right: 7 } + source: "tab.png" + visible: tabWidget.current == index + } + Text { + horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter + anchors.fill: parent + text: stack.children[index].title + elide: Text.ElideRight + font.bold: tabWidget.current == index + } + MouseArea { + anchors.fill: parent + onClicked: tabWidget.current = index + } + } + } + } + + Item { + id: stack + width: tabWidget.width + anchors.top: header.bottom; anchors.bottom: tabWidget.bottom + } +} diff --git a/examples/quick/ui-components/tabwidget/main.qml b/examples/quick/ui-components/tabwidget/main.qml new file mode 100644 index 0000000000..df99c11b7d --- /dev/null +++ b/examples/quick/ui-components/tabwidget/main.qml @@ -0,0 +1,99 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +TabWidget { + id: tabs + width: 640; height: 480 + + Rectangle { + property string title: "Red" + anchors.fill: parent + color: "#e3e3e3" + + Rectangle { + anchors.fill: parent; anchors.margins: 20 + color: "#ff7f7f" + Text { + width: parent.width - 20 + anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter + text: "Roses are red" + font.pixelSize: 20 + wrapMode: Text.WordWrap + } + } + } + + Rectangle { + property string title: "Green" + anchors.fill: parent + color: "#e3e3e3" + + Rectangle { + anchors.fill: parent; anchors.margins: 20 + color: "#7fff7f" + Text { + width: parent.width - 20 + anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter + text: "Flower stems are green" + font.pixelSize: 20 + wrapMode: Text.WordWrap + } + } + } + + Rectangle { + property string title: "Blue" + anchors.fill: parent; color: "#e3e3e3" + + Rectangle { + anchors.fill: parent; anchors.margins: 20 + color: "#7f7fff" + Text { + width: parent.width - 20 + anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter + text: "Violets are blue" + font.pixelSize: 20 + wrapMode: Text.WordWrap + } + } + } +} diff --git a/examples/quick/ui-components/tabwidget/tab.png b/examples/quick/ui-components/tabwidget/tab.png new file mode 100644 index 0000000000..ad8021605f Binary files /dev/null and b/examples/quick/ui-components/tabwidget/tab.png differ diff --git a/examples/quick/ui-components/tabwidget/tabwidget.qmlproject b/examples/quick/ui-components/tabwidget/tabwidget.qmlproject new file mode 100644 index 0000000000..e5a8bf02ca --- /dev/null +++ b/examples/quick/ui-components/tabwidget/tabwidget.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.1 + +Project { + mainFile: "main.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} -- cgit v1.2.3