Doc: Describe converting Qt Quick UI Prototypes to Applications

Qt Quick UI Prototype projects (.qmlproject) are used in Qt Design
Studio, but they must be converted to Qt Quick Application projects
for building and running them in Qt Creator.

Add example files and quote code from them.

Task-number: QDS-357
Change-Id: Ib0bf1b342ec54faeca108e5586389730a85b5116
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

7 files changed, 403 insertions, 0 deletions

diff --git a/doc/examples/progressbar/main.cpp b/doc/examples/progressbar/main.cpp
new file mode 100644
index 0000000000..f8f4c584aa
--- /dev/null
+++ b/doc/examples/progressbar/main.cpp
@@ -0,0 +1,18 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QQuickView>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QQuickView view;
+    view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml"));
+    if (!view.errors().isEmpty())
+        return -1;
+    view.show();
+
+    app.exec();
+}
diff --git a/doc/examples/progressbar/progressbar.pro b/doc/examples/progressbar/progressbar.pro
new file mode 100644
index 0000000000..85993f1729
--- /dev/null
+++ b/doc/examples/progressbar/progressbar.pro
@@ -0,0 +1,30 @@
+QT += quick
+CONFIG += c++11
+
+# The following define makes your compiler emit warnings if you use
+# 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 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
+
+RESOURCES += \
+             $$files(qml/*)
+
+# 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
diff --git a/doc/examples/progressbar/qml.qrc b/doc/examples/progressbar/qml.qrc
new file mode 100644
index 0000000000..5f6483ac33
--- /dev/null
+++ b/doc/examples/progressbar/qml.qrc
@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+    </qresource>
+</RCC>
diff --git a/doc/examples/progressbar/qml/ProgressBar.qmlproject b/doc/examples/progressbar/qml/ProgressBar.qmlproject
new file mode 100644
index 0000000000..0375ab0185
--- /dev/null
+++ b/doc/examples/progressbar/qml/ProgressBar.qmlproject
@@ -0,0 +1,20 @@
+/* File generated by Qt Creator */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "ProgressBar.ui.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ "../exampleplugin" ]
+}
diff --git a/doc/examples/progressbar/qml/ProgressBar.ui.qml b/doc/examples/progressbar/qml/ProgressBar.ui.qml
new file mode 100644
index 0000000000..d60695dea3
--- /dev/null
+++ b/doc/examples/progressbar/qml/ProgressBar.ui.qml
@@ -0,0 +1,177 @@
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $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.9
+import QtQuick.Window 2.3
+import QtQuick.Timeline 1.0
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.3
+
+Rectangle {
+    visible: true
+    width: 640
+    height: 480
+    color: "#242424"
+
+    ColumnLayout {
+        x: 20
+        y: 152
+        spacing: 20
+
+        Root {
+            id: root
+        }
+
+        Root {
+            id: root1
+        }
+
+        Root {
+            id: root2
+        }
+    }
+
+    Timeline {
+        id: timeline
+        enabled: true
+        endFrame: 4000
+        startFrame: 0
+
+        KeyframeGroup {
+            target: root
+            property: "progress"
+
+            Keyframe {
+                value: 10
+                frame: 0
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.86, 0.00, 0.07, 1.00, 1, 1]
+                value: 90
+                frame: 2000
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.86, 0.00, 0.07, 1.00, 1, 1]
+                value: 10
+                frame: 4000
+            }
+        }
+
+        KeyframeGroup {
+            target: root1
+            property: "progress"
+
+            Keyframe {
+                easing.bezierCurve: [0.17, 0.84, 0.44, 1.00, 1, 1]
+                value: 90
+                frame: 4000
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.17, 0.84, 0.44, 1.00, 1, 1]
+                value: 20
+                frame: 2000
+            }
+
+            Keyframe {
+                value: 90
+                frame: 0
+            }
+        }
+
+        KeyframeGroup {
+            target: root2
+            property: "progress"
+
+            Keyframe {
+                value: 15
+                frame: 0
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.79, 0.14, 0.15, 0.86, 1, 1]
+                value: 85
+                frame: 2000
+            }
+
+            Keyframe {
+                easing.bezierCurve: [0.79, 0.14, 0.15, 0.86, 1, 1]
+                value: 15
+                frame: 4000
+            }
+        }
+
+        animations: [
+            TimelineAnimation {
+                id: propertyAnimation
+                target: timeline
+                property: "currentFrame"
+                running: true
+                to: timeline.endFrame
+                from: timeline.startFrame
+                loops: -1
+                duration: 1000
+            }
+        ]
+    }
+
+    Image {
+        id: image
+        x: 518
+        y: 0
+        width: 102
+        height: 137
+        fillMode: Image.PreserveAspectFit
+        source: "built-with-Qt_Large.png"
+    }
+}
diff --git a/doc/examples/progressbar/qml/Root.qml b/doc/examples/progressbar/qml/Root.qml
new file mode 100644
index 0000000000..aab2373545
--- /dev/null
+++ b/doc/examples/progressbar/qml/Root.qml
@@ -0,0 +1,153 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Design Studio.
+**
+** $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.9
+import QtQuick.Timeline 1.0
+
+Item {
+    id: root
+    width: 600
+    height: 65
+    property alias progress: timeline.currentFrame
+
+    Rectangle {
+        id: pb_back
+        color: "#9f9f9f"
+        radius: 4
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 30
+
+        Rectangle {
+            id: pb_front
+            width: 200
+            color: "#ffffff"
+            anchors.bottomMargin: 5
+            anchors.left: parent.left
+            anchors.leftMargin: 5
+            anchors.bottom: parent.bottom
+            anchors.top: parent.top
+            anchors.topMargin: 5
+        }
+    }
+
+    Text {
+        id: text1
+        color: "#ffffff"
+        text: Math.round(root.progress)
+        font.pixelSize: 18
+    }
+
+    Timeline {
+        id: timeline
+        enabled: true
+        startFrame: 0
+        endFrame: 100
+
+        KeyframeGroup {
+            target: text1
+            property: "color"
+
+            Keyframe {
+                value: "#8de98d"
+                frame: 0
+            }
+
+            Keyframe {
+                value: "#de4f4f"
+                frame: 50
+            }
+
+            Keyframe {
+                value: "#f0c861"
+                frame: 100
+            }
+        }
+
+        KeyframeGroup {
+            target: pb_front
+            property: "width"
+
+            Keyframe {
+                value: 0
+                frame: 0
+            }
+
+            Keyframe {
+                value: 590
+                frame: 100
+            }
+        }
+
+        KeyframeGroup {
+            target: pb_front
+            property: "color"
+            Keyframe {
+                value: "#8de98d"
+                frame: 0
+            }
+
+            Keyframe {
+                value: "#de4f4f"
+                frame: 50
+            }
+
+            Keyframe {
+                value: "#f0c861"
+                frame: 100
+            }
+        }
+    }
+}
diff --git a/doc/examples/progressbar/qml/built-with-Qt_Large.png b/doc/examples/progressbar/qml/built-with-Qt_Large.png
new file mode 100644
index 0000000000..75ec0fa080
--- /dev/null
+++ b/doc/examples/progressbar/qml/built-with-Qt_Large.png