Doc: update the Transitions example to use UI forms

Move the instructions for creating the project into an
include file that can be used for all Qt Quick Application
tutorials.

Change-Id: I02385f68f23ef2d3ee98b754344781ae1819203c
Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>

doc/examples/transitions/main.qml

@@ -1,91 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
 import QtQuick 2.5
 import QtQuick.Controls 1.4
+import QtQuick.Dialogs 1.2
 
 ApplicationWindow {
-    id: page
     visible: true
-    width: 360
-    height: 360
-    color: "#343434"
     title: qsTr("Transitions")
+    width: 330
+    height: 330
 
-    menuBar: MenuBar {
-        Menu {
-            title: qsTr("File")
-            MenuItem {
-                text: qsTr("&Open")
-                onTriggered: console.log("Open action triggered");
-            }
-            MenuItem {
-                text: qsTr("Exit")
-                onTriggered: Qt.quit();
-            }
-        }
-    }
-
-    Image {
-        id: icon
-        x: 10
-        y: 20
-        source: "states.svg"
-    }
-
-    Rectangle {
-        id: topLeftRect
-        x: 10
-        y: 20
-        width: 44
-        height: 44
-        color: "#00000000"
-        radius: 6
-        opacity: 1
-        anchors.left: parent.left
-        anchors.leftMargin: 10
-        anchors.top: parent.top
-        anchors.topMargin: 20
-        border.color: "#808080"
-
-        MouseArea {
-            id: mouseArea1
-            anchors.fill: parent
+    MainForm {
+        anchors.fill: parent
+        id: page
+        mouseArea1 {
             onClicked: stateGroup.state = ' '
         }
-    }
-
-    Rectangle {
-        id: middleRightRect
-        width: 44
-        height: 44
-        color: "#00000000"
-        radius: 6
-        anchors.right: parent.right
-        anchors.rightMargin: 10
-        anchors.verticalCenter: parent.verticalCenter
-        border.color: "#808080"
-
-        MouseArea {
-            id: mouseArea2
-            anchors.fill: parent
+        mouseArea2 {
             onClicked: stateGroup.state = 'State1'
         }
-    }
-
-    Rectangle {
-        id: bottomLeftRect
-        width: 44
-        height: 44
-        color: "#00000000"
-        radius: 6
-        border.width: 1
-        anchors.leftMargin: 10
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 20
-        anchors.left: parent.left
-        border.color: "#808080"
-
-        MouseArea {
-            id: mouseArea3
-            anchors.fill: parent
+        mouseArea3 {
             onClicked: stateGroup.state = 'State2'
         }
     }
@@ -97,18 +69,18 @@ ApplicationWindow {
                 name: "State1"
 
                 PropertyChanges {
-                    target: icon
-                    x: middleRightRect.x
-                    y: middleRightRect.y
+                    target: page.icon
+                    x: page.middleRightRect.x
+                    y: page.middleRightRect.y
                 }
             },
             State {
                 name: "State2"
 
                 PropertyChanges {
-                    target: icon
-                    x: bottomLeftRect.x
-                    y: bottomLeftRect.y
+                    target: page.icon
+                    x: page.bottomLeftRect.x
+                    y: page.bottomLeftRect.y
                 }
             }
         ]
@@ -137,4 +109,4 @@ ApplicationWindow {
                      }
                 ]
         }
-}
+    }