From b788c70b95b0cca589c68da77fc7dd1ad50dabc6 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Tue, 12 May 2020 14:51:44 +0200 Subject: Doc: Update info about States view Check terminology, restructure information, and update screenshots. Task-number: QDS-2056 Change-Id: Ieaa2d0856bf2d310f67d8c0d9f9376a48cf33534 Reviewed-by: Thomas Hartmann --- doc/qtcreator/images/qmldesigner-screen-design.png | Bin 81247 -> 54663 bytes .../images/qmldesigner-states-when-condition.png | Bin 25214 -> 15375 bytes doc/qtcreator/images/qmldesigner-states.png | Bin 61713 -> 34569 bytes doc/qtcreator/images/qmldesigner-transitions.png | Bin 5169 -> 6353 bytes .../creator-only/qtquick-states-scxml.qdocinc | 15 +-- doc/qtcreator/src/qtquick/qtquick-states.qdoc | 107 ++++++++++----------- 6 files changed, 61 insertions(+), 61 deletions(-) diff --git a/doc/qtcreator/images/qmldesigner-screen-design.png b/doc/qtcreator/images/qmldesigner-screen-design.png index 42bb30bb16..ff19977a0f 100644 Binary files a/doc/qtcreator/images/qmldesigner-screen-design.png and b/doc/qtcreator/images/qmldesigner-screen-design.png differ diff --git a/doc/qtcreator/images/qmldesigner-states-when-condition.png b/doc/qtcreator/images/qmldesigner-states-when-condition.png index a26ba37b52..7a1530efb0 100644 Binary files a/doc/qtcreator/images/qmldesigner-states-when-condition.png and b/doc/qtcreator/images/qmldesigner-states-when-condition.png differ diff --git a/doc/qtcreator/images/qmldesigner-states.png b/doc/qtcreator/images/qmldesigner-states.png index 0b2510e6dc..4f1193bfba 100644 Binary files a/doc/qtcreator/images/qmldesigner-states.png and b/doc/qtcreator/images/qmldesigner-states.png differ diff --git a/doc/qtcreator/images/qmldesigner-transitions.png b/doc/qtcreator/images/qmldesigner-transitions.png index 8d7309ddc8..8791133a87 100644 Binary files a/doc/qtcreator/images/qmldesigner-transitions.png and b/doc/qtcreator/images/qmldesigner-transitions.png differ diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc b/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc index ccbc236229..18100dfe36 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-states-scxml.qdocinc @@ -26,20 +26,23 @@ /*! //! [scxml state machines] - \section2 Using SCXML State Machines + \section1 Using SCXML State Machines - To use QML together with an SCXML state machine, add states and bind them to - the state machine in the \uicontrol Backends tab in the Design mode, as + To use QML together with an SCXML state machine, add states and + bind them to the state machine in the \uicontrol Backends tab + of the \uicontrol Connections view, as described in \l {Managing C++ Backend Objects}. - In the \uicontrol States view, you can edit the \c when condition of states + In the \uicontrol States view, you can select \uicontrol Actions > + \uicontrol {Set when Condition} to edit the \c when condition of states to map QML states to the states of the SCXML state machine. For an example, see \l {Qt SCXML Traffic Light QML Example (Dynamic)}. \image qmldesigner-states-when-condition.png - If you add animation to the states, you can run the application to test the - animation. + If you add animation to the states, you can \l{Previewing}{preview} + or \l{Running on Multiple Platforms}{run} the application to test + the animation. //! [scxml state machines] */ diff --git a/doc/qtcreator/src/qtquick/qtquick-states.qdoc b/doc/qtcreator/src/qtquick/qtquick-states.qdoc index d670fb21b5..d3902d34d6 100644 --- a/doc/qtcreator/src/qtquick/qtquick-states.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-states.qdoc @@ -55,56 +55,59 @@ \list \li Show some UI items and hide others. \li Present different available actions to the user. - \li Start, stop or pause animations. + \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. \endlist + \section1 Creating States + The \uicontrol States view displays the different \l{State}{states} - of the component in the Design mode. The \uicontrol States view is - collapsed by default to save space. Select \uicontrol Expand in - the context menu to view the whole view. + of a UI, beginning with a \e {base state}. \image qmldesigner-transitions.png "States view" 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 view, 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. - Set the value of the property to an expression that - evaluates to \c true when you want the state to be applied. - In the binding editor, select the component and property to - create the expression. For example, to change the state when - a button is pressed, you could select a button component and - its pressed property. - - \image qtquick-states-binding-editor.png "Binding editor in States view" - - You can preview the states in the \uicontrol States view and click them to - switch between states on the canvas. + button. Click the new state to switch to it in \uicontrol {Form Editor}, + and then modify the properties of components in \uicontrol Properties. - \section1 Using States + 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 view, + you can change the position of an object in \uicontrol {Form Editor} + and then add animation to the change between the states. + + The properties that you change in a state are highlighted with blue color. + In \uicontrol {Text Editor}, you can see the changes recorded as changes + to the base state. - QML states typically describe user interface configurations, such as the UI - controls, their properties and behavior and the available actions. For - example, you can use states to create two views. + \image qmldesigner-states.png "States and Properties views" - To add states, click the empty slot in the \uicontrol States view. - Then modify the new state in the \uicontrol {Form Editor} or the - \uicontrol Properties view. + \section1 Setting the Default State - \image qmldesigner-states.png "States view" + To determine the startup state of the application, + select \inlineimage icons/action-icon.png + to open the \uicontrol Actions menu, and then select + \uicontrol {Set as Default}. - The properties that you change in a state are highlighted with blue color. - In the \uicontrol {Text Editor}, you can see the changes recorded as changes - to the base state. + To reset the state later, select \uicontrol Actions > + \uicontrol {Reset Default}. + + \section1 Applying States + + To determine when a state should be applied, select \uicontrol Actions > + \uicontrol {Set when Condition}. In \uicontrol {Binding Editor}, specify + a \l [QtQuick]{State::when}{when} property for the state. Set the value of + the property to an expression that evaluates to \c true when you want the + state to be applied. + + In \uicontrol {Binding Editor}, select the component and property to + create the expression. For example, to change the state when a button is + pressed, you could select a button component and its pressed property. + + \image qtquick-states-binding-editor.png "Binding Editor in States view" + + \section1 Using States To keep the QML code clean, you should create a base state that contains all the types you will need in the application. You can then create states, @@ -124,30 +127,24 @@ To create views for an application by using states: + \image qmldesigner-screen-design.png "Designing views" + \list 1 \li In the base state, add all items you will need in the application (1). While you work on one view, you can click the \inlineimage eye_open.png icon to hide items on the canvas that are not part of a view. - \li In the \uicontrol States view, click the empty slot to create a + \li In \uicontrol States, click the empty slot to create a new state and give it a name. For example, \c Normal. - \li In the \uicontrol Properties view (2), deselect the - \uicontrol Visibility check box or set \uicontrol Opacity to 0 - for each item that is not needed in this view. If you specify - the setting for the parent item, all child items inherit it and - are also hidden. - \image qmldesigner-screen-design.png "Designing views" + \li In \uicontrol Properties (2), deselect the \uicontrol Visibility + check box or set \uicontrol Opacity to 0 for each item that is not + needed in this view. If you specify the setting for the parent item, + all child items inherit it and are also hidden. \li Create additional states for each view and set the visibility or opacity of the items in the view. - \li To determine which view opens when the application starts, use the - \uicontrol {Text Editor} to set the state of the root item of the - .qml file, as specified by the following code snippet: - \qml - Item { - state: "Normal" - } - \endqml - \endlist + \li To determine which state is applied when the application starts, + select \uicontrol Actions > \uicontrol {Set as Default}. + \endlist \if defined(qtcreator) \include qtquick-states-scxml.qdocinc scxml state machines @@ -165,7 +162,7 @@ the type of behavior that is required. You can drag and drop the following QML types from \uicontrol Library - > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to the + > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to \uicontrol Navigator or \uicontrol {Form Editor}: \list @@ -181,10 +178,10 @@ sequential animation to create a step where nothing happens, for a specified duration. \li \l [QML] {PropertyAction}{Property Action} immediately changes - a propertyvalue during an animation, without animating the property - change. + a property value during an animation, without animating the + property change. \li \l [QML] {PropertyAnimation}{Property Animation} animates - changes in thevalue of a property. + changes in the value of a property. \li \l [QML] {ScriptAction}{Script Action} defines scripts to be run during an animation. \li \l [QML] {SequentialAnimation}{Sequential Animation} enables -- cgit v1.2.3