diff options
Diffstat (limited to 'doc/src/qtquick1/example-slideswitch.qdoc')
-rw-r--r-- | doc/src/qtquick1/example-slideswitch.qdoc | 130 |
1 files changed, 0 insertions, 130 deletions
diff --git a/doc/src/qtquick1/example-slideswitch.qdoc b/doc/src/qtquick1/example-slideswitch.qdoc deleted file mode 100644 index 75fe3cd2ff..0000000000 --- a/doc/src/qtquick1/example-slideswitch.qdoc +++ /dev/null @@ -1,130 +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$ -** -****************************************************************************/ - -/*! -\page qdeclarativeexampletoggleswitch.html -\inqmlmodule QtQuick 1 -\title QML Example - Toggle Switch - -This example shows how to create a reusable switch component in QML. - -The code for this example can be found in the \c $QTDIR/examples/declarative/ui-components/slideswitch directory. - -The elements that compose the switch are: - -\list -\o a \c on property (the interface to interact with the switch), -\o two images (the background image and the knob), -\o two mouse regions for user interation (on the background image and on the knob), -\o two states (a \e on state and a \e off state), -\o two functions or slots to react to the user interation (\c toggle() and \c dorelease()), -\o and a transition that describe how to go from one state to the other. -\endlist - -\section1 Switch.qml -\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 0 - -\section1 Walkthrough - -\section2 Interface -\snippet examples/declarative/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/declarative/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/declarative/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/declarative/ui-components/slideswitch/content/Switch.qml 6 - -We define the two states of the switch: -\list -\o In the \e on state the knob is on the right (\c x position is 78) and the \c on property is \c true. -\o 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{qmlstates}{QML States}. - -\section2 Functions - -We add two JavaScript functions to our switch: - -\snippet examples/declarative/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/declarative/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{Integrating JavaScript}. - -\section2 Transition -\snippet examples/declarative/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{QML Animation and Transitions}. - -\section1 Usage -The switch can be used in a QML file, like this: -\snippet examples/declarative/ui-components/slideswitch/slideswitch.qml 0 -*/ |