State doc fixes, improvements

Task-number: QTBUG-12570

4 files changed, 226 insertions, 68 deletions

diff --git a/doc/src/declarative/qdeclarativestates.qdoc b/doc/src/declarative/qdeclarativestates.qdoc
index e7607c6..0b91756 100644
--- a/doc/src/declarative/qdeclarativestates.qdoc
+++ b/doc/src/declarative/qdeclarativestates.qdoc
@@ -32,57 +32,174 @@
 
 \section1 Overview
 
-QML states typically describe user interface configurations, including:
+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 interface elements 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
+"pressed" state in which its color and position is modified to give a pressed
+appearance.
+
+In QML, any object can change between different \e states to apply sets of
+changes that modify the properties of relevant items. Each \e state could 
+present a different configuration that could, for example:
+
 \list
-\o What UI elements are present
-\o The properties of those elements (including how they behave)
-\o What actions are available
+\o Show some UI elements and hide others
+\o Present different available actions to the user
+\o Start, stop or pause animations
+\o Execute some script required in the new state
+\o Change a property value for a particular item
+\o Show a different view or "screen"
 \endlist
 
-A state can also be thought of as a set of batched changes from a default configuration.
+Changes between states can be animated using \l {Transitions}{transitions}, as
+discussed further below.
 
-Examples of states in modern UI:
-\list
-\o An Address Book application with a 'View Contact' state and an 'Edit Contact' State. In the first state the contact information presented is read-only (using labels), and in the second it is editable (using editors).
-\o A button with a pressed and unpressed state. When pressed the text moves slightly down and to the right, and the button has a slightly darker appearance.
-\endlist
+All \l {Item}-based objects have a \e {default state}, and can specify additional
+states by adding new \l State objects to the item's \l {Item::}{states}
+property. Each state has a \e name that is unique for all states within that
+item; the default state's name is an empty string. To change the current state
+of an item, set the \l {Item::}{state} property to the name of the state.
+
+Non-Item objects can use states through the StateGroup element.
 
-\section1 States in QML
 
-In QML:
+\section1 Creating states
+
+To create a state, add a \l State object to the item's \l {Item::}{states} property,
+which holds a list of states for that item.
+
+Following is an example. Here, the \l Rectangle is initially placed in the
+default (0, 0) position. It has defined an additional state named "moved", in
+which a PropertyChanges object repositions the rectangle to (50, 50). Clicking
+within the MouseArea changes the state to the "moved" state, thus moving the \l
+Rectangle.
+
+\snippet doc/src/snippets/declarative/states.qml 0
+ 
+A \l State item defines all the changes to be made in the new state. You
+could specify additional properties to be changed, or create additional 
+PropertyChanges for other objects. (Note that a \l State can modify the
+properties of other objects, not just the object that owns the state.)
+
+For example:
+
+\qml
+State {
+    name: "moved"
+    PropertyChanges { target: myRect; x: 50; y: 50; color: "blue" }
+    PropertyChanges { target: someOtherItem; width: 1000 }            
+}
+\endqml
+
+A \l State is not limited to performing modifications on property values. It 
+can also:
+
 \list
