diff options
author | Simon Hausmann <simon.hausmann@digia.com> | 2014-02-11 11:08:11 +0100 |
---|---|---|
committer | Simon Hausmann <simon.hausmann@digia.com> | 2014-02-11 12:00:31 +0100 |
commit | 7c9497a6d47a02d961baef3993ba4cf4267ec607 (patch) | |
tree | 335fae3e9e3a84d33310efca23f1d6993265805b /examples/quick/customitems | |
parent | 67ba88947f57ab2d1859bbeb96c6dcba020561b1 (diff) | |
parent | 6c840c70d61c3ae277b60a024a086215c743e5b3 (diff) |
Merge remote-tracking branch 'origin/stable' into dev
Conflicts:
src/qml/compiler/qv4ssa.cpp
src/qml/jsruntime/qv4arrayobject.cpp
src/qml/jsruntime/qv4context.cpp
Change-Id: Ied5b23bec4dc14abe51127c507aed668f855c1e1
Diffstat (limited to 'examples/quick/customitems')
-rw-r--r-- | examples/quick/customitems/slideswitch/doc/src/example-slideswitch.qdoc | 132 |
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 +*/ |