Merge branch 'newdocs'

Change-Id: Idd7a9837e4f6a1358edf9accdcdc3c71822f4c25

24 files changed, 207 insertions, 3 deletions

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
--- /dev/null
+++ b/examples/demos/calqlatr/doc/images/qml-calqlatr-demo-small.png
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
--- /dev/null
+++ b/examples/particles/affectors/doc/images/qml-affectors-example.png
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
--- /dev/null
+++ b/examples/particles/customparticle/doc/images/qml-customparticle-example.png
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
--- /dev/null
+++ b/examples/particles/emitters/doc/images/qml-emitters-example.png
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
--- /dev/null
+++ b/examples/particles/imageparticle/doc/images/qml-imageparticle-example.png
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
--- /dev/null
+++ b/examples/particles/system/doc/images/qml-system-example.png
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
--- /dev/null
+++ b/examples/qml/dynamicscene/doc/images/qml-dynamicscene-example.png
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
--- /dev/null
+++ b/examples/qml/i18n/doc/images/qml-i18n-example.png
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
--- /dev/null
+++ b/examples/quick/animation/doc/images/qml-animations-example.png
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
--- /dev/null
+++ b/examples/quick/canvas/doc/images/qml-canvas-example.png
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
--- /dev/null
+++ b/examples/quick/draganddrop/doc/images/qml-draganddrop-example.png
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
--- /dev/null
+++ b/examples/quick/imageelements/doc/images/qml-imageelements-example.png
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
--- /dev/null
+++ b/examples/quick/keyinteraction/doc/images/qml-keyinteraction-example.png
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
--- /dev/null
+++ b/examples/quick/modelviews/doc/images/qml-modelviews-example.png
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
--- /dev/null
+++ b/examples/quick/mousearea/doc/images/qml-mousearea-example.png
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
--- /dev/null
+++ b/examples/quick/painteditem/textballoons/doc/images/declarative-textballoons_example.png
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
--- /dev/null
+++ b/examples/quick/positioners/doc/images/qml-positioners-example.png
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
--- /dev/null
+++ b/examples/quick/righttoleft/doc/images/qml-righttoleft-example.png
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
--- /dev/null
+++ b/examples/quick/shadereffects/doc/images/qml-shadereffects-example.png
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
--- /dev/null
+++ b/examples/quick/text/doc/images/qml-text-example.png
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
--- /dev/null
+++ b/examples/quick/threading/doc/images/qml-threading-example.png
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
--- /dev/null
+++ b/examples/quick/touchinteraction/doc/images/qml-touchinteraction-example.png
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
+*/