diff options
author | Mats Honkamaa <mats.honkamaa@qt.io> | 2022-10-19 12:27:46 +0300 |
---|---|---|
committer | Mats Honkamaa <mats.honkamaa@qt.io> | 2022-10-24 06:53:48 +0000 |
commit | 1ac0acbd7f3c35c2a052f5e306bd243b4e75e2f4 (patch) | |
tree | 5e311b1f0bffb9836ea754f47a099014abd6786a | |
parent | 59b92b641740fff5ee3b0a292aaf800be43e2fa2 (diff) |
Doc: Update states view documentation
There is a new states view, documentation need to be updated.
Task-number: QDS-7892
Change-Id: I17ac7c192d4a8ddf0a10da6c8e399b126dabfebe
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
-rw-r--r-- | doc/qtdesignstudio/images/extended-state.webp | bin | 0 -> 10666 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/images/no-extended-state.webp | bin | 0 -> 12630 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/images/qmldesigner-screen-design.png | bin | 51378 -> 25413 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/images/qmldesigner-states.png | bin | 51844 -> 23625 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/images/qmldesigner-transitions.png | bin | 13966 -> 10532 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/images/states-view-menu.png | bin | 0 -> 94 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/images/studio-design-mode-states-timeline.png | bin | 22609 -> 12629 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/images/timeline-states.png | bin | 12233 -> 9294 bytes | |||
-rw-r--r-- | doc/qtdesignstudio/src/views/qtquick-states-view.qdoc | 45 | ||||
-rw-r--r-- | doc/qtdesignstudio/src/views/qtquick-states.qdoc | 56 |
10 files changed, 42 insertions, 59 deletions
diff --git a/doc/qtdesignstudio/images/extended-state.webp b/doc/qtdesignstudio/images/extended-state.webp Binary files differnew file mode 100644 index 0000000000..58eae1febf --- /dev/null +++ b/doc/qtdesignstudio/images/extended-state.webp diff --git a/doc/qtdesignstudio/images/no-extended-state.webp b/doc/qtdesignstudio/images/no-extended-state.webp Binary files differnew file mode 100644 index 0000000000..41fe322f0d --- /dev/null +++ b/doc/qtdesignstudio/images/no-extended-state.webp diff --git a/doc/qtdesignstudio/images/qmldesigner-screen-design.png b/doc/qtdesignstudio/images/qmldesigner-screen-design.png Binary files differindex 4ef84082d5..08192e0b4f 100644 --- a/doc/qtdesignstudio/images/qmldesigner-screen-design.png +++ b/doc/qtdesignstudio/images/qmldesigner-screen-design.png diff --git a/doc/qtdesignstudio/images/qmldesigner-states.png b/doc/qtdesignstudio/images/qmldesigner-states.png Binary files differindex 2b6e2794e1..552c644e64 100644 --- a/doc/qtdesignstudio/images/qmldesigner-states.png +++ b/doc/qtdesignstudio/images/qmldesigner-states.png diff --git a/doc/qtdesignstudio/images/qmldesigner-transitions.png b/doc/qtdesignstudio/images/qmldesigner-transitions.png Binary files differindex 9c91383878..4142cacee6 100644 --- a/doc/qtdesignstudio/images/qmldesigner-transitions.png +++ b/doc/qtdesignstudio/images/qmldesigner-transitions.png diff --git a/doc/qtdesignstudio/images/states-view-menu.png b/doc/qtdesignstudio/images/states-view-menu.png Binary files differnew file mode 100644 index 0000000000..6f93774904 --- /dev/null +++ b/doc/qtdesignstudio/images/states-view-menu.png diff --git a/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png b/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png Binary files differindex 2579687674..3b2b8b173a 100644 --- a/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png +++ b/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png diff --git a/doc/qtdesignstudio/images/timeline-states.png b/doc/qtdesignstudio/images/timeline-states.png Binary files differindex a1dc73e51e..0ef1f7da95 100644 --- a/doc/qtdesignstudio/images/timeline-states.png +++ b/doc/qtdesignstudio/images/timeline-states.png diff --git a/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc index fe83102f99..9ccd8d576c 100644 --- a/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc @@ -27,6 +27,7 @@ \page qtquick-states-view.html \previouspage qtquick-connection-view.html \nextpage studio-translations.html + \sa {Working with States} \title States @@ -47,48 +48,4 @@ \youtube FzmLuRHQXaw - \section1 Summary of States View Actions - - To open the \uicontrol Actions menu, select - \inlineimage icons/action-icon.png - . The actions available in the menu depend on the current context. For - example, the option for editing an annotation becomes available after - you add an annotation. - - \table - \header - \li Action - \li Purpose - \li Read More - \row - \li \uicontrol {Set when Condition} - \li Determines when a state should be applied. - \li \l{Applying States} - \row - \li \uicontrol {Reset when Condition} - \li Removes \c when condition for the state. - \li \l{Applying States} - \row - \li \uicontrol {Set as Default} - \li Sets the current state as the startup state of the application. - \li \l{Setting the Default State} - \row - \li\uicontrol {Reset Default} - \li Resets the current state as the default state. - \li \l{Setting the Default State} - \row - \li \uicontrol {Add Annotation} - \li Opens the \uicontrol {Annotation Editor} when you can add an - annotation for the states that you create. - \li \l{Annotating Designs} - \row - \li \uicontrol {Edit Annotation} - \li Opens the \uicontrol {Annotation Editor} where you can edit the - annotation for the state. - \li \l{Annotating Designs} - \row - \li \uicontrol {Add Annotation} - \li Removes the annotation for the state. - \li \l{Annotating Designs} - \endtable */ diff --git a/doc/qtdesignstudio/src/views/qtquick-states.qdoc b/doc/qtdesignstudio/src/views/qtquick-states.qdoc index b92146a792..6fce596599 100644 --- a/doc/qtdesignstudio/src/views/qtquick-states.qdoc +++ b/doc/qtdesignstudio/src/views/qtquick-states.qdoc @@ -41,9 +41,9 @@ \image qmldesigner-transitions.png "States view" - Click the new state to switch to it in the \l {2D} view, and then modify the - values of the properties of components or component instances in - \l Properties. + Click the new state to switch to it in the \l {2D} and \l{3D} views, and + then modify the values of the properties of components or component + instances in \l Properties. For example, to change the appearance of a button, you can define states in the button component to hide the button image and show another image in its @@ -82,21 +82,17 @@ \section1 Setting the Default State - 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 default state determines the startup state of the application. - To reset the state later, select \uicontrol Actions > - \uicontrol {Reset Default}. + To set a state to the default state, select \uicontrol 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 a boolean expression that evaluates to \c true when you want - the state to be applied. + To determine when a state is applied, select \inlineimage icons/edit.png + in the \uicontrol {When Condition} field. In \uicontrol {Binding Editor}, + specify a \l [QtQuick]{State::when}{when} property for the state. Set the + value of the property to a boolean expression that evaluates to \c true when + you want the state to be applied. This enables you to evaluate the truthfulness of several components' properties and move the UI to the state in which these conditions apply. @@ -192,10 +188,40 @@ \li Create additional states for each view and set the visibility or opacity of the components in the view. \li To determine which state is applied when the application starts, - select \uicontrol Actions > \uicontrol {Set as Default}. + select \uicontrol Default. \endlist \if defined(qtcreator) \include qtquick-states-scxml.qdocinc scxml state machines \endif + + \section1 State Groups + + With state groups, you can change the state of certain components + independently of other components and their states in the same view. + + Each state group has its own property changes and transitions. + + By default, there is one root state group. + + \section1 Extending States + + When a state extends another state, it inherits all the changes of that + state. The state being extended is treated as the base state in regards to + the changes specified by the extending state. + + Using extended states can make the user interface and your QML code + cleaner. + + Below is an example where the only change between \e State1 and \e State2 + is the brightness of \e directionalLight. + + Here, extended states are not used: + + \image no-extended-state.webp + + Here, \e State2 is extended from \e State1: + + \image extended-state.webp + */ |