Doc: tutorial Get Started with Qt Quick

Task-number: QTBUG-68739
Change-Id: Ib14e4eb4c20583af2be9198539077f1be5ae471a
Reviewed-by: Edward Welbourne <edward.welbourne@qt.io>
Reviewed-by: Venugopal Shivashankar <Venugopal.Shivashankar@qt.io>

9 files changed, 719 insertions, 0 deletions

diff --git a/examples/tutorials/alarms/AlarmDelegate.qml b/examples/tutorials/alarms/AlarmDelegate.qml
new file mode 100644
index 000000000..97ffc8676
--- /dev/null
+++ b/examples/tutorials/alarms/AlarmDelegate.qml
@@ -0,0 +1,142 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.4
+import QtQuick.Layouts 1.11
+import QtQuick.Window 2.11
+
+ItemDelegate {
+    id: root
+    width: parent.width
+    checkable: true
+
+    onClicked: ListView.view.currentIndex = index
+
+    contentItem: ColumnLayout {
+        spacing: 0
+
+        RowLayout {
+            ColumnLayout {
+                id: dateColumn
+
+                readonly property date alarmDate: new Date(
+                    model.year, model.month - 1, model.day, model.hour, model.minute)
+
+                Label {
+                    id: timeLabel
+                    font.pixelSize: Qt.application.font.pixelSize * 2
+                    text: dateColumn.alarmDate.toLocaleTimeString(window.locale, Locale.ShortFormat)
+                }
+                RowLayout {
+                    Label {
+                        id: dateLabel
+                        text: dateColumn.alarmDate.toLocaleDateString(window.locale, Locale.ShortFormat)
+                    }
+                    Label {
+                        id: alarmAbout
+                        text: "⸱ " + model.label
+                        visible: model.label.length > 0 && !root.checked
+                    }
+                }
+            }
+            Item {
+                Layout.fillWidth: true
+            }
+            Switch {
+                checked: model.activated
+                Layout.alignment: Qt.AlignTop
+                onClicked: model.activated = checked
+            }
+        }
+        CheckBox {
+            id: alarmRepeat
+            text: qsTr("Repeat")
+            checked: model.repeat
+            visible: root.checked
+            onToggled: model.repeat = checked
+        }
+        Flow {
+            visible: root.checked && model.repeat
+            Layout.fillWidth: true
+
+            Repeater {
+                id: dayRepeater
+                model: daysToRepeat
+                delegate: RoundButton {
+                    text: Qt.locale().dayName(model.dayOfWeek, Locale.NarrowFormat)
+                    flat: true
+                    checked: model.repeat
+                    checkable: true
+                    Material.background: checked ? Material.accent : "transparent"
+                    onToggled: model.repeat = checked
+                }
+            }
+        }
+
+        TextField {
+            id: alarmDescriptionTextField
+            placeholderText: qsTr("Enter description here")
+            cursorVisible: true
+            visible: root.checked
+            text: model.label
+            onTextEdited: model.label = text
+        }
+        Button {
+            id: deleteAlarmButton
+            text: qsTr("Delete")
+            width: 40
+            height: 40
+            visible: root.checked
+            onClicked: alarmModel.remove(alarmListView.currentIndex, 1)
+        }
+    }
+}
diff --git a/examples/tutorials/alarms/AlarmDialog.qml b/examples/tutorials/alarms/AlarmDialog.qml
new file mode 100644
index 000000000..10e5a2649
--- /dev/null
+++ b/examples/tutorials/alarms/AlarmDialog.qml
@@ -0,0 +1,168 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+import QtQuick.Window 2.11
+
+Dialog {
+    id: alarmDialog
+    title: "Add new alarm"
+    modal: true
+    standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
+
+    property AlarmModel alarmModel
+
+    function formatNumber(number) {
+        return number < 10 && number >= 0 ? "0" + number : number.toString()
+    }
+
+    onAccepted: {
+        alarmModel.append({
+            "hour": hoursTumbler.currentIndex,
+            "minute": minutesTumbler.currentIndex,
+            "day": dayTumbler.currentIndex + 1,
+            "month": monthTumbler.currentIndex + 1,
+            "year": yearTumbler.years[yearTumbler.currentIndex],
+            "activated": true,
+            "label": "",
+            "repeat": false,
+            "daysToRepeat": [
+                { "dayOfWeek": 0, "repeat": false },
+                { "dayOfWeek": 1, "repeat": false },
+                { "dayOfWeek": 2, "repeat": false },
+                { "dayOfWeek": 3, "repeat": false },
+                { "dayOfWeek": 4, "repeat": false },
+                { "dayOfWeek": 5, "repeat": false },
+                { "dayOfWeek": 6, "repeat": false }
+            ],
+        })
+    }
+    onRejected: alarmDialog.close()
+
+    contentItem: RowLayout {
+        RowLayout {
+            id: rowTumbler
+
+            Tumbler {
+                id: hoursTumbler
+                model: 24
+                delegate: TumblerDelegate {
+                    text: formatNumber(modelData)
+                }
+            }
+            Tumbler {
+                id: minutesTumbler
+                model: 60
+                delegate: TumblerDelegate {
+                    text: formatNumber(modelData)
+                }
+            }
+        }
+
+        RowLayout {
+            id: datePicker
+
+            Layout.leftMargin: 20
+
+            property alias dayTumbler: dayTumbler
+            property alias monthTumbler: monthTumbler
+            property alias yearTumbler: yearTumbler
+
+            readonly property var days: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+
+            Tumbler {
+                id: dayTumbler
+
+                function updateModel() {
+                    // Populate the model with days of the month. For example: [0, ..., 30]
+                    var previousIndex = dayTumbler.currentIndex
+                    var array = []
+                    var newDays = datePicker.days[monthTumbler.currentIndex]
+                    for (var i = 1; i <= newDays; ++i)
+                        array.push(i)
+                    dayTumbler.model = array
+                    dayTumbler.currentIndex = Math.min(newDays - 1, previousIndex)
+                }
+
+                Component.onCompleted: updateModel()
+
+                delegate: TumblerDelegate {
+                    text: formatNumber(modelData)
+                }
+            }
+            Tumbler {
+                id: monthTumbler
+
+                onCurrentIndexChanged: dayTumbler.updateModel()
+
+                model: 12
+                delegate: TumblerDelegate {
+                    text: window.locale.standaloneMonthName(modelData, Locale.ShortFormat)
+                }
+            }
+            Tumbler {
+                id: yearTumbler
+
+                // This array is populated with the next three years. For example: [2018, 2019, 2020]
+                readonly property var years: (function() {
+                    var currentYear = new Date().getFullYear()
+                    return [0, 1, 2].map(function(value) { return value + currentYear; })
+                })()
+
+                model: years
+                delegate: TumblerDelegate {
+                    text: formatNumber(modelData)
+                }
+            }
+        }
+    }
+}
diff --git a/examples/tutorials/alarms/AlarmModel.qml b/examples/tutorials/alarms/AlarmModel.qml
new file mode 100644
index 000000000..6afa5db75
--- /dev/null
+++ b/examples/tutorials/alarms/AlarmModel.qml
@@ -0,0 +1,152 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.11
+
+// Populate the model with some sample data.
+ListModel {
+    id: alarmModel
+
+    ListElement {
+        hour: 6
+        minute: 0
+        day: 2
+        month: 8
+        year: 2018
+        activated: true
+        label: "Wake up"
+        repeat: true
+        daysToRepeat: [
+            ListElement { dayOfWeek: 0; repeat: false },
+            ListElement { dayOfWeek: 1; repeat: false },
+            ListElement { dayOfWeek: 2; repeat: false },
+            ListElement { dayOfWeek: 3; repeat: false },
+            ListElement { dayOfWeek: 4; repeat: false },
+            ListElement { dayOfWeek: 5; repeat: false },
+            ListElement { dayOfWeek: 6; repeat: false }
+        ]
+    }
+    ListElement {
+        hour: 6
+        minute: 0
+        day: 3
+        month: 8
+        year: 2018
+        activated: true
+        label: "Wake up"
+        repeat: true
+        daysToRepeat: [
+            ListElement { dayOfWeek: 0; repeat: true },
+            ListElement { dayOfWeek: 1; repeat: true },
+            ListElement { dayOfWeek: 2; repeat: true },
+            ListElement { dayOfWeek: 3; repeat: true },
+            ListElement { dayOfWeek: 4; repeat: true },
+            ListElement { dayOfWeek: 5; repeat: false },
+            ListElement { dayOfWeek: 6; repeat: false }
+        ]
+    }
+    ListElement {
+        hour: 7
+        minute: 0
+        day: 3
+        month: 8
+        year: 2018
+        activated: false
+        label: "Exercise"
+        repeat: true
+        daysToRepeat: [
+            ListElement { dayOfWeek: 0; repeat: true },
+            ListElement { dayOfWeek: 1; repeat: true },
+            ListElement { dayOfWeek: 2; repeat: true },
+            ListElement { dayOfWeek: 3; repeat: true },
+            ListElement { dayOfWeek: 4; repeat: true },
+            ListElement { dayOfWeek: 5; repeat: true },
+            ListElement { dayOfWeek: 6; repeat: true }
+        ]
+    }
+    ListElement {
+        hour: 5
+        minute: 15
+        day: 1
+        month: 9
+        year: 2018
+        activated: true
+        label: ""
+        repeat: false
+        daysToRepeat: [
+            ListElement { dayOfWeek: 0; repeat: false },
+            ListElement { dayOfWeek: 1; repeat: false },
+            ListElement { dayOfWeek: 2; repeat: false },
+            ListElement { dayOfWeek: 3; repeat: false },
+            ListElement { dayOfWeek: 4; repeat: false },
+            ListElement { dayOfWeek: 5; repeat: false },
+            ListElement { dayOfWeek: 6; repeat: false }
+        ]
+    }
+    ListElement {
+        hour: 5
+        minute: 45
+        day: 3
+        month: 9
+        year: 2018
+        activated: false
+        label: ""
+        repeat: false
+        daysToRepeat: [
+            ListElement { dayOfWeek: 0; repeat: false },
+            ListElement { dayOfWeek: 1; repeat: false },
+            ListElement { dayOfWeek: 2; repeat: false },
+            ListElement { dayOfWeek: 3; repeat: false },
+            ListElement { dayOfWeek: 4; repeat: false },
+            ListElement { dayOfWeek: 5; repeat: false },
+            ListElement { dayOfWeek: 6; repeat: false }
+        ]
+    }
+}
diff --git a/examples/tutorials/alarms/TumblerDelegate.qml b/examples/tutorials/alarms/TumblerDelegate.qml
new file mode 100644
index 000000000..88a35a5ba
--- /dev/null
+++ b/examples/tutorials/alarms/TumblerDelegate.qml
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.4
+
+Text {
+    text: modelData
+    color: Tumbler.tumbler.Material.foreground
+    font: Tumbler.tumbler.font
+    opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+}
diff --git a/examples/tutorials/alarms/alarms.pro b/examples/tutorials/alarms/alarms.pro
new file mode 100644
index 000000000..6c54c7f8f
--- /dev/null
+++ b/examples/tutorials/alarms/alarms.pro
@@ -0,0 +1,29 @@
+QT += qml quick
+
+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 = $$PWD/imports
+
+# 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 has 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
+TARGET = Alarms
+# 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.
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target
diff --git a/examples/tutorials/alarms/main.cpp b/examples/tutorials/alarms/main.cpp
new file mode 100644
index 000000000..3e1bdd84e
--- /dev/null
+++ b/examples/tutorials/alarms/main.cpp
@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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$
+**
+****************************************************************************/
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}
diff --git a/examples/tutorials/alarms/main.qml b/examples/tutorials/alarms/main.qml
new file mode 100644
index 000000000..acd541687
--- /dev/null
+++ b/examples/tutorials/alarms/main.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $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.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.4
+import QtQuick.Layouts 1.11
+import QtQuick.Window 2.11
+import Qt.labs.calendar 1.0
+
+ApplicationWindow {
+    id: window
+    width: 400
+    height: 500
+    visible: true
+
+    ListView {
+        id: alarmListView
+        anchors.fill: parent
+        model: AlarmModel {}
+        delegate: AlarmDelegate {}
+    }
+
+    RoundButton {
+        id: addAlarmButton
+        text: "+"
+        anchors.bottom: alarmListView.bottom
+        anchors.bottomMargin: 8
+        anchors.horizontalCenter: parent.horizontalCenter
+        onClicked: alarmDialog.open()
+    }
+
+    AlarmDialog {
+        id: alarmDialog
+        x: Math.round((parent.width - width) / 2)
+        y: Math.round((parent.height - height) / 2)
+        alarmModel: alarmListView.model
+    }
+}
diff --git a/examples/tutorials/alarms/qml.qrc b/examples/tutorials/alarms/qml.qrc
new file mode 100644
index 000000000..ae9ac9078
--- /dev/null
+++ b/examples/tutorials/alarms/qml.qrc
@@ -0,0 +1,10 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>qtquickcontrols2.conf</file>
+        <file>TumblerDelegate.qml</file>
+        <file>AlarmModel.qml</file>
+        <file>AlarmDelegate.qml</file>
+        <file>AlarmDialog.qml</file>
+    </qresource>
+</RCC>
diff --git a/examples/tutorials/alarms/qtquickcontrols2.conf b/examples/tutorials/alarms/qtquickcontrols2.conf
new file mode 100644
index 000000000..3c6766599
--- /dev/null
+++ b/examples/tutorials/alarms/qtquickcontrols2.conf
@@ -0,0 +1,5 @@
+[Controls]
+Style=Material
+[Material]
+Theme=Dark
+Accent=Red