Doc: Update Qt Quick app tutorial

The wizard and UI have changed.

Change-Id: I43d9101abdcfec362746b069509293df2317ae99
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

7 files changed, 119 insertions, 89 deletions

diff --git a/doc/examples/transitions/Page1.qml b/doc/examples/transitions/Page1.qml
new file mode 100644
index 0000000000..67336b4af7
--- /dev/null
+++ b/doc/examples/transitions/Page1.qml
@@ -0,0 +1,5 @@
+import QtQuick 2.7
+
+Page1Form {
+
+}
diff --git a/doc/examples/transitions/MainForm.ui.qml b/doc/examples/transitions/Page1Form.ui.qml
index 61a0e92b29..2637f1d0af 100644
--- a/doc/examples/transitions/MainForm.ui.qml
+++ b/doc/examples/transitions/Page1Form.ui.qml
@@ -1,18 +1,19 @@
-import QtQuick 2.6
-import QtQuick.Controls 1.5
+import QtQuick 2.7
+import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.3
 
 Item {
     id: page
-    width: 640
-    height: 480
-    property alias mouseArea1: mouseArea1
-    property alias mouseArea3: mouseArea3
-    property alias mouseArea2: mouseArea2
+    width: 300
+    height: 300
+    property alias icon: icon
+    property alias topLeftRect: topLeftRect
     property alias bottomLeftRect: bottomLeftRect
     property alias middleRightRect: middleRightRect
-    property alias topLeftRect: topLeftRect
-    property alias icon: icon
+
+    property alias mouseArea2: mouseArea2
+    property alias mouseArea1: mouseArea1
+    property alias mouseArea: mouseArea
 
     Image {
         id: icon
@@ -26,56 +27,46 @@ Item {
         width: 55
         height: 41
         color: "#00000000"
-        radius: 0
-        border.color: "#808080"
         anchors.left: parent.left
         anchors.leftMargin: 10
         anchors.top: parent.top
         anchors.topMargin: 20
-        border.width: 1
+        border.color: "#808080"
 
         MouseArea {
-            id: mouseArea1
+            id: mouseArea
             anchors.fill: parent
         }
     }
 
     Rectangle {
         id: middleRightRect
-        x: -8
-        y: 6
         width: 55
         height: 41
         color: "#00000000"
-        radius: 0
-        anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        border.color: "#808080"
         MouseArea {
-            id: mouseArea2
+            id: mouseArea1
             anchors.fill: parent
         }
-        border.width: 1
-        border.color: "#808080"
     }
 
     Rectangle {
         id: bottomLeftRect
-        y: -2
         width: 55
         height: 41
         color: "#00000000"
-        radius: 0
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 10
+        border.color: "#808080"
         MouseArea {
-            id: mouseArea3
+            id: mouseArea2
             anchors.fill: parent
         }
-        border.width: 1
-        border.color: "#808080"
+        anchors.left: parent.left
+        anchors.leftMargin: 10
     }
-
 }
diff --git a/doc/examples/transitions/main.cpp b/doc/examples/transitions/main.cpp
index d76049d67e..34614e7477 100644
--- a/doc/examples/transitions/main.cpp
+++ b/doc/examples/transitions/main.cpp
@@ -3,10 +3,11 @@
 
 int main(int argc, char *argv[])
 {
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
     QGuiApplication app(argc, argv);
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
 
     return app.exec();
 }
diff --git a/doc/examples/transitions/main.qml b/doc/examples/transitions/main.qml
index b2d6928de4..3775d82158 100644
--- a/doc/examples/transitions/main.qml
+++ b/doc/examples/transitions/main.qml
@@ -1,72 +1,74 @@
-import QtQuick 2.6
-import QtQuick.Controls 1.5
-import QtQuick.Dialogs 1.2
+import QtQuick 2.7
+
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
 
 ApplicationWindow {
     visible: true
-    width: 330
-    height: 330
+    width: 640
+    height: 480
     title: qsTr("Transitions")
 
-    MainForm {
+    Page1Form {
         anchors.fill: parent
         id: page
+
+        mouseArea {
+        onClicked: stateGroup.state = ' '
+        }
         mouseArea1 {
-                   onClicked: stateGroup.state = ' '
-               }
-           mouseArea2 {
-               onClicked: stateGroup.state = 'State1'
-           }
-           mouseArea3 {
-               onClicked: stateGroup.state = 'State2'
-           }
+        onClicked: stateGroup.state = 'State1'
+        }
+        mouseArea2 {
+        onClicked: stateGroup.state = 'State2'
+        }
     }
 
     StateGroup {
-            id: stateGroup
-            states: [
-                State {
-                    name: "State1"
+        id: stateGroup
+        states: [
+            State {
+                name: "State1"
 
-                    PropertyChanges {
-                        target: page.icon
-                        x: page.middleRightRect.x
-                        y: page.middleRightRect.y
-                    }
-                },
-                State {
-                    name: "State2"
+                PropertyChanges {
+                    target: page.icon
+                    x: page.middleRightRect.x
+                    y: page.middleRightRect.y
+                }
+            },
+            State {
+                name: "State2"
 
-                    PropertyChanges {
-                        target: page.icon
-                        x: page.bottomLeftRect.x
-                        y: page.bottomLeftRect.y
-                    }
+                PropertyChanges {
+                    target: page.icon
+                    x: page.bottomLeftRect.x
+                    y: page.bottomLeftRect.y
                 }
-            ]
-            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
-                             }
-                         }
-                    ]
             }
+        ]
+        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
+                     }
+            }
+        ]
+    }
 }
diff --git a/doc/examples/transitions/qml.qrc b/doc/examples/transitions/qml.qrc
index e39f0cf331..bba8291fc0 100644
--- a/doc/examples/transitions/qml.qrc
+++ b/doc/examples/transitions/qml.qrc
@@ -1,7 +1,9 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>MainForm.ui.qml</file>
+        <file>Page1.qml</file>
+        <file>Page1Form.ui.qml</file>
+        <file>qtquickcontrols2.conf</file>
         <file>qt-logo.png</file>
     </qresource>
 </RCC>
diff --git a/doc/examples/transitions/qtquickcontrols2.conf b/doc/examples/transitions/qtquickcontrols2.conf
new file mode 100644
index 0000000000..1764b16fb4
--- /dev/null
+++ b/doc/examples/transitions/qtquickcontrols2.conf
@@ -0,0 +1,15 @@
+; This file can be edited to change the style of the application
+; See Styling Qt Quick Controls 2 in the documentation for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html
+
+[Controls]
+Style=Default
+
+[Universal]
+Theme=Light
+;Accent=Steel
+
+[Material]
+Theme=Light
+;Accent=BlueGrey
+;Primary=BlueGray
diff --git a/doc/examples/transitions/transitions.pro b/doc/examples/transitions/transitions.pro
index f8ec75d4a9..d0d4cd2979 100644
--- a/doc/examples/transitions/transitions.pro
+++ b/doc/examples/transitions/transitions.pro
@@ -1,5 +1,3 @@
-TEMPLATE = app
-
 QT += qml quick
 
 CONFIG += c++11
@@ -11,5 +9,21 @@ RESOURCES += qml.qrc
 # Additional import path used to resolve QML modules in Qt Creator's code model
 QML_IMPORT_PATH =
 
+# Additional import path used to resolve QML modules just for Qt Quick Designer
+QML_DESIGNER_IMPORT_PATH =
+
+# The following define makes your compiler emit warnings if you use
+# any feature of Qt which as been marked deprecated (the exact warnings
+# depend on your compiler). Please consult the documentation of the
+# deprecated API in order to know how to port your code away from it.
+DEFINES += QT_DEPRECATED_WARNINGS
+
+# You can also make your code fail to compile if you use deprecated APIs.
+# In order to do so, uncomment the following line.
+# You can also select to disable deprecated APIs only up to a certain version of Qt.
+#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
+
 # Default rules for deployment.
-include(deployment.pri)
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target