diff options
author | Leena Miettinen <riitta-leena.miettinen@qt.io> | 2018-07-03 14:05:22 +0200 |
---|---|---|
committer | Leena Miettinen <riitta-leena.miettinen@qt.io> | 2018-07-03 12:54:25 +0000 |
commit | 7201b26a5298b987144c2fc233f8f953359ae064 (patch) | |
tree | 987653cbd5b851ec67af0b25cf35d7f1a605dc21 /doc | |
parent | 69108b614a4e99e67de4bccfbb503e0e1517cae3 (diff) |
Doc: Pull out "Adding States" into a separate topic
To further modularize the Manual.
Change-Id: I9b51ce951b92ff6690780de3d9f08f436169150d
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Diffstat (limited to 'doc')
-rw-r--r-- | doc/src/qtcreator-toc.qdoc | 1 | ||||
-rw-r--r-- | doc/src/qtquick/qtquick-components.qdoc | 2 | ||||
-rw-r--r-- | doc/src/qtquick/qtquick-connection-editor-backend.qdoc | 2 | ||||
-rw-r--r-- | doc/src/qtquick/qtquick-designer.qdoc | 66 | ||||
-rw-r--r-- | doc/src/qtquick/qtquick-states.qdoc | 88 |
5 files changed, 92 insertions, 67 deletions
diff --git a/doc/src/qtcreator-toc.qdoc b/doc/src/qtcreator-toc.qdoc index c18c379cdb..0f30047180 100644 --- a/doc/src/qtcreator-toc.qdoc +++ b/doc/src/qtcreator-toc.qdoc @@ -96,6 +96,7 @@ \li \l{Adding Bindings Between Properties} \li \l{Managing C++ Backend Objects} \endlist + \li \l {Adding States} \li \l {Creating Components} \li \l {Creating Buttons} \li \l {Creating Scalable Buttons and Borders} diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc index 7ddfecf073..31af869be8 100644 --- a/doc/src/qtquick/qtquick-components.qdoc +++ b/doc/src/qtquick/qtquick-components.qdoc @@ -32,7 +32,7 @@ /*! \contentspage {Qt Creator Manual} - \previouspage qmldesigner-connections.html + \previouspage quick-states.html \page quick-components.html \nextpage quick-buttons.html diff --git a/doc/src/qtquick/qtquick-connection-editor-backend.qdoc b/doc/src/qtquick/qtquick-connection-editor-backend.qdoc index e79b32eec2..5cd7b328f1 100644 --- a/doc/src/qtquick/qtquick-connection-editor-backend.qdoc +++ b/doc/src/qtquick/qtquick-connection-editor-backend.qdoc @@ -27,7 +27,7 @@ \contentspage {Qt Creator Manual} \previouspage quick-property-bindings.html \page quick-connections-backend.html - \nextpage quick-components.html + \nextpage quick-states.html \title Managing C++ Backend Objects diff --git a/doc/src/qtquick/qtquick-designer.qdoc b/doc/src/qtquick/qtquick-designer.qdoc index 62e66312cc..753f02a538 100644 --- a/doc/src/qtquick/qtquick-designer.qdoc +++ b/doc/src/qtquick/qtquick-designer.qdoc @@ -93,7 +93,7 @@ \li \uicontrol {State} pane (6) displays the different states of the item. QML states typically describe user interface configurations, such as the UI controls, their properties and behavior and the available - actions. + actions. For more information, see \l{Adding States}. \endlist @@ -426,70 +426,6 @@ \image qmldesigner-inline-editing.png - \section1 Adding States - - User interfaces are designed to present different interface configurations - in different scenarios, or to modify their appearances in response to user - interaction. Often, there are a set of changes that are made concurrently, - such that the interface could be seen to be internally changing from one - \e state to another. - - This applies generally to interfaces regardless of their complexity. - A photo viewer may initially present images in a grid, and when an image is - clicked, change to a detailed state where the individual image is expanded - and the interface is changed to present new options for image editing. - On the other end of the scale, when a simple button is pressed, it may change - to a \e pressed state in which its color and position is modified to give a - pressed appearance. - - In QML, any item can change between different states to apply sets of - changes that modify the properties of relevant items. Each state can present - a different configuration that can, for example: - - \list - - \li Show some UI items and hide others. - - \li Present different available actions to the user. - - \li Start, stop or pause animations. - - \li Execute some script required in the new state. - - \li Change a property value for a particular item. - - \li Show a different view or screen. - - \endlist - - The \uicontrol State pane displays the different \l{State}{states} - of the component in the Design mode. The \uicontrol State pane is - collapsed by default to save space. Select \uicontrol Expand in the context - menu to view the whole pane. - - \image qmldesigner-transitions.png "State pane" - - To add states, click the \inlineimage plus.png - button. Then modify the new state in the editor. - For example, to change the appearance of a button, you can hide the button - image and show another image in its place. Or, to add movement to the screen, - you can change the position of an object on the canvas and then add animation - to the change between the states. - - To determine when the state should be applied, select - \uicontrol {Set when Condition} in the menu and specify a - \l [QtQuick]{State::when}{when} property for the state. - - You can preview the states in the \uicontrol State pane and click them to switch - between states on the canvas. - - For more information on using states, see \l{Creating Screens}. - - If you add animation to the states, you can run the application to test the - animation. - - For more information on adding animation, see \l{Animating Screens}. - \section1 Working with QML Types on Canvas You design applications on the canvas by placing items on it. diff --git a/doc/src/qtquick/qtquick-states.qdoc b/doc/src/qtquick/qtquick-states.qdoc new file mode 100644 index 0000000000..80316aaa4f --- /dev/null +++ b/doc/src/qtquick/qtquick-states.qdoc @@ -0,0 +1,88 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Creator documentation. +** +** 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. +** +** 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: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \contentspage {Qt Creator Manual} + \previouspage quick-connections-backend.html + \page quick-states.html + \nextpage quick-components.html + + \title Adding States + + User interfaces are designed to present different interface configurations + in different scenarios, or to modify their appearances in response to user + interaction. Often, there are a set of changes that are made concurrently, + such that the interface could be seen to be internally changing from one + \e state to another. + + This applies generally to interfaces regardless of their complexity. A photo + viewer may initially present images in a grid, and when an image is clicked, + change to a detailed state where the individual image is expanded and the + interface is changed to present new options for image editing. At the other + end of the scale, when a button is pressed, it may change to a + \e pressed state in which its color and position are modified so that it + appears to be pressed down. + + In QML, any item can change between different states to apply sets of + changes that modify the properties of relevant items. Each state can + present a different configuration that can, for example: + + \list + \li Show some UI items and hide others. + \li Present different available actions to the user. + \li Start, stop or pause animations. + \li Execute some script required in the new state. + \li Change a property value for a particular item. + \li Show a different view or screen. + \endlist + + The \uicontrol State pane displays the different \l{State}{states} + of the component in the Design mode. The \uicontrol State pane is + collapsed by default to save space. Select \uicontrol Expand in + the context menu to view the whole pane. + + \image qmldesigner-transitions.png "State pane" + + To add states, click the \inlineimage plus.png + button. Then modify the new state in the editor. For example, to change the + appearance of a button, you can hide the button image and show another image + in its place. Or, to add movement to the screen, you can change the position + of an object on the canvas and then add animation to the change between the + states. + + To determine when the state should be applied, select + \uicontrol {Set when Condition} in the menu and specify a + \l [QtQuick]{State::when}{when} property for the state. + + You can preview the states in the \uicontrol State pane and click them to + switch between states on the canvas. + + For more information about using states, see \l{Creating Screens}. + + If you add animation to the states, you can run the application to test the + animation. + + For more information about adding animation, see \l{Animating Screens}. +*/ |