-\o Any object can use states.
-\o There is a default state. The default state can be explicitly set.
-\o A state can affect the properties of other objects, not just the object owning the state (and not just that object's children).
+\o Run some script using StateChangeScript
+\o Override an existing signal handler for an object using PropertyChanges
+\o Re-parent an \l Item using ParentChanges
+\o Modify anchor values using AnchorChanges
 \endlist
 
-To define a state for an item, add a \l State element to the \l{Item::states}{states} property. To
-change the current state of an \l Item, set the \l{Item::state}{state} property to the name
-of the required state.
+The \l {declarative/animation/states}{States and Transitions example} 
+demonstrates how to declare a basic set of states and apply animated 
+transitions between them.
 
-Here is an example of using states. In the default state \c myRect is positioned at 0,0. In the 'moved' state it is positioned at 50,50. Clicking within the mouse area changes the state from the default state to the 'moved' state, thus moving the rectangle.
 
-\snippet doc/src/snippets/declarative/states.qml 0
-\snippet doc/src/snippets/declarative/states.qml 1
+\section1 The default state
 
-State changes can be animated using \l{state-transitions}{Transitions}.
+Of course, the \l Rectangle in the example above could have simply been moved
+by setting its position to (50, 50) in the mouse area's \c onClicked handler.
+However, aside from enabling batched property changes, the use of states allows
+an item to revert to its \e {default state}, which contains all of the items'
+initial property values before they were modified in a state change.
 
-For example, adding this code to the above \c Item element animates the transition to the "moved" state:
+The default state is specified by an empty string. If the MouseArea in the
+above example was changed to this:
 
-\snippet doc/src/snippets/declarative/states.qml transitions
+\qml
+MouseArea {
+    anchors.fill: parent
+    onClicked: myRect.state == 'moved' ? myRect.state = "" : myRect.state = 'moved';
+}
+\endqml      
 
-See \l{state-transitions}{Transitions} for more information.
+This would toggle the \l Rectangle's state between the \e moved and \e default
+states when clicked. The properties can be reverted to their initial
+values without requiring the definition of another \l State that defines these
+value changes.
 
 
-Other things you can do in a state change:
-\list
-\o Override signal handlers with PropertyChanges
-\o Change an item's visual parent with ParentChange
-\o Change an item's anchors with AnchorChanges
-\o Run some script with StateChangeScript
-\endlist
 
+\section1 The "when" property
+
+The \l {State::}{when} property is useful for specifying when a state should be
+applied. This can be set to an expression that evaluates to \c true when an
+item should change to a particular state.
+
+If the above example was changed to this:
+ 
+\qml 
+Rectangle {
+    ...
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+    }
+
+    states: State {
+        name: "moved"; when: mouseArea.pressed
+        ...
+    }
+\endqml 
+
+The \l Rectangle would automatically change to the \e moved state when the
+mouse is pressed, and revert to the default state when it is released. This is
+simpler (and a better, more declarative method) than creating \c onPressed 
+and \c onReleased handlers in the MouseArea to set the current state.
+
+
+\section1 Animating state changes
+
+
+State changes can be easily animated through \l {Transitions}{transitions}. A
+\l Transition defines the animations that should be applied when an item
+changes from one state to another.
+
+If the above example was modified to include the following \l Transition, the
+movement of the \l Rectangle would be animated:
+
+\qml
+Rectangle {
+    ...
+
+    MouseArea { ... }
+
+    states: [
+       ...
+    ]
+     
+    transitions: [
+        Transition {
+            NumberAnimation { properties: "x,y"; duration: 500 }
+        }
+    ]
+ }
+\endqml  
+
+This \l Transition defines that if any \c x or \c y properties have changed
+during a state change within this item, their values should be animated over 500
+millliseconds.
 
-The \l {declarative/animation/states}{States and Transitions example} demonstrates how to declare a basic set of states and then apply animated transitions between them.
+See the \l Transitions documentation for more information.
 
 */
diff --git a/doc/src/snippets/declarative/state-when.qml b/doc/src/snippets/declarative/state-when.qml
new file mode 100644
index 0000000..6d3bb75
--- /dev/null
+++ b/doc/src/snippets/declarative/state-when.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import Qt 4.7
+//![0]
+Rectangle {
+    id: myRect
+    width: 100; height: 100
+    color: "red"
+
+    MouseArea { id: mouseArea; anchors.fill: parent }
+
+    states: State {
+        name: "hidden"; when: mouseArea.pressed
+        PropertyChanges { target: myRect; opacity: 0 }
+    }
+}
+//![0]
diff --git a/doc/src/snippets/declarative/state.qml b/doc/src/snippets/declarative/state.qml
index af6b103..ce2653b 100644
--- a/doc/src/snippets/declarative/state.qml
+++ b/doc/src/snippets/declarative/state.qml
@@ -44,13 +44,19 @@ import Qt 4.7
 Rectangle {
     id: myRect
     width: 100; height: 100
-    color: "red"
+    color: "black"
 
-    MouseArea { id: mouseArea; anchors.fill: parent }
-
-    states: State {
-        name: "hidden"; when: mouseArea.pressed
-        PropertyChanges { target: myRect; opacity: 0 }
+    MouseArea { 
+        id: mouseArea
+        anchors.fill: parent 
+        onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
     }
+
+    states: [
+        State {
+            name: "clicked"
+            PropertyChanges { target: myRect; color: "red" }
+        }
+    ]
 }
 //![0]
diff --git a/doc/src/snippets/declarative/states.qml b/doc/src/snippets/declarative/states.qml
index c3b1796..127e3a7 100644
--- a/doc/src/snippets/declarative/states.qml
+++ b/doc/src/snippets/declarative/states.qml
@@ -40,42 +40,22 @@
 ****************************************************************************/
 //![0]
 import Qt 4.7
-
-Item {
-    id: myItem
+ 
+Rectangle {
+    id: myRect
     width: 200; height: 200
+    color: "red"
 
-    Rectangle {
-        id: myRect
-        width: 100; height: 100
-        color: "red"
+    MouseArea {
+        anchors.fill: parent
+        onClicked: myRect.state = 'moved'
     }
 
     states: [
         State {
             name: "moved"
-            PropertyChanges {
-                target: myRect
-                x: 50
-                y: 50
-            }
+            PropertyChanges { target: myRect; x: 50; y: 50 }
         }
     ]
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: myItem.state = 'moved'
-    }
-//![0]
-
-//![transitions]
-transitions: [
-    Transition {
-        NumberAnimation { properties: "x,y"; duration: 500 }
-    }
-]
-//![transitions]
-
-//![1]
 }
-//![1]
+//![0]