From 61d35829eed6661c1371d397bbb316ea2f636c50 Mon Sep 17 00:00:00 2001 From: Venugopal Shivashankar Date: Wed, 7 Nov 2012 19:09:52 +0100 Subject: Doc: Moved all content in the doc directory. - most images to the corresponding examples directory - Fixed a few broken links to the examples and qdoc pages - removed the obsolete and unused images and qdoc pages Change-Id: I18f9551b42ec713b81e3f69694a2bd04b1ebf794 Reviewed-by: Geir Vattekar --- .../doc/images/qml-calqlatr-demo-small.png | Bin 0 -> 37120 bytes .../affectors/doc/images/qml-affectors-example.png | Bin 0 -> 22074 bytes .../doc/images/qml-customparticle-example.png | Bin 0 -> 123781 bytes .../emitters/doc/images/qml-emitters-example.png | Bin 0 -> 54749 bytes .../doc/images/qml-imageparticle-example.png | Bin 0 -> 274020 bytes .../system/doc/images/qml-system-example.png | Bin 0 -> 172685 bytes .../doc/images/qml-dynamicscene-example.png | Bin 0 -> 32286 bytes examples/qml/i18n/doc/images/qml-i18n-example.png | Bin 0 -> 1945 bytes .../doc/images/qml-animations-example.png | Bin 0 -> 2544 bytes .../quick/canvas/doc/images/qml-canvas-example.png | Bin 0 -> 18373 bytes .../doc/images/qml-draganddrop-example.png | Bin 0 -> 24196 bytes .../doc/images/qml-imageelements-example.png | Bin 0 -> 45828 bytes .../doc/images/qml-keyinteraction-example.png | Bin 0 -> 26514 bytes .../doc/images/qml-modelviews-example.png | Bin 0 -> 51072 bytes .../mousearea/doc/images/qml-mousearea-example.png | Bin 0 -> 18556 bytes .../images/declarative-textballoons_example.png | Bin 0 -> 29663 bytes .../textballoons/doc/src/textballoons.qdoc | 80 ++++++++++++- .../doc/images/qml-positioners-example.png | Bin 0 -> 17947 bytes .../doc/images/qml-righttoleft-example.png | Bin 0 -> 35323 bytes .../doc/images/qml-shadereffects-example.png | Bin 0 -> 133753 bytes .../quick/text/doc/images/qml-text-example.png | Bin 0 -> 71427 bytes .../threading/doc/images/qml-threading-example.png | Bin 0 -> 22778 bytes .../doc/images/qml-touchinteraction-example.png | Bin 0 -> 35860 bytes .../slideswitch/doc/src/example-slideswitch.qdoc | 130 +++++++++++++++++++++ 24 files changed, 207 insertions(+), 3 deletions(-) create mode 100644 examples/demos/calqlatr/doc/images/qml-calqlatr-demo-small.png create mode 100644 examples/particles/affectors/doc/images/qml-affectors-example.png create mode 100644 examples/particles/customparticle/doc/images/qml-customparticle-example.png create mode 100644 examples/particles/emitters/doc/images/qml-emitters-example.png create mode 100644 examples/particles/imageparticle/doc/images/qml-imageparticle-example.png create mode 100644 examples/particles/system/doc/images/qml-system-example.png create mode 100644 examples/qml/dynamicscene/doc/images/qml-dynamicscene-example.png create mode 100644 examples/qml/i18n/doc/images/qml-i18n-example.png create mode 100644 examples/quick/animation/doc/images/qml-animations-example.png create mode 100644 examples/quick/canvas/doc/images/qml-canvas-example.png create mode 100644 examples/quick/draganddrop/doc/images/qml-draganddrop-example.png create mode 100644 examples/quick/imageelements/doc/images/qml-imageelements-example.png create mode 100644 examples/quick/keyinteraction/doc/images/qml-keyinteraction-example.png create mode 100644 examples/quick/modelviews/doc/images/qml-modelviews-example.png create mode 100644 examples/quick/mousearea/doc/images/qml-mousearea-example.png create mode 100644 examples/quick/painteditem/textballoons/doc/images/declarative-textballoons_example.png create mode 100644 examples/quick/positioners/doc/images/qml-positioners-example.png create mode 100644 examples/quick/righttoleft/doc/images/qml-righttoleft-example.png create mode 100644 examples/quick/shadereffects/doc/images/qml-shadereffects-example.png create mode 100644 examples/quick/text/doc/images/qml-text-example.png create mode 100644 examples/quick/threading/doc/images/qml-threading-example.png create mode 100644 examples/quick/touchinteraction/doc/images/qml-touchinteraction-example.png create mode 100644 examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc (limited to 'examples') diff --git a/examples/demos/calqlatr/doc/images/qml-calqlatr-demo-small.png b/examples/demos/calqlatr/doc/images/qml-calqlatr-demo-small.png new file mode 100644 index 0000000000..af67f63dd1 Binary files /dev/null and b/examples/demos/calqlatr/doc/images/qml-calqlatr-demo-small.png differ diff --git a/examples/particles/affectors/doc/images/qml-affectors-example.png b/examples/particles/affectors/doc/images/qml-affectors-example.png new file mode 100644 index 0000000000..748afa65e5 Binary files /dev/null and b/examples/particles/affectors/doc/images/qml-affectors-example.png differ diff --git a/examples/particles/customparticle/doc/images/qml-customparticle-example.png b/examples/particles/customparticle/doc/images/qml-customparticle-example.png new file mode 100644 index 0000000000..e23c6c8efc Binary files /dev/null and b/examples/particles/customparticle/doc/images/qml-customparticle-example.png differ diff --git a/examples/particles/emitters/doc/images/qml-emitters-example.png b/examples/particles/emitters/doc/images/qml-emitters-example.png new file mode 100644 index 0000000000..0025afd30c Binary files /dev/null and b/examples/particles/emitters/doc/images/qml-emitters-example.png differ diff --git a/examples/particles/imageparticle/doc/images/qml-imageparticle-example.png b/examples/particles/imageparticle/doc/images/qml-imageparticle-example.png new file mode 100644 index 0000000000..9e44abe4fb Binary files /dev/null and b/examples/particles/imageparticle/doc/images/qml-imageparticle-example.png differ diff --git a/examples/particles/system/doc/images/qml-system-example.png b/examples/particles/system/doc/images/qml-system-example.png new file mode 100644 index 0000000000..1a317c4be8 Binary files /dev/null and b/examples/particles/system/doc/images/qml-system-example.png differ diff --git a/examples/qml/dynamicscene/doc/images/qml-dynamicscene-example.png b/examples/qml/dynamicscene/doc/images/qml-dynamicscene-example.png new file mode 100644 index 0000000000..38260a7d3f Binary files /dev/null and b/examples/qml/dynamicscene/doc/images/qml-dynamicscene-example.png differ diff --git a/examples/qml/i18n/doc/images/qml-i18n-example.png b/examples/qml/i18n/doc/images/qml-i18n-example.png new file mode 100644 index 0000000000..02f645e702 Binary files /dev/null and b/examples/qml/i18n/doc/images/qml-i18n-example.png differ diff --git a/examples/quick/animation/doc/images/qml-animations-example.png b/examples/quick/animation/doc/images/qml-animations-example.png new file mode 100644 index 0000000000..dbaf2e4d3b Binary files /dev/null and b/examples/quick/animation/doc/images/qml-animations-example.png differ diff --git a/examples/quick/canvas/doc/images/qml-canvas-example.png b/examples/quick/canvas/doc/images/qml-canvas-example.png new file mode 100644 index 0000000000..2651ad6ff5 Binary files /dev/null and b/examples/quick/canvas/doc/images/qml-canvas-example.png differ diff --git a/examples/quick/draganddrop/doc/images/qml-draganddrop-example.png b/examples/quick/draganddrop/doc/images/qml-draganddrop-example.png new file mode 100644 index 0000000000..b64f4d63a4 Binary files /dev/null and b/examples/quick/draganddrop/doc/images/qml-draganddrop-example.png differ diff --git a/examples/quick/imageelements/doc/images/qml-imageelements-example.png b/examples/quick/imageelements/doc/images/qml-imageelements-example.png new file mode 100644 index 0000000000..57b23a1f05 Binary files /dev/null and b/examples/quick/imageelements/doc/images/qml-imageelements-example.png differ diff --git a/examples/quick/keyinteraction/doc/images/qml-keyinteraction-example.png b/examples/quick/keyinteraction/doc/images/qml-keyinteraction-example.png new file mode 100644 index 0000000000..7f4dd77907 Binary files /dev/null and b/examples/quick/keyinteraction/doc/images/qml-keyinteraction-example.png differ diff --git a/examples/quick/modelviews/doc/images/qml-modelviews-example.png b/examples/quick/modelviews/doc/images/qml-modelviews-example.png new file mode 100644 index 0000000000..b40334653d Binary files /dev/null and b/examples/quick/modelviews/doc/images/qml-modelviews-example.png differ diff --git a/examples/quick/mousearea/doc/images/qml-mousearea-example.png b/examples/quick/mousearea/doc/images/qml-mousearea-example.png new file mode 100644 index 0000000000..d93dc92d74 Binary files /dev/null and b/examples/quick/mousearea/doc/images/qml-mousearea-example.png differ diff --git a/examples/quick/painteditem/textballoons/doc/images/declarative-textballoons_example.png b/examples/quick/painteditem/textballoons/doc/images/declarative-textballoons_example.png new file mode 100644 index 0000000000..d572de597c Binary files /dev/null and b/examples/quick/painteditem/textballoons/doc/images/declarative-textballoons_example.png differ diff --git a/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc index aeaf1cec1a..910072aee4 100644 --- a/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc +++ b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc @@ -25,8 +25,82 @@ ** ****************************************************************************/ + /*! - \title QtQuick Examples - Painted Text Balloons + \title Scenegraph Painted Item Example \example quick/painteditem/textballoons - \brief This is a simple example that draws text balloons using QPainter -*/ + + The Painted Item example shows how to use the QML Scene Graph framework to + implement custom scenegraph items using QPainter. + + \image declarative-textballoons_example.png + + The QQuickPaintedItem class is a class derived from QQuickItem for implementing + custom QML Scene Graph items using the QPainter interfaces. + + The example consists of an item class, a plugin class and a QML file + to use this plugin. The \c TextBalloon class represents the individual + text balloons extending QQuickPaintedItem, the \c TextBalloonPlugin class + represents the skeleton code for a QtQuick plugin and the + \c textballoons.qml file is used to load the plugin and display the text + balloons. + + We will focus on the \c TextBalloon class first and continue with the + \c textballoons.qml file. For an example on how to implement a QtQuick + plugin please look at \l{declarative/tutorials/extending/chapter6-plugins} + {Writing an Extension Plugin} + + \section1 TextBalloon Class Declaration + + The \c TextBalloon class inherits from QQuickPaintedItem. QQuickPaintedItem + is the base class for all QPainter based items in the QML Scene Graph + framework. + + \snippet examples/quick/painteditem/textballoons/textballoon.h 0 + + To implement a QQuickPaintedItem you must implement QQuickPaintedIem's pure + virtual function \l {QQuickPaintedItem::}{paint()} which implements the + painting of the element. + + \section1 TextBalloon Class Definition + + We have to be sure to initialize the rightAligned property for a + TextBalloon item. + + \snippet examples/quick/painteditem/textballoons/textballoon.cpp 0 + + Then we implement the \c paint() function which is automatically called by + the Scenegraph framework to paint the contents of the item. The function + paints the item in local coordinates. + + \snippet examples/quick/painteditem/textballoons/textballoon.cpp 1 + + We start with setting the pen and brush on the item to define the look of + the item. After that we start drawing. Note that the \l {QQuickPaintedItem::}{boundingRect()} + item is called to draw depending on the size of the item. The rectangle + returned by the \l {QQuickPaintedItem::}{boundingRect()} function is the size + of the item as defined in the QML file. + + \section1 textballoons.qml file + + The Interface consists of two main parts. The scrollable area with the + textballoons and the controls button to add new balloons. + + \section2 BalloonView + + \snippet examples/quick/painteditem/textballoons/textballoons.qml 0 + + The balloonModel contains two elements at application start which will be + displayed by the balloonView. The balloonView alernates the TextBalloon + delegate items between left-aligned and right-aligned. + + \section2 Controls + + \snippet examples/quick/painteditem/textballoons/textballoons.qml 1 + + The controls part of the UI contains a rectangle with a MouseArea which + changes color when the mouse hovers over it. This control 'button' adds + a new element to the end of the model with a random width. + + */ + diff --git a/examples/quick/positioners/doc/images/qml-positioners-example.png b/examples/quick/positioners/doc/images/qml-positioners-example.png new file mode 100644 index 0000000000..0c02f4a56a Binary files /dev/null and b/examples/quick/positioners/doc/images/qml-positioners-example.png differ diff --git a/examples/quick/righttoleft/doc/images/qml-righttoleft-example.png b/examples/quick/righttoleft/doc/images/qml-righttoleft-example.png new file mode 100644 index 0000000000..03c3c48f10 Binary files /dev/null and b/examples/quick/righttoleft/doc/images/qml-righttoleft-example.png differ diff --git a/examples/quick/shadereffects/doc/images/qml-shadereffects-example.png b/examples/quick/shadereffects/doc/images/qml-shadereffects-example.png new file mode 100644 index 0000000000..aba4e1faa9 Binary files /dev/null and b/examples/quick/shadereffects/doc/images/qml-shadereffects-example.png differ diff --git a/examples/quick/text/doc/images/qml-text-example.png b/examples/quick/text/doc/images/qml-text-example.png new file mode 100644 index 0000000000..71425d1522 Binary files /dev/null and b/examples/quick/text/doc/images/qml-text-example.png differ diff --git a/examples/quick/threading/doc/images/qml-threading-example.png b/examples/quick/threading/doc/images/qml-threading-example.png new file mode 100644 index 0000000000..6ed79ab190 Binary files /dev/null and b/examples/quick/threading/doc/images/qml-threading-example.png differ diff --git a/examples/quick/touchinteraction/doc/images/qml-touchinteraction-example.png b/examples/quick/touchinteraction/doc/images/qml-touchinteraction-example.png new file mode 100644 index 0000000000..d4f0cab201 Binary files /dev/null and b/examples/quick/touchinteraction/doc/images/qml-touchinteraction-example.png differ diff --git a/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc b/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc new file mode 100644 index 0000000000..2f8729af73 --- /dev/null +++ b/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc @@ -0,0 +1,130 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + + +/*! +\page qmlexampletoggleswitch.html tutorial +\title QML Example - Toggle Switch +\brief A reusable switch component made in QML +This example shows how to create a reusable switch component in QML. + +The code for this example can be found in the \c examples/tutorials/ui-components/slideswitch directory. + +The elements that compose the switch are: + +\list +\li a \c on property (the interface to interact with the switch), +\li two images (the background image and the knob), +\li two mouse regions for user interation (on the background image and on the knob), +\li two states (an \e on state and an \e off state), +\li two functions or slots to react to the user interation (\c toggle() and \c dorelease()), +\li and a transition that describe how to go from one state to the other. +\endlist + +\section1 Switch.qml +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 0 + +\section1 Walkthrough + +\section2 Interface +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 1 + +This property is the interface of the switch. By default, the switch is off and this property is \c false. +It can be used to activate/disactivate the switch or to query its current state. + +In this example: + +\qml +Item { + Switch { + id: mySwitch + on: true + } + Text { + text: "The switch is on" + visible: mySwitch.on == true + } +} +\endqml + +the text will only be visible when the switch is on. + +\section2 Images and user interaction +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 4 + +First, we create the background image of the switch. +In order for the switch to toggle when the user clicks on the background, we add a \l{MouseArea} as a child item of the image. +A \c MouseArea has a \c onClicked property that is triggered when the item is clicked. For the moment we will just call a +\c toggle() function. We will see what this function does in a moment. + +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 5 + +Then, we place the image of the knob on top of the background. +The interaction here is a little more complex. We want the knob to move with the finger when it is clicked. That is what the \c drag +property of the \c MouseArea is for. We also want to toggle the switch if the knob is released between state. We handle this case +in the \c dorelease() function that is called in the \c onReleased property. + +\section2 States +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 6 + +We define the two states of the switch: +\list +\li In the \e on state the knob is on the right (\c x position is 78) and the \c on property is \c true. +\li In the \e off state the knob is on the left (\c x position is 1) and the \c on property is \c false. +\endlist + +For more information on states see \l{Qt Quick States}. + +\section2 Functions + +We add two JavaScript functions to our switch: + +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 2 + +This first function is called when the background image or the knob are clicked. We simply want the switch to toggle between the two +states (\e on and \e off). + + +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 3 + +This second function is called when the knob is released and we want to make sure that the knob does not end up between states +(neither \e on nor \e off). If it is the case call the \c toggle() function otherwise we do nothing. + +For more information on scripts see \l{Using JavaScript Expressions in QML}. + +\section2 Transition +\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 7 + +At this point, when the switch toggles between the two states the knob will instantly change its \c x position between 1 and 78. +In order for the the knob to move smoothly we add a transition that will animate the \c x property with an easing curve for a duration of 200ms. + +For more information on transitions see \l{Animation and Transitions in Qt Quick}. + +\section1 Usage +The switch can be used in a QML file, like this: +\snippet examples/tutorials/ui-components/slideswitch/slideswitch.qml 0 +*/ -- cgit v1.2.3