Doc: Update accelbubble example to use Qt Quick Controls 2

Change-Id: I946e9cb31517f602ce07fe1967a87bfdf9bd79b0
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

10 files changed, 159 insertions, 79 deletions

diff --git a/doc/examples/accelbubble/Bubble.qml b/doc/examples/accelbubble/Bubble.qml
index 9a93069aeb6..bb218759511 100644
--- a/doc/examples/accelbubble/Bubble.qml
+++ b/doc/examples/accelbubble/Bubble.qml
@@ -3,7 +3,7 @@
 ** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of Qt Creator
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -48,9 +48,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.5
-import QtQuick.Controls 1.4
-import QtQuick.Layouts 1.2
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
 
 Image {
     source: "Bluebubble.svg"
diff --git a/doc/examples/accelbubble/Page1.qml b/doc/examples/accelbubble/Page1.qml
new file mode 100644
index 00000000000..06197798734
--- /dev/null
+++ b/doc/examples/accelbubble/Page1.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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.7
+
+Page1Form {
+
+}
diff --git a/doc/examples/accelbubble/MainForm.ui.qml b/doc/examples/accelbubble/Page1Form.ui.qml
index 3e637dbb7d2..d336fa3b7ac 100644
--- a/doc/examples/accelbubble/MainForm.ui.qml
+++ b/doc/examples/accelbubble/Page1Form.ui.qml
@@ -3,7 +3,7 @@
 ** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of Qt Creator
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -48,31 +48,20 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.5
-import QtQuick.Controls 1.4
-import QtQuick.Layouts 1.2
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
 
 Item {
-    id: id
-    width: 640
-    height: 480
-    property alias bubble: bubble
     property alias mainWindow: mainWindow
-
+    property alias bubble: bubble
     Rectangle {
         id: mainWindow
         color: "#ffffff"
-        anchors.rightMargin: 0
-        anchors.bottomMargin: 0
-        anchors.leftMargin: 0
-        anchors.topMargin: 0
         anchors.fill: parent
-    }
 
-    Bubble {
-        id: bubble
-        x: 10
-        y: 18
+        Bubble {
+            id: bubble
+        }
     }
-
 }
diff --git a/doc/examples/accelbubble/accelbubble.pro b/doc/examples/accelbubble/accelbubble.pro
index 5f1734b9eee..dca3207dcee 100644
--- a/doc/examples/accelbubble/accelbubble.pro
+++ b/doc/examples/accelbubble/accelbubble.pro
@@ -1,5 +1,3 @@
-TEMPLATE = app
-
 QT += qml quick sensors svg xml
 
 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
diff --git a/doc/examples/accelbubble/main.cpp b/doc/examples/accelbubble/main.cpp
index 618e0f3da83..6ff25a462cf 100644
--- a/doc/examples/accelbubble/main.cpp
+++ b/doc/examples/accelbubble/main.cpp
@@ -3,7 +3,7 @@
 ** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of Qt Creator
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -53,10 +53,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/accelbubble/main.qml b/doc/examples/accelbubble/main.qml
index 25be59c1359..ddd617af69d 100644
--- a/doc/examples/accelbubble/main.qml
+++ b/doc/examples/accelbubble/main.qml
@@ -3,7 +3,7 @@
 ** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of Qt Creator
 **
 ** $QT_BEGIN_LICENSE:BSD$
 ** Commercial License Usage
@@ -48,19 +48,18 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.5
-import QtQuick.Controls 1.4
-import QtQuick.Dialogs 1.2
-import QtSensors 5.5
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
+import QtSensors 5.7
 
 ApplicationWindow {
-    id: mainWindow
     visible: true
     width: 640
     height: 480
     title: qsTr("Accelerate Bubble")
 
-    MainForm {
+    Page1 {
         anchors.fill: parent
         bubble {
             id: bubble
@@ -83,41 +82,41 @@ ApplicationWindow {
                 }
             }
         }
-}
+    }
 
-Accelerometer {
-       id: accel
-       dataRate: 100
-       active: true
+    Accelerometer {
+           id: accel
+           dataRate: 100
+           active: true
 
-       onReadingChanged: {
-           var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
-           var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
+           onReadingChanged: {
+               var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
+               var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * 0.1)
 
-           if (isNaN(newX) || isNaN(newY))
-               return;
+               if (isNaN(newX) || isNaN(newY))
+                   return;
 
-           if (newX < 0)
-               newX = 0
+               if (newX < 0)
+                   newX = 0
 
-           if (newX > mainWindow.width - bubble.width)
-               newX = mainWindow.width - bubble.width
+               if (newX > mainWindow.width - bubble.width)
+                   newX = mainWindow.width - bubble.width
 
-           if (newY < 18)
-               newY = 18
+               if (newY < 18)
+                   newY = 18
 
-           if (newY > mainWindow.height - bubble.height)
-               newY = mainWindow.height - bubble.height
+               if (newY > mainWindow.height - bubble.height)
+                   newY = mainWindow.height - bubble.height
 
-               bubble.x = newX
-               bubble.y = newY
+                   bubble.x = newX
+                   bubble.y = newY
+           }
        }
-   }
 
-   function calcPitch(x, y, z) {
-       return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
-   }
-   function calcRoll(x, y, z) {
-       return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
-   }
+       function calcPitch(x, y, z) {
+           return -(Math.atan(y / Math.sqrt(x * x + z * z)) * 57.2957795);
+       }
+       function calcRoll(x, y, z) {
+           return -(Math.atan(x / Math.sqrt(y * y + z * z)) * 57.2957795);
+       }
 }
diff --git a/doc/examples/accelbubble/qml.qrc b/doc/examples/accelbubble/qml.qrc
index 21530e70397..1825fab4906 100644
--- a/doc/examples/accelbubble/qml.qrc
+++ b/doc/examples/accelbubble/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>Bubble.qml</file>
         <file>Bluebubble.svg</file>
     </qresource>
diff --git a/doc/examples/accelbubble/qtquickcontrols2.conf b/doc/examples/accelbubble/qtquickcontrols2.conf
new file mode 100644
index 00000000000..1764b16fb48
--- /dev/null
+++ b/doc/examples/accelbubble/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/src/overview/creator-tutorials.qdoc b/doc/src/overview/creator-tutorials.qdoc
index bcba7355fb4..b498fa0c26f 100644
--- a/doc/src/overview/creator-tutorials.qdoc
+++ b/doc/src/overview/creator-tutorials.qdoc
@@ -55,7 +55,7 @@
 
        \li \l{Creating a Mobile Application}
 
-            Learn how to create a Qt Quick application using Qt Quick Controls
+            Learn how to create a Qt Quick application using Qt Quick Controls 2
             for Android and iOS devices.
 
        \li \l{Using Qt Quick UI Forms}
diff --git a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
index 6f93fe81c21..8ebcb6bbed4 100644
--- a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
+++ b/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
@@ -38,7 +38,7 @@
     \title Creating a Mobile Application
 
     This tutorial describes developing Qt Quick applications for Android and iOS
-    devices using Qt Quick Controls.
+    devices using Qt Quick Controls 2.
     We use \QC to implement a Qt Quick application
     that accelerates an SVG (Scalable Vector Graphics) image based on the
     changing accelerometer values.
@@ -80,7 +80,7 @@
 
     \list 1
 
-        \li In the \uicontrol Projects view, double-click the MainForm.ui.qml
+        \li In the \uicontrol Projects view, double-click the Page1Form.ui.qml
             file to open it in \QMLD.
 
         \li In the \uicontrol Navigator, select \uicontrol RowLayout and press
@@ -121,23 +121,27 @@
 
     \list 1
 
-        \li Select \uicontrol Edit to open MainForm.ui.qml in the code editor.
+        \li Select \uicontrol Edit to open Page1Form.ui.qml in the code editor.
 
         \li Right-click \uicontrol Image and select \uicontrol Refactoring >
             \uicontrol {Move Component into Separate File}.
 
-        \li In the \uicontrol {Component name} field, enter \e Bubble and
-            select \uicontrol OK to create \e Bubble.qml.
+        \li In the \uicontrol {Component name} field, enter \e Bubble.
+
+        \li Deselect the \uicontrol x, \uicontrol y, and
+            \uicontrol {ui.qml file} check boxes.
+
+        \li Select \uicontrol OK to create \e Bubble.qml.
 
     \endlist
 
-    \QC creates a reference to Bubble.qml in MainForm.ui.qml.
+    \QC creates a reference to the Bubble type in Page1Form.ui.qml.
 
-    To check your code, you can compare MainForm.ui.qml with the
-    \l{accelbubble/MainForm.ui.qml}{MainForm.ui.qml} example file and Bubble.qml
-    with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
+    To check your code, you can compare Page1Form.ui.qml with the
+    \l{accelbubble/Page1Form.ui.qml}{Page1Form.ui.qml} example file and
+    Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
 
-    The UI is now ready and you can switch to editing the main.qml and
+    The UI is now ready and you can switch to editing the Page1.qml and
     Bubble.qml files in the \uicontrol Edit mode, as described in the
     following section.
 
@@ -146,8 +150,8 @@
     The new project wizard adds boilerplate code to the main.qml file to create
     menu items and push buttons. Modify the boilerplate code by removing
     obsolete code and by adding new code. You removed the push buttons from the
-    UI Form, so you also need to remove the corresponding code from main.qml (or
-    the application cannot be built).
+    UI Form, so you also need to remove the corresponding code from Page1.qml
+    (or the application cannot be built).
 
     In the code editor, edit Bubble.qml to add properties that we will use to
     position the image:
@@ -156,14 +160,15 @@
     \skipto Image
     \printuntil }
 
-    In the code editor, edit the main.qml to specify the application title, as
+    In the code editor, edit main.qml to specify the application title, as
     illustrated by the following code snippet:
 
     \quotefromfile accelbubble/main.qml
     \skipto ApplicationWindow
     \printuntil title
 
-    Use the bubble properties to position the image:
+    Remove the rest of the boilerplate code in main.qml, except the Page1 type.
+    Specify bubble properties to position the image:
 
     \printuntil bubbleCenter
 
@@ -179,7 +184,7 @@
         \li Add the following import statement to main.qml:
 
             \code
-            import QtSensors 5.5
+            import QtSensors 5.7
             \endcode
 
         \li Add the \l{Accelerometer} type with the necessary properties: