Merge remote-tracking branch 'origin/5.6' into 5.7

Change-Id: Ia8879787703c32db44119b25be10adc83adc40bb

128 files changed, 5814 insertions, 0 deletions

diff --git a/examples/quickcontrols2/chattutorial/chapter1-settingup/chapter1-settingup.pro b/examples/quickcontrols2/chattutorial/chapter1-settingup/chapter1-settingup.pro
new file mode 100644
index 00000000..a1eebcac
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter1-settingup/chapter1-settingup.pro
@@ -0,0 +1,11 @@
+TEMPLATE = app
+
+QT += qml quick
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtlabscontrols/chattutorial/chapter1-settingup
+INSTALLS += target
diff --git a/examples/quickcontrols2/chattutorial/chapter1-settingup/main.cpp b/examples/quickcontrols2/chattutorial/chapter1-settingup/main.cpp
new file mode 100644
index 00000000..3a095d2f
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter1-settingup/main.cpp
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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[])
+{
+    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+
+    return app.exec();
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter1-settingup/main.qml b/examples/quickcontrols2/chattutorial/chapter1-settingup/main.qml
new file mode 100644
index 00000000..477d14e2
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter1-settingup/main.qml
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+ApplicationWindow {
+    width: 540
+    height: 960
+    visible: true
+
+    Page {
+        anchors.fill: parent
+        header: Label {
+            padding: 10
+            text: qsTr("Contacts")
+            font.pixelSize: 20
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter1-settingup/qml.qrc b/examples/quickcontrols2/chattutorial/chapter1-settingup/qml.qrc
new file mode 100644
index 00000000..0ff3892d
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter1-settingup/qml.qrc
@@ -0,0 +1,6 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+    </qresource>
+</RCC>
+
diff --git a/examples/quickcontrols2/chattutorial/chapter2-lists/chapter2-lists.pro b/examples/quickcontrols2/chattutorial/chapter2-lists/chapter2-lists.pro
new file mode 100644
index 00000000..9d5187ff
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter2-lists/chapter2-lists.pro
@@ -0,0 +1,12 @@
+TEMPLATE = app
+
+QT += qml quick
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc \
+    ../shared/shared.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtlabscontrols/chattutorial/chapter2-lists
+INSTALLS += target
diff --git a/examples/quickcontrols2/chattutorial/chapter2-lists/main.cpp b/examples/quickcontrols2/chattutorial/chapter2-lists/main.cpp
new file mode 100644
index 00000000..3a095d2f
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter2-lists/main.cpp
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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[])
+{
+    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+
+    return app.exec();
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter2-lists/main.qml b/examples/quickcontrols2/chattutorial/chapter2-lists/main.qml
new file mode 100644
index 00000000..290219aa
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter2-lists/main.qml
@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+ApplicationWindow {
+    width: 540
+    height: 960
+    visible: true
+
+    Page {
+        anchors.fill: parent
+        header: Label {
+            padding: 10
+            text: qsTr("Contacts")
+            font.pixelSize: 20
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        ListView {
+            id: listView
+            anchors.fill: parent
+            topMargin: 48
+            leftMargin: 48
+            bottomMargin: 48
+            rightMargin: 48
+            spacing: 20
+            model: ["Albert Einstein", "Ernest Hemingway", "Hans Gude"]
+            delegate: ItemDelegate {
+                text: modelData
+                width: listView.width - listView.leftMargin - listView.rightMargin
+                height: avatar.implicitHeight
+                leftPadding: avatar.implicitWidth + 32
+
+                Image {
+                    id: avatar
+                    source: "qrc:/" + modelData + ".png"
+                }
+            }
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter2-lists/qml.qrc b/examples/quickcontrols2/chattutorial/chapter2-lists/qml.qrc
new file mode 100644
index 00000000..0ff3892d
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter2-lists/qml.qrc
@@ -0,0 +1,6 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+    </qresource>
+</RCC>
+
diff --git a/examples/quickcontrols2/chattutorial/chapter3-navigation/ContactPage.qml b/examples/quickcontrols2/chattutorial/chapter3-navigation/ContactPage.qml
new file mode 100644
index 00000000..f1589387
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter3-navigation/ContactPage.qml
@@ -0,0 +1,78 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Page {
+    id: root
+
+    header: ToolBar {
+        Label {
+            text: qsTr("Contacts")
+            font.pixelSize: 20
+            anchors.centerIn: parent
+        }
+    }
+
+    ListView {
+        id: listView
+        anchors.fill: parent
+        topMargin: 48
+        leftMargin: 48
+        bottomMargin: 48
+        rightMargin: 48
+        spacing: 20
+        model: ["Albert Einstein", "Ernest Hemingway", "Hans Gude"]
+        delegate: ItemDelegate {
+            text: modelData
+            width: listView.width - listView.leftMargin - listView.rightMargin
+            height: avatar.implicitHeight
+            leftPadding: avatar.implicitWidth + 32
+            onClicked: root.StackView.view.push("qrc:/ConversationPage.qml", { inConversationWith: modelData })
+
+            Image {
+                id: avatar
+                source: "qrc:/" + modelData + ".png"
+            }
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter3-navigation/ConversationPage.qml b/examples/quickcontrols2/chattutorial/chapter3-navigation/ConversationPage.qml
new file mode 100644
index 00000000..b4393a93
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter3-navigation/ConversationPage.qml
@@ -0,0 +1,132 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import QtQuick.Layouts 1.3
+import Qt.labs.controls 1.0
+
+Page {
+    id: root
+
+    property string inConversationWith
+
+    header: ToolBar {
+        ToolButton {
+            text: qsTr("Back")
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: root.StackView.view.pop()
+        }
+
+        Label {
+            id: pageTitle
+            text: inConversationWith
+            font.pixelSize: 20
+            anchors.centerIn: parent
+        }
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        ListView {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.margins: pane.leftPadding + messageField.leftPadding
+            displayMarginBeginning: 40
+            displayMarginEnd: 40
+            verticalLayoutDirection: ListView.BottomToTop
+            spacing: 12
+            model: 10
+            delegate: Row {
+                readonly property bool sentByMe: index % 2 == 0
+
+                anchors.right: sentByMe ? parent.right : undefined
+                spacing: 6
+
+                Rectangle {
+                    id: avatar
+                    width: height
+                    height: parent.height
+                    color: "grey"
+                    visible: !sentByMe
+                }
+
+                Rectangle {
+                    width: 80
+                    height: 40
+                    color: sentByMe ? "lightgrey" : "steelblue"
+
+                    Label {
+                        anchors.centerIn: parent
+                        text: index
+                        color: sentByMe ? "black" : "white"
+                    }
+                }
+            }
+
+            ScrollBar.vertical: ScrollBar {}
+        }
+
+        Pane {
+            id: pane
+            Layout.fillWidth: true
+
+            RowLayout {
+                width: parent.width
+
+                TextArea {
+                    id: messageField
+                    Layout.fillWidth: true
+                    placeholderText: qsTr("Compose message")
+                    wrapMode: TextArea.Wrap
+                }
+
+                Button {
+                    id: sendButton
+                    text: qsTr("Send")
+                    enabled: messageField.length > 0
+                }
+            }
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter3-navigation/chapter3-navigation.pro b/examples/quickcontrols2/chattutorial/chapter3-navigation/chapter3-navigation.pro
new file mode 100644
index 00000000..7a64f65d
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter3-navigation/chapter3-navigation.pro
@@ -0,0 +1,12 @@
+TEMPLATE = app
+
+QT += qml quick
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc \
+    ../shared/shared.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtlabscontrols/chattutorial/chapter3-navigation
+INSTALLS += target
diff --git a/examples/quickcontrols2/chattutorial/chapter3-navigation/main.cpp b/examples/quickcontrols2/chattutorial/chapter3-navigation/main.cpp
new file mode 100644
index 00000000..3a095d2f
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter3-navigation/main.cpp
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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[])
+{
+    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+
+    return app.exec();
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter3-navigation/main.qml b/examples/quickcontrols2/chattutorial/chapter3-navigation/main.qml
new file mode 100644
index 00000000..b373c6b8
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter3-navigation/main.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+ApplicationWindow {
+    id: window
+    width: 540
+    height: 960
+    visible: true
+
+    StackView {
+        id: stackView
+        anchors.fill: parent
+        initialItem: ContactPage {}
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter3-navigation/qml.qrc b/examples/quickcontrols2/chattutorial/chapter3-navigation/qml.qrc
new file mode 100644
index 00000000..a72e1b71
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter3-navigation/qml.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>ContactPage.qml</file>
+        <file>ConversationPage.qml</file>
+    </qresource>
+</RCC>
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/ContactPage.qml b/examples/quickcontrols2/chattutorial/chapter4-models/ContactPage.qml
new file mode 100644
index 00000000..8ec0ca51
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/ContactPage.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+import io.qt.examples.chattutorial 1.0
+
+Page {
+    id: root
+
+    header: ToolBar {
+        Label {
+            text: qsTr("Contacts")
+            font.pixelSize: 20
+            anchors.centerIn: parent
+        }
+    }
+
+    ListView {
+        id: listView
+        anchors.fill: parent
+        topMargin: 48
+        leftMargin: 48
+        bottomMargin: 48
+        rightMargin: 48
+        spacing: 20
+        model: SqlContactModel {}
+        delegate: ItemDelegate {
+            text: model.display
+            width: listView.width - listView.leftMargin - listView.rightMargin
+            height: avatar.implicitHeight
+            leftPadding: avatar.implicitWidth + 32
+            onClicked: root.StackView.view.push("qrc:/ConversationPage.qml", { inConversationWith: model.display })
+
+            Image {
+                id: avatar
+                source: "qrc:/" + model.display + ".png"
+            }
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/ConversationPage.qml b/examples/quickcontrols2/chattutorial/chapter4-models/ConversationPage.qml
new file mode 100644
index 00000000..467a1924
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/ConversationPage.qml
@@ -0,0 +1,155 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import QtQuick.Layouts 1.3
+import Qt.labs.controls 1.0
+
+import io.qt.examples.chattutorial 1.0
+
+Page {
+    id: root
+
+    property string inConversationWith
+
+    header: ToolBar {
+        ToolButton {
+            text: qsTr("Back")
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: root.StackView.view.pop()
+        }
+
+        Label {
+            id: pageTitle
+            text: inConversationWith
+            font.pixelSize: 20
+            anchors.centerIn: parent
+        }
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        ListView {
+            id: listView
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.margins: pane.leftPadding + messageField.leftPadding
+            displayMarginBeginning: 40
+            displayMarginEnd: 40
+            verticalLayoutDirection: ListView.BottomToTop
+            spacing: 12
+            model: SqlConversationModel {
+                recipient: inConversationWith
+            }
+            delegate: Column {
+                anchors.right: sentByMe ? parent.right : undefined
+                spacing: 6
+
+                readonly property bool sentByMe: model.recipient !== "Me"
+
+                Row {
+                    id: messageRow
+                    spacing: 6
+                    anchors.right: sentByMe ? parent.right : undefined
+
+                    Image {
+                        id: avatar
+                        source: !sentByMe ? "qrc:/" + model.author + ".png" : ""
+                    }
+
+                    Rectangle {
+                        width: Math.min(messageText.implicitWidth + 24,
+                            listView.width - (!sentByMe ? avatar.width + messageRow.spacing : 0))
+                        height: messageText.implicitHeight + 24
+                        color: sentByMe ? "lightgrey" : "steelblue"
+
+                        Label {
+                            id: messageText
+                            text: model.message
+                            color: sentByMe ? "black" : "white"
+                            anchors.fill: parent
+                            anchors.margins: 12
+                            wrapMode: Label.Wrap
+                        }
+                    }
+                }
+
+                Label {
+                    id: timestampText
+                    text: Qt.formatDateTime(model.timestamp, "d MMM hh:mm")
+                    color: "lightgrey"
+                    anchors.right: sentByMe ? parent.right : undefined
+                }
+            }
+
+            ScrollBar.vertical: ScrollBar {}
+        }
+
+        Pane {
+            id: pane
+            Layout.fillWidth: true
+
+            RowLayout {
+                width: parent.width
+
+                TextArea {
+                    id: messageField
+                    Layout.fillWidth: true
+                    placeholderText: qsTr("Compose message")
+                    wrapMode: TextArea.Wrap
+                }
+
+                Button {
+                    id: sendButton
+                    text: qsTr("Send")
+                    enabled: messageField.length > 0
+                    onClicked: {
+                        listView.model.sendMessage(inConversationWith, messageField.text);
+                        messageField.text = "";
+                    }
+                }
+            }
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/chapter4-models.pro b/examples/quickcontrols2/chattutorial/chapter4-models/chapter4-models.pro
new file mode 100644
index 00000000..e7709019
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/chapter4-models.pro
@@ -0,0 +1,20 @@
+TEMPLATE = app
+
+QT += qml quick sql
+CONFIG += c++11
+
+!contains(sql-drivers, sqlite): QTPLUGIN += qsqlite
+
+HEADERS += sqlcontactmodel.h \
+    sqlconversationmodel.h
+
+SOURCES += main.cpp \
+    sqlcontactmodel.cpp \
+    sqlconversationmodel.cpp
+
+RESOURCES += \
+    qml.qrc \
+    ../shared/shared.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtlabscontrols/chattutorial/chapter4-models
+INSTALLS += target
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/main.cpp b/examples/quickcontrols2/chattutorial/chapter4-models/main.cpp
new file mode 100644
index 00000000..9f2109fa
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/main.cpp
@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 <QStandardPaths>
+#include <QSqlDatabase>
+#include <QSqlError>
+#include <QtQml>
+
+#include "sqlcontactmodel.h"
+#include "sqlconversationmodel.h"
+
+static void connectToDatabase()
+{
+    QSqlDatabase database = QSqlDatabase::database();
+    if (!database.isValid()) {
+        database = QSqlDatabase::addDatabase("QSQLITE");
+        if (!database.isValid())
+            qFatal("Cannot add database: %s", qPrintable(database.lastError().text()));
+    }
+
+    const QDir writeDir = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation);
+    if (!writeDir.mkpath("."))
+        qFatal("Failed to create writable directory at %s", qPrintable(writeDir.absolutePath()));
+
+    // Ensure that we have a writable location on all devices.
+    const QString fileName = writeDir.absolutePath() + "/chat-database.sqlite3";
+    // When using the SQLite driver, open() will create the SQLite database if it doesn't exist.
+    database.setDatabaseName(fileName);
+    if (!database.open()) {
+        qFatal("Cannot open database: %s", qPrintable(database.lastError().text()));
+        QFile::remove(fileName);
+    }
+}
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QGuiApplication app(argc, argv);
+
+    qmlRegisterType<SqlContactModel>("io.qt.examples.chattutorial", 1, 0, "SqlContactModel");
+    qmlRegisterType<SqlConversationModel>("io.qt.examples.chattutorial", 1, 0, "SqlConversationModel");
+
+    connectToDatabase();
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/main.qml b/examples/quickcontrols2/chattutorial/chapter4-models/main.qml
new file mode 100644
index 00000000..b373c6b8
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/main.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+ApplicationWindow {
+    id: window
+    width: 540
+    height: 960
+    visible: true
+
+    StackView {
+        id: stackView
+        anchors.fill: parent
+        initialItem: ContactPage {}
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/qml.qrc b/examples/quickcontrols2/chattutorial/chapter4-models/qml.qrc
new file mode 100644
index 00000000..a72e1b71
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/qml.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>ContactPage.qml</file>
+        <file>ConversationPage.qml</file>
+    </qresource>
+</RCC>
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/sqlcontactmodel.cpp b/examples/quickcontrols2/chattutorial/chapter4-models/sqlcontactmodel.cpp
new file mode 100644
index 00000000..d1cfb796
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/sqlcontactmodel.cpp
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 "sqlcontactmodel.h"
+
+#include <QDebug>
+#include <QSqlError>
+#include <QSqlQuery>
+
+static void createTable()
+{
+    if (QSqlDatabase::database().tables().contains(QStringLiteral("Contacts"))) {
+        // The table already exists; we don't need to do anything.
+        return;
+    }
+
+    QSqlQuery query;
+    if (!query.exec(
+        "CREATE TABLE IF NOT EXISTS 'Contacts' ("
+        "   'name' TEXT NOT NULL,"
+        "   PRIMARY KEY(name)"
+        ")")) {
+        qFatal("Failed to query database: %s", qPrintable(query.lastError().text()));
+    }
+
+    query.exec("INSERT INTO Contacts VALUES('Albert Einstein')");
+    query.exec("INSERT INTO Contacts VALUES('Ernest Hemingway')");
+    query.exec("INSERT INTO Contacts VALUES('Hans Gude')");
+}
+
+SqlContactModel::SqlContactModel(QObject *parent) :
+    QSqlQueryModel(parent)
+{
+    createTable();
+
+    QSqlQuery query;
+    if (!query.exec("SELECT * FROM Contacts"))
+        qFatal("Contacts SELECT query failed: %s", qPrintable(query.lastError().text()));
+
+    setQuery(query);
+    if (lastError().isValid())
+        qFatal("Cannot set query on SqlContactModel: %s", qPrintable(lastError().text()));
+}
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/sqlcontactmodel.h b/examples/quickcontrols2/chattutorial/chapter4-models/sqlcontactmodel.h
new file mode 100644
index 00000000..00dd6a6f
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/sqlcontactmodel.h
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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$
+**
+****************************************************************************/
+
+#ifndef SQLCONTACTMODEL_H
+#define SQLCONTACTMODEL_H
+
+#include <QSqlQueryModel>
+
+class SqlContactModel : public QSqlQueryModel
+{
+public:
+    SqlContactModel(QObject *parent = 0);
+};
+
+#endif // SQLCONTACTMODEL_H
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/sqlconversationmodel.cpp b/examples/quickcontrols2/chattutorial/chapter4-models/sqlconversationmodel.cpp
new file mode 100644
index 00000000..56f1b838
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/sqlconversationmodel.cpp
@@ -0,0 +1,144 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 "sqlconversationmodel.h"
+
+#include <QDateTime>
+#include <QDebug>
+#include <QSqlError>
+#include <QSqlRecord>
+#include <QSqlQuery>
+
+static const char *conversationsTableName = "Conversations";
+
+static void createTable()
+{
+    if (QSqlDatabase::database().tables().contains(conversationsTableName)) {
+        // The table already exists; we don't need to do anything.
+        return;
+    }
+
+    QSqlQuery query;
+    if (!query.exec(
+        "CREATE TABLE IF NOT EXISTS 'Conversations' ("
+        "'author' TEXT NOT NULL,"
+        "'recipient' TEXT NOT NULL,"
+        "'timestamp' TEXT NOT NULL,"
+        "'message' TEXT NOT NULL,"
+        "FOREIGN KEY('author') REFERENCES Contacts ( name ),"
+        "FOREIGN KEY('recipient') REFERENCES Contacts ( name )"
+        ")")) {
+        qFatal("Failed to query database: %s", qPrintable(query.lastError().text()));
+    }
+
+    query.exec("INSERT INTO Conversations VALUES('Me', 'Ernest Hemingway', '2016-01-07T14:36:06', 'Hello!')");
+    query.exec("INSERT INTO Conversations VALUES('Ernest Hemingway', 'Me', '2016-01-07T14:36:16', 'Good afternoon.')");
+    query.exec("INSERT INTO Conversations VALUES('Me', 'Albert Einstein', '2016-01-01T11:24:53', 'Hi!')");
+    query.exec("INSERT INTO Conversations VALUES('Albert Einstein', 'Me', '2016-01-07T14:36:16', 'Good morning.')");
+    query.exec("INSERT INTO Conversations VALUES('Hans Gude', 'Me', '2015-11-20T06:30:02', 'God morgen. Har du fått mitt maleri?')");
+    query.exec("INSERT INTO Conversations VALUES('Me', 'Hans Gude', '2015-11-20T08:21:03', 'God morgen, Hans. Ja, det er veldig fint. Tusen takk! "
+               "Hvor mange timer har du brukt på den?')");
+}
+
+SqlConversationModel::SqlConversationModel(QObject *parent) :
+    QSqlTableModel(parent)
+{
+    createTable();
+    setTable(conversationsTableName);
+    setSort(2, Qt::DescendingOrder);
+    // Ensures that the model is sorted correctly after submitting a new row.
+    setEditStrategy(QSqlTableModel::OnManualSubmit);
+}
+
+QString SqlConversationModel::recipient() const
+{
+    return m_recipient;
+}
+
+void SqlConversationModel::setRecipient(const QString &recipient)
+{
+    if (recipient == m_recipient)
+        return;
+
+    m_recipient = recipient;
+
+    const QString filterString = QString::fromLatin1(
+        "(recipient = '%1' AND author = 'Me') OR (recipient = 'Me' AND author='%1')").arg(m_recipient);
+    setFilter(filterString);
+    select();
+
+    emit recipientChanged();
+}
+
+QVariant SqlConversationModel::data(const QModelIndex &index, int role) const
+{
+    if (role < Qt::UserRole)
+        return QSqlTableModel::data(index, role);
+
+    const QSqlRecord sqlRecord = record(index.row());
+    return sqlRecord.value(role - Qt::UserRole);
+}
+
+QHash<int, QByteArray> SqlConversationModel::roleNames() const
+{
+    QHash<int, QByteArray> names;
+    names[Qt::UserRole] = "author";
+    names[Qt::UserRole + 1] = "recipient";
+    names[Qt::UserRole + 2] = "timestamp";
+    names[Qt::UserRole + 3] = "message";
+    return names;
+}
+
+void SqlConversationModel::sendMessage(const QString &recipient, const QString &message)
+{
+    const QString timestamp = QDateTime::currentDateTime().toString(Qt::ISODate);
+
+    QSqlRecord newRecord = record();
+    newRecord.setValue("author", "Me");
+    newRecord.setValue("recipient", recipient);
+    newRecord.setValue("timestamp", timestamp);
+    newRecord.setValue("message", message);
+    if (!insertRecord(rowCount(), newRecord)) {
+        qWarning() << "Failed to send message:" << lastError().text();
+        return;
+    }
+
+    submitAll();
+}
diff --git a/examples/quickcontrols2/chattutorial/chapter4-models/sqlconversationmodel.h b/examples/quickcontrols2/chattutorial/chapter4-models/sqlconversationmodel.h
new file mode 100644
index 00000000..0ce12049
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter4-models/sqlconversationmodel.h
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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$
+**
+****************************************************************************/
+
+#ifndef SQLCONVERSATIONMODEL_H
+#define SQLCONVERSATIONMODEL_H
+
+#include <QSqlTableModel>
+
+class SqlConversationModel : public QSqlTableModel
+{
+    Q_OBJECT
+    Q_PROPERTY(QString recipient READ recipient WRITE setRecipient NOTIFY recipientChanged)
+
+public:
+    SqlConversationModel(QObject *parent = 0);
+
+    QString recipient() const;
+    void setRecipient(const QString &recipient);
+
+    QVariant data(const QModelIndex &index, int role) const Q_DECL_OVERRIDE;
+    QHash<int, QByteArray> roleNames() const Q_DECL_OVERRIDE;
+
+    Q_INVOKABLE void sendMessage(const QString &recipient, const QString &message);
+
+signals:
+    void recipientChanged();
+
+private:
+    QString m_recipient;
+};
+
+#endif // SQLCONVERSATIONMODEL_H
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/+material/ChatToolBar.qml b/examples/quickcontrols2/chattutorial/chapter5-styling/+material/ChatToolBar.qml
new file mode 100644
index 00000000..57a239cb
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/+material/ChatToolBar.qml
@@ -0,0 +1,46 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 Qt.labs.controls 1.0
+import Qt.labs.controls.material 1.0
+
+ToolBar {
+    Material.theme: Material.Dark
+}
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/ChatToolBar.qml b/examples/quickcontrols2/chattutorial/chapter5-styling/ChatToolBar.qml
new file mode 100644
index 00000000..10c2890f
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/ChatToolBar.qml
@@ -0,0 +1,44 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 Qt.labs.controls 1.0
+
+ToolBar {
+}
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/ContactPage.qml b/examples/quickcontrols2/chattutorial/chapter5-styling/ContactPage.qml
new file mode 100644
index 00000000..7f24f275
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/ContactPage.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+import io.qt.examples.chattutorial 1.0
+
+Page {
+    id: root
+
+    header: ChatToolBar {
+        Label {
+            text: qsTr("Contacts")
+            font.pixelSize: 20
+            anchors.centerIn: parent
+        }
+    }
+
+    ListView {
+        id: listView
+        anchors.fill: parent
+        topMargin: 48
+        leftMargin: 48
+        bottomMargin: 48
+        rightMargin: 48
+        spacing: 20
+        model: SqlContactModel {}
+        delegate: ItemDelegate {
+            text: model.display
+            width: listView.width - listView.leftMargin - listView.rightMargin
+            height: avatar.implicitHeight
+            leftPadding: avatar.implicitWidth + 32
+            onClicked: root.StackView.view.push("qrc:/ConversationPage.qml", { inConversationWith: model.display })
+
+            Image {
+                id: avatar
+                source: "qrc:/" + model.display + ".png"
+            }
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/ConversationPage.qml b/examples/quickcontrols2/chattutorial/chapter5-styling/ConversationPage.qml
new file mode 100644
index 00000000..b65f69a9
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/ConversationPage.qml
@@ -0,0 +1,154 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import QtQuick.Layouts 1.3
+import Qt.labs.controls 1.0
+
+import io.qt.examples.chattutorial 1.0
+
+Page {
+    id: root
+
+    property string inConversationWith
+
+    header: ChatToolBar {
+        ToolButton {
+            text: qsTr("Back")
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: root.StackView.view.pop()
+        }
+
+        Label {
+            id: pageTitle
+            text: inConversationWith
+            font.pixelSize: 20
+            anchors.centerIn: parent
+        }
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        ListView {
+            id: listView
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.margins: pane.leftPadding + messageField.leftPadding
+            displayMarginBeginning: 40
+            displayMarginEnd: 40
+            verticalLayoutDirection: ListView.BottomToTop
+            spacing: 12
+            model: SqlConversationModel {
+                recipient: inConversationWith
+            }
+            delegate: Column {
+                anchors.right: sentByMe ? parent.right : undefined
+                spacing: 6
+
+                readonly property bool sentByMe: model.recipient !== "Me"
+
+                Row {
+                    id: messageRow
+                    spacing: 6
+                    anchors.right: sentByMe ? parent.right : undefined
+
+                    Image {
+                        id: avatar
+                        source: !sentByMe ? "qrc:/" + model.author + ".png" : ""
+                    }
+
+                    Rectangle {
+                        width: Math.min(messageText.implicitWidth + 24, listView.width - avatar.width - messageRow.spacing)
+                        height: messageText.implicitHeight + 24
+                        color: sentByMe ? "lightgrey" : "steelblue"
+
+                        Label {
+                            id: messageText
+                            text: model.message
+                            color: sentByMe ? "black" : "white"
+                            anchors.fill: parent
+                            anchors.margins: 12
+                            wrapMode: Label.Wrap
+                        }
+                    }
+                }
+
+                Label {
+                    id: timestampText
+                    text: Qt.formatDateTime(model.timestamp, "d MMM hh:mm")
+                    color: "lightgrey"
+                    anchors.right: sentByMe ? parent.right : undefined
+                }
+            }
+
+            ScrollBar.vertical: ScrollBar {}
+        }
+
+        Pane {
+            id: pane
+            Layout.fillWidth: true
+
+            RowLayout {
+                width: parent.width
+
+                TextArea {
+                    id: messageField
+                    Layout.fillWidth: true
+                    placeholderText: qsTr("Compose message")
+                    wrapMode: TextArea.Wrap
+                }
+
+                Button {
+                    id: sendButton
+                    text: qsTr("Send")
+                    enabled: messageField.length > 0
+                    onClicked: {
+                        listView.model.sendMessage(inConversationWith, messageField.text);
+                        messageField.text = "";
+                    }
+                }
+            }
+        }
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/chapter5-styling.pro b/examples/quickcontrols2/chattutorial/chapter5-styling/chapter5-styling.pro
new file mode 100644
index 00000000..204442ba
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/chapter5-styling.pro
@@ -0,0 +1,20 @@
+TEMPLATE = app
+
+QT += qml quick sql
+CONFIG += c++11
+
+!contains(sql-drivers, sqlite): QTPLUGIN += qsqlite
+
+HEADERS += sqlcontactmodel.h \
+    sqlconversationmodel.h
+
+SOURCES += main.cpp \
+    sqlcontactmodel.cpp \
+    sqlconversationmodel.cpp
+
+RESOURCES += \
+    qml.qrc \
+    ../shared/shared.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtlabscontrols/chattutorial/chapter5-styling
+INSTALLS += target
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/main.cpp b/examples/quickcontrols2/chattutorial/chapter5-styling/main.cpp
new file mode 100644
index 00000000..9f2109fa
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/main.cpp
@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 <QStandardPaths>
+#include <QSqlDatabase>
+#include <QSqlError>
+#include <QtQml>
+
+#include "sqlcontactmodel.h"
+#include "sqlconversationmodel.h"
+
+static void connectToDatabase()
+{
+    QSqlDatabase database = QSqlDatabase::database();
+    if (!database.isValid()) {
+        database = QSqlDatabase::addDatabase("QSQLITE");
+        if (!database.isValid())
+            qFatal("Cannot add database: %s", qPrintable(database.lastError().text()));
+    }
+
+    const QDir writeDir = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation);
+    if (!writeDir.mkpath("."))
+        qFatal("Failed to create writable directory at %s", qPrintable(writeDir.absolutePath()));
+
+    // Ensure that we have a writable location on all devices.
+    const QString fileName = writeDir.absolutePath() + "/chat-database.sqlite3";
+    // When using the SQLite driver, open() will create the SQLite database if it doesn't exist.
+    database.setDatabaseName(fileName);
+    if (!database.open()) {
+        qFatal("Cannot open database: %s", qPrintable(database.lastError().text()));
+        QFile::remove(fileName);
+    }
+}
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QGuiApplication app(argc, argv);
+
+    qmlRegisterType<SqlContactModel>("io.qt.examples.chattutorial", 1, 0, "SqlContactModel");
+    qmlRegisterType<SqlConversationModel>("io.qt.examples.chattutorial", 1, 0, "SqlConversationModel");
+
+    connectToDatabase();
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/main.qml b/examples/quickcontrols2/chattutorial/chapter5-styling/main.qml
new file mode 100644
index 00000000..b373c6b8
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/main.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+ApplicationWindow {
+    id: window
+    width: 540
+    height: 960
+    visible: true
+
+    StackView {
+        id: stackView
+        anchors.fill: parent
+        initialItem: ContactPage {}
+    }
+}
+
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/qml.qrc b/examples/quickcontrols2/chattutorial/chapter5-styling/qml.qrc
new file mode 100644
index 00000000..eab2140a
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/qml.qrc
@@ -0,0 +1,10 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>ContactPage.qml</file>
+        <file>ConversationPage.qml</file>
+        <file>qtquickcontrols.conf</file>
+        <file>ChatToolBar.qml</file>
+        <file>+material/ChatToolBar.qml</file>
+    </qresource>
+</RCC>
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/qtquickcontrols.conf b/examples/quickcontrols2/chattutorial/chapter5-styling/qtquickcontrols.conf
new file mode 100644
index 00000000..e338c804
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/qtquickcontrols.conf
@@ -0,0 +1,7 @@
+[material]
+Primary=Indigo
+Accent=Indigo
+Theme=Dark
+
+[Universal]
+Theme=Dark
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/sqlcontactmodel.cpp b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlcontactmodel.cpp
new file mode 100644
index 00000000..d1cfb796
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlcontactmodel.cpp
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 "sqlcontactmodel.h"
+
+#include <QDebug>
+#include <QSqlError>
+#include <QSqlQuery>
+
+static void createTable()
+{
+    if (QSqlDatabase::database().tables().contains(QStringLiteral("Contacts"))) {
+        // The table already exists; we don't need to do anything.
+        return;
+    }
+
+    QSqlQuery query;
+    if (!query.exec(
+        "CREATE TABLE IF NOT EXISTS 'Contacts' ("
+        "   'name' TEXT NOT NULL,"
+        "   PRIMARY KEY(name)"
+        ")")) {
+        qFatal("Failed to query database: %s", qPrintable(query.lastError().text()));
+    }
+
+    query.exec("INSERT INTO Contacts VALUES('Albert Einstein')");
+    query.exec("INSERT INTO Contacts VALUES('Ernest Hemingway')");
+    query.exec("INSERT INTO Contacts VALUES('Hans Gude')");
+}
+
+SqlContactModel::SqlContactModel(QObject *parent) :
+    QSqlQueryModel(parent)
+{
+    createTable();
+
+    QSqlQuery query;
+    if (!query.exec("SELECT * FROM Contacts"))
+        qFatal("Contacts SELECT query failed: %s", qPrintable(query.lastError().text()));
+
+    setQuery(query);
+    if (lastError().isValid())
+        qFatal("Cannot set query on SqlContactModel: %s", qPrintable(lastError().text()));
+}
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/sqlcontactmodel.h b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlcontactmodel.h
new file mode 100644
index 00000000..00dd6a6f
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlcontactmodel.h
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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$
+**
+****************************************************************************/
+
+#ifndef SQLCONTACTMODEL_H
+#define SQLCONTACTMODEL_H
+
+#include <QSqlQueryModel>
+
+class SqlContactModel : public QSqlQueryModel
+{
+public:
+    SqlContactModel(QObject *parent = 0);
+};
+
+#endif // SQLCONTACTMODEL_H
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/sqlconversationmodel.cpp b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlconversationmodel.cpp
new file mode 100644
index 00000000..56f1b838
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlconversationmodel.cpp
@@ -0,0 +1,144 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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 "sqlconversationmodel.h"
+
+#include <QDateTime>
+#include <QDebug>
+#include <QSqlError>
+#include <QSqlRecord>
+#include <QSqlQuery>
+
+static const char *conversationsTableName = "Conversations";
+
+static void createTable()
+{
+    if (QSqlDatabase::database().tables().contains(conversationsTableName)) {
+        // The table already exists; we don't need to do anything.
+        return;
+    }
+
+    QSqlQuery query;
+    if (!query.exec(
+        "CREATE TABLE IF NOT EXISTS 'Conversations' ("
+        "'author' TEXT NOT NULL,"
+        "'recipient' TEXT NOT NULL,"
+        "'timestamp' TEXT NOT NULL,"
+        "'message' TEXT NOT NULL,"
+        "FOREIGN KEY('author') REFERENCES Contacts ( name ),"
+        "FOREIGN KEY('recipient') REFERENCES Contacts ( name )"
+        ")")) {
+        qFatal("Failed to query database: %s", qPrintable(query.lastError().text()));
+    }
+
+    query.exec("INSERT INTO Conversations VALUES('Me', 'Ernest Hemingway', '2016-01-07T14:36:06', 'Hello!')");
+    query.exec("INSERT INTO Conversations VALUES('Ernest Hemingway', 'Me', '2016-01-07T14:36:16', 'Good afternoon.')");
+    query.exec("INSERT INTO Conversations VALUES('Me', 'Albert Einstein', '2016-01-01T11:24:53', 'Hi!')");
+    query.exec("INSERT INTO Conversations VALUES('Albert Einstein', 'Me', '2016-01-07T14:36:16', 'Good morning.')");
+    query.exec("INSERT INTO Conversations VALUES('Hans Gude', 'Me', '2015-11-20T06:30:02', 'God morgen. Har du fått mitt maleri?')");
+    query.exec("INSERT INTO Conversations VALUES('Me', 'Hans Gude', '2015-11-20T08:21:03', 'God morgen, Hans. Ja, det er veldig fint. Tusen takk! "
+               "Hvor mange timer har du brukt på den?')");
+}
+
+SqlConversationModel::SqlConversationModel(QObject *parent) :
+    QSqlTableModel(parent)
+{
+    createTable();
+    setTable(conversationsTableName);
+    setSort(2, Qt::DescendingOrder);
+    // Ensures that the model is sorted correctly after submitting a new row.
+    setEditStrategy(QSqlTableModel::OnManualSubmit);
+}
+
+QString SqlConversationModel::recipient() const
+{
+    return m_recipient;
+}
+
+void SqlConversationModel::setRecipient(const QString &recipient)
+{
+    if (recipient == m_recipient)
+        return;
+
+    m_recipient = recipient;
+
+    const QString filterString = QString::fromLatin1(
+        "(recipient = '%1' AND author = 'Me') OR (recipient = 'Me' AND author='%1')").arg(m_recipient);
+    setFilter(filterString);
+    select();
+
+    emit recipientChanged();
+}
+
+QVariant SqlConversationModel::data(const QModelIndex &index, int role) const
+{
+    if (role < Qt::UserRole)
+        return QSqlTableModel::data(index, role);
+
+    const QSqlRecord sqlRecord = record(index.row());
+    return sqlRecord.value(role - Qt::UserRole);
+}
+
+QHash<int, QByteArray> SqlConversationModel::roleNames() const
+{
+    QHash<int, QByteArray> names;
+    names[Qt::UserRole] = "author";
+    names[Qt::UserRole + 1] = "recipient";
+    names[Qt::UserRole + 2] = "timestamp";
+    names[Qt::UserRole + 3] = "message";
+    return names;
+}
+
+void SqlConversationModel::sendMessage(const QString &recipient, const QString &message)
+{
+    const QString timestamp = QDateTime::currentDateTime().toString(Qt::ISODate);
+
+    QSqlRecord newRecord = record();
+    newRecord.setValue("author", "Me");
+    newRecord.setValue("recipient", recipient);
+    newRecord.setValue("timestamp", timestamp);
+    newRecord.setValue("message", message);
+    if (!insertRecord(rowCount(), newRecord)) {
+        qWarning() << "Failed to send message:" << lastError().text();
+        return;
+    }
+
+    submitAll();
+}
diff --git a/examples/quickcontrols2/chattutorial/chapter5-styling/sqlconversationmodel.h b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlconversationmodel.h
new file mode 100644
index 00000000..0ce12049
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chapter5-styling/sqlconversationmodel.h
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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$
+**
+****************************************************************************/
+
+#ifndef SQLCONVERSATIONMODEL_H
+#define SQLCONVERSATIONMODEL_H
+
+#include <QSqlTableModel>
+
+class SqlConversationModel : public QSqlTableModel
+{
+    Q_OBJECT
+    Q_PROPERTY(QString recipient READ recipient WRITE setRecipient NOTIFY recipientChanged)
+
+public:
+    SqlConversationModel(QObject *parent = 0);
+
+    QString recipient() const;
+    void setRecipient(const QString &recipient);
+
+    QVariant data(const QModelIndex &index, int role) const Q_DECL_OVERRIDE;
+    QHash<int, QByteArray> roleNames() const Q_DECL_OVERRIDE;
+
+    Q_INVOKABLE void sendMessage(const QString &recipient, const QString &message);
+
+signals:
+    void recipientChanged();
+
+private:
+    QString m_recipient;
+};
+
+#endif // SQLCONVERSATIONMODEL_H
diff --git a/examples/quickcontrols2/chattutorial/chattutorial.pro b/examples/quickcontrols2/chattutorial/chattutorial.pro
new file mode 100644
index 00000000..2f38254e
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/chattutorial.pro
@@ -0,0 +1,8 @@
+TEMPLATE = subdirs
+
+SUBDIRS += \
+    chapter1-settingup \
+    chapter2-lists \
+    chapter3-navigation \
+    chapter4-models \
+    chapter5-styling
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter1.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter1.png
new file mode 100644
index 00000000..ee03535f
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter1.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter2-listview-header.gif b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter2-listview-header.gif
new file mode 100644
index 00000000..17096519
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter2-listview-header.gif
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter2.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter2.png
new file mode 100644
index 00000000..c2c49e3e
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter2.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3-listview-header.gif b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3-listview-header.gif
new file mode 100644
index 00000000..07eb93b1
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3-listview-header.gif
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3-view-margins.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3-view-margins.png
new file mode 100644
index 00000000..9ca0fe69
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3-view-margins.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3.gif b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3.gif
new file mode 100644
index 00000000..1763b1f3
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter3.gif
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4-long-message.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4-long-message.png
new file mode 100644
index 00000000..acbe1886
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4-long-message.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4-message-timestamp.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4-message-timestamp.png
new file mode 100644
index 00000000..e4a578cc
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4-message-timestamp.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4.gif b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4.gif
new file mode 100644
index 00000000..dd47c4cb
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter4.gif
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png
new file mode 100644
index 00000000..9a3d00bd
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png
new file mode 100644
index 00000000..501ea772
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material.png
new file mode 100644
index 00000000..57782b58
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-material.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png
new file mode 100644
index 00000000..22183c82
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-universal.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-universal.png
new file mode 100644
index 00000000..327076d3
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-contacts-universal.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png
new file mode 100644
index 00000000..19a7b685
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png
new file mode 100644
index 00000000..4cc4caa3
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material.png
new file mode 100644
index 00000000..bdc9bcd3
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-material.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png
new file mode 100644
index 00000000..f10d6cb6
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png
diff --git a/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-universal.png b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-universal.png
new file mode 100644
index 00000000..a6913c3c
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/images/qtquickcontrols2-chattutorial-chapter5-conversations-universal.png
diff --git a/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
new file mode 100644
index 00000000..e83f84c2
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/doc/src/qtquickcontrols2-chattutorial.qdoc
@@ -0,0 +1,855 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+\example chattutorial
+\title Qt Quick Controls 2 - Chat Tutorial
+\brief Tutorial about writing a basic chat client using Qt Quick Controls 2.
+\ingroup qtquickcontrols2-examples
+
+This tutorial shows how to write a basic chat application using Qt Quick
+Controls 2. It will also explain how to integrate an SQL database into a Qt
+application.
+
+\section1 Chapter 1: Setting Up
+
+When setting up a new project, it's easiest to use
+\l {Qt Creator Manual}{Qt Creator}. For this project, we chose the
+\l {Qt Creator: Creating Qt Quick Projects}{Qt Quick application} template, which creates a
+basic "Hello World" application with all of the necessary files.
+
+\section2 main.cpp
+
+As we created a Qt Quick application, our \c main.cpp has two includes:
+
+\quotefromfile chattutorial/chapter1-settingup/main.cpp
+\skipto include
+\printline include
+\printline include
+
+The first gives us access to QGuiApplication. All Qt applications require
+an application object, but the precise type depends on what the application
+does. QCoreApplication is sufficient for non-graphical applications.
+QGuiApplication is sufficient for graphical applications that do not use
+\l {Qt Widgets}, while QApplication is required for those that do.
+
+The second include makes QQmlApplicationEngine available, along with
+some useful functions required for making C++ types accessible from QML.
+
+Within \c main(), we set up the application object and QML engine:
+
+\skipto main
+\printuntil }
+
+To enable Qt's support for \l {High DPI Displays}{high DPI scaling}, it
+is necessary to set an attribute before the application object is constructed.
+
+After that's done, we construct the application object, passing any application
+arguments provided by the user.
+
+Next, the QML engine is created. \l QQmlApplicationEngine is a convenient
+wrapper over QQmlEngine, providing the \l {QQmlApplicationEngine::load}{load()}
+function to easily load QML for an application. It also adds some convenience
+for using \l {Using File Selectors with Qt Quick Controls 2}{file selectors}.
+
+Once we've set up things in C++, we can move on to the user interface in QML.
+
+\section2 main.qml
+
+\quotefromfile chattutorial/chapter1-settingup/main.qml
+\skipto import
+\printuntil import Qt.labs.controls 1.0
+
+First, we import the \l {Qt Quick} module. This gives us
+access to graphical primitives such as \l Item, \l Rectangle, \l Text, and so
+on.
+For the full list of types, see the \l {Qt Quick QML Types} documentation.
+
+Next, we import the Qt Quick Controls 2 module. Amongst other things, this
+makes \l ApplicationWindow available:
+
+\skipto ApplicationWindow
+\printuntil visible: true
+\printuntil }
+\printuntil }
+\printuntil }
+
+ApplicationWindow is a \l Window with some added convenience for creating a
+\l {ApplicationWindow::}{header} and a \l {ApplicationWindow::}{footer}.
+It also provides the foundation for \l {Popup}{popups} and supports some
+basic styling, such as the background \l {Window::}{color}.
+
+There are three properties that are almost always set when using
+ApplicationWindow: \l {Window::}{width}, \l {Window::}{height}, and
+\l {Window::}{visible}.
+Once we've set these, we have a properly sized, empty window ready to be
+filled with content.
+
+The first \e "screen" in our application will be a list of contacts. It would
+be nice to have some text at the top of each screen that describes its purpose.
+The header and footer properties of ApplicationWindow could work in
+this situation. They have some characteristics that make them ideal for
+items that should be displayed on every screen of an application:
+
+\list
+\li They are anchored to the top and bottom of the window, respectively.
+\li They fill the width of the window.
+\endlist
+
+However, when the contents of the header and footer varies depending on
+which screen the user is viewing, it can be much easier to use \l Page.
+For now, we'll just add one page, but in the next chapter, we'll demonstrate
+how to navigate between several pages.
+
+Now that we have a Page, we can assign a \l Label to its \l {Page::}{header}
+property. Label extends the primitive \l Text item from the Qt Quick module by
+adding \l {Styling Qt Quick Controls 2}{styling} and \l {Control::}{font}
+inheritance. This means that a Label can look different depending on which
+style is in use, and can also propagate its pixel size to its children.
+
+We want some distance between the top of the application window and the text,
+so we set the \l {Text::padding}{padding} property. This will allocate extra
+space on each side of the label (within its bounds). We could have also set the
+\l {Text::}{topPadding} and \l {Text::}{bottomPadding} properties explicitly.
+
+We set the text of the label using the \c qsTr() function, which ensures that
+the text can be translated by \l {Writing Source Code for Translation}{Qt's
+translation system}. It's a good idea to do this for text that will
+be visible to the end users of your application.
+
+By default, text is vertically aligned to the top of its bounds, while the
+horizontal alignment depends on the natural direction of the text; for example,
+text that is read from left to right will be aligned to the left. If we
+used these defaults, our text would be at the top-left corner of the window.
+This is not desirable for a header, so we align the text to the center of its
+bounds, both horizontally and vertically.
+
+\section2 The Project File
+
+The \c .pro or \l {Creating Project Files}{project} file contains all of the
+information needed by \l {qmake Manual}{qmake} to generate a Makefile, which is
+then used to compile and link the application.
+
+\quotefromfile chattutorial/chapter1-settingup/chapter1-settingup.pro
+\printline TEMPLATE
+
+The first line tells \c qmake which kind of project this is. We're building an
+application, so we use the \c app template.
+
+\printline QT
+
+The next line declares the Qt libraries that we want to use from C++.
+
+\printline CONFIG
+
+This line states that a C++11 compatible compiler is required to build the
+project.
+
+\printline SOURCES
+
+The \c SOURCES variable lists all of the source files that should be compiled.
+A similar variable, \c HEADERS, is available for header files.
+
+\printline RESOURCES
+
+The next line tells \c qmake that we have a collection of
+\l {The Qt Resource System}{resources} that should be built into the
+executable.
+
+\printline target.path
+
+This line determines where the example will be copied to when running
+\c {make install}.
+
+Now we can build and run the application:
+
+\image qtquickcontrols2-chattutorial-chapter1.png
+
+\section1 Chapter 2: Lists
+
+In this chapter, we'll explain how to create a list of interactive items using
+\l ListView and \l ItemDelegate.
+
+ListView comes from the Qt Quick module, and displays a list of items
+populated from a \l {Models and Views in Qt Quick}{model}. ItemDelegate comes from
+the Qt Quick Controls 2 module, and provides a standard view item for use in views
+and controls such as ListView and \l ComboBox. For example, each ItemDelegate
+can display text, be checked on and off, and react to mouse clicks.
+
+Here is our ListView:
+
+\quotefromfile chattutorial/chapter2-lists/main.qml
+\dots 8
+\codeline
+\skipto ListView
+\printuntil }
+\printuntil }
+\printuntil }
+\codeline
+\dots 8
+
+\section2 Sizing and Positioning
+
+The first thing we do is set a size for the view. It should fill the available
+space on the page, so we use \l {Item::anchors}{anchors.fill}. Note that
+Page ensures that its header and footer have enough of their own space
+reserved, so the view in this case will sit below the header, for example.
+
+Next, we set \l {Flickable::leftMargin}{margins} around the ListView to put
+some distance between it and the edges of the window. The margin properties
+reserve space within the bounds of the view, which means that the empty areas
+can still be \e "flicked" by the user.
+
+The items should be nicely spaced out within the view, so the
+\l {ListView::}{spacing} property is set to \c 20.
+
+\section2 Model
+
+In order to quickly populate the view with some items, we've used a JavaScript
+array as the model. One of the greatest strengths of QML is its ability to
+make prototyping an application extremely quick, and this is an example of
+that. It's also possible to simply assign a \l {Integers as Models}{number} to
+the model property to indicate how many items you need. For example, if you
+assign \c 10 to the \c model property, each item's display text will be a
+number from \c 0 to \c 9.
+
+However, once the application gets past the prototype stage, it quickly becomes
+necessary to use some real data. For this, it's best to use a proper C++ model
+by \l {QAbstractItemModel}{subclassing QAbstractItemModel}.
+
+\section2 Delegate
+
+On to the \l {ListView::}{delegate}. We assign the corresponding text from the
+model to the \l {AbstractButton::text}{text} property of ItemDelegate. The exact
+manner in which the data from the model is made available to each delegate
+depends on the type of model used. See \l {Models and Views in Qt Quick} for
+more information.
+
+In our application, the width of each item in the view should be the same
+as the width of the view. This ensures that the user has a lot of room with
+which to select a contact from the list, which is an important factor on
+devices with small touch screens, like mobile phones. However, the width of the
+view includes our \c 48 pixel margins, so we must account for that in our
+assignment to the width property.
+
+Next, we define an \l Image. This will display a picture of the user's contact.
+The image will be \c 40 pixels wide and \c 40 pixels high. We'll base the
+height of the delegate on the image's height, so that we don't have any empty
+vertical space.
+
+\image qtquickcontrols2-chattutorial-chapter2.png
+
+\section1 Chapter 3: Navigation
+
+In this chapter, you'll learn how to use \l StackView to navigate between pages
+in an application. Here's the revised \c main.qml:
+
+\quotefromfile chattutorial/chapter3-navigation/main.qml
+\skipto import
+\printuntil }
+\printuntil }
+\printuntil }
+
+\section2 StackView
+
+As its name suggests, StackView provides stack-based navigation. The last item
+to be \e "pushed" onto the stack is the first one to be removed, and the
+top-most item is always the one that is visible.
+
+In the same manner as we did with Page, we tell the StackView to fill the
+application window. The only thing left to do after that is to give it an item
+to display, via \l {StackView::}{initialItem}. StackView accepts
+\l {Item}{items}, \l {Component}{components} and \l [QML]{url}{URLs}.
+
+You'll notice that we moved the code for the contact list into
+\c ContactPage.qml. It's a good idea to do this as soon as you have a general
+idea of which screens your application will contain. Doing so not only makes
+your code easier to read, but ensures that items are only instantiated from
+a given component when completely necessary, reducing memory usage.
+
+\note Qt Creator provides several convenient \l {http://doc.qt.io/qtcreator/creator-editor-refactoring.html#refactoring-qml-code}{refactoring options for QML},
+one of which allows you to move a block of code into a separate file
+ (\c {Alt + Enter > Move Component into Separate File}).
+
+Another thing to consider when using ListView is whether to refer to it by
+\c id, or use the attached \l {ListView::view}{ListView.view}
+property. The best approach depends on a few different factors. Giving the
+view an id will result in shorter and more efficient binding expressions, as
+the attached property has a very small amount of overhead. However, if you plan
+on reusing the delegate in other views, it is better to use the attached
+properties to avoid tying the delegate to a particular view. For example, using
+the attached properties, the \c width assignment in our delegate becomes:
+
+\code
+width: ListView.view.width - ListView.view.leftMargin - ListView.view.rightMargin
+\endcode
+
+In chapter 2, we added a ListView below the header. If you run the application
+for that chapter, you'll see that the contents of the view can be scrolled over
+the top of the header:
+
+\image qtquickcontrols2-chattutorial-chapter2-listview-header.gif
+
+This is not that nice, especially if the text in the
+delegates is long enough that it reaches the text in the header. What we
+ideally want to do is to have a solid block of color under the header text, but
+\e {above} the view. This ensures that the listview contents can't visually
+interfere with the header contents. Note that it's also possible to achieve
+this by setting the \l {Item::}{clip} property of the view to \c true, but
+doing so \l {Clipping}{can affect performance}.
+
+\l ToolBar is the right tool for this job. It is a container of both
+application-wide and context-sensitive actions and controls, such as navigation
+buttons and search fields. Best of all, it has a background color that, as
+usual, comes from the application style. Here it is in action:
+
+\quotefromfile chattutorial/chapter3-navigation/ContactPage.qml
+\skipto header
+\printuntil }
+\printuntil }
+
+\image qtquickcontrols2-chattutorial-chapter3-listview-header.gif
+
+It has no layout of its own, so we center the label within it ourselves.
+
+The rest of the code is the same as it was in chapter 2, except that we've
+taken advantage of the \l {AbstractButton::}{clicked} signal to push the next
+page onto the stackview:
+
+\skipto onClicked
+\printline onClicked
+
+When pushing a \l Component or \l [QML] url onto StackView, it's often
+necessary to initialize the (eventually) instantiated item with some variables.
+StackView's \l {StackView::push}{push()} function accounts for this, by taking a JavaScript object
+as the second argument. We use this to provide the next page with a contact's
+name, which it then uses to display the relevant conversation. Note the
+\c {root.StackView.view.push} syntax; this is necessary because of how
+\l {A Note About Accessing Attached Properties and Signal Handlers}
+{attached properties} work.
+
+Let's step through \c ConversationPage.qml, beginning with the imports:
+
+\quotefromfile chattutorial/chapter3-navigation/ConversationPage.qml
+\skipto import
+\printline import
+\printline import
+\printline import
+
+These are the same as before, except for the addition of the \c QtQuick.Layouts
+import, which we'll cover shortly.
+
+\skipto Page
+\printuntil }
+\printuntil }
+\printuntil }
+\dots 4
+
+The root item of this component is another Page, which has a custom property
+called \c inConversationWith. For now, this property will simply determine what
+the label in the header displays. Later on, we'll use it in the SQL query that
+populates the list of messages in the conversation.
+
+To allow the user to go back to the Contact page, we add a \l ToolButton that
+calls \l {StackView::pop}{pop()} when clicked. A \l ToolButton is functionally
+similar to \l Button, but provides a look that is more suitable within a
+ToolBar.
+
+There are two ways of laying out items in QML: \l {Item Positioners}
+and \l {Qt Quick Layouts}. Item positioners (\l Row, \l Column, and so on) are
+useful for situations where the size of items is known or fixed, and all that
+is required is to neatly position them in a certain formation. The layouts in
+Qt Quick Layouts can both position and resize items, making them well suited
+for resizable user interfaces. Below, we use \l ColumnLayout to vertically
+lay out a ListView and a \l Pane:
+
+\skipto ColumnLayout
+\printto Layout.margins
+\codeline
+\dots 12
+\codeline
+\skipuntil ScrollBar
+\printline }
+\codeline
+\dots 8
+\codeline
+\printuntil Layout.fillWidth: true
+\dots 12
+\skipuntil }
+\skipuntil }
+\skipuntil }
+\skipuntil }
+\printline }
+
+Pane is basically a rectangle whose color comes from the application's style.
+It is similar to \l Frame, with the only difference being that it has no stroke
+around its border.
+
+Items that are direct children of a layout have various
+\l {Layout}{attached properties} available to them. We use
+\l {Layout::fillWidth}{Layout.fillWidth} and
+\l {Layout::fillHeight}{Layout.fillHeight} on the ListView to ensure
+that it takes as much space within the ColumnLayout as it can. The
+same is done for the Pane. As ColumnLayout is a vertical layout, there
+aren't any items to the left or right of each child, so this will result in
+each item consuming the entire width of the layout.
+
+On the other hand, the \l {Layout::fillHeight}{Layout.fillHeight} statement in
+the ListView will enable it to occupy the remaining space that is left after
+accommodating the Pane.
+
+Let's look at the listview in detail:
+
+\quotefromfile chattutorial/chapter3-navigation/ConversationPage.qml
+\skipto ListView
+\printuntil ScrollBar
+\printuntil }
+
+After filling the width and height of its parent, we also set some margins on
+the view. This gives us a nice alignment with the placeholder text in the
+"compose message" field:
+
+\omit
+TODO: recreate image
+\endomit
+\image qtquickcontrols2-chattutorial-chapter3-view-margins.png
+
+Next, we set \l {ListView::}{displayMarginBeginning} and \l
+{ListView::}{displayMarginEnd}. These properties ensure that the delegates
+outside the bounds of the view do not disappear while scrolling at the edges of
+the view. It's easiest to understand this by commenting out the properties and
+seeing what happens when scrolling the view.
+
+We then flip the vertical direction of the view, so that first items are at the
+bottom. The delegates are spaced out by 12 pixels, and a \e "dummy" model is
+assigned for testing purposes, until we implement the real model in chapter 4.
+
+Within the delegate, we declare a \l Row as the root item, as we want the
+avatar to be followed by the message contents, as shown in the image above.
+
+Messages sent by the user should be distinguished from those sent by a contact.
+For now, we set a dummy property \c sentByMe, which simply uses the index
+of the delegate to alternate between different authors. Using this property,
+we distinguish between different authors in three ways:
+
+\list
+\li Messages sent by the user are aligned to the right side of the screen
+by setting \c anchors.right to \c parent.right.
+
+\li By setting the \c visible property of the avatar (which is simply a
+Rectangle for now) based on \c sentByMe, we only show it if the message was
+sent by a contact.
+
+\li We change the color of the rectangle depending on the author. Since we
+do not want to display dark text on a dark background, and vice versa, we also
+set the text color depending on who the author is. In chapter 5, we'll see how
+styling takes care of matters like this for us.
+\endlist
+
+At the bottom of the screen, we place a \l TextArea item to allow multi-line
+text input, and a button to send the message. We use Pane to cover the area
+under these two items, in the same way that we use ToolBar to prevent the
+contents of the listview from interfering with the page header:
+
+\skipto Pane
+\printuntil }
+\printuntil }
+\printuntil }
+\printuntil }
+
+The TextArea should fill the available width of the screen. We assign some
+placeholder text to provide a visual cue to the user as to where they should
+begin typing. The text within the input area is wrapped to ensure that it
+does not go outside of the screen.
+
+Finally, the button is only enabled when there is actually a message to send.
+
+\image qtquickcontrols2-chattutorial-chapter3.gif
+
+\section1 Chapter 4: Models
+
+In chapter 4, we'll take you through the process of creating both read-only and
+read-write SQL models in C++ and exposing them to QML to populate views.
+
+\section2 QSqlQueryModel
+
+In order to keep the tutorial simple, we've chosen to make the list of user
+contacts non-editable. \l QSqlQueryModel is the logical choice for this
+purpose, as it provides a read-only data model for SQL result sets.
+
+Let's take a look at our \c SqlContactModel class that derives from
+QSqlQueryModel:
+
+\quotefromfile chattutorial/chapter4-models/sqlcontactmodel.h
+\skipto #include
+\printuntil };
+
+There's not much going on here, so let's move on to the \c .cpp file:
+
+\quotefromfile chattutorial/chapter4-models/sqlcontactmodel.cpp
+\skipto #include
+\printuntil }
+\printuntil }
+\printuntil }
+
+We include the header file of our class and those that we require from Qt. We
+then define a static function named \c createTable() that we'll use to create
+the SQL table (if it doesn't already exist), and then populate it with some
+dummy contacts.
+
+The call to \l {QSqlDatabase::database}{database()} might look a little bit
+confusing because we have not set up a specific database yet. If no connection
+name is passed to this function, it will return a \e {"default connection"},
+whose creation we will cover soon.
+
+\skipto SqlContactModel
+\printuntil }
+
+In the constructor, we call \c createTable(). We then construct a query that
+will be used to populate the model. In this case, we are simply interested in
+all rows of the \c Contacts table.
+
+\section2 QSqlTableModel
+
+\c SqlConversationModel is more complex:
+
+\quotefromfile chattutorial/chapter4-models/sqlconversationmodel.h
+\skipto #include
+\printuntil };
+
+We use both the \c Q_PROPERTY and \c Q_INVOKABLE macros, and therefore we must
+let \l {Using the Meta-Object Compiler (moc)}{moc} know by using the \c
+Q_OBJECT macro.
+
+The \c recipient property will be set from QML to let the model know which
+conversation it should retrieve messages for.
+
+We override the \l {QSqlTableModel::data}{data()} and
+\l {QAbstractItemModel::}{roleNames()} functions so that we can use our
+custom roles in QML.
+
+We also define the \c sendMessage() function that we want to call from
+QML, hence the \c Q_INVOKABLE macro.
+
+Let's take a look at the \c .cpp file:
+
+\quotefromfile chattutorial/chapter4-models/sqlconversationmodel.cpp
+\skipto #include
+\printuntil }
+\printuntil }
+\printuntil }
+
+This is very similar to \c sqlcontactmodel.cpp, with the exception that we are
+now operating on the \c Conversations table. We also define
+\c conversationsTableName as a static const variable, as we use it in a couple
+of places throughout the file.
+
+\skipto SqlConversationModel
+\printuntil }
+
+As with \c SqlContactModel, the first thing that we do in the constructor is
+create the table. We tell QSqlTableModel the name of the table we'll be using
+via the \l {QSqlTableModel::setTable}{setTable()} function. To ensure that the
+latest messages in the conversation are shown first, we sort the query results
+by the \c timestamp field in descending order. This goes hand in hand with
+setting ListView's \l {ListView::}{verticalLayoutDirection} property to
+\c ListView.BottomToTop (which we covered in chapter 3).
+
+\skipto ::recipient(
+\printuntil }
+\printuntil }
+
+In \c setRecipient(), we set a filter over the results returned from
+the database.
+
+\skipto ::data(
+\printuntil }
+
+The \c data() function falls back to QSqlTableModel's implementation if the
+role is not a custom user role. If the role is a user role, we can subtract
+Qt::UserRole from it to get the index of that field and then use that to find
+the value that we need to return.
+
+\skipto ::roleNames(
+\printuntil }
+
+In \c roleNames(), we return a mapping of our custom role values to role names.
+This enables us to use these roles in QML. It can be useful to declare an enum
+to hold all of the role values, but since we don't refer to any specific value
+in code outside of this function, we don't bother.
+
+\skipto ::sendMessage(
+\printuntil }
+
+The \c sendMessage() function uses the given \c recipient and a \c message to
+insert a new record into the database. Due to our usage
+of \l QSqlTableModel::OnManualSubmit, we must manually call
+\l {QSqlTableModel::submitAll}{submitAll()}.
+
+\section2 Connecting to the Database and Registering Types With QML
+
+Now that we've established the model classes, let's take a look at \c main.cpp:
+
+\quotefromfile chattutorial/chapter4-models/main.cpp
+\skipto #include
+\printuntil return app.exec();
+\printuntil }
+
+\c connectToDatabase() creates the connection to the SQLite database, creating
+the actual file if it doesn't already exist.
+
+Within \c main(), we call \l {qmlRegisterType}{qmlRegisterType()} to
+register our models as types within QML.
+
+\section2 Using the Models in QML
+
+Now that we have the models available as QML types, there are some minor
+changes to be done to \c ContactPage.qml. To be able to use the types,
+we must first import them using the URI we set in \c main.cpp:
+
+\quotefromfile chattutorial/chapter4-models/ContactPage.qml
+\skipto import io.qt.examples.chattutorial 1.0
+\printline import io.qt.examples.chattutorial 1.0
+
+We then replace the dummy model with the proper one:
+
+\skipto model: SqlContactModel {}
+\printline model: SqlContactModel {}
+
+Within the delegate, we use a different syntax for accessing the model data:
+
+\skipto text: model.display
+\printline text: model.display
+
+In \c ConversationPage.qml, we add the same \c chattutorial import, and replace
+the dummy model:
+
+\quotefromfile chattutorial/chapter4-models/ConversationPage.qml
+\skipto model: SqlConversationModel {
+\printuntil }
+
+Within the model, we set the \c recipient property to the name of the contact
+for which the page is being displayed.
+
+The root delegate item changes from a Row to a Column, to accommodate the
+timestamp that we want to display below every message:
+
+\skipto delegate: Column {
+\printuntil Label {
+\printuntil }
+\printuntil }
+\printuntil }
+\printuntil }
+\printuntil }
+
+\image qtquickcontrols2-chattutorial-chapter4-message-timestamp.png
+
+Now that we have a proper model, we can use its \c recipient role in the
+expression for the \c sentByMe property.
+
+The Rectangle that was used for the avatar has been converted into an Image.
+The image has its own implicit size, so we don't need to specify it explicitly.
+As before, we only show the avatar when the author isn't the user, except this
+time we set the \c source of the image to an empty URL instead of using the
+\c visible property.
+
+We want each message background to be slightly wider (12 pixels each side) than
+its text. However, if it's too long, we want to limit its width to the edge
+of the listview, hence the usage of \c Math.min(). When the message wasn't sent
+by us, an avatar will always come before it, so we account for that by
+subtracting the width of the avatar and the row spacing.
+
+For example, in the image above, the implicit width of the message text is the
+smaller value. However, in the image below, the message text is quite long, so
+the smaller value (the width of the view) is chosen, ensuring that the text
+stops at the opposite edge of the screen:
+
+\image qtquickcontrols2-chattutorial-chapter4-long-message.png
+
+In order to display the timestamp for each message that we discussed earlier,
+we use a Label. The date and time are formatted with
+\l {QtQml::Qt::formatDateTime}{Qt.formatDateTime()}, using a custom format.
+
+The \e "send" button must now react to being clicked:
+
+\skipto Button
+\printuntil }
+\printuntil }
+
+First, we call the invokable \c sendMessage() function of the model, which
+inserts a new row into the Conversations database table. Then, we clear the
+text field to make way for future input.
+
+\image qtquickcontrols2-chattutorial-chapter4.gif
+
+\section1 Chapter 5: Styling
+
+Styles in Qt Quick Controls 2 are designed to work on any platform. In this
+chapter, we'll do some minor visual tweaks to make sure our application
+looks good when run with the \l {Default Style}{Default},
+\l {Material Style}{Material}, and \l {Universal Style}{Universal} styles.
+
+So far, we've just been testing the application with the Default style. If we
+run it with the \l {Material Style}, for example, we'll immediately see some issues.
+Here is the Contacts page:
+
+\image qtquickcontrols2-chattutorial-chapter5-contacts-material-test.png
+
+The header text is black on a dark blue background, which is very difficult to
+read. The same thing occurs with the Conversations page:
+
+\image qtquickcontrols2-chattutorial-chapter5-conversations-material-test.png
+
+The solution is to tell the toolbar that it should use the \e "Dark" theme, so
+that this information is propagated to its children, allowing them to switch
+their text color to something lighter. The simplest way of doing so is to
+import the Material style directly and use the Material attached property:
+
+\code
+    import Qt.labs.controls.material 1.0
+
+    // ...
+
+    header: ToolBar {
+        Material.theme: Material.Dark
+
+        // ...
+    }
+\endcode
+
+However, this brings with it a hard dependency to the Material style; the
+Material style plugin \e must be deployed with the application, even if the
+target device doesn't use it, otherwise the QML engine will fail to find the
+import.
+
+Instead, it is better to rely on Qt Quick Controls 2's built-in support for
+\l {Using File Selectors with Qt Quick Controls 2}{style-based file selectors}.
+To do this, we must move the ToolBar out into its own file. We'll call it
+\c ChatToolBar.qml. This will be the \e "default" version of the file, which
+means that it will be used when the \l {Default Style}{Default style} is in
+use. Here's the new file:
+
+\quotefromfile chattutorial/chapter5-styling/ChatToolBar.qml
+\skipto import
+\printuntil }
+
+As we only use the ToolBar type within this file, we only need the
+Qt Quick Controls 2 import. The code itself has not changed from how it was
+in \c ContactPage.qml, which is how it should be; for the default version
+of the file, nothing needs to be different.
+
+Back in \c ContactPage.qml, we update the code to use the new type:
+
+\quotefromfile chattutorial/chapter5-styling/ContactPage.qml
+\skipto ToolBar
+\printuntil }
+\printuntil }
+
+Now we need to add the Material version of the toolbar. File selectors expect
+variants of a file to be in appropriately named directories that exist
+alongside the default version of the file. This means that we need to add a
+folder named "+material" in the same directory that ChatToolBar.qml is in:
+the root folder. The "+" is required by \l QFileSelector as a way of ensuring
+that the selection feature is not accidentally triggered.
+
+Here's \c +material/ChatToolBar.qml:
+
+\quotefromfile chattutorial/chapter5-styling/+material/ChatToolBar.qml
+\skipto import
+\printuntil }
+
+We'll make the same changes to \c ConversationPage.qml:
+
+\quotefromfile chattutorial/chapter5-styling/ConversationPage.qml
+\skipto header: ChatToolBar
+\printuntil }
+\printuntil }
+\printuntil }
+
+Now both pages look correct:
+
+\image qtquickcontrols2-chattutorial-chapter5-contacts-material.png
+\image qtquickcontrols2-chattutorial-chapter5-conversations-material.png
+
+Let's try out the Universal style:
+
+\image qtquickcontrols2-chattutorial-chapter5-contacts-universal.png
+\image qtquickcontrols2-chattutorial-chapter5-conversations-universal.png
+
+No issues there. For a relatively simple application such as this one, there
+should be very few adjustments necessary when switching styles.
+
+Now let's try each style's dark theme. The Default style has no dark theme, as
+it would add a slight overhead to a style that is designed to be as performant
+as possible. We'll test out the Material style first, so add an entry to
+\c qtquickcontrols.conf that tells it to use its dark theme:
+
+\code
+[material]
+Primary=Indigo
+Accent=Indigo
+Theme=Dark
+\endcode
+
+Once this is done, build and run the application. This is what you should see:
+
+\image qtquickcontrols2-chattutorial-chapter5-contacts-material-dark.png
+\image qtquickcontrols2-chattutorial-chapter5-conversations-material-dark.png
+
+Both pages look fine. Now add an entry for the Universal style:
+
+\code
+[universal]
+Theme=Dark
+\endcode
+
+After building and running the application, you should see these results:
+
+\image qtquickcontrols2-chattutorial-chapter5-contacts-universal-dark.png
+\image qtquickcontrols2-chattutorial-chapter5-conversations-universal-dark.png
+
+\section1 Summary
+
+In this tutorial, we've taken you through the following steps of writing a
+basic application using Qt Quick Controls 2:
+
+\list
+\li Creating a new project using Qt Creator.
+\li Setting up a basic ApplicationWindow.
+\li Defining headers and footers with Page.
+\li Displaying content in a ListView.
+\li Refactoring components into their own files.
+\li Navigating between screens with StackView.
+\li Using layouts to allow an application to resize gracefully.
+\li Implementing both custom read-only and writable models that integrate an
+SQL database into the application.
+\li Integrating C++ with QML via \l Q_PROPERTY, \l Q_INVOKABLE, and
+\l qmlRegisterType().
+\li Testing and configuring multiple styles.
+\endlist
+
+*/
diff --git a/examples/quickcontrols2/chattutorial/shared/Albert Einstein.png b/examples/quickcontrols2/chattutorial/shared/Albert Einstein.png
new file mode 100644
index 00000000..47cb15f6
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Albert Einstein.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Albert Einstein@2x.png b/examples/quickcontrols2/chattutorial/shared/Albert Einstein@2x.png
new file mode 100644
index 00000000..c80ddd15
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Albert Einstein@2x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Albert Einstein@3x.png b/examples/quickcontrols2/chattutorial/shared/Albert Einstein@3x.png
new file mode 100644
index 00000000..41778835
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Albert Einstein@3x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Albert Einstein@4x.png b/examples/quickcontrols2/chattutorial/shared/Albert Einstein@4x.png
new file mode 100644
index 00000000..88768902
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Albert Einstein@4x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway.png b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway.png
new file mode 100644
index 00000000..988c2416
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@2x.png b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@2x.png
new file mode 100644
index 00000000..efffc1f2
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@2x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@3x.png b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@3x.png
new file mode 100644
index 00000000..12633ec2
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@3x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@4x.png b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@4x.png
new file mode 100644
index 00000000..f5639280
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Ernest Hemingway@4x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Hans Gude.png b/examples/quickcontrols2/chattutorial/shared/Hans Gude.png
new file mode 100644
index 00000000..7367a4a4
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Hans Gude.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Hans Gude@2x.png b/examples/quickcontrols2/chattutorial/shared/Hans Gude@2x.png
new file mode 100644
index 00000000..c3a394e1
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Hans Gude@2x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Hans Gude@3x.png b/examples/quickcontrols2/chattutorial/shared/Hans Gude@3x.png
new file mode 100644
index 00000000..38ec67ee
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Hans Gude@3x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/Hans Gude@4x.png b/examples/quickcontrols2/chattutorial/shared/Hans Gude@4x.png
new file mode 100644
index 00000000..8c75d3e0
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/Hans Gude@4x.png
diff --git a/examples/quickcontrols2/chattutorial/shared/shared.qrc b/examples/quickcontrols2/chattutorial/shared/shared.qrc
new file mode 100644
index 00000000..8e112513
--- /dev/null
+++ b/examples/quickcontrols2/chattutorial/shared/shared.qrc
@@ -0,0 +1,16 @@
+<RCC>
+    <qresource prefix="/">
+        <file>Albert Einstein.png</file>
+        <file>Albert Einstein@2x.png</file>
+        <file>Albert Einstein@3x.png</file>
+        <file>Albert Einstein@4x.png</file>
+        <file>Ernest Hemingway.png</file>
+        <file>Ernest Hemingway@2x.png</file>
+        <file>Ernest Hemingway@3x.png</file>
+        <file>Ernest Hemingway@4x.png</file>
+        <file>Hans Gude.png</file>
+        <file>Hans Gude@2x.png</file>
+        <file>Hans Gude@3x.png</file>
+        <file>Hans Gude@4x.png</file>
+    </qresource>
+</RCC>
diff --git a/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-drawer.png b/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-drawer.png
new file mode 100644
index 00000000..57ec1026
--- /dev/null
+++ b/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-drawer.png
diff --git a/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-menu.png b/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-menu.png
new file mode 100644
index 00000000..5b34264e
--- /dev/null
+++ b/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-menu.png
diff --git a/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-welcome.png b/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-welcome.png
new file mode 100644
index 00000000..5c2bb682
--- /dev/null
+++ b/examples/quickcontrols2/gallery/doc/images/qtquickcontrols2-gallery-welcome.png
diff --git a/examples/quickcontrols2/gallery/doc/src/qtquickcontrols2-gallery.qdoc b/examples/quickcontrols2/gallery/doc/src/qtquickcontrols2-gallery.qdoc
new file mode 100644
index 00000000..2f43472f
--- /dev/null
+++ b/examples/quickcontrols2/gallery/doc/src/qtquickcontrols2-gallery.qdoc
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \example gallery
+    \title Qt Quick Controls 2 - Gallery
+    \ingroup qtquickcontrols2-examples
+    \brief A gallery of controls
+
+    \raw HTML
+    <div class="table"><table style="background:transparent; border:0px">
+    <tr><td style="border:0px">
+    \endraw
+    \image qtquickcontrols2-gallery-welcome.png
+    \caption Welcome Screen
+    \raw HTML
+    </td><td style="border:0px">
+    \endraw
+    \image qtquickcontrols2-gallery-drawer.png
+    \caption Side Drawer
+    \raw HTML
+    </td><td style="border:0px">
+    \endraw
+    \image qtquickcontrols2-gallery-menu.png
+    \caption Options Menu
+    \raw HTML
+    </td></tr>
+    </table></div>
+    \endraw
+
+    The gallery example is a simple application with a drawer menu that contains
+    all the \l {Qt Quick Controls 2}. Each menu item opens a page that shows the
+    graphical appearance of a control, allows you to interact with the control,
+    and explains in which circumstances it is handy to use this control.
+
+    \include examples-run.qdocinc
+*/
diff --git a/examples/quickcontrols2/gallery/gallery.cpp b/examples/quickcontrols2/gallery/gallery.cpp
new file mode 100644
index 00000000..90b63cac
--- /dev/null
+++ b/examples/quickcontrols2/gallery/gallery.cpp
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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>
+#include <QQmlContext>
+#include <QSettings>
+#include <QQuickStyle>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication::setApplicationName("Gallery");
+    QGuiApplication::setOrganizationName("QtProject");
+    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QSettings settings;
+    QString style = QQuickStyle::name();
+    if (!style.isEmpty())
+        settings.setValue("style", style);
+    else
+        QQuickStyle::setStyle(settings.value("style").toString());
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl("qrc:/gallery.qml"));
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}
diff --git a/examples/quickcontrols2/gallery/gallery.pro b/examples/quickcontrols2/gallery/gallery.pro
new file mode 100644
index 00000000..cb0736fd
--- /dev/null
+++ b/examples/quickcontrols2/gallery/gallery.pro
@@ -0,0 +1,16 @@
+TEMPLATE = app
+TARGET = gallery
+QT += quick quickcontrols2
+
+SOURCES += \
+    gallery.cpp
+
+OTHER_FILES += \
+    gallery.qml \
+    pages/*.qml
+
+RESOURCES += \
+    gallery.qrc
+
+target.path = $$[QT_INSTALL_EXAMPLES]/quickcontrols2/gallery
+INSTALLS += target
diff --git a/examples/quickcontrols2/gallery/gallery.qml b/examples/quickcontrols2/gallery/gallery.qml
new file mode 100644
index 00000000..828746a4
--- /dev/null
+++ b/examples/quickcontrols2/gallery/gallery.qml
@@ -0,0 +1,320 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import QtQuick.Layouts 1.3
+import Qt.labs.controls 1.0
+import Qt.labs.controls.material 1.0
+import Qt.labs.controls.universal 1.0
+import Qt.labs.settings 1.0
+
+ApplicationWindow {
+    id: window
+    width: 360
+    height: 520
+    visible: true
+    title: "Qt Quick Controls 2"
+
+    Settings {
+        id: settings
+        property string style: "Universal"
+    }
+
+    header: ToolBar {
+        RowLayout {
+            spacing: 20
+            anchors.fill: parent
+
+            ToolButton {
+                contentItem: Image {
+                    fillMode: Image.Pad
+                    horizontalAlignment: Image.AlignHCenter
+                    verticalAlignment: Image.AlignVCenter
+                    source: "qrc:/images/drawer.png"
+                }
+                onClicked: drawer.open()
+            }
+
+            Label {
+                id: titleLabel
+                text: "Gallery"
+                font.pixelSize: 20
+                elide: Label.ElideRight
+                horizontalAlignment: Qt.AlignHCenter
+                verticalAlignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+            }
+
+            ToolButton {
+                contentItem: Image {
+                    fillMode: Image.Pad
+                    horizontalAlignment: Image.AlignHCenter
+                    verticalAlignment: Image.AlignVCenter
+                    source: "qrc:/images/menu.png"
+                }
+                onClicked: optionsMenu.open()
+
+                Menu {
+                    id: optionsMenu
+                    x: parent.width - width
+                    transformOrigin: Menu.TopRight
+
+                    MenuItem {
+                        text: "Settings"
+                        onTriggered: settingsPopup.open()
+                    }
+                    MenuItem {
+                        text: "About"
+                        onTriggered: aboutDialog.open()
+                    }
+                }
+            }
+        }
+    }
+
+    Drawer {
+        id: drawer
+        width: Math.min(window.width, window.height) / 3 * 2
+        height: window.height
+
+        ListView {
+            id: listView
+            currentIndex: -1
+            anchors.fill: parent
+
+            delegate: ItemDelegate {
+                width: parent.width
+                text: model.title
+                highlighted: ListView.isCurrentItem
+                onClicked: {
+                    if (listView.currentIndex != index) {
+                        listView.currentIndex = index
+                        titleLabel.text = model.title
+                        stackView.replace(model.source)
+                    }
+                    drawer.close()
+                }
+            }
+
+            model: ListModel {
+                ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
+                ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
+                ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
+                ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
+                ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
+                ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
+                ListElement { title: "Drawer"; source: "qrc:/pages/DrawerPage.qml" }
+                ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
+                ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
+                ListElement { title: "Menu"; source: "qrc:/pages/MenuPage.qml" }
+                ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
+                ListElement { title: "Popup"; source: "qrc:/pages/PopupPage.qml" }
+                ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
+                ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
+                ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
+                ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
+                ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
+                ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
+                ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
+                ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
+                ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
+                ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
+                ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
+                ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
+                ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
+                ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
+                ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
+            }
+
+            ScrollIndicator.vertical: ScrollIndicator { }
+        }
+    }
+
+    StackView {
+        id: stackView
+        anchors.fill: parent
+
+        initialItem: Pane {
+            id: pane
+
+            Image {
+                id: logo
+                width: pane.availableWidth / 2
+                height: pane.availableHeight / 2
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: -50
+                fillMode: Image.PreserveAspectFit
+                source: "qrc:/images/qt-logo.png"
+            }
+
+            Label {
+                color: "#26282a"
+                text: "Qt Quick Controls 2 provides a set of controls that can be used to build complete interfaces in Qt Quick."
+                anchors.margins: 20
+                anchors.top: logo.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: arrow.top
+                horizontalAlignment: Label.AlignHCenter
+                verticalAlignment: Label.AlignVCenter
+                wrapMode: Label.Wrap
+            }
+
+            Image {
+                id: arrow
+                source: "qrc:/images/arrow.png"
+                anchors.left: parent.left
+                anchors.bottom: parent.bottom
+            }
+        }
+    }
+
+    Popup {
+        id: settingsPopup
+        x: (window.width - width) / 2
+        y: window.height / 6
+        width: Math.min(window.width, window.height) / 3 * 2
+        height: settingsColumn.implicitHeight + topPadding + bottomPadding
+        modal: true
+        focus: true
+
+        contentItem: ColumnLayout {
+            id: settingsColumn
+            spacing: 20
+
+            Label {
+                text: "Settings"
+                font.bold: true
+            }
+
+            RowLayout {
+                spacing: 10
+
+                Label {
+                    text: "Style:"
+                }
+
+                ComboBox {
+                    id: styleBox
+                    property int styleIndex: -1
+                    model: ["Default", "Material", "Universal"]
+                    Component.onCompleted: {
+                        styleIndex = find(settings.style, Qt.MatchFixedString)
+                        if (styleIndex !== -1)
+                            currentIndex = styleIndex
+                    }
+                    Layout.fillWidth: true
+                }
+            }
+
+            Label {
+                text: "Restart required"
+                color: "#e41e25"
+                opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
+                horizontalAlignment: Label.AlignHCenter
+                verticalAlignment: Label.AlignVCenter
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+            RowLayout {
+                spacing: 10
+
+                Button {
+                    id: okButton
+                    text: "Ok"
+                    onClicked: {
+                        settings.style = styleBox.displayText
+                        settingsPopup.close()
+                    }
+                    Layout.preferredWidth: 0
+                    Layout.fillWidth: true
+                }
+
+                Button {
+                    id: cancelButton
+                    text: "Cancel"
+                    onClicked: {
+                        styleBox.currentIndex = styleBox.styleIndex
+                        settingsPopup.close()
+                    }
+                    Layout.preferredWidth: 0
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    Popup {
+        id: aboutDialog
+        modal: true
+        focus: true
+        x: (window.width - width) / 2
+        y: window.height / 6
+        width: Math.min(window.width, window.height) / 3 * 2
+        contentHeight: aboutColumn.height
+
+        Column {
+            id: aboutColumn
+            spacing: 20
+
+            Label {
+                text: "About"
+                font.bold: true
+            }
+
+            Label {
+                width: aboutDialog.availableWidth
+                text: "The Qt Quick Controls 2 module delivers the next generation user interface controls based on Qt Quick."
+                wrapMode: Label.Wrap
+                font.pixelSize: 12
+            }
+
+            Label {
+                width: aboutDialog.availableWidth
+                text: "In comparison to the desktop-oriented Qt Quick Controls 1, Qt Quick Controls 2 "
+                    + "are an order of magnitude simpler, lighter and faster, and are primarily targeted "
+                    + "towards embedded and mobile platforms."
+                wrapMode: Label.Wrap
+                font.pixelSize: 12
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/gallery.qrc b/examples/quickcontrols2/gallery/gallery.qrc
new file mode 100644
index 00000000..ee4bf5b7
--- /dev/null
+++ b/examples/quickcontrols2/gallery/gallery.qrc
@@ -0,0 +1,53 @@
+<RCC>
+    <qresource prefix="/">
+        <file>gallery.qml</file>
+        <file>qtquickcontrols.conf</file>
+        <file>images/arrow.png</file>
+        <file>images/arrow@2x.png</file>
+        <file>images/arrow@3x.png</file>
+        <file>images/arrow@4x.png</file>
+        <file>images/arrows.png</file>
+        <file>images/arrows@2x.png</file>
+        <file>images/arrows@3x.png</file>
+        <file>images/arrows@4x.png</file>
+        <file>images/drawer.png</file>
+        <file>images/drawer@2x.png</file>
+        <file>images/drawer@3x.png</file>
+        <file>images/drawer@4x.png</file>
+        <file>images/menu.png</file>
+        <file>images/menu@2x.png</file>
+        <file>images/menu@3x.png</file>
+        <file>images/menu@4x.png</file>
+        <file>images/qt-logo.png</file>
+        <file>images/qt-logo@2x.png</file>
+        <file>images/qt-logo@3x.png</file>
+        <file>images/qt-logo@4x.png</file>
+        <file>pages/BusyIndicatorPage.qml</file>
+        <file>pages/ButtonPage.qml</file>
+        <file>pages/CheckBoxPage.qml</file>
+        <file>pages/ComboBoxPage.qml</file>
+        <file>pages/DialPage.qml</file>
+        <file>pages/DrawerPage.qml</file>
+        <file>pages/FramePage.qml</file>
+        <file>pages/GroupBoxPage.qml</file>
+        <file>pages/MenuPage.qml</file>
+        <file>pages/PageIndicatorPage.qml</file>
+        <file>pages/PopupPage.qml</file>
+        <file>pages/ProgressBarPage.qml</file>
+        <file>pages/RadioButtonPage.qml</file>
+        <file>pages/RangeSliderPage.qml</file>
+        <file>pages/ScrollBarPage.qml</file>
+        <file>pages/ScrollIndicatorPage.qml</file>
+        <file>pages/SliderPage.qml</file>
+        <file>pages/SpinBoxPage.qml</file>
+        <file>pages/StackViewPage.qml</file>
+        <file>pages/SwipeViewPage.qml</file>
+        <file>pages/SwitchPage.qml</file>
+        <file>pages/TabBarPage.qml</file>
+        <file>pages/TextAreaPage.qml</file>
+        <file>pages/TextFieldPage.qml</file>
+        <file>pages/ToolTipPage.qml</file>
+        <file>pages/TumblerPage.qml</file>
+        <file>pages/DelegatePage.qml</file>
+    </qresource>
+</RCC>
diff --git a/examples/quickcontrols2/gallery/images/arrow.png b/examples/quickcontrols2/gallery/images/arrow.png
new file mode 100644
index 00000000..340139de
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrow.png
diff --git a/examples/quickcontrols2/gallery/images/arrow@2x.png b/examples/quickcontrols2/gallery/images/arrow@2x.png
new file mode 100644
index 00000000..ef2016e9
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrow@2x.png
diff --git a/examples/quickcontrols2/gallery/images/arrow@3x.png b/examples/quickcontrols2/gallery/images/arrow@3x.png
new file mode 100644
index 00000000..86c8506b
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrow@3x.png
diff --git a/examples/quickcontrols2/gallery/images/arrow@4x.png b/examples/quickcontrols2/gallery/images/arrow@4x.png
new file mode 100644
index 00000000..ce70d95b
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrow@4x.png
diff --git a/examples/quickcontrols2/gallery/images/arrows.png b/examples/quickcontrols2/gallery/images/arrows.png
new file mode 100644
index 00000000..f77e01fa
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrows.png
diff --git a/examples/quickcontrols2/gallery/images/arrows@2x.png b/examples/quickcontrols2/gallery/images/arrows@2x.png
new file mode 100644
index 00000000..9615d436
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrows@2x.png
diff --git a/examples/quickcontrols2/gallery/images/arrows@3x.png b/examples/quickcontrols2/gallery/images/arrows@3x.png
new file mode 100644
index 00000000..b6a53e1c
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrows@3x.png
diff --git a/examples/quickcontrols2/gallery/images/arrows@4x.png b/examples/quickcontrols2/gallery/images/arrows@4x.png
new file mode 100644
index 00000000..099ed1b5
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/arrows@4x.png
diff --git a/examples/quickcontrols2/gallery/images/drawer.png b/examples/quickcontrols2/gallery/images/drawer.png
new file mode 100644
index 00000000..1e974efa
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/drawer.png
diff --git a/examples/quickcontrols2/gallery/images/drawer@2x.png b/examples/quickcontrols2/gallery/images/drawer@2x.png
new file mode 100644
index 00000000..eba3b6cc
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/drawer@2x.png
diff --git a/examples/quickcontrols2/gallery/images/drawer@3x.png b/examples/quickcontrols2/gallery/images/drawer@3x.png
new file mode 100644
index 00000000..3584ed6d
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/drawer@3x.png
diff --git a/examples/quickcontrols2/gallery/images/drawer@4x.png b/examples/quickcontrols2/gallery/images/drawer@4x.png
new file mode 100644
index 00000000..60d93aff
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/drawer@4x.png
diff --git a/examples/quickcontrols2/gallery/images/menu.png b/examples/quickcontrols2/gallery/images/menu.png
new file mode 100644
index 00000000..a10473d9
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/menu.png
diff --git a/examples/quickcontrols2/gallery/images/menu@2x.png b/examples/quickcontrols2/gallery/images/menu@2x.png
new file mode 100644
index 00000000..649c2a08
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/menu@2x.png
diff --git a/examples/quickcontrols2/gallery/images/menu@3x.png b/examples/quickcontrols2/gallery/images/menu@3x.png
new file mode 100644
index 00000000..9554b695
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/menu@3x.png
diff --git a/examples/quickcontrols2/gallery/images/menu@4x.png b/examples/quickcontrols2/gallery/images/menu@4x.png
new file mode 100644
index 00000000..187c171c
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/menu@4x.png
diff --git a/examples/quickcontrols2/gallery/images/qt-logo.png b/examples/quickcontrols2/gallery/images/qt-logo.png
new file mode 100644
index 00000000..8b0772b0
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/qt-logo.png
diff --git a/examples/quickcontrols2/gallery/images/qt-logo@2x.png b/examples/quickcontrols2/gallery/images/qt-logo@2x.png
new file mode 100644
index 00000000..0d1d499b
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/qt-logo@2x.png
diff --git a/examples/quickcontrols2/gallery/images/qt-logo@3x.png b/examples/quickcontrols2/gallery/images/qt-logo@3x.png
new file mode 100644
index 00000000..c9aae358
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/qt-logo@3x.png
diff --git a/examples/quickcontrols2/gallery/images/qt-logo@4x.png b/examples/quickcontrols2/gallery/images/qt-logo@4x.png
new file mode 100644
index 00000000..ad0ebd03
--- /dev/null
+++ b/examples/quickcontrols2/gallery/images/qt-logo@4x.png
diff --git a/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml b/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml
new file mode 100644
index 00000000..5aed6e59
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/BusyIndicatorPage.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "BusyIndicator is used to indicate activity while content is being loaded,"
+                  + " or when the UI is blocked waiting for a resource to become available."
+        }
+
+        BusyIndicator {
+            readonly property int size: Math.min(pane.availableWidth, pane.availableHeight) / 5
+            width: size
+            height: size
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/ButtonPage.qml b/examples/quickcontrols2/gallery/pages/ButtonPage.qml
new file mode 100644
index 00000000..4ac657d2
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/ButtonPage.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Flickable {
+    id: flickable
+    contentHeight: pane.height
+
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
+
+    Pane {
+        id: pane
+        width: parent.width
+
+        Column {
+            id: column
+            spacing: 40
+            width: parent.width
+
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "Button presents a push-button that can be pushed or clicked by the user. "
+                    + "Buttons are normally used to perform an action, or to answer a question."
+            }
+
+            Column {
+                spacing: 20
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                Button {
+                    text: "First"
+                    width: itemWidth
+                }
+                Button {
+                    id: button
+                    text: "Second"
+                    width: itemWidth
+                    highlighted: true
+                }
+                Button {
+                    text: "Third"
+                    enabled: false
+                    width: itemWidth
+                }
+            }
+        }
+    }
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+}
diff --git a/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
new file mode 100644
index 00000000..861f144d
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/CheckBoxPage.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Flickable {
+    id: flickable
+    contentHeight: pane.height
+
+    Pane {
+        id: pane
+        width: parent.width
+
+        Column {
+            id: column
+            spacing: 40
+            width: parent.width
+
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "CheckBox presents an option button that can be toggled on or off. "
+                    + "Check boxes are typically used to select one or more options from a set of options."
+            }
+
+            Column {
+                spacing: 20
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                CheckBox {
+                    text: "First"
+                    checked: true
+                }
+                CheckBox {
+                    text: "Second"
+                }
+                CheckBox {
+                    text: "Third"
+                    checked: true
+                    enabled: false
+                }
+            }
+        }
+    }
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+}
diff --git a/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml b/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml
new file mode 100644
index 00000000..4400612f
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/ComboBoxPage.qml
@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        width: parent.width
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "ComboBox is a combined button and popup list. It presents "
+                + "a list of options to the user that occupies minimal screen space."
+        }
+
+        ComboBox {
+            model: ["First", "Second", "Third"]
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/DelegatePage.qml b/examples/quickcontrols2/gallery/pages/DelegatePage.qml
new file mode 100644
index 00000000..0d50adbf
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/DelegatePage.qml
@@ -0,0 +1,207 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import QtQuick.Layouts 1.1
+import Qt.labs.controls 1.0
+
+Pane {
+    padding: 0
+
+    property var delegateComponentMap: {
+        "ItemDelegate": itemDelegateComponent,
+        "SwipeDelegate": swipeDelegateComponent,
+        "CheckDelegate": checkDelegateComponent,
+        "RadioDelegate": radioDelegateComponent,
+        "SwitchDelegate": switchDelegateComponent
+    }
+
+    Component {
+        id: itemDelegateComponent
+
+        ItemDelegate {
+            text: labelText
+            width: parent.width
+        }
+    }
+
+    Component {
+        id: swipeDelegateComponent
+
+        SwipeDelegate {
+            id: swipeDelegate
+            text: labelText
+            width: parent.width
+
+            onClicked: if (exposure.active) view.model.remove(ourIndex)
+
+            Component {
+                id: removeComponent
+
+                Rectangle {
+                    color: swipeDelegate.exposed && swipeDelegate.pressed ? "#333" : "#444"
+                    width: parent.width
+                    height: parent.height
+
+                    Label {
+                        font.pixelSize: swipeDelegate.font.pixelSize
+                        text: "Remove"
+                        color: "white"
+                        anchors.centerIn: parent
+                    }
+                }
+            }
+
+            exposure.left: removeComponent
+            exposure.right: removeComponent
+        }
+    }
+
+    Component {
+        id: checkDelegateComponent
+
+        CheckDelegate {
+            text: labelText
+            width: parent.width
+        }
+    }
+
+    ButtonGroup {
+        id: radioButtonGroup
+    }
+
+    Component {
+        id: radioDelegateComponent
+
+        RadioDelegate {
+            text: labelText
+            ButtonGroup.group: radioButtonGroup
+        }
+    }
+
+    Component {
+        id: switchDelegateComponent
+
+        SwitchDelegate {
+            text: labelText
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        spacing: 40
+        anchors.fill: parent
+        anchors.topMargin: 20
+
+        Label {
+            Layout.fillWidth: true
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Delegate controls are used as delegates in views such as ListView."
+        }
+
+        ListView {
+            id: listView
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            clip: true
+            model: ListModel {
+                ListElement { type: "ItemDelegate"; text: "ItemDelegate" }
+                ListElement { type: "ItemDelegate"; text: "ItemDelegate" }
+                ListElement { type: "ItemDelegate"; text: "ItemDelegate" }
+                ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" }
+                ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" }
+                ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" }
+                ListElement { type: "CheckDelegate"; text: "CheckDelegate" }
+                ListElement { type: "CheckDelegate"; text: "CheckDelegate" }
+                ListElement { type: "CheckDelegate"; text: "CheckDelegate" }
+                ListElement { type: "RadioDelegate"; text: "RadioDelegate" }
+                ListElement { type: "RadioDelegate"; text: "RadioDelegate" }
+                ListElement { type: "RadioDelegate"; text: "RadioDelegate" }
+                ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" }
+                ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" }
+                ListElement { type: "SwitchDelegate"; text: "SwitchDelegate" }
+            }
+
+            section.property: "type"
+            section.delegate: Pane {
+                width: listView.width
+                height: sectionLabel.implicitHeight + 20
+
+                Label {
+                    id: sectionLabel
+                    text: section
+                    anchors.centerIn: parent
+                }
+            }
+
+            delegate: Loader {
+                id: delegateLoader
+                width: listView.width
+                sourceComponent: delegateComponentMap[text]
+
+                property string labelText: text
+                property ListView view: listView
+                property int ourIndex: index
+
+                // Can't find a way to do this in the SwipeDelegate component itself,
+                // so do it here instead.
+                ListView.onRemove: SequentialAnimation {
+                    PropertyAction {
+                        target: delegateLoader
+                        property: "ListView.delayRemove"
+                        value: true
+                    }
+                    NumberAnimation {
+                        target: item
+                        property: "height"
+                        to: 0
+                        easing.type: Easing.InOutQuad
+                    }
+                    PropertyAction {
+                        target: delegateLoader
+                        property: "ListView.delayRemove"
+                        value: false
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/DialPage.qml b/examples/quickcontrols2/gallery/pages/DialPage.qml
new file mode 100644
index 00000000..5277d7b0
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/DialPage.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        width: parent.width
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "The Dial is similar to a traditional dial knob that is found on devices such as "
+                + "stereos or industrial equipment. It allows the user to specify a value within a range."
+        }
+
+        Dial {
+            value: 0.5
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/DrawerPage.qml b/examples/quickcontrols2/gallery/pages/DrawerPage.qml
new file mode 100644
index 00000000..910a0c7c
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/DrawerPage.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        width: parent.width
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Drawer provides a swipe-based side panel, similar to those often used "
+                + "in touch interfaces to provide a central location for navigation."
+        }
+
+        Button {
+            text: "Open"
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+
+            onClicked: drawer.open()
+        }
+    }
+
+    Image {
+        source: "qrc:/images/arrow.png"
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/FramePage.qml b/examples/quickcontrols2/gallery/pages/FramePage.qml
new file mode 100644
index 00000000..5b3ef4de
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/FramePage.qml
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2))
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Frame is used to layout a logical group of controls together, within a visual frame."
+        }
+
+        Frame {
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Column {
+                spacing: 20
+                width: itemWidth
+
+                RadioButton {
+                    text: "First"
+                    checked: true
+                    width: parent.width
+                }
+                RadioButton {
+                    id: button
+                    text: "Second"
+                    width: parent.width
+                }
+                RadioButton {
+                    text: "Third"
+                    width: parent.width
+                }
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml b/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml
new file mode 100644
index 00000000..996e65d2
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/GroupBoxPage.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, pane.availableWidth / 3 * 2))
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "A GroupBox provides a frame, a title on top of it, and a logical group of controls within that frame."
+        }
+
+        GroupBox {
+            title: "Title"
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Column {
+                spacing: 20
+                width: itemWidth
+
+                RadioButton {
+                    text: "First"
+                    checked: true
+                    width: parent.width
+                }
+                RadioButton {
+                    id: button
+                    text: "Second"
+                    width: parent.width
+                }
+                RadioButton {
+                    text: "Third"
+                    width: parent.width
+                }
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/MenuPage.qml b/examples/quickcontrols2/gallery/pages/MenuPage.qml
new file mode 100644
index 00000000..119be559
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/MenuPage.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Menu can be used either as a context menu, or as a popup menu."
+        }
+
+        Button {
+            id: button
+            text: "Open"
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+
+            onClicked: optionsMenu.open()
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml b/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml
new file mode 100644
index 00000000..f8557f24
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/PageIndicatorPage.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "PageIndicator is used to indicate the currently active page in a container of pages."
+        }
+
+        PageIndicator {
+            count: 5
+            currentIndex: 2
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/PopupPage.qml b/examples/quickcontrols2/gallery/pages/PopupPage.qml
new file mode 100644
index 00000000..d2685969
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/PopupPage.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Popup is used to display modal or modeless content that overlays other "
+                + "application content. In this example, the settings are shown in a popup."
+        }
+
+        Button {
+            id: button
+            text: "Open"
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+
+            onClicked: settingsPopup.open()
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml b/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml
new file mode 100644
index 00000000..7beb4125
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/ProgressBarPage.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    readonly property int itemWidth: Math.max(bar.implicitWidth, pane.availableWidth / 3)
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "ProgressBar indicates the progress of an operation. It can be set in an "
+                + "indeterminate mode to indicate that the length of the operation is unknown."
+        }
+
+        ProgressBar {
+            id: bar
+            value: 0.5
+            width: itemWidth
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        ProgressBar {
+            indeterminate: true
+            width: itemWidth
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml b/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml
new file mode 100644
index 00000000..fe6a751c
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/RadioButtonPage.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Flickable {
+    id: flickable
+    contentHeight: pane.height
+
+    Pane {
+        id: pane
+        width: parent.width
+
+        Column {
+            id: column
+            spacing: 40
+            width: parent.width
+
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "RadioButton presents an option button that can be toggled on or off. "
+                    + "Radio buttons are typically used to select one option from a set of options."
+            }
+
+            Column {
+                spacing: 20
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                RadioButton {
+                    text: "First"
+                }
+                RadioButton {
+                    text: "Second"
+                    checked: true
+                }
+                RadioButton {
+                    text: "Third"
+                    enabled: false
+                }
+            }
+        }
+    }
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+}
diff --git a/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml b/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml
new file mode 100644
index 00000000..dd7bd880
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/RangeSliderPage.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3))
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "RangeSlider is used to select a range specified by two values, by sliding each handle along a track."
+        }
+
+        RangeSlider {
+            id: slider
+            first.value: 0.25
+            second.value: 0.75
+            width: itemWidth
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        RangeSlider {
+            orientation: Qt.Vertical
+            first.value: 0.25
+            second.value: 0.75
+            height: itemWidth
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/ScrollBarPage.qml b/examples/quickcontrols2/gallery/pages/ScrollBarPage.qml
new file mode 100644
index 00000000..0db1888d
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/ScrollBarPage.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Flickable {
+    id: flickable
+
+    contentHeight: pane.height
+
+    Pane {
+        id: pane
+        width: flickable.width
+        height: flickable.height * 1.25
+
+        Column {
+            id: column
+            spacing: 40
+            width: parent.width
+
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "ScrollBar is an interactive bar that can be used to scroll to a specific position. "
+                    + "A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, "
+                    + "such as ListView and GridView."
+            }
+
+            Image {
+                rotation: 90
+                source: "qrc:/images/arrows.png"
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+        }
+    }
+
+    ScrollBar.vertical: ScrollBar { }
+}
diff --git a/examples/quickcontrols2/gallery/pages/ScrollIndicatorPage.qml b/examples/quickcontrols2/gallery/pages/ScrollIndicatorPage.qml
new file mode 100644
index 00000000..658b7d15
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/ScrollIndicatorPage.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Flickable {
+    id: flickable
+
+    contentHeight: pane.height
+
+    Pane {
+        id: pane
+        width: flickable.width
+        height: flickable.height * 1.25
+
+        Column {
+            id: column
+            spacing: 40
+            width: parent.width
+
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "ScrollIndicator is a non-interactive indicator that indicates the current scroll position. "
+                    + "A scroll indicator can be either vertical or horizontal, and can be attached to any Flickable, "
+                    + "such as ListView and GridView."
+            }
+
+            Image {
+                rotation: 90
+                source: "qrc:/images/arrows.png"
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+        }
+    }
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+}
diff --git a/examples/quickcontrols2/gallery/pages/SliderPage.qml b/examples/quickcontrols2/gallery/pages/SliderPage.qml
new file mode 100644
index 00000000..c400ec41
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/SliderPage.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    readonly property int itemWidth: Math.max(slider.implicitWidth, Math.min(slider.implicitWidth * 2, pane.availableWidth / 3))
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Slider is used to select a value by sliding a handle along a track."
+        }
+
+        Slider {
+            id: slider
+            value: 0.5
+            width: itemWidth
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        Slider {
+            orientation: Qt.Vertical
+            value: 0.5
+            height: itemWidth
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml b/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml
new file mode 100644
index 00000000..c309ce8e
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/SpinBoxPage.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    readonly property int itemWidth: Math.max(box.implicitWidth, Math.min(box.implicitWidth * 2, pane.availableWidth / 3))
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "SpinBox allows the user to choose an integer value by clicking the up or down indicator buttons, "
+                + "by pressing up or down on the keyboard, or by entering a text value in the input field."
+        }
+
+        SpinBox {
+            id: box
+            value: 50
+            width: itemWidth
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/StackViewPage.qml b/examples/quickcontrols2/gallery/pages/StackViewPage.qml
new file mode 100644
index 00000000..19416aa6
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/StackViewPage.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+StackView {
+    id: stackView
+    initialItem: page
+
+    Component {
+        id: page
+
+        Pane {
+            id: pane
+            width: parent ? parent.width : 0 // TODO: fix null parent on destruction
+
+            Column {
+                spacing: 40
+                width: parent.width
+
+                Label {
+                    width: parent.width
+                    wrapMode: Label.Wrap
+                    horizontalAlignment: Qt.AlignHCenter
+                    text: "StackView provides a stack-based navigation model which can be used with a set of interlinked pages. "
+                    + "Items are pushed onto the stack as the user navigates deeper into the material, and popped off again "
+                    + "when he chooses to go back."
+                }
+
+                Button {
+                    id: button
+                    text: "Push"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
+                    onClicked: stackView.push(page)
+                }
+
+                Button {
+                    text: "Pop"
+                    enabled: stackView.depth > 1
+                    width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    onClicked: stackView.pop()
+                }
+            }
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/SwipeViewPage.qml b/examples/quickcontrols2/gallery/pages/SwipeViewPage.qml
new file mode 100644
index 00000000..aded5d73
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/SwipeViewPage.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    SwipeView {
+        id: view
+        currentIndex: 1
+        anchors.fill: parent
+
+        Repeater {
+            model: 3
+
+            Pane {
+                width: view.width
+                height: view.height
+
+                Column {
+                    spacing: 40
+                    width: parent.width
+
+                    Label {
+                        width: parent.width
+                        wrapMode: Label.Wrap
+                        horizontalAlignment: Qt.AlignHCenter
+                        text: "SwipeView provides a navigation model that simplifies horizontal paged scrolling. "
+                        + "The page indicator on the bottom shows which is the presently active page."
+                    }
+
+                    Image {
+                        source: "qrc:/images/arrows.png"
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+            }
+        }
+    }
+
+    PageIndicator {
+        count: view.count
+        currentIndex: view.currentIndex
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/SwitchPage.qml b/examples/quickcontrols2/gallery/pages/SwitchPage.qml
new file mode 100644
index 00000000..ebb4f2ee
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/SwitchPage.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Flickable {
+    id: flickable
+    contentHeight: pane.height
+
+    Pane {
+        id: pane
+        width: parent.width
+
+        Column {
+            id: column
+            spacing: 40
+            width: parent.width
+
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "Switch is an option button that can be dragged or toggled on or off. "
+                    + "Switches are typically used to select between two states."
+            }
+
+            Column {
+                spacing: 20
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                Switch {
+                    text: "First"
+                }
+                Switch {
+                    text: "Second"
+                    checked: true
+                }
+                Switch {
+                    text: "Third"
+                    enabled: false
+                }
+            }
+        }
+    }
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+}
diff --git a/examples/quickcontrols2/gallery/pages/TabBarPage.qml b/examples/quickcontrols2/gallery/pages/TabBarPage.qml
new file mode 100644
index 00000000..7e465ec3
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/TabBarPage.qml
@@ -0,0 +1,94 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Page {
+    id: page
+
+    SwipeView {
+        id: swipeView
+        anchors.fill: parent
+        currentIndex: tabBar.currentIndex
+
+        Repeater {
+            model: 3
+
+            Pane {
+                width: swipeView.width
+                height: swipeView.height
+
+                Column {
+                    spacing: 40
+                    width: parent.width
+
+                    Label {
+                        width: parent.width
+                        wrapMode: Label.Wrap
+                        horizontalAlignment: Qt.AlignHCenter
+                        text: "TabBar is a bar with icons or text which allows the user"
+                              + "to switch between different subtasks, views, or modes."
+                    }
+
+                    Image {
+                        source: "qrc:/images/arrows.png"
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+            }
+        }
+    }
+
+    footer: TabBar {
+        id: tabBar
+        currentIndex: swipeView.currentIndex
+
+        TabButton {
+            text: "First"
+        }
+        TabButton {
+            text: "Second"
+        }
+        TabButton {
+            text: "Third"
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/TextAreaPage.qml b/examples/quickcontrols2/gallery/pages/TextAreaPage.qml
new file mode 100644
index 00000000..8ca759c8
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/TextAreaPage.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Flickable {
+    id: flickable
+    contentHeight: pane.height
+
+    Pane {
+        id: pane
+        width: parent.width
+
+        Column {
+            spacing: 40
+            anchors.fill: parent
+
+            Label {
+                width: parent.width
+                wrapMode: Label.Wrap
+                horizontalAlignment: Qt.AlignHCenter
+                text: "TextArea is a multi-line text editor."
+            }
+
+            TextArea {
+                width: Math.max(implicitWidth, Math.min(implicitWidth * 3, pane.availableWidth / 3))
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                wrapMode: TextArea.Wrap
+                text: "TextArea\n...\n...\n..."
+            }
+        }
+    }
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+}
diff --git a/examples/quickcontrols2/gallery/pages/TextFieldPage.qml b/examples/quickcontrols2/gallery/pages/TextFieldPage.qml
new file mode 100644
index 00000000..761d2fa6
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/TextFieldPage.qml
@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        anchors.fill: parent
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "TextField is a single-line text editor."
+        }
+
+        TextField {
+            id: field
+            placeholderText: "TextField"
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/ToolTipPage.qml b/examples/quickcontrols2/gallery/pages/ToolTipPage.qml
new file mode 100644
index 00000000..27e2ba01
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/ToolTipPage.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        width: parent.width
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "A tool tip is a short piece of text that informs the user of a control's function."
+        }
+
+        Button {
+            text: "Tip"
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.max(implicitWidth, Math.min(implicitWidth * 2, pane.availableWidth / 3))
+
+            ToolTip.timeout: 5000
+            ToolTip.visible: pressed
+            ToolTip.text: "This is a tool tip."
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/pages/TumblerPage.qml b/examples/quickcontrols2/gallery/pages/TumblerPage.qml
new file mode 100644
index 00000000..b15407e5
--- /dev/null
+++ b/examples/quickcontrols2/gallery/pages/TumblerPage.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.6
+import Qt.labs.controls 1.0
+
+Pane {
+    id: pane
+
+    Column {
+        spacing: 40
+        width: parent.width
+
+        Label {
+            width: parent.width
+            wrapMode: Label.Wrap
+            horizontalAlignment: Qt.AlignHCenter
+            text: "Tumbler is used to select a value by spinning a wheel."
+        }
+
+        Tumbler {
+            model: 10
+            visibleItemCount: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/examples/quickcontrols2/gallery/qtquickcontrols.conf b/examples/quickcontrols2/gallery/qtquickcontrols.conf
new file mode 100644
index 00000000..61375ac1
--- /dev/null
+++ b/examples/quickcontrols2/gallery/qtquickcontrols.conf
@@ -0,0 +1,8 @@
+[Material]
+Primary=LightGreen
+Accent=LightGreen
+Theme=Light
+
+[Universal]
+Accent=Green
+Theme=Light
diff --git a/examples/quickcontrols2/quickcontrols2.pro b/examples/quickcontrols2/quickcontrols2.pro
new file mode 100644
index 00000000..4f0f2fcc
--- /dev/null
+++ b/examples/quickcontrols2/quickcontrols2.pro
@@ -0,0 +1,4 @@
+TEMPLATE = subdirs
+SUBDIRS += \
+    gallery \
+    chattutorial