Doc: Update Qt Quick app tutorial

Task-number: QTCREATORBUG-23364
Change-Id: Ib5fc260219a2e29c0762456e8b3c8d7e82954043
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

13 files changed, 82 insertions, 60 deletions

diff --git a/doc/qtcreator/examples/transitions/Page1Form.ui.qml b/doc/qtcreator/examples/transitions/Page1Form.ui.qml
index 785433154d..5e47850424 100644
--- a/doc/qtcreator/examples/transitions/Page1Form.ui.qml
+++ b/doc/qtcreator/examples/transitions/Page1Form.ui.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -47,13 +47,20 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.9
-import QtQuick.Controls 2.2
+import QtQuick 2.12
+import QtQuick.Controls 2.5
 
 Page {
     id: page
     width: 600
     height: 400
+    property alias mouseArea2: mouseArea2
+    property alias mouseArea1: mouseArea1
+    property alias mouseArea: mouseArea
+    property alias icon: icon
+    property alias bottomLeftRect: bottomLeftRect
+    property alias middleRightRect: middleRightRect
+    property alias topLeftRect: topLeftRect
 
     header: Label {
         text: qsTr("Page 1")
@@ -61,20 +68,12 @@ Page {
         padding: 10
     }
 
-    property alias icon: icon
-    property alias topLeftRect: topLeftRect
-    property alias bottomLeftRect: bottomLeftRect
-    property alias middleRightRect: middleRightRect
-
-    property alias mouseArea2: mouseArea2
-    property alias mouseArea1: mouseArea1
-    property alias mouseArea: mouseArea
-
     Image {
         id: icon
         x: 10
         y: 20
         source: "qt-logo.png"
+        fillMode: Image.PreserveAspectFit
     }
 
     Rectangle {
@@ -82,11 +81,11 @@ Page {
         width: 55
         height: 41
         color: "#00000000"
+        border.color: "#808080"
         anchors.left: parent.left
         anchors.leftMargin: 10
         anchors.top: parent.top
         anchors.topMargin: 20
-        border.color: "#808080"
 
         MouseArea {
             id: mouseArea
@@ -99,10 +98,10 @@ Page {
         width: 55
         height: 41
         color: "#00000000"
+        border.color: "#808080"
+        anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: 10
-        anchors.verticalCenter: parent.verticalCenter
-        border.color: "#808080"
         MouseArea {
             id: mouseArea1
             anchors.fill: parent
@@ -114,14 +113,26 @@ Page {
         width: 55
         height: 41
         color: "#00000000"
+        border.color: "#808080"
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 20
-        border.color: "#808080"
+        anchors.left: parent.left
+        anchors.leftMargin: 10
         MouseArea {
             id: mouseArea2
             anchors.fill: parent
         }
-        anchors.left: parent.left
-        anchors.leftMargin: 10
     }
+
+    NumberAnimation {
+        id: numberAnimation
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:0.75}D{i:4;anchors_height:100;anchors_width:100}D{i:6;anchors_height:100;anchors_width:100}
+D{i:8;anchors_height:100;anchors_width:100}
 }
+##^##*/
+
diff --git a/doc/qtcreator/examples/transitions/Page2Form.ui.qml b/doc/qtcreator/examples/transitions/Page2Form.ui.qml
index 11a8abff4a..57178073ca 100644
--- a/doc/qtcreator/examples/transitions/Page2Form.ui.qml
+++ b/doc/qtcreator/examples/transitions/Page2Form.ui.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -47,8 +47,8 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.9
-import QtQuick.Controls 2.2
+import QtQuick 2.12
+import QtQuick.Controls 2.5
 
 Page {
     width: 600
diff --git a/doc/qtcreator/examples/transitions/main.cpp b/doc/qtcreator/examples/transitions/main.cpp
index 4e002b280e..9fb8458284 100644
--- a/doc/qtcreator/examples/transitions/main.cpp
+++ b/doc/qtcreator/examples/transitions/main.cpp
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -47,20 +47,28 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 
 int main(int argc, char *argv[])
 {
-    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    if (qEnvironmentVariableIsEmpty("QTGLESSTREAM_DISPLAY")) {
+        qputenv("QT_QPA_EGLFS_PHYSICAL_WIDTH", QByteArray("213"));
+        qputenv("QT_QPA_EGLFS_PHYSICAL_HEIGHT", QByteArray("120"));
+
+        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    }
 
     QGuiApplication app(argc, argv);
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
-    if (engine.rootObjects().isEmpty())
-        return -1;
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
+                     &app, [url](QObject *obj, const QUrl &objUrl) {
+        if (!obj && url == objUrl)
+            QCoreApplication::exit(-1);
+    }, Qt::QueuedConnection);
+    engine.load(url);
 
     return app.exec();
 }
diff --git a/doc/qtcreator/examples/transitions/main.qml b/doc/qtcreator/examples/transitions/main.qml
index 464b48e545..f49672d803 100644
--- a/doc/qtcreator/examples/transitions/main.qml
+++ b/doc/qtcreator/examples/transitions/main.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -47,9 +47,8 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
-import QtQuick 2.9
-import QtQuick.Controls 2.2
+import QtQuick 2.12
+import QtQuick.Controls 2.5
 
 ApplicationWindow {
     visible: true
@@ -64,15 +63,14 @@ ApplicationWindow {
 
         Page1Form {
             id: page
-
             mouseArea {
-            onClicked: stateGroup.state = ' '
+                onClicked: stateGroup.state = ' '
             }
             mouseArea1 {
-            onClicked: stateGroup.state = 'State1'
+                onClicked: stateGroup.state = 'State1'
             }
             mouseArea2 {
-            onClicked: stateGroup.state = 'State2'
+                onClicked: stateGroup.state = 'State2'
             }
         }
 
@@ -102,6 +100,7 @@ ApplicationWindow {
                 }
             }
         ]
+
         transitions: [
             Transition {
                 from: "*"; to: "State1"
diff --git a/doc/qtcreator/examples/transitions/transitions.pro b/doc/qtcreator/examples/transitions/transitions.pro
index e2173bcccb..70f8fe7f3b 100644
--- a/doc/qtcreator/examples/transitions/transitions.pro
+++ b/doc/qtcreator/examples/transitions/transitions.pro
@@ -1,18 +1,20 @@
 QT += quick
+
 CONFIG += c++11
 
 # 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.
+# any Qt feature that has been marked deprecated (the exact warnings
+# depend on your compiler). Refer to the documentation for the
+# deprecated API 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.
+# You can also make your code fail to compile if it uses 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
 
-SOURCES += main.cpp
+SOURCES += \
+        main.cpp
 
 RESOURCES += qml.qrc
 
@@ -26,3 +28,5 @@ QML_DESIGNER_IMPORT_PATH =
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
+
+DISTFILES +=
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-design-mode.png b/doc/qtcreator/images/qmldesigner-tutorial-design-mode.png
index e8b2bd2301..4ee7dd0880 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-design-mode.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-design-mode.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-quick-toolbar.png b/doc/qtcreator/images/qmldesigner-tutorial-quick-toolbar.png
index 11745f8bd6..37b973f3a9 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-quick-toolbar.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-quick-toolbar.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png
index 9b6bc9f887..95124cb58d 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect-layout.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png
index c3b181965b..8b9da56106 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-topleftrect.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png b/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png
index 1ed4037cd1..ad1abb2ce4 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-ui-ready.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png b/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png
index 5422a42f34..d8f6efea1c 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial-user-icon.png
diff --git a/doc/qtcreator/images/qmldesigner-tutorial.png b/doc/qtcreator/images/qmldesigner-tutorial.png
index 39cd385885..b04131330d 100644
--- a/doc/qtcreator/images/qmldesigner-tutorial.png
+++ b/doc/qtcreator/images/qmldesigner-tutorial.png
diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
index 5c6c8fe73d..f1574af001 100644
--- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
+++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -72,14 +72,17 @@
 
             \image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode"
 
+            \note If a view is hidden, you can show it by selecting
+            \uicontrol Window > \uicontrol Views.
+
         \li In the \uicontrol Navigator, select \uicontrol Label and press
             \key Delete to delete it.
 
-        \li Select \uicontrol Page in the navigator, and enter \e page in the
-            \uicontrol Id field.
+        \li Select \uicontrol Page in \uicontrol Navigator, and enter \e page in
+            the \uicontrol Id field in the \uicontrol Properties view.
 
         \li In \uicontrol Library > \uicontrol Assets, select qt-logo.png and
-            drag and drop it to the \e page in the navigator.
+            drag and drop it to the \e page in \uicontrol Navigator.
 
             \image qmldesigner-tutorial-user-icon.png "Image properties"
 
@@ -92,12 +95,14 @@
 
         \endlist
 
-        \li Right-click the resource file, qml.qrc, in the \uicontrol Projects
-            view, and select \uicontrol {Add Existing File} to add qt-logo.png
-            to the resource file for deployment.
+        \li In the \uicontrol Projects view, right-click the resource file,
+            qml.qrc, and select \uicontrol {Add Existing File} to add
+            qt-logo.png to the resource file for deployment.
 
-        \li Drag and drop a \uicontrol Rectangle to \e page in the navigator and
-            edit its properties.
+        \li In \uicontrol Library > \uicontrol {QML Types} >
+            \uicontrol {Qt Quick - Basic}, select \uicontrol Rectangle,
+            drag and drop it to \e page in \uicontrol Navigator, and
+            edit its properties in the \uicontrol Properties view.
 
             \image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
 
@@ -131,7 +136,7 @@
         \endlist
 
         \li Drag and drop a \uicontrol {Mouse Area} type from the
-            \uicontrol Library to \e topLeftRect in the navigator.
+            \uicontrol Library to \e topLeftRect in \uicontrol Navigator.
 
         \li Click \uicontrol {Layout}, and then click the
             \inlineimage anchor-fill.png
@@ -139,9 +144,9 @@
             rectangle.
 
         \li In the \uicontrol Navigator, copy topLeftRect (by pressing
-            \key {Ctrl+C}) and paste it to the \e page in the navigator twice
-            (by pressing \key {Ctrl+V}). \QC renames the new instances of the
-            type topLeftRect1 and topLeftRect2.
+            \key {Ctrl+C}) and paste it to \e page in \uicontrol Navigator
+            twice (by pressing \key {Ctrl+V}). \QC renames the new instances
+            of the type topLeftRect1 and topLeftRect2.
 
         \li  Select topLeftRect1 and edit its properties:
 
@@ -213,16 +218,11 @@
 
     \list 1
 
-        \li Specify the window size and background color as properties of
-            the ApplicationWindow type:
-
-            \quotefromfile transitions/main.qml
-            \skipto ApplicationWindow
-            \printuntil title
-
         \li Specify an id for the Page1 type to be able to use the properties
             that you exported in \e Page1Form.ui.qml:
 
+            \quotefromfile transitions/main.qml
+            \skipto ApplicationWindow
             \printuntil page
 
         \li Add a pointer to the clicked expressions in \uicontrol mouseArea: