Doc: Update info about States view

Check terminology, restructure information, and update
screenshots.

Task-number: QDS-2056
Change-Id: Ieaa2d0856bf2d310f67d8c0d9f9376a48cf33534
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

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]
 */

doc/qtcreator/src/qtquick/qtquick-states.qdoc

@@ -55,57 +55,60 @@
     \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.
+    button. Click the new state to switch to it in \uicontrol {Form Editor},
+    and then modify the properties of components in \uicontrol Properties.
 
-    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.
-
-    \section1 Using States
-
-    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.
-
-    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.
-
-    \image qmldesigner-states.png "States view"
+    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 the \uicontrol {Text Editor}, you can see the changes recorded as changes
+    In \uicontrol {Text Editor}, you can see the changes recorded as changes
     to the base state.
 
+    \image qmldesigner-states.png "States and Properties views"
+
+    \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}.
+
+    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,
     in which you hide and show a set of items and modify their properties.
@@ -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