Doc: Merge duplicated example directories

examples/quick/customitems contains all the examples found in
examples/quick/ui-components, plus 2 more (maskedmousearea and
painteditem). There are some very minor differences between the
duplicated files, regarding the "smooth" property. Apart from that, the
examples are identical.

The only file that is unique to examples/quick/ui-components is
example-slideswitch.qdoc. Moving it does not change the generated HTML
filename. The other examples do not produce any documentation.

Change-Id: I507d9064a60fd1f3a1469c1e423d4c0a72c7dc41
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>

1 files changed, 132 insertions, 0 deletions

diff --git a/examples/quick/customitems/slideswitch/doc/src/example-slideswitch.qdoc b/examples/quick/customitems/slideswitch/doc/src/example-slideswitch.qdoc
new file mode 100644
index 0000000000..13df390ef5
--- /dev/null
+++ b/examples/quick/customitems/slideswitch/doc/src/example-slideswitch.qdoc
@@ -0,0 +1,132 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 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 Qt Quick Examples - Toggle Switch
+\brief A reusable switch component made in QML
+ \ingroup qtquickexamples
+
+This example shows how to create a reusable switch component in QML.
+
+The code for this example can be found in the \c examples/quick/customitems/slideswitch directory.
+
+The objects 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 customitems/slideswitch/content/Switch.qml 0
+
+\section1 Walkthrough
+
+\section2 Interface
+\snippet customitems/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 customitems/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 customitems/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 customitems/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 customitems/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 customitems/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{JavaScript Expressions in QML Documents}.
+
+\section2 Transition
+\snippet customitems/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 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 customitems/slideswitch/slideswitch.qml 0
+*/