Doc: update the Qt Quick app tutorial

The wizard in 3.1 uses a Window QML type instead of a Rectangle,
which means that states must be placed within a statusGroup.
The example can no longer be built from Qt Quick 1 elements.
Replaced \snippet commands with \quotefromfile commands.

Change-Id: Ia2cec2b8b638913a2b9b2e27b36e6f2f1ffc4a49
Reviewed-by: Alessandro Portale <alessandro.portale@digia.com>
Reviewed-by: Marco Bubke <marco.bubke@digia.com>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@digia.com>

1 files changed, 83 insertions, 87 deletions

diff --git a/doc/examples/transitions/main.qml b/doc/examples/transitions/main.qml
index 9e751ab842..8769546257 100644
--- a/doc/examples/transitions/main.qml
+++ b/doc/examples/transitions/main.qml
@@ -1,13 +1,9 @@
-//! [2]
+import QtQuick 2.1
+import QtQuick.Window 2.1
 
-//! [1]
-
-//! [0]
-
-import QtQuick 2.0
-
-Rectangle {
+Window {
     id: page
+    visible: true
     width: 360
     height: 360
     color: "#343434"
@@ -21,11 +17,11 @@ Rectangle {
 
     Rectangle {
         id: topLeftRect
-        y: 20
         width: 64
         height: 64
         color: "#00000000"
         radius: 6
+        opacity: 1
         anchors.left: parent.left
         anchors.leftMargin: 10
         anchors.top: parent.top
@@ -33,95 +29,95 @@ Rectangle {
         border.color: "#808080"
 
         MouseArea {
-            id: mousearea1
+            id: mouseArea1
             anchors.fill: parent
-            onClicked: page.state = ' '
-            }
+            onClicked: stateGroup.state = ' '
         }
-//! [0]
+    }
 
-        Rectangle {
-            id: middleRightRect
-            width: 64
-            height: 64
-            color: "#00000000"
-            radius: 6
-            anchors.right: parent.right
-            anchors.rightMargin: 10
-            anchors.verticalCenter: parent.verticalCenter
-            border.color: "#808080"
-            MouseArea {
-                id: mousearea2
-                anchors.fill: parent
-                onClicked: page.state = 'State1'
-            }
-        }
+    Rectangle {
+        id: middleRightRect
+        width: 64
+        height: 64
+        color: "#00000000"
+        radius: 6
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        border.color: "#808080"
 
-        Rectangle {
-            id: bottomLeftRect
-            width: 64
-            height: 64
-            color: "#00000000"
-            radius: 6
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 20
-            border.color: "#808080"
-            MouseArea {
-                id: mousearea3
-                anchors.fill: parent
-                onClicked: page.state = 'State2'
-            }
+        MouseArea {
+            id: mouseArea2
+            anchors.fill: parent
+            onClicked: stateGroup.state = 'State1'
         }
+    }
 
-//! [1]
-
-        states: [
-             State {
-                 name: "State1"
+    Rectangle {
+        id: bottomLeftRect
+        width: 64
+        height: 64
+        color: "#00000000"
+        radius: 6
+        border.width: 1
+        anchors.leftMargin: 10
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 20
+        anchors.left: parent.left
+        border.color: "#808080"
 
-                 PropertyChanges {
-                     target: icon
-                     x: middleRightRect.x
-                     y: middleRightRect.y
-                 }
-             },
-             State {
-                 name: "State2"
+        MouseArea {
+            id: mouseArea3
+            anchors.fill: parent
+            onClicked: stateGroup.state = 'State2'
+        }
+    }
 
-                 PropertyChanges {
-                     target: icon
-                     x: bottomLeftRect.x
-                     y: bottomLeftRect.y
-                 }
-             }
-         ]
+    StateGroup {
+        id: stateGroup
+        states: [
+            State {
+                name: "State1"
 
-        transitions: [
-        Transition {
-                from: "*"; to: "State1"
-                NumberAnimation {
-                    easing.type: Easing.OutBounce
-                    properties: "x,y";
-                    duration: 1000
+                PropertyChanges {
+                    target: icon
+                    x: middleRightRect.x
+                    y: middleRightRect.y
                 }
             },
-        Transition {
-                from: "*"; to: "State2"
-                NumberAnimation {
-                    properties: "x,y";
-                    easing.type: Easing.InOutQuad;
-                    duration: 2000
+            State {
+                name: "State2"
+
+                PropertyChanges {
+                    target: icon
+                    x: bottomLeftRect.x
+                    y: bottomLeftRect.y
                 }
-            },
-        Transition {
-                 NumberAnimation {
-                     properties: "x,y";
-                     duration: 200
-                 }
-             }
+            }
         ]
+        transitions: [
+                Transition {
+                        from: "*"; to: "State1"
+                        NumberAnimation {
+                            easing.type: Easing.OutBounce
+                            properties: "x,y";
+                            duration: 1000
+                        }
+                    },
+                Transition {
+                        from: "*"; to: "State2"
+                        NumberAnimation {
+                            properties: "x,y";
+                            easing.type: Easing.InOutQuad;
+                            duration: 2000
+                        }
+                    },
+                Transition {
+                         NumberAnimation {
+                             properties: "x,y";
+                             duration: 200
+                         }
+                     }
+                ]
+        }
 }
-
-//! [2]