Doc: Update Accelerate Bubble example to use the Swipe wizard

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

11 files changed, 140 insertions, 108 deletions

diff --git a/doc/examples/accelbubble/Bubble.qml b/doc/examples/accelbubble/Bubble.qml
index bb21875951..67e1c5922d 100644
--- a/doc/examples/accelbubble/Bubble.qml
+++ b/doc/examples/accelbubble/Bubble.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -48,9 +48,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-import QtQuick.Layouts 1.0
+import QtQuick 2.9
+import QtQuick.Controls 2.2
 
 Image {
     source: "Bluebubble.svg"
diff --git a/doc/examples/accelbubble/Page1Form.ui.qml b/doc/examples/accelbubble/Page1Form.ui.qml
index d336fa3b7a..0ab08fc483 100644
--- a/doc/examples/accelbubble/Page1Form.ui.qml
+++ b/doc/examples/accelbubble/Page1Form.ui.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -47,14 +47,21 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+import QtQuick 2.9
+import QtQuick.Controls 2.2
 
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-import QtQuick.Layouts 1.0
-
-Item {
-    property alias mainWindow: mainWindow
+Page {
+    width: 600
+    height: 400
     property alias bubble: bubble
+    property alias mainWindow: mainWindow
+
+    header: Label {
+        text: qsTr("Page 1")
+        font.pixelSize: Qt.application.font.pixelSize * 2
+        padding: 10
+    }
+
     Rectangle {
         id: mainWindow
         color: "#ffffff"
diff --git a/doc/examples/accelbubble/Page1.qml b/doc/examples/accelbubble/Page2Form.ui.qml
index 0619779873..11a8abff4a 100644
--- a/doc/examples/accelbubble/Page1.qml
+++ b/doc/examples/accelbubble/Page2Form.ui.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -47,9 +47,21 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
+import QtQuick 2.9
+import QtQuick.Controls 2.2
 
-import QtQuick 2.7
+Page {
+    width: 600
+    height: 400
 
-Page1Form {
+    header: Label {
+        text: qsTr("Page 2")
+        font.pixelSize: Qt.application.font.pixelSize * 2
+        padding: 10
+    }
 
+    Label {
+        text: qsTr("You are on Page 2.")
+        anchors.centerIn: parent
+    }
 }
diff --git a/doc/examples/accelbubble/accelbubble.pro b/doc/examples/accelbubble/accelbubble.pro
index dca3207dce..2dfcd42652 100644
--- a/doc/examples/accelbubble/accelbubble.pro
+++ b/doc/examples/accelbubble/accelbubble.pro
@@ -1,17 +1,7 @@
-QT += qml quick sensors svg xml
+QT += quick sensors svg xml
 
 CONFIG += c++11
 
-SOURCES += main.cpp
-
-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
@@ -23,7 +13,25 @@ DEFINES += QT_DEPRECATED_WARNINGS
 # 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
+
+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 =
+
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
+
+  ios {
+  QTPLUGIN += qsvg qsvgicon qtsensors_ios
+  QMAKE_INFO_PLIST = Info.plist
+  }
+
+DISTFILES += \
+    Bluebubble.svg
diff --git a/doc/examples/accelbubble/main.cpp b/doc/examples/accelbubble/main.cpp
index 6ff25a462c..4e002b280e 100644
--- a/doc/examples/accelbubble/main.cpp
+++ b/doc/examples/accelbubble/main.cpp
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -54,10 +54,13 @@
 int main(int argc, char *argv[])
 {
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
     QGuiApplication app(argc, argv);
 
     QQmlApplicationEngine engine;
-    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+    if (engine.rootObjects().isEmpty())
+        return -1;
 
     return app.exec();
 }
diff --git a/doc/examples/accelbubble/main.qml b/doc/examples/accelbubble/main.qml
index ddd617af69..26fe2598f0 100644
--- a/doc/examples/accelbubble/main.qml
+++ b/doc/examples/accelbubble/main.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator
@@ -48,10 +48,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-import QtQuick.Layouts 1.0
-import QtSensors 5.7
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtSensors 5.9
 
 ApplicationWindow {
     visible: true
@@ -59,64 +58,84 @@ ApplicationWindow {
     height: 480
     title: qsTr("Accelerate Bubble")
 
-    Page1 {
+    SwipeView {
+        id: swipeView
         anchors.fill: parent
-        bubble {
-            id: bubble
-            centerX: mainWindow.width / 2
-            centerY: mainWindow.height / 2
-            bubbleCenter: bubble.width / 2
-            x: bubble.centerX - bubble.bubbleCenter
-            y: bubble.centerY - bubble.bubbleCenter
-
-            Behavior on y {
-                SmoothedAnimation {
-                    easing.type: Easing.Linear
-                    duration: 100
+        currentIndex: tabBar.currentIndex
+
+        Page1Form {
+            bubble {
+                id: bubble
+                centerX: mainWindow.width / 2
+                centerY: mainWindow.height / 2
+                bubbleCenter: bubble.width / 2
+                x: bubble.centerX - bubble.bubbleCenter
+                y: bubble.centerY - bubble.bubbleCenter
+
+                Behavior on y {
+                    SmoothedAnimation {
+                        easing.type: Easing.Linear
+                        duration: 100
+                    }
                 }
-            }
-            Behavior on x {
-                SmoothedAnimation {
-                    easing.type: Easing.Linear
-                    duration: 100
+                Behavior on x {
+                    SmoothedAnimation {
+                        easing.type: Easing.Linear
+                        duration: 100
+                    }
                 }
             }
         }
+
+        Page2Form {
+        }
+    }
+
+    footer: TabBar {
+        id: tabBar
+        currentIndex: swipeView.currentIndex
+
+        TabButton {
+            text: qsTr("Page 1")
+        }
+        TabButton {
+            text: qsTr("Page 2")
+        }
     }
 
     Accelerometer {
-           id: accel
-           dataRate: 100
-           active: true
+       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 1825fab490..7d7777aca0 100644
--- a/doc/examples/accelbubble/qml.qrc
+++ b/doc/examples/accelbubble/qml.qrc
@@ -1,10 +1,10 @@
 <RCC>
     <qresource prefix="/">
-        <file>main.qml</file>
-        <file>Page1.qml</file>
         <file>Page1Form.ui.qml</file>
+        <file>Page2Form.ui.qml</file>
         <file>qtquickcontrols2.conf</file>
         <file>Bubble.qml</file>
         <file>Bluebubble.svg</file>
+        <file>main.qml</file>
     </qresource>
 </RCC>
diff --git a/doc/examples/accelbubble/qtquickcontrols2.conf b/doc/examples/accelbubble/qtquickcontrols2.conf
index 1764b16fb4..75b2cb8fff 100644
--- a/doc/examples/accelbubble/qtquickcontrols2.conf
+++ b/doc/examples/accelbubble/qtquickcontrols2.conf
@@ -1,15 +1,6 @@
 ; 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
+; Read "Qt Quick Controls 2 Configuration File" for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
 
 [Controls]
 Style=Default
-
-[Universal]
-Theme=Light
-;Accent=Steel
-
-[Material]
-Theme=Light
-;Accent=BlueGrey
-;Primary=BlueGray
diff --git a/doc/images/creator_android_tutorial_ex_app.png b/doc/images/creator_android_tutorial_ex_app.png
index ad4cfc0765..3be9f31fe2 100644
--- a/doc/images/creator_android_tutorial_ex_app.png
+++ b/doc/images/creator_android_tutorial_ex_app.png
diff --git a/doc/images/qtcreator-move-component-into-separate-file.png b/doc/images/qtcreator-move-component-into-separate-file.png
index d5bf10192e..a0de19b24e 100644
--- a/doc/images/qtcreator-move-component-into-separate-file.png
+++ b/doc/images/qtcreator-move-component-into-separate-file.png
diff --git a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
index 5ab76d6302..f0fddbacfd 100644
--- a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
+++ b/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
@@ -82,14 +82,14 @@
 
     \list 1
 
-        \li In the \uicontrol Projects view, double-click the Page1Form.ui.qml
+        \li In the \uicontrol Projects view, double-click the \e Page1Form.ui.qml
             file to open it in \QMLD.
 
-        \li In the \uicontrol Navigator, select \uicontrol RowLayout and press
+        \li In the \uicontrol Navigator, select \uicontrol Label and press
             \key Delete to delete it.
 
         \li In \uicontrol Library > \uicontrol {QML Types}, select
-            \uicontrol Rectangle and drag and drop it to the \uicontrol Item in
+            \uicontrol Rectangle and drag and drop it to the \uicontrol Page in
             the navigator.
 
         \li Select the rectangle in the navigator to edit its properties:
@@ -137,39 +137,32 @@
 
     \endlist
 
-    \QC creates a reference to the Bubble type in Page1Form.ui.qml.
+    \QC creates a reference to the Bubble type in \e Page1Form.ui.qml.
 
-    To check your code, you can compare Page1Form.ui.qml with the
+    To check your code, you can compare \e 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.
+    \e Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
 
-    The UI is now ready and you can switch to editing the Page1.qml and
-    Bubble.qml files in the \uicontrol {Text Editor}, as described in the
+    The UI is now ready and you can switch to editing the \e Bubble.qml and
+    \e main.qml files in the \uicontrol {Text Editor}, as described in the
     following section.
 
     \section1 Moving the Bubble
 
-    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 Page1.qml
-    (or the application cannot be built).
-
-    In the \uicontrol {Text Editor}, edit Bubble.qml to add properties that we
-    use to will position the image:
+    In the \uicontrol {Text Editor}, edit \e Bubble.qml to add properties that we
+    will use to position the image:
 
     \quotefromfile accelbubble/Bubble.qml
     \skipto Image
     \printuntil }
 
-    In the \uicontrol {Text Editor}, edit main.qml to specify the application
+    In the \uicontrol {Text Editor}, edit \e main.qml to specify the application
     title, as illustrated by the following code snippet:
 
     \quotefromfile accelbubble/main.qml
     \skipto ApplicationWindow
     \printuntil title
 
-    Remove the rest of the boilerplate code in main.qml, except the Page1 type.
     Specify bubble properties to position the image:
 
     \printuntil bubbleCenter
@@ -183,10 +176,10 @@
     Then add code to move the bubble based on Accelerometer sensor values:
 
     \list 1
-        \li Add the following import statement to main.qml:
+        \li Add the following import statement to \e main.qml:
 
             \code
-            import QtSensors 5.7
+            import QtSensors 5.9
             \endcode
 
         \li Add the \l{Accelerometer} type with the necessary properties: