diff options
Diffstat (limited to 'sources/pyside2/doc/tutorials/qmltutorial')
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial1.png | bin | 3577 -> 0 bytes | |||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial2.png | bin | 3913 -> 0 bytes | |||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial3_animation.gif | bin | 301974 -> 0 bytes | |||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/helloworld.tar.bz2 | bin | 2401 -> 0 bytes | |||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml | 82 | ||||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml | 73 | ||||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml | 82 | ||||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml | 101 | ||||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/index.rst | 25 | ||||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/step1.rst | 66 | ||||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/step2.rst | 81 | ||||
-rw-r--r-- | sources/pyside2/doc/tutorials/qmltutorial/step3.rst | 46 |
12 files changed, 0 insertions, 556 deletions
diff --git a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial1.png b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial1.png Binary files differdeleted file mode 100644 index c9d3844cb..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial1.png +++ /dev/null diff --git a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial2.png b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial2.png Binary files differdeleted file mode 100644 index 835484aa4..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial2.png +++ /dev/null diff --git a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial3_animation.gif b/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial3_animation.gif Binary files differdeleted file mode 100644 index 80b78dea9..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/declarative-tutorial3_animation.gif +++ /dev/null diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld.tar.bz2 b/sources/pyside2/doc/tutorials/qmltutorial/helloworld.tar.bz2 Binary files differdeleted file mode 100644 index 001a5258d..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld.tar.bz2 +++ /dev/null diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml deleted file mode 100644 index 78ff12dd5..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/Cell.qml +++ /dev/null @@ -1,82 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of Qt for Python. -** -** $QT_BEGIN_LICENSE:BSD$ -** 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 The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, you may use this file under the terms of the BSD license -** as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of The Qt Company Ltd nor the names of its -** contributors may be used to endorse or promote products derived -** from this software without specific prior written permission. -** -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -//![0] -import QtQuick 2.0 - -//![1] -Item { - id: container -//![4] - property alias cellColor: rectangle.color -//![4] -//![5] - signal clicked(color cellColor) -//![5] - - width: 40; height: 25 -//![1] - -//![2] - Rectangle { - id: rectangle - border.color: "white" - anchors.fill: parent - } -//![2] - -//![3] - MouseArea { - anchors.fill: parent - onClicked: container.clicked(container.cellColor) - } -//![3] -} -//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml deleted file mode 100644 index 381aeb8c4..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial1.qml +++ /dev/null @@ -1,73 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of Qt for Python. -** -** $QT_BEGIN_LICENSE:BSD$ -** 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 The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, you may use this file under the terms of the BSD license -** as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of The Qt Company Ltd nor the names of its -** contributors may be used to endorse or promote products derived -** from this software without specific prior written permission. -** -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -//![0] -//![3] -import QtQuick 2.0 -//![3] - -//![1] -Rectangle { - id: page - width: 500; height: 200 - color: "lightgray" -//![1] - -//![2] - Text { - id: helloText - text: "Hello world!" - y: 30 - anchors.horizontalCenter: page.horizontalCenter - font.pointSize: 24; font.bold: true - } -//![2] -} -//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml deleted file mode 100644 index 4fd0cbf98..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial2.qml +++ /dev/null @@ -1,82 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of Qt for Python. -** -** $QT_BEGIN_LICENSE:BSD$ -** 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 The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, you may use this file under the terms of the BSD license -** as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of The Qt Company Ltd nor the names of its -** contributors may be used to endorse or promote products derived -** from this software without specific prior written permission. -** -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -//![0] -import QtQuick 2.0 - -Rectangle { - id: page - width: 500; height: 200 - color: "lightgray" - - Text { - id: helloText - text: "Hello world!" - y: 30 - anchors.horizontalCenter: page.horizontalCenter - font.pointSize: 24; font.bold: true - } - - Grid { - id: colorPicker - x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4 - rows: 2; columns: 3; spacing: 3 - -//![1] - Cell { cellColor: "red"; onClicked: helloText.color = cellColor } -//![1] - Cell { cellColor: "green"; onClicked: helloText.color = cellColor } - Cell { cellColor: "blue"; onClicked: helloText.color = cellColor } - Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor } - Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor } - Cell { cellColor: "black"; onClicked: helloText.color = cellColor } - } -} -//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml b/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml deleted file mode 100644 index fcd7d388c..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/helloworld/tutorial3.qml +++ /dev/null @@ -1,101 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of Qt for Python. -** -** $QT_BEGIN_LICENSE:BSD$ -** 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 The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, you may use this file under the terms of the BSD license -** as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of The Qt Company Ltd nor the names of its -** contributors may be used to endorse or promote products derived -** from this software without specific prior written permission. -** -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ - -//![0] -import QtQuick 2.0 - -Rectangle { - id: page - width: 500; height: 200 - color: "lightgray" - - Text { - id: helloText - text: "Hello world!" - y: 30 - anchors.horizontalCenter: page.horizontalCenter - font.pointSize: 24; font.bold: true - -//![1] - MouseArea { id: mouseArea; anchors.fill: parent } -//![1] - -//![2] - states: State { - name: "down"; when: mouseArea.pressed == true - PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" } - } -//![2] - -//![3] - transitions: Transition { - from: ""; to: "down"; reversible: true - ParallelAnimation { - NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad } - ColorAnimation { duration: 500 } - } - } -//![3] - } - - Grid { - id: colorPicker - x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4 - rows: 2; columns: 3; spacing: 3 - - Cell { cellColor: "red"; onClicked: helloText.color = cellColor } - Cell { cellColor: "green"; onClicked: helloText.color = cellColor } - Cell { cellColor: "blue"; onClicked: helloText.color = cellColor } - Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor } - Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor } - Cell { cellColor: "black"; onClicked: helloText.color = cellColor } - } -} -//![0] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/index.rst b/sources/pyside2/doc/tutorials/qmltutorial/index.rst deleted file mode 100644 index 45a6842bc..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/index.rst +++ /dev/null @@ -1,25 +0,0 @@ - -.. _qmltutorial: - -QML Tutorial -************ - -This tutorial gives an introduction to QML, the mark up language for Qt Quick. It doesn't cover everything; -the emphasis is on teaching the key principles, and features are introduced as needed. - -Through the different steps of this tutorial you will learn about QML basic types, create our own QML component -with properties and signals, and create a simple animation with the help of states and transitions. - -Chapter one starts with a minimal "Hello world" program and the following chapters introduce new concepts. - -The tutorial's source code can be downloaded :download:`here<helloworld.tar.bz2>`. - -Tutorial chapters: - -.. toctree:: - :maxdepth: 1 - - step1.rst - step2.rst - step3.rst - diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step1.rst b/sources/pyside2/doc/tutorials/qmltutorial/step1.rst deleted file mode 100644 index bca69d9f4..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/step1.rst +++ /dev/null @@ -1,66 +0,0 @@ -.. _qmlbasictypes: - -QML Tutorial 1 - Basic Types -**************************** - -This first program is a very simple "Hello world" example that introduces some basic QML concepts. -The following image is a screenshot of this program. - -.. figure:: declarative-tutorial1.png - :align: center - -Here is the QML code for the application: - -.. pysideinclude:: helloworld/tutorial1.qml - :snippet: 0 - -Walkthrough -=========== - -Import ------- - -First, you need to import the types that are required for this example. Most QML files import the built-in QML -types (like Rectangle, Image, ...) that come with Qt, using the following statement: - -.. pysideinclude:: helloworld/tutorial1.qml - :snippet: 3 - -Rectangle element ------------------ - -.. pysideinclude:: helloworld/tutorial1.qml - :snippet: 1 - -Declare a root element using the Rectangle type, which is one of the basic building blocks to create an application in QML. -Give it an ``id`` so that you can refer to it later. For example, call it "page", and also set its ``width``, -``height``, and ``color`` properties. - -Text element ------------- - -.. pysideinclude code/tutorial1.qml - :snippet: 2 - -Add a Text element as the child of the Rectangle element to display the text, 'Hello world!'. - -Use its ``y`` property to position it at 30 pixels from the top of its parent. - -The ``anchors.horizontalCenter`` property refers to the horizontal center of an element. -In this case, specify that the text element must be horizontally centered in the *page* element. - -The ``font.pointSize`` and ``font.bold properties`` are related to fonts and use the dot notation. - - -Viewing the example -------------------- - -To view what you have created, run the ``qmlscene`` tool (located in the ``bin directory`` of your Qt installation) with your -QML filename as the first argument. For example, to run the Tutorial 1 example from the install -location, you would type: - -:: - - > [QT_INSTALL_DIR]\bin\qmlscene tutorial1.qml - -[Previous :ref:`qmltutorial`][Next :ref:`qmlcomponents`] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step2.rst b/sources/pyside2/doc/tutorials/qmltutorial/step2.rst deleted file mode 100644 index 5b48ca63f..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/step2.rst +++ /dev/null @@ -1,81 +0,0 @@ -.. _qmlcomponents: - -QML Tutorial 2 - QML Components -******************************* - -In this chapter, you are going to add a color picker to change the color of the text. - -.. figure:: declarative-tutorial2.png - :align: center - -The color picker is made of six cells with different colors. -To avoid writing the same code multiple times for each cell, create a new ``Cell`` component. -A component provides a way of defining a new type that you can re-use in other QML files. -A QML component is like a black-box that interacts with the outside world through its properties, signals, -and functions, and is generally defined in its own QML file. -The component's filename must always start with a capital letter. - -Here is the QML code for ``Cell``: - -.. pysideinclude:: helloworld/Cell.qml - :snippet: 0 - -Walkthrough -=========== - -The Cell Component ------------------- - -.. pysideinclude:: helloworld/Cell.qml - :snippet: 1 - -The root element of the component is an Item with the ``id``, *container*. -An Item is the most basic visual element in QML and is often used as a container for other elements. - -.. pysideinclude:: helloworld/Cell.qml - :snippet: 4 - -Its ``cellColor`` property is accessible from *outside* the component, allowing you -to instantiate cells with different colors. It is an alias to the existing color property of the rectangle -that composes the cell. - -.. pysideinclude:: helloworld/Cell.qml - :snippet: 5 - -The Cell has a signal called *clicked* with the *cellColor* parameter of type *color*. -You need this signal to change the color of the text in the main QML file later. - -.. pysideinclude:: helloworld/Cell.qml - :snippet: 2 - -The cell component is basically a colored rectangle with the ``id``, *rectangle*. - -Its ``anchors.fill`` property is a convenient way to set the size of an element. -In this case the rectangle will have the same size as its parent. - -.. pysideinclude:: helloworld/Cell.qml - :snippet: 3 - -In order to change the color of the text when the cell is clicked, a MouseArea element with -the same size as its parent is used. - -A MouseArea enables you to react to mouse events such as clicked, hover, and so on. In this case, when the MouseArea *clicked* -signal is reported, the Cell's *clicked* signal is emitted. - -The main QML file ------------------ - -In the main QML file, use the ``Cell`` component to create the color picker: - -.. pysideinclude:: helloworld/tutorial2.qml - :snippet: 0 - -Create the color picker by putting 6 cells with different colors in a grid. - -.. pysideinclude:: helloworld/tutorial2.qml - :snippet: 1 - -When the *clicked* signal of a cell is triggered, set the color of the text to the *cellColor* passed as a parameter. -You can react to a signal of a component through a handler of the name, *'onSignalName'*. - -[Previous :ref:`qmlbasictypes`][Next :ref:`qmlstatesandtransitions`] diff --git a/sources/pyside2/doc/tutorials/qmltutorial/step3.rst b/sources/pyside2/doc/tutorials/qmltutorial/step3.rst deleted file mode 100644 index 6d5a72f13..000000000 --- a/sources/pyside2/doc/tutorials/qmltutorial/step3.rst +++ /dev/null @@ -1,46 +0,0 @@ -.. _qmlstatesandtransitions: - -QML Tutorial 3 - States and Transitions -*************************************** - -In this chapter, you are guided through the steps to make the example a little more dynamic by -introducing states and transitions. For example, moving the text to the bottom of the screen, -rotate, and change its color when clicked. - -.. figure:: declarative-tutorial3_animation.gif - :align: center - -Here is the QML code for such a behavior: - -.. pysideinclude:: helloworld/tutorial3.qml - :snippet: 0 - -Walkthrough -=========== - -.. pysideinclude:: helloworld/tutorial3.qml - :snippet: 2 - -First, create a new *down* state for the text element. -Pressing the MouseArea activates this new state and releasing it deactivates the state. - -The *down* state includes a set of property changes from the implicit *default state* -(the items as they were initially defined in the QML). -Specifically, set the ``y`` property of the text to ``160``, rotation to ``180``, and ``color`` to red. - -.. pysideinclude:: helloworld/tutorial3.qml - :snippet: 3 - -To make the application even better, add a transiton between the two states so that switching between these -two states look smooth and nice. - -The ``from`` and ``to`` properties of the Transition element define the states between which the transition will run. -In this case, you want a transition from the default state to the *down* state. - -To have a similar transition effect when changing back from the *down* state to the default state, -set the ``reversible`` property to ``true``. This is equivalent to writing two transitions. - -The ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time. -You could also run them one after the other by using SequentialAnimation instead. - -[Previous :ref:`qmlcomponents`] |