Merge remote-tracking branch 'origin/5.8' into dev

Conflicts:
	src/plugins/qmltooling/qmldbg_debugger/qv4debugjob.cpp
	src/plugins/qmltooling/qmldbg_inspector/globalinspector.cpp
	src/plugins/qmltooling/qmldbg_nativedebugger/qqmlnativedebugservice.cpp
	src/qml/qml/qqmlimport.cpp
	src/quick/items/context2d/qquickcontext2dtexture_p.h
	tools/qmleasing/splineeditor.h

Change-Id: I8f6630fcac243824350986c8e9f4bd6483bf20b5

28 files changed, 1371 insertions, 796 deletions

diff --git a/examples/qml/networkaccessmanagerfactory/main.cpp b/examples/qml/networkaccessmanagerfactory/main.cpp
index 55e00d6917..5b6b7681a9 100644
--- a/examples/qml/networkaccessmanagerfactory/main.cpp
+++ b/examples/qml/networkaccessmanagerfactory/main.cpp
@@ -56,10 +56,10 @@
      networkaccessmanagerfactory [-host <proxy> -port <port>] [file]
 */
 
-#ifndef QT_NO_NETWORKPROXY
+#if QT_CONFIG(networkproxy)
 static QString proxyHost;
 static int proxyPort = 0;
-#endif // !QT_NO_NETWORKPROXY
+#endif // networkproxy
 
 class MyNetworkAccessManagerFactory : public QQmlNetworkAccessManagerFactory
 {
@@ -70,13 +70,13 @@ public:
 QNetworkAccessManager *MyNetworkAccessManagerFactory::create(QObject *parent)
 {
     QNetworkAccessManager *nam = new QNetworkAccessManager(parent);
-#ifndef QT_NO_NETWORKPROXY
+#if QT_CONFIG(networkproxy)
     if (!proxyHost.isEmpty()) {
         qDebug() << "Created QNetworkAccessManager using proxy" << (proxyHost + ":" + QString::number(proxyPort));
         QNetworkProxy proxy(QNetworkProxy::HttpCachingProxy, proxyHost, proxyPort);
         nam->setProxy(proxy);
     }
-#endif // !QT_NO_NETWORKPROXY
+#endif // networkproxy
 
     return nam;
 }
@@ -88,12 +88,12 @@ int main(int argc, char ** argv)
     QGuiApplication app(argc, argv);
 
     QCommandLineParser parser;
-#ifndef QT_NO_NETWORKPROXY
+#if QT_CONFIG(networkproxy)
     QCommandLineOption proxyHostOption("host", "The proxy host to use.", "host");
     parser.addOption(proxyHostOption);
     QCommandLineOption proxyPortOption("port", "The proxy port to use.", "port", "0");
     parser.addOption(proxyPortOption);
-#endif // !QT_NO_NETWORKPROXY
+#endif // networkproxy
     parser.addPositionalArgument("file", "The file to use.");
     QCommandLineOption helpOption = parser.addHelpOption();
     parser.setSingleDashWordOptionMode(QCommandLineParser::ParseAsLongOptions);
@@ -106,7 +106,7 @@ int main(int argc, char ** argv)
         qWarning() << parser.helpText();
         exit(0);
     }
-#ifndef QT_NO_NETWORKPROXY
+#if QT_CONFIG(networkproxy)
     if (parser.isSet(proxyHostOption))
         proxyHost = parser.value(proxyHostOption);
     if (parser.isSet(proxyPortOption)) {
@@ -118,7 +118,7 @@ int main(int argc, char ** argv)
             exit(1);
         }
     }
-#endif // !QT_NO_NETWORKPROXY
+#endif // networkproxy
     if (parser.positionalArguments().count() == 1)
         source = QUrl::fromLocalFile(parser.positionalArguments().first());
 
diff --git a/examples/quick/localstorage/localstorage/hello.qml b/examples/quick/demos/stocqt/content/Banner.qml
index d4f82ba2fe..8d64e88410 100644
--- a/examples/quick/localstorage/localstorage/hello.qml
+++ b/examples/quick/demos/stocqt/content/Banner.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2015 The Qt Company Ltd.
+** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: http://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Toolkit.
@@ -37,42 +37,50 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-//![0]
+
 import QtQuick 2.0
-import QtQuick.LocalStorage 2.0
+import QtQuick.Layouts 1.1
 
 Rectangle {
-    width: 200
-    height: 100
-
-    Text {
-        text: "?"
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        function findGreetings() {
-            var db = LocalStorage.openDatabaseSync("QQmlExampleDB", "1.0", "The Example QML SQL!", 1000000);
-
-            db.transaction(
-                function(tx) {
-                    // Create the database if it doesn't already exist
-                    tx.executeSql('CREATE TABLE IF NOT EXISTS Greeting(salutation TEXT, salutee TEXT)');
+    id: banner
+    height: 80
+    color: "#000000"
 
-                    // Add (another) greeting row
-                    tx.executeSql('INSERT INTO Greeting VALUES(?, ?)', [ 'hello', 'world' ]);
+    GridLayout {
+        anchors.fill: parent
+        rows: 1
+        columns: 3
+        Rectangle {
+            Layout.leftMargin: 10
+            Layout.topMargin: 20
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Image {
+                id: arrow
+                source: "./images/icon-left-arrow.png"
+                visible: root.currentIndex == 1 ? true : false
 
-                    // Show all added greetings
-                    var rs = tx.executeSql('SELECT * FROM Greeting');
-
-                    var r = ""
-                    for(var i = 0; i < rs.rows.length; i++) {
-                        r += rs.rows.item(i).salutation + ", " + rs.rows.item(i).salutee + "\n"
-                    }
-                    text = r
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: root.currentIndex = 0;
                 }
-            )
+            }
+        }
+        Text {
+            id: stocText
+            color: "#ffffff"
+            font.family: "Abel"
+            font.pointSize: 40
+            text: "Stoc"
+            Layout.alignment: Qt.AlignRight
+            Layout.leftMargin: parent.width / 2.5
+        }
+        Text {
+            id: qtText
+            color: "#5caa15"
+            font.family: "Abel"
+            font.pointSize: 40
+            text: "Qt"
+            Layout.fillWidth: true
         }
-
-        Component.onCompleted: findGreetings()
     }
 }
-//![0]
diff --git a/examples/quick/demos/stocqt/content/CheckBox.qml b/examples/quick/demos/stocqt/content/CheckBox.qml
index 5702b17709..f62eb538fb 100644
--- a/examples/quick/demos/stocqt/content/CheckBox.qml
+++ b/examples/quick/demos/stocqt/content/CheckBox.qml
@@ -60,7 +60,6 @@ Item {
         id: checkbox
         width: 30
         height: 30
-        anchors.left: parent.left
         border.color: "#999999"
         border.width: 1
         antialiasing: true
diff --git a/examples/quick/demos/stocqt/content/StockChart.qml b/examples/quick/demos/stocqt/content/StockChart.qml
index cd8b9f3db9..e90aba3aef 100644
--- a/examples/quick/demos/stocqt/content/StockChart.qml
+++ b/examples/quick/demos/stocqt/content/StockChart.qml
@@ -39,20 +39,19 @@
 ****************************************************************************/
 
 import QtQuick 2.0
+import QtQuick.Layouts 1.1
 import "."
 
 Rectangle {
     id: chart
-    width: 320
-    height: 200
 
     property var stockModel: null
     property var startDate: new Date()
     property var endDate: new Date()
-    property string activeChart: "year"
+    property string activeChart: "week"
     property var settings
     property int gridSize: 4
-    property real gridStep: gridSize ? (width - canvas.tickMargin) / gridSize : canvas.xGridStep
+    property real gridStep: gridSize ? (canvas.width - canvas.tickMargin) / gridSize : canvas.xGridStep
 
     function update() {
         endDate = new Date();
@@ -66,7 +65,7 @@ Rectangle {
             chart.startDate = new Date(chart.endDate.getFullYear(),
                                        chart.endDate.getMonth() - 1,
                                        chart.endDate.getDate());
-            gridSize = 0;
+            gridSize = 4;
         }
         else if (chart.activeChart === "week") {
             chart.startDate = new Date(chart.endDate.getFullYear(),
@@ -74,6 +73,18 @@ Rectangle {
                                        chart.endDate.getDate() - 7);
             gridSize = 0;
         }
+        else if (chart.activeChart === "halfyear") {
+            chart.startDate = new Date(chart.endDate.getFullYear(),
+                                       chart.endDate.getMonth() - 6,
+                                       chart.endDate.getDate());
+            gridSize = 6;
+        }
+        else if (chart.activeChart === "quarter") {
+            chart.startDate = new Date(chart.endDate.getFullYear(),
+                                       chart.endDate.getMonth() - 3,
+                                       chart.endDate.getDate());
+            gridSize = 3;
+        }
         else {
             chart.startDate = new Date(2005, 3, 25);
             gridSize = 4;
@@ -82,315 +93,327 @@ Rectangle {
         canvas.requestPaint();
     }
 
-    Row {
-        id: activeChartRow
-        anchors.left: chart.left
-        anchors.right: chart.right
-        anchors.top: chart.top
-        anchors.topMargin: 4
-        spacing: 52
-        onWidthChanged: {
-            var buttonsLen = maxButton.width + yearButton.width + monthButton.width + weekButton.width;
-            var space = (width - buttonsLen) / 3;
-            spacing = Math.max(space, 10);
+    GridLayout {
+        anchors.fill: parent
+        columns: 6
+        rows: 3
+        columnSpacing: 4
+        Button {
+            id: weekButton
+            text: "Week"
+            buttonEnabled: chart.activeChart === "week"
+            onClicked: {
+                chart.activeChart = "week";
+                chart.update();
+            }
         }
 
         Button {
-            id: maxButton
-            text: "Max"
-            buttonEnabled: chart.activeChart === "max"
+            id: monthButton
+            text: "Month"
+            buttonEnabled: chart.activeChart === "month"
             onClicked: {
-                chart.activeChart = "max";
+                chart.activeChart = "month";
                 chart.update();
             }
         }
+
         Button {
-            id: yearButton
-            text: "Year"
-            buttonEnabled: chart.activeChart === "year"
+            id: quarterlyButton
+            text: "3M"
+            buttonEnabled: chart.activeChart === "quarter"
             onClicked: {
-                chart.activeChart = "year";
+                chart.activeChart = "quarter";
                 chart.update();
             }
         }
+
         Button {
-            id: monthButton
-            text: "Month"
-            buttonEnabled: chart.activeChart === "month"
+            id: halfYearlyButton
+            text: "6M"
+            buttonEnabled: chart.activeChart === "halfyear"
             onClicked: {
-                chart.activeChart = "month";
+                chart.activeChart = "halfyear";
                 chart.update();
             }
         }
         Button {
-            id: weekButton
-            text: "Week"
-            buttonEnabled: chart.activeChart === "week"
+            id: yearButton
+            text: "Year"
+            buttonEnabled: chart.activeChart === "year"
             onClicked: {
-                chart.activeChart = "week";
+                chart.activeChart = "year";
+                chart.update();
+            }
+        }
+        Button {
+            id: maxButton
+            text: "Max"
+            buttonEnabled: chart.activeChart === "max"
+            onClicked: {
+                chart.activeChart = "max";
                 chart.update();
             }
         }
-    }
 
-    Text {
-        id: fromDate
-        color: "#000000"
-        font.family: Settings.fontFamily
-        font.pointSize: 8
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-        text: "| " + startDate.toDateString()
-    }
+        Canvas {
+            id: canvas
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.columnSpan: 6
+            // Uncomment below lines to use OpenGL hardware accelerated rendering.
+            // See Canvas documentation for available options.
+            // renderTarget: Canvas.FramebufferObject
+            // renderStrategy: Canvas.Threaded
+
+            property int pixelSkip: 1
+            property int numPoints: 1
+            property int tickMargin: 34
+
+            property real xGridStep: (canvas.width - tickMargin) / numPoints
+            property real yGridOffset: canvas.height / 26
+            property real yGridStep: canvas.height / 12
+
+            function drawBackground(ctx) {
+                ctx.save();
+                ctx.fillStyle = "#ffffff";
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.strokeStyle = "#d7d7d7";
+                ctx.beginPath();
+                // Horizontal grid lines
+                for (var i = 0; i < 12; i++) {
+                    ctx.moveTo(0, canvas.yGridOffset + i * canvas.yGridStep);
+                    ctx.lineTo(canvas.width, canvas.yGridOffset + i * canvas.yGridStep);
+                }
 
-    Text {
-        id: toDate
-        color: "#000000"
-        font.family: Settings.fontFamily
-        font.pointSize: 8
-        anchors.right: parent.right
-        anchors.rightMargin: canvas.tickMargin
-        anchors.bottom: parent.bottom
-        text: endDate.toDateString() + " |"
-    }
+                // Vertical grid lines
+                var height = 35 * canvas.height / 36;
+                var yOffset = canvas.height - height;
+                var xOffset = 0;
+                for (i = 0; i < chart.gridSize; i++) {
+                    ctx.moveTo(xOffset + i * chart.gridStep, yOffset);
+                    ctx.lineTo(xOffset + i * chart.gridStep, height);
+                }
+                ctx.stroke();
+
+                // Right ticks
+                ctx.strokeStyle = "#666666";
+                ctx.beginPath();
+                var xStart = canvas.width - tickMargin;
+                ctx.moveTo(xStart, 0);
+                ctx.lineTo(xStart, canvas.height);
+                for (i = 0; i < 12; i++) {
+                    ctx.moveTo(xStart, canvas.yGridOffset + i * canvas.yGridStep);
+                    ctx.lineTo(canvas.width, canvas.yGridOffset + i * canvas.yGridStep);
+                }
+                ctx.moveTo(0, canvas.yGridOffset + 9 * canvas.yGridStep);
+                ctx.lineTo(canvas.width, canvas.yGridOffset + 9 * canvas.yGridStep);
+                ctx.closePath();
+                ctx.stroke();
 
-    Canvas {
-        id: canvas
-
-        // Uncomment below lines to use OpenGL hardware accelerated rendering.
-        // See Canvas documentation for available options.
-        // renderTarget: Canvas.FramebufferObject
-        // renderStrategy: Canvas.Threaded
-
-        anchors.top: activeChartRow.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: fromDate.top
-
-        property int pixelSkip: 1
-        property int numPoints: 1
-        property int tickMargin: 34
-
-        property real xGridStep: (width - tickMargin) / numPoints
-        property real yGridOffset: height / 26
-        property real yGridStep: height / 12
-
-        function drawBackground(ctx) {
-            ctx.save();
-            ctx.fillStyle = "#ffffff";
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.strokeStyle = "#d7d7d7";
-            ctx.beginPath();
-            // Horizontal grid lines
-            for (var i = 0; i < 12; i++) {
-                ctx.moveTo(0, canvas.yGridOffset + i * canvas.yGridStep);
-                ctx.lineTo(canvas.width, canvas.yGridOffset + i * canvas.yGridStep);
+                ctx.restore();
             }
 
-            // Vertical grid lines
-            var height = 35 * canvas.height / 36;
-            var yOffset = canvas.height - height;
-            var xOffset = 0;
-            for (i = 0; i < chart.gridSize; i++) {
-                ctx.moveTo(xOffset + i * chart.gridStep, yOffset);
-                ctx.lineTo(xOffset + i * chart.gridStep, height);
-            }
-            ctx.stroke();
-
-            // Right ticks
-            ctx.strokeStyle = "#666666";
-            ctx.beginPath();
-            var xStart = canvas.width - tickMargin;
-            ctx.moveTo(xStart, 0);
-            ctx.lineTo(xStart, canvas.height);
-            for (i = 0; i < 12; i++) {
-                ctx.moveTo(xStart, canvas.yGridOffset + i * canvas.yGridStep);
-                ctx.lineTo(canvas.width, canvas.yGridOffset + i * canvas.yGridStep);
+            // Returns a shortened, readable version of the potentially
+            // large volume number.
+            function volumeToString(value) {
+                if (value < 1000)
+                    return value;
+                var exponent = parseInt(Math.log(value) / Math.log(1000));
+                var shortVal = parseFloat(parseFloat(value) / Math.pow(1000, exponent)).toFixed(1);
+
+                // Drop the decimal point on 3-digit values to make it fit
+                if (shortVal >= 100.0) {
+                    shortVal = parseFloat(shortVal).toFixed(0);
+                }
+                return shortVal + "KMBTG".charAt(exponent - 1);
             }
-            ctx.moveTo(0, canvas.yGridOffset + 9 * canvas.yGridStep);
-            ctx.lineTo(canvas.width, canvas.yGridOffset + 9 * canvas.yGridStep);
-            ctx.closePath();
-            ctx.stroke();
 
-            ctx.restore();
-        }
+            function drawScales(ctx, high, low, vol)
+            {
+                ctx.save();
+                ctx.strokeStyle = "#888888";
+                ctx.font = "10px Open Sans"
 
-        // Returns a shortened, readable version of the potentially
-        // large volume number.
-        function volumeToString(value) {
-            if (value < 1000)
-                return value;
-            var exponent = parseInt(Math.log(value) / Math.log(1000));
-            var shortVal = parseFloat(parseFloat(value) / Math.pow(1000, exponent)).toFixed(1);
-
-            // Drop the decimal point on 3-digit values to make it fit
-            if (shortVal >= 100.0) {
-                shortVal = parseFloat(shortVal).toFixed(0);
-            }
-            return shortVal + "KMBTG".charAt(exponent - 1);
-        }
+                ctx.beginPath();
 
-        function drawScales(ctx, high, low, vol)
-        {
-            ctx.save();
-            ctx.strokeStyle = "#888888";
-            ctx.font = "10px Open Sans"
-            ctx.beginPath();
-
-            // prices on y-axis
-            var x = canvas.width - tickMargin + 3;
-            var priceStep = (high - low) / 9.0;
-            for (var i = 0; i < 10; i += 2) {
-                var price = parseFloat(high - i * priceStep).toFixed(1);
-                ctx.text(price, x, canvas.yGridOffset + i * yGridStep - 2);
-            }
+                // prices on y-axis
+                var x = canvas.width - tickMargin + 3;
+                var priceStep = (high - low) / 9.0;
+                for (var i = 0; i < 10; i += 2) {
+                    var price = parseFloat(high - i * priceStep).toFixed(1);
+                    ctx.text(price, x, canvas.yGridOffset + i * yGridStep - 2);
+                }
+
+                // volume scale
+                for (i = 0; i < 3; i++) {
+                    var volume = volumeToString(vol - (i * (vol/3)));
+                    ctx.text(volume, x, canvas.yGridOffset + (i + 9) * yGridStep + 10);
+                }
 
-            // volume scale
-            for (i = 0; i < 3; i++) {
-                var volume = volumeToString(vol - (i * (vol/3)));
-                ctx.text(volume, x, canvas.yGridOffset + (i + 9) * yGridStep + 10);
+                ctx.closePath();
+                ctx.stroke();
+                ctx.restore();
             }
 
-            ctx.closePath();
-            ctx.stroke();
-            ctx.restore();
-        }
+            function drawPrice(ctx, from, to, color, price, points, highest, lowest)
+            {
+                ctx.save();
+                ctx.globalAlpha = 0.7;
+                ctx.strokeStyle = color;
 
-        function drawPrice(ctx, from, to, color, price, points, highest, lowest)
-        {
-            ctx.save();
-            ctx.globalAlpha = 0.7;
-            ctx.strokeStyle = color;
-            ctx.lineWidth = 3;
-            ctx.beginPath();
+                ctx.lineWidth = numPoints > 200 ? 1 : 3
 
-            var end = points.length;
+                ctx.beginPath();
 
-            var range = highest - lowest;
-            if (range == 0) {
-                range = 1;
-            }
+                var end = points.length;
 
-            for (var i = 0; i < end; i += pixelSkip) {
-                var x = points[i].x;
-                var y = points[i][price];
-                var h = 9 * yGridStep;
+                var range = highest - lowest;
+                if (range == 0) {
+                    range = 1;
+                }
 
-                y = h * (lowest - y)/range + h + yGridOffset;
+                for (var i = 0; i < end; i += pixelSkip) {
+                    var x = points[i].x;
+                    var y = points[i][price];
+                    var h = 9 * yGridStep;
 
-                if (i == 0) {
-                    ctx.moveTo(x, y);
-                } else {
-                    ctx.lineTo(x, y);
+                    y = h * (lowest - y)/range + h + yGridOffset;
+
+                    if (i == 0) {
+                        ctx.moveTo(x, y);
+                    } else {
+                        ctx.lineTo(x, y);
+                    }
                 }
+                ctx.stroke();
+                ctx.restore();
             }
-            ctx.stroke();
-            ctx.restore();
-        }
 
-        function drawVolume(ctx, from, to, color, price, points, highest)
-        {
-            ctx.save();
-            ctx.fillStyle = color;
-            ctx.globalAlpha = 0.8;
-            ctx.lineWidth = 0;
-            ctx.beginPath();
+            function drawVolume(ctx, from, to, color, price, points, highest)
+            {
+                ctx.save();
+                ctx.fillStyle = color;
+                ctx.globalAlpha = 0.8;
+                ctx.lineWidth = 0;
+                ctx.beginPath();
+
+                var end = points.length;
+                var margin = 0;
+
+                if (chart.activeChart === "month" || chart.activeChart === "week") {
+                    margin = 8;
+                    ctx.shadowOffsetX = 4;
+                    ctx.shadowBlur = 3.5;
+                    ctx.shadowColor = Qt.darker(color);
+                }
 
-            var end = points.length;
-            var margin = 0;
+                // To match the volume graph with price grid, skip drawing the initial
+                // volume of the first day on chart.
+                for (var i = 1; i < end; i += pixelSkip) {
+                    var x = points[i - 1].x;
+                    var y = points[i][price];
+                    y = canvas.height * (y / highest);
+                    y = 3 * y / 12;
+                    ctx.fillRect(x, canvas.height - y + yGridOffset,
+                                 canvas.xGridStep - margin, y);
+                }
 
-            if (chart.activeChart === "month" || chart.activeChart === "week") {
-                margin = 8;
-                ctx.shadowOffsetX = 4;
-                ctx.shadowBlur = 3.5;
-                ctx.shadowColor = Qt.darker(color);
+                ctx.stroke();
+                ctx.restore();
             }
 
-            // To match the volume graph with price grid, skip drawing the initial
-            // volume of the first day on chart.
-            for (var i = 1; i < end; i += pixelSkip) {
-                var x = points[i - 1].x;
-                var y = points[i][price];
-                y = canvas.height * (y / highest);
-                y = 3 * y / 12;
-                ctx.fillRect(x, canvas.height - y + yGridOffset,
-                             canvas.xGridStep - margin, y);
+            function drawError(ctx, msg)
+            {
+                ctx.save();
+                ctx.strokeStyle = "#888888";
+                ctx.font = "24px Open Sans"
+                ctx.textAlign = "center"
+                ctx.shadowOffsetX = 4;
+                ctx.shadowOffsetY = 4;
+                ctx.shadowBlur = 1.5;
+                ctx.shadowColor = "#aaaaaa";
+                ctx.beginPath();
+
+                ctx.fillText(msg, (canvas.width - tickMargin) / 2,
+                             (canvas.height - yGridOffset - yGridStep) / 2);
+
+                ctx.closePath();
+                ctx.stroke();
+                ctx.restore();
             }
 
-            ctx.stroke();
-            ctx.restore();
-        }
+            onPaint: {
+                numPoints = stockModel.indexOf(chart.startDate);
 
-        function drawError(ctx, msg)
-        {
-            ctx.save();
-            ctx.strokeStyle = "#888888";
-            ctx.font = "24px Open Sans"
-            ctx.textAlign = "center"
-            ctx.shadowOffsetX = 4;
-            ctx.shadowOffsetY = 4;
-            ctx.shadowBlur = 1.5;
-            ctx.shadowColor = "#aaaaaa";
-            ctx.beginPath();
-
-            ctx.fillText(msg, (canvas.width - tickMargin) / 2,
-                              (canvas.height - yGridOffset - yGridStep) / 2);
-
-            ctx.closePath();
-            ctx.stroke();
-            ctx.restore();
-        }
+                if (chart.gridSize == 0)
+                    chart.gridSize = numPoints
 
-        onPaint: {
-            numPoints = stockModel.indexOf(chart.startDate);
+                var ctx = canvas.getContext("2d");
+                ctx.globalCompositeOperation = "source-over";
+                ctx.lineWidth = 1;
 
-            if (chart.gridSize == 0)
-                chart.gridSize = numPoints
+                drawBackground(ctx);
 
-            var ctx = canvas.getContext("2d");
-            ctx.globalCompositeOperation = "source-over";
-            ctx.lineWidth = 1;
+                if (!stockModel.ready) {
+                    drawError(ctx, "No data available.");
+                    return;
+                }
 
-            drawBackground(ctx);
+                var highestPrice = 0;
+                var highestVolume = 0;
+                var lowestPrice = -1;
+                var points = [];
+                for (var i = numPoints, j = 0; i >= 0 ; i -= pixelSkip, j += pixelSkip) {
+                    var price = stockModel.get(i);
+                    if (parseFloat(highestPrice) < parseFloat(price.high))
+                        highestPrice = price.high;
+                    if (parseInt(highestVolume, 10) < parseInt(price.volume, 10))
+                        highestVolume = price.volume;
+                    if (lowestPrice < 0 || parseFloat(lowestPrice) > parseFloat(price.low))
+                        lowestPrice = price.low;
+                    points.push({
+                                    x: j * xGridStep,
+                                    open: price.open,
+                                    close: price.close,
+                                    high: price.high,
+                                    low: price.low,
+                                    volume: price.volume
+                                });
+                }
 
-            if (!stockModel.ready) {
-                drawError(ctx, "No data available.");
-                return;
+                if (settings.drawHighPrice)
+                    drawPrice(ctx, 0, numPoints, settings.highColor, "high", points, highestPrice, lowestPrice);
+                if (settings.drawLowPrice)
+                    drawPrice(ctx, 0, numPoints, settings.lowColor, "low", points, highestPrice, lowestPrice);
+                if (settings.drawOpenPrice)
+                    drawPrice(ctx, 0, numPoints,settings.openColor, "open", points, highestPrice, lowestPrice);
+                if (settings.drawClosePrice)
+                    drawPrice(ctx, 0, numPoints, settings.closeColor, "close", points, highestPrice, lowestPrice);
+
+                drawVolume(ctx, 0, numPoints, settings.volumeColor, "volume", points, highestVolume);
+                drawScales(ctx, highestPrice, lowestPrice, highestVolume);
             }
+        }
 
-            var highestPrice = 0;
-            var highestVolume = 0;
-            var lowestPrice = -1;
-            var points = [];
-            for (var i = numPoints, j = 0; i >= 0 ; i -= pixelSkip, j += pixelSkip) {
-                var price = stockModel.get(i);
-                if (parseFloat(highestPrice) < parseFloat(price.high))
-                    highestPrice = price.high;
-                if (parseInt(highestVolume, 10) < parseInt(price.volume, 10))
-                    highestVolume = price.volume;
-                if (lowestPrice < 0 || parseFloat(lowestPrice) > parseFloat(price.low))
-                    lowestPrice = price.low;
-                points.push({
-                                x: j * xGridStep,
-                                open: price.open,
-                                close: price.close,
-                                high: price.high,
-                                low: price.low,
-                                volume: price.volume
-                            });
-            }
 
-            if (settings.drawHighPrice)
-                drawPrice(ctx, 0, numPoints, settings.highColor, "high", points, highestPrice, lowestPrice);
-            if (settings.drawLowPrice)
-                drawPrice(ctx, 0, numPoints, settings.lowColor, "low", points, highestPrice, lowestPrice);
-            if (settings.drawOpenPrice)
-                drawPrice(ctx, 0, numPoints,settings.openColor, "open", points, highestPrice, lowestPrice);
-            if (settings.drawClosePrice)
-                drawPrice(ctx, 0, numPoints, settings.closeColor, "close", points, highestPrice, lowestPrice);
-
-            drawVolume(ctx, 0, numPoints, settings.volumeColor, "volume", points, highestVolume);
-            drawScales(ctx, highestPrice, lowestPrice, highestVolume);
+        Text {
+            id: fromDate
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 8
+            Layout.alignment: Qt.AlignLeft
+            text: "| " + startDate.toDateString()
+        }
+        Text {
+            id: toDate
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 8
+            Layout.alignment: Qt.AlignRight
+            Layout.rightMargin: canvas.tickMargin
+            Layout.columnSpan: 5
+            text: endDate.toDateString() + " |"
         }
     }
 }
diff --git a/examples/quick/demos/stocqt/content/StockInfo.qml b/examples/quick/demos/stocqt/content/StockInfo.qml
index 88f540fa09..2935e74db9 100644
--- a/examples/quick/demos/stocqt/content/StockInfo.qml
+++ b/examples/quick/demos/stocqt/content/StockInfo.qml
@@ -39,42 +39,43 @@
 ****************************************************************************/
 
 import QtQuick 2.0
+import QtQuick.Layouts 1.1
 import "."
 
 Rectangle {
     id: root
-    width: 440
-    height: 160
     color: "transparent"
 
     property var stock: null
 
-    Column {
-        id: stockColumn
+    GridLayout {
+        id: stockInfoLayout
         anchors.fill: parent
-        spacing: 4
+        columns: 2
+        rows: 3
+        rowSpacing: 4
 
-        Flow {
-            anchors { left: parent.left; right: parent.right }
-            spacing: 12
-
-            Text {
-                id: stockIdText
-                color: "#000000"
-                font.family: Settings.fontFamily
-                font.pointSize: 28
-                font.weight: Font.DemiBold
-                text: root.stock.stockId
-            }
+        Text {
+            id: stockIdText
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 28
+            font.weight: Font.DemiBold
+            text: root.stock.stockId
+            Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
+            Layout.leftMargin: 10
+        }
 
-            Text {
-                id: price
-                color: "#6d6d6d"
-                font.family: Settings.fontFamily
-                font.pointSize: 28
-                font.weight: Font.DemiBold
-                text: parseFloat(root.stock.stockPrice).toFixed(2);
-            }
+        Text {
+            id: price
+            color: "#6d6d6d"
+            font.family: Settings.fontFamily
+            font.pointSize: 28
+            font.weight: Font.DemiBold
+            text: parseFloat(root.stock.stockPrice).toFixed(2);
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
+            Layout.leftMargin: 5
         }
 
         Text {
@@ -82,38 +83,38 @@ Rectangle {
             color: "#0c0c0c"
             font.family: Settings.fontFamily
             font.pointSize: 16
-            width: stockColumn.width
             elide: Text.ElideRight
             maximumLineCount: 3
             wrapMode: Text.WordWrap
             text: root.stock.stockName
+            Layout.leftMargin: 10
+            Layout.columnSpan: 2
+            Layout.alignment: Qt.AlignLeft
         }
 
-        Flow {
-            anchors { left: parent.left; right: parent.right }
-            spacing: 12
 
-            Text {
-                id: priceChange
-                horizontalAlignment: Text.AlignRight
-                color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
-                font.family: Settings.fontFamily
-                font.pointSize: 18
-                text: parseFloat(root.stock.stockPriceChanged).toFixed(2);
-            }
+        Text {
+            id: priceChange
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Layout.leftMargin: 10
+            color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
+            font.family: Settings.fontFamily
+            font.pointSize: 18
+            text: parseFloat(root.stock.stockPriceChanged).toFixed(2);
+        }
 
-            Text {
-                id: priceChangePercentage
-                horizontalAlignment: Text.AlignRight
-                color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
-                font.family: Settings.fontFamily
-                font.pointSize: 18
-                font.weight: Font.DemiBold
-                text: "(" +
-                      parseFloat(root.stock.stockPriceChanged /
-                          (root.stock.stockPrice - root.stock.stockPriceChanged) * 100.0).toFixed(2) +
-                      "%)"
-            }
+        Text {
+            id: priceChangePercentage
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
+            font.family: Settings.fontFamily
+            font.pointSize: 18
+            font.weight: Font.DemiBold
+            Layout.fillWidth: true
+            text: "(" +
+                  parseFloat(root.stock.stockPriceChanged /
+                             (root.stock.stockPrice - root.stock.stockPriceChanged) * 100.0).toFixed(2) +
+                  "%)"
         }
     }
 }
diff --git a/examples/quick/demos/stocqt/content/StockListDelegate.qml b/examples/quick/demos/stocqt/content/StockListDelegate.qml
new file mode 100644
index 0000000000..f3a3ab6976
--- /dev/null
+++ b/examples/quick/demos/stocqt/content/StockListDelegate.qml
@@ -0,0 +1,153 @@
+/****************************************************************************
+**
+** 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.5
+import QtQuick.Layouts 1.1
+import "."
+
+Rectangle {
+    height: 102
+    width: parent.width
+    color: "transparent"
+    MouseArea {
+        anchors.fill: parent;
+        onClicked: {
+            if (view.currentIndex == index)
+                mainRect.currentIndex = 1;
+            else
+                view.currentIndex = index;
+        }
+    }
+    GridLayout {
+        id: stockGrid
+        columns: 3
+        rows: 2
+        anchors.fill: parent
+
+        Text {
+            id: stockIdText
+            Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
+            Layout.leftMargin: 10
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 20
+            font.weight: Font.Bold
+            verticalAlignment: Text.AlignVCenter
+            text: stockId
+        }
+
+        Text {
+            id: stockValueText
+            Layout.preferredWidth: 100
+            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 20
+            font.bold: true
+            horizontalAlignment: Text.AlignRight
+            verticalAlignment: Text.AlignVCenter
+            text: value
+        }
+        Text {
+            id: stockValueChangeText
+            Layout.preferredWidth: 135
+            Layout.rightMargin: 10
+            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+            color: "#328930"
+            font.family: Settings.fontFamily
+            font.pointSize: 20
+            font.bold: true
+            horizontalAlignment: Text.AlignRight
+            verticalAlignment: Text.AlignVCenter
+            text: change
+            onTextChanged: {
+                if (parseFloat(text) >= 0.0)
+                    color = "#328930";
+                else
+                    color = "#d40000";
+            }
+        }
+        Text {
+            id: stockNameText
+            Layout.preferredWidth: 300
+            Layout.leftMargin: 10
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 16
+            font.bold: false
+            elide: Text.ElideRight
+            maximumLineCount: 1
+            verticalAlignment: Text.AlignVCenter
+            text: name
+        }
+
+        Item {Layout.fillWidth: true }
+
+        Text {
+            id: stockValueChangePercentageText
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignRight | Qt.AlignTop
+            Layout.rightMargin: 10
+            color: "#328930"
+            font.family: Settings.fontFamily
+            font.pointSize: 18
+            font.bold: false
+            horizontalAlignment: Text.AlignRight
+            verticalAlignment: Text.AlignVCenter
+            text: changePercentage
+            onTextChanged: {
+                if (parseFloat(text) >= 0.0)
+                    color = "#328930";
+                else
+                    color = "#d40000";
+            }
+        }
+    }
+
+    Rectangle {
+        id: endingLine
+        anchors.top: stockGrid.bottom
+        height: 1
+        width: parent.width
+        color: "#d7d7d7"
+    }
+}
+
diff --git a/examples/quick/demos/stocqt/content/StockListView.qml b/examples/quick/demos/stocqt/content/StockListView.qml
index d2bd52a69d..177580cf6b 100644
--- a/examples/quick/demos/stocqt/content/StockListView.qml
+++ b/examples/quick/demos/stocqt/content/StockListView.qml
@@ -43,8 +43,6 @@ import "."
 
 Rectangle {
     id: root
-    width: 320
-    height: 410
     anchors.top: parent.top
     anchors.bottom: parent.bottom
     color: "white"
@@ -55,13 +53,12 @@ Rectangle {
     ListView {
         id: view
         anchors.fill: parent
-        width: parent.width
         clip: true
         keyNavigationWraps: true
         highlightMoveDuration: 0
         focus: true
         snapMode: ListView.SnapToItem
-        model: StockListModel{}
+        model: StockListModel {}
         currentIndex: -1 // Don't pre-select any item
 
         onCurrentIndexChanged: {
@@ -71,124 +68,7 @@ Rectangle {
             }
         }
 
-        delegate: Rectangle {
-            height: 102
-            width: parent.width
-            color: "transparent"
-            MouseArea {
-                anchors.fill: parent;
-                onClicked: {
-                    if (view.currentIndex == index)
-                        mainRect.currentIndex = 1;
-                    else
-                        view.currentIndex = index;
-                }
-            }
-
-            Text {
-                id: stockIdText
-                anchors.top: parent.top
-                anchors.topMargin: 15
-                anchors.left: parent.left
-                anchors.leftMargin: 15
-                width: 125
-                height: 40
-                color: "#000000"
-                font.family: Settings.fontFamily
-                font.pointSize: 20
-                font.weight: Font.Bold
-                verticalAlignment: Text.AlignVCenter
-                text: stockId
-            }
-
-            Text {
-                id: stockValueText
-                anchors.top: parent.top
-                anchors.topMargin: 15
-                anchors.right: parent.right
-                anchors.rightMargin: 0.31 * parent.width
-                width: 190
-                height: 40
-                color: "#000000"
-                font.family: Settings.fontFamily
-                font.pointSize: 20
-                font.bold: true
-                horizontalAlignment: Text.AlignRight
-                verticalAlignment: Text.AlignVCenter
-                text: value
-            }
-
-            Text {
-                id: stockValueChangeText
-                anchors.top: parent.top
-                anchors.topMargin: 15
-                anchors.right: parent.right
-                anchors.rightMargin: 20
-                width: 135
-                height: 40
-                color: "#328930"
-                font.family: Settings.fontFamily
-                font.pointSize: 20
-                font.bold: true
-                horizontalAlignment: Text.AlignRight
-                verticalAlignment: Text.AlignVCenter
-                text: change
-                onTextChanged: {
-                    if (parseFloat(text) >= 0.0)
-                        color = "#328930";
-                    else
-                        color = "#d40000";
-                }
-            }
-
-            Text {
-                id: stockNameText
-                anchors.top: stockIdText.bottom
-                anchors.left: parent.left
-                anchors.leftMargin: 15
-                width: 330
-                height: 30
-                color: "#000000"
-                font.family: Settings.fontFamily
-                font.pointSize: 16
-                font.bold: false
-                elide: Text.ElideRight
-                maximumLineCount: 1
-                verticalAlignment: Text.AlignVCenter
-                text: name
-            }
-
-            Text {
-                id: stockValueChangePercentageText
-                anchors.top: stockIdText.bottom
-                anchors.right: parent.right
-                anchors.rightMargin: 20
-                width: 120
-                height: 30
-                color: "#328930"
-                font.family: Settings.fontFamily
-                font.pointSize: 18
-                font.bold: false
-                horizontalAlignment: Text.AlignRight
-                verticalAlignment: Text.AlignVCenter
-                text: changePercentage
-                onTextChanged: {
-                    if (parseFloat(text) >= 0.0)
-                        color = "#328930";
-                    else
-                        color = "#d40000";
-                }
-            }
-
-            Rectangle {
-                id: endingLine
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-                height: 1
-                width: parent.width
-                color: "#d7d7d7"
-            }
-        }
+        delegate: StockListDelegate {}
 
         highlight: Rectangle {
             width: view.width
diff --git a/examples/quick/demos/stocqt/content/StockSettingsPanel.qml b/examples/quick/demos/stocqt/content/StockSettingsPanel.qml
index 0c34e453de..1ac1035789 100644
--- a/examples/quick/demos/stocqt/content/StockSettingsPanel.qml
+++ b/examples/quick/demos/stocqt/content/StockSettingsPanel.qml
@@ -39,12 +39,11 @@
 ****************************************************************************/
 
 import QtQuick 2.0
+import QtQuick.Layouts 1.1
 import "."
 
 Rectangle {
     id: root
-    width: 440
-    height: 160
     color: "transparent"
 
     property bool drawOpenPrice: openButton.buttonEnabled
@@ -58,118 +57,93 @@ Rectangle {
     property string lowColor: "#f30000"
     property string volumeColor: "#14aaff"
 
-    Text {
-        id: openText
-        anchors.left: root.left
-        anchors.top: root.top
-        color: "#000000"
-        font.family: Settings.fontFamily
-        font.pointSize: 19
-        text: "Open"
-    }
-
-    Text {
-        id: closeText
-        anchors.left: root.left
-        anchors.top: openText.bottom
-        anchors.topMargin: 10
-        color: "#000000"
-        font.family: Settings.fontFamily
-        font.pointSize: 19
-        text: "Close"
-    }
-
-    Text {
-        id: highText
-        anchors.left: root.left
-        anchors.top: closeText.bottom
-        anchors.topMargin: 10
-        color: "#000000"
-        font.family: Settings.fontFamily
-        font.pointSize: 19
-        text: "High"
-    }
-
-    Text {
-        id: lowText
-        anchors.left: root.left
-        anchors.top: highText.bottom
-        anchors.topMargin: 10
-        color: "#000000"
-        font.family: Settings.fontFamily
-        font.pointSize: 19
-        text: "Low"
-    }
-
-    Rectangle {
-        height: 4
-        anchors.left: root.left
-        anchors.leftMargin: 114
-        anchors.right: openButton.left
-        anchors.rightMargin: 65
-        anchors.verticalCenter: openText.verticalCenter
-        color: openColor
-    }
-
-    Rectangle {
-        height: 4
-        anchors.left: root.left
-        anchors.leftMargin: 114
-        anchors.right: closeButton.left
-        anchors.rightMargin: 65
-        anchors.verticalCenter: closeText.verticalCenter
-        color: closeColor
-    }
-
-    Rectangle {
-        height: 4
-        anchors.left: root.left
-        anchors.leftMargin: 114
-        anchors.right: highButton.left
-        anchors.rightMargin: 65
-        anchors.verticalCenter: highText.verticalCenter
-        color: highColor
-    }
-
-    Rectangle {
-        height: 4
-        anchors.left: root.left
-        anchors.leftMargin: 114
-        anchors.right: lowButton.left
-        anchors.rightMargin: 65
-        anchors.verticalCenter: lowText.verticalCenter
-        color: lowColor
-    }
-
-    CheckBox {
-        id: openButton
-        buttonEnabled: false
-        anchors.verticalCenter: openText.verticalCenter
-        anchors.right: root.right
-        anchors.rightMargin: 40
-    }
-
-    CheckBox {
-        id: closeButton
-        buttonEnabled: false
-        anchors.verticalCenter: closeText.verticalCenter
-        anchors.right: root.right
-        anchors.rightMargin: 40
-    }
-
-    CheckBox {
-        id: highButton
-        buttonEnabled: true
-        anchors.verticalCenter: highText.verticalCenter
-        anchors.right: root.right
-        anchors.rightMargin: 40
-    }
-
-    CheckBox {
-        id: lowButton
-        buttonEnabled: true
-        anchors.verticalCenter: lowText.verticalCenter
-        anchors.right: root.right
-        anchors.rightMargin: 40
+    GridLayout {
+        id: settingsGrid
+        rows: 5
+        columns: 3
+        rowSpacing: 4
+        anchors.fill: parent
+
+        Item {
+            Layout.fillHeight: true
+            Layout.columnSpan: 3
+        }
+
+        Text {
+            id: openText
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 19
+            text: "Open"
+            Layout.leftMargin: 10
+        }
+        Rectangle {
+            Layout.preferredHeight: 4
+            Layout.preferredWidth: 114
+            color: openColor
+        }
+        CheckBox {
+            id: openButton
+            buttonEnabled: false
+            Layout.rightMargin: 10
+        }
+
+        Text {
+            id: closeText
+            Layout.leftMargin: 10
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 19
+            text: "Close"
+        }
+        Rectangle {
+            Layout.preferredHeight: 4
+            Layout.preferredWidth: 114
+            color: closeColor
+        }
+        CheckBox {
+            id: closeButton
+            buttonEnabled: false
+            Layout.rightMargin: 10
+        }
+
+        Text {
+            id: highText
+            Layout.leftMargin: 10
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 19
+            text: "High"
+        }
+        Rectangle {
+            Layout.preferredHeight: 4
+            Layout.preferredWidth: 114
+            color: highColor
+        }
+        CheckBox {
+            id: highButton
+            buttonEnabled: true
+            Layout.rightMargin: 10
+        }
+
+        Text {
+            id: lowText
+            Layout.leftMargin: 10
+            color: "#000000"
+            font.family: Settings.fontFamily
+            font.pointSize: 19
+            text: "Low"
+        }
+        Rectangle {
+            Layout.preferredHeight: 4
+            Layout.preferredWidth: 114
+            color: lowColor
+        }
+
+        CheckBox {
+            id: lowButton
+            buttonEnabled: true
+            Layout.rightMargin: 10
+        }
     }
 }
diff --git a/examples/quick/demos/stocqt/content/StockView.qml b/examples/quick/demos/stocqt/content/StockView.qml
index ec89c52510..d598ddd201 100644
--- a/examples/quick/demos/stocqt/content/StockView.qml
+++ b/examples/quick/demos/stocqt/content/StockView.qml
@@ -40,6 +40,7 @@
 
 import QtQuick 2.0
 import QtQuick.Window 2.1
+import QtQuick.Layouts 1.1
 
 Rectangle {
     id: root
@@ -60,42 +61,40 @@ Rectangle {
         color: "transparent"
         anchors.fill: parent
 
-        StockInfo {
-            id: stockInfo
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.top: parent.top
-            anchors.topMargin: 15
-            height: 160
-            anchors.right: Screen.primaryOrientation === Qt.PortraitOrientation ? parent.right : chart.left
-            anchors.rightMargin: 20
-            stock: root.stock
-        }
+        GridLayout {
+            anchors.fill: parent
+            rows: 2
+            columns: Screen.primaryOrientation === Qt.PortraitOrientation ? 1 : 2
 
-        StockChart {
-            id: chart
-            anchors.bottom: Screen.primaryOrientation === Qt.PortraitOrientation ? settingsPanel.top : parent.bottom
-            anchors.bottomMargin: 20
-            anchors.top : Screen.primaryOrientation === Qt.PortraitOrientation ? stockInfo.bottom : parent.top
-            anchors.topMargin: 20
-            anchors.right: parent.right
-            anchors.rightMargin: 20
-            width: Screen.primaryOrientation === Qt.PortraitOrientation ? parent.width - 40 : 0.6 * parent.width
-            stockModel: root.stock
-            settings: settingsPanel
-        }
+            StockInfo {
+                id: stockInfo
+                Layout.alignment: Qt.AlignTop
+                Layout.preferredWidth: 400
+                Layout.preferredHeight: 160
+                stock: root.stock
+            }
 
-        StockSettingsPanel {
-            id: settingsPanel
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            anchors.right: Screen.primaryOrientation === Qt.PortraitOrientation ? parent.right : chart.left
-            anchors.rightMargin: 20
-            anchors.bottom: parent.bottom
-            onDrawOpenPriceChanged: root.update()
-            onDrawClosePriceChanged: root.update();
-            onDrawHighPriceChanged: root.update();
-            onDrawLowPriceChanged: root.update();
+            StockChart {
+                id: chart
+                Layout.alignment: Qt.AlignRight
+                Layout.margins: 5
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.rowSpan: 2
+                stockModel: root.stock
+                settings: settingsPanel
+            }
+            StockSettingsPanel {
+                id: settingsPanel
+                Layout.alignment: Qt.AlignBottom
+                Layout.fillHeight: true
+                Layout.preferredWidth: 400
+                Layout.bottomMargin: 5
+                onDrawOpenPriceChanged: root.update()
+                onDrawClosePriceChanged: root.update();
+                onDrawHighPriceChanged: root.update();
+                onDrawLowPriceChanged: root.update();
+            }
         }
     }
 }
diff --git a/examples/quick/demos/stocqt/content/qmldir b/examples/quick/demos/stocqt/content/qmldir
index bcfa27b484..77f5ed3c56 100644
--- a/examples/quick/demos/stocqt/content/qmldir
+++ b/examples/quick/demos/stocqt/content/qmldir
@@ -8,3 +8,5 @@ StockListView 1.0 StockListView.qml
 StockModel 1.0 StockModel.qml
 StockSettingsPanel 1.0 StockSettingsPanel.qml
 StockView 1.0 StockView.qml
+StockListDelegate 1.0 StockListDelegate.qml
+Banner 1.0 Banner.qml
diff --git a/examples/quick/demos/stocqt/stocqt.qml b/examples/quick/demos/stocqt/stocqt.qml
index 6b1da1713a..a13e63fd50 100644
--- a/examples/quick/demos/stocqt/stocqt.qml
+++ b/examples/quick/demos/stocqt/stocqt.qml
@@ -40,6 +40,7 @@
 
 import QtQuick 2.0
 import QtQml.Models 2.1
+import QtQuick.Layouts 1.1
 import "./content"
 
 Rectangle {
@@ -49,90 +50,50 @@ Rectangle {
 
     property alias currentIndex: root.currentIndex
 
-    Rectangle {
-        id: banner
-        height: 80
-        anchors.top: parent.top
-        width: parent.width
-        color: "#000000"
+    ColumnLayout {
+        anchors.fill: parent
 
-        Image {
-            id: arrow
-            source: "./content/images/icon-left-arrow.png"
-            anchors.left: banner.left
-            anchors.leftMargin: 20
-            anchors.verticalCenter: banner.verticalCenter
-            visible: root.currentIndex == 1 ? true : false
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: root.currentIndex = 0;
-            }
-        }
-
-        Item {
-            id: textItem
-            width: stocText.width + qtText.width
-            height: stocText.height + qtText.height
-            anchors.horizontalCenter: banner.horizontalCenter
-            anchors.verticalCenter: banner.verticalCenter
-
-            Text {
-                id: stocText
-                anchors.verticalCenter: textItem.verticalCenter
-                color: "#ffffff"
-                font.family: "Abel"
-                font.pointSize: 40
-                text: "Stoc"
-            }
-            Text {
-                id: qtText
-                anchors.verticalCenter: textItem.verticalCenter
-                anchors.left: stocText.right
-                color: "#5caa15"
-                font.family: "Abel"
-                font.pointSize: 40
-                text: "Qt"
-            }
+        Banner {
+            id: banner
+            Layout.fillWidth: true
         }
-    }
 
-    ListView {
-        id: root
-        width: parent.width
-        anchors.top: banner.bottom
-        anchors.bottom: parent.bottom
-        snapMode: ListView.SnapOneItem
-        highlightRangeMode: ListView.StrictlyEnforceRange
-        highlightMoveDuration: 250
-        focus: false
-        orientation: ListView.Horizontal
-        boundsBehavior: Flickable.StopAtBounds
+        ListView {
+            id: root
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            snapMode: ListView.SnapOneItem
+            highlightRangeMode: ListView.StrictlyEnforceRange
+            highlightMoveDuration: 250
+            focus: false
+            orientation: ListView.Horizontal
+            boundsBehavior: Flickable.StopAtBounds
 
-        StockModel {
-            id: stock
-            stockId: listView.currentStockId
-            stockName: listView.currentStockName
-            onStockIdChanged: stock.updateStock();
-            onDataReady: {
-                root.currentIndex = 1
-                stockView.update()
+            StockModel {
+                id: stock
+                stockId: listView.currentStockId
+                stockName: listView.currentStockName
+                onStockIdChanged: stock.updateStock();
+                onDataReady: {
+                    root.currentIndex = 1
+                    stockView.update()
+                }
             }
-        }
 
-        model: ObjectModel {
-            StockListView {
-                id: listView
-                width: root.width
-                height: root.height
-            }
+            model: ObjectModel {
+                StockListView {
+                    id: listView
+                    width: root.width
+                    height: root.height
+                }
 
-            StockView {
-                id: stockView
-                width: root.width
-                height: root.height
-                stocklist: listView
-                stock: stock
+                StockView {
+                    id: stockView
+                    width: root.width
+                    height: root.height
+                    stocklist: listView
+                    stock: stock
+                }
             }
         }
     }
diff --git a/examples/quick/demos/stocqt/stocqt.qrc b/examples/quick/demos/stocqt/stocqt.qrc
index 920e56d4d0..ab7772a62a 100644
--- a/examples/quick/demos/stocqt/stocqt.qrc
+++ b/examples/quick/demos/stocqt/stocqt.qrc
@@ -16,5 +16,7 @@
         <file>content/StockInfo.qml</file>
         <file>content/Settings.qml</file>
         <file>content/+windows/Settings.qml</file>
+        <file>content/StockListDelegate.qml</file>
+        <file>content/Banner.qml</file>
     </qresource>
 </RCC>
diff --git a/examples/quick/localstorage/doc/src/localstorage.qdoc b/examples/quick/localstorage/doc/src/localstorage.qdoc
index b52e0afd80..1bfba147e1 100644
--- a/examples/quick/localstorage/doc/src/localstorage.qdoc
+++ b/examples/quick/localstorage/doc/src/localstorage.qdoc
@@ -35,8 +35,13 @@
 
     \include examples-run.qdocinc
 
-    \section1 Hello World
+    \section1 Activity Tracker
 
-    \e {Hello World} demonstrates creating a simple SQL table and doing
-    insert and select operations.
+    \e {Activity tracker} allows you to keep track of walks, hikes, or bike trips.
+
+    All database transactions are handled in Database.js. The database is
+    checked at startup, and created if it does not exist. LocalStorage uses
+    SQLite, which is a self-contained, serverless, public-domain database.
+    Opening a connection to the database is handled at the beginning of each
+    function that manipulates or retrieves data.
 */
diff --git a/examples/quick/localstorage/localstorage/Database.js b/examples/quick/localstorage/localstorage/Database.js
new file mode 100644
index 0000000000..387033795f
--- /dev/null
+++ b/examples/quick/localstorage/localstorage/Database.js
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 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$
+**
+****************************************************************************/
+
+function dbInit()
+{
+    var db = LocalStorage.openDatabaseSync("Activity_Tracker_DB", "", "Track exercise", 1000000)
+    try {
+        db.transaction(function (tx) {
+            tx.executeSql('CREATE TABLE IF NOT EXISTS trip_log (date text,trip_desc text,distance numeric)')
+        })
+    } catch (err) {
+        console.log("Error creating table in database: " + err)
+    };
+}
+
+function dbGetHandle()
+{
+    try {
+        var db = LocalStorage.openDatabaseSync("Activity_Tracker_DB", "",
+                                               "Track exercise", 1000000)
+    } catch (err) {
+        console.log("Error opening database: " + err)
+    }
+    return db
+}
+
+function dbInsert(Pdate, Pdesc, Pdistance)
+{
+    var db = dbGetHandle()
+    var rowid = 0;
+    db.transaction(function (tx) {
+        tx.executeSql('INSERT INTO trip_log VALUES(?, ?, ?)',
+                      [Pdate, Pdesc, Pdistance])
+        var result = tx.executeSql('SELECT last_insert_rowid()')
+        rowid = result.insertId
+    })
+    return rowid;
+}
+
+function dbReadAll()
+{
+    var db = dbGetHandle()
+    db.transaction(function (tx) {
+        var results = tx.executeSql(
+                    'SELECT rowid,date,trip_desc,distance FROM trip_log order by rowid desc')
+        for (var i = 0; i < results.rows.length; i++) {
+            listModel.append({
+                                 id: results.rows.item(i).rowid,
+                                 checked: " ",
+                                 date: results.rows.item(i).date,
+                                 trip_desc: results.rows.item(i).trip_desc,
+                                 distance: results.rows.item(i).distance
+                             })
+        }
+    })
+}
+
+function dbUpdate(Pdate, Pdesc, Pdistance, Prowid)
+{
+    var db = dbGetHandle()
+    db.transaction(function (tx) {
+        tx.executeSql(
+                    'update trip_log set date=?, trip_desc=?, distance=? where rowid = ?', [Pdate, Pdesc, Pdistance, Prowid])
+    })
+}
+
+function dbDeleteRow(Prowid)
+{
+    var db = dbGetHandle()
+    db.transaction(function (tx) {
+        tx.executeSql('delete from trip_log where rowid = ?', [Prowid])
+    })
+}
diff --git a/examples/quick/localstorage/localstorage/Header.qml b/examples/quick/localstorage/localstorage/Header.qml
new file mode 100644
index 0000000000..a08645a170
--- /dev/null
+++ b/examples/quick/localstorage/localstorage/Header.qml
@@ -0,0 +1,173 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2016 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$
+**
+****************************************************************************/
+import QtQuick 2.7
+import QtQuick.Window 2.0
+import QtQuick.LocalStorage 2.0
+import "Database.js" as JS
+import QtQuick.Layouts 1.1
+
+Item {
+    id: root
+    width: Screen.width / 2
+    height: Screen.height / 7
+
+    function insertrec() {
+        var rowid = parseInt(JS.dbInsert(dateInput.text, descInput.text, distInput.text), 10)
+        if (rowid) {
+            listView.model.setProperty(listView.currentIndex, "id", rowid)
+            listView.forceLayout()
+        }
+        return rowid;
+    }
+
+    function editrec(Pdate, Pdesc, Pdistance, Prowid) {
+        dateInput.text = Pdate
+        descInput.text = Pdesc
+        distInput.text = Pdistance
+    }
+
+    function initrec_new() {
+        dateInput.clear()
+        descInput.clear()
+        distInput.clear()
+        listView.model.insert(0, {
+                                  date: "",
+                                  trip_desc: "",
+                                  distance: 0
+                              })
+        listView.currentIndex = 0
+        dateInput.forceActiveFocus()
+    }
+
+    function initrec() {
+        dateInput.clear()
+        descInput.clear()
+        distInput.clear()
+    }
+
+    function setlistview() {
+        listView.model.setProperty(listView.currentIndex, "date",
+                                   dateInput.text)
+        listView.model.setProperty(listView.currentIndex, "trip_desc",
+                                   descInput.text)
+        listView.model.setProperty(listView.currentIndex, "distance",
+                                   parseInt(distInput.text,10))
+    }
+
+    Rectangle {
+        id: rootrect
+        border.width: 10
+        color: "#161616"
+
+        ColumnLayout {
+            id: mainLayout
+            anchors.fill: parent
+
+            Rectangle {
+                id: gridBox
+                Layout.fillWidth: true
+
+                GridLayout {
+                    id: gridLayout
+                    rows: 3
+                    flow: GridLayout.TopToBottom
+                    anchors.fill: parent
+
+                    Text {
+                        text: "Date"
+                        font.pixelSize: 22
+                        rightPadding: 10
+                    }
+
+                    Text {
+                        text: "Description"
+                        font.pixelSize: 22
+                        rightPadding: 10
+                    }
+
+                    Text {
+                        text: "Distance"
+                        font.pixelSize: 22
+                    }
+
+                    TextInput {
+                        id: dateInput
+                        font.pixelSize: 22
+                        activeFocusOnPress: true
+                        activeFocusOnTab: true
+                        validator: RegExpValidator {
+                            regExp: /[0-9/,:.]+/
+                        }
+                        onEditingFinished: {
+                            if (dateInput.text == "") {
+                                statustext.text = "Please fill in the date"
+                                dateInput.forceActiveFocus()
+                            }
+                        }
+                    }
+
+                    TextInput {
+                        id: descInput
+                        font.pixelSize: 22
+                        activeFocusOnPress: true
+                        activeFocusOnTab: true
+                        onEditingFinished: {
+                            if (descInput.text.length < 8) {
+                                statustext.text = "Enter a description of minimum 8 characters"
+                                descInput.forceActiveFocus()
+                            } else {
+                                statustext.text = ""
+                            }
+                        }
+                    }
+
+                    TextInput {
+                        id: distInput
+                        font.pixelSize: 22
+                        activeFocusOnPress: true
+                        activeFocusOnTab: true
+                        validator: RegExpValidator {
+                            regExp: /\d{1,3}/
+                        }
+                        onEditingFinished: {
+                            if (distInput.text == "") {
+                                statustext.text = "Please fill in the distance"
+                                distInput.forceActiveFocus()
+                            }
+                        }
+                    }
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: dateInput.forceActiveFocus()
+            }
+        }
+    }
+}
diff --git a/examples/quick/localstorage/localstorage/MyButton.qml b/examples/quick/localstorage/localstorage/MyButton.qml
new file mode 100644
index 0000000000..4659b45f64
--- /dev/null
+++ b/examples/quick/localstorage/localstorage/MyButton.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 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$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: button
+
+    property bool checked: false
+    property alias text: buttonText.text
+
+    Accessible.name: text
+    Accessible.description: "This button does " + text
+    Accessible.role: Accessible.Button
+    Accessible.onPressAction: button.clicked()
+
+    signal clicked
+
+    implicitWidth: buttonText.implicitWidth + 20
+    implicitHeight: 30
+    gradient: Gradient {
+        GradientStop {
+            position: 0.0
+            color: "grey"
+        }
+        GradientStop {
+            position: 1.0
+            color: button.focus ? "red" : "grey"
+        }
+    }
+
+    radius: 5
+    antialiasing: true
+
+    Text {
+        id: buttonText
+        text: parent.description
+        anchors.centerIn: parent
+        font.pixelSize: parent.height * .5
+        style: enabled ? Text.Sunken : Text.Normal
+        color: enabled ? "white" : "#555"
+        styleColor: "black"
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: parent.clicked()
+    }
+
+    Keys.onSpacePressed: clicked()
+}
diff --git a/examples/quick/localstorage/localstorage/MyDelegate.qml b/examples/quick/localstorage/localstorage/MyDelegate.qml
new file mode 100644
index 0000000000..9a4ac1cc46
--- /dev/null
+++ b/examples/quick/localstorage/localstorage/MyDelegate.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 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$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.LocalStorage 2.0
+import QtQuick.Layouts 1.1
+import "Database.js" as JS
+
+Item {
+    width: parent.width
+    height: rDate.implicitHeight
+
+    Rectangle {
+        id: baseRec
+        anchors.fill: parent
+        opacity: 0.8
+        color: index % 2 ? "lightgrey" : "grey"
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: listView.currentIndex = index
+        }
+        GridLayout {
+            anchors.fill:parent
+            columns: 3
+
+            Text {
+                id: rDate
+                text: date
+                font.pixelSize: 22
+                Layout.preferredWidth: parent.width / 4
+                color: "black"
+            }
+            Text {
+                id: rDesc
+                text: trip_desc
+                Layout.fillWidth: true
+                font.pixelSize: 22
+                color: "black"
+            }
+            Text {
+                id: rDistance
+                text: distance
+                font.pixelSize: 22
+                Layout.alignment: Qt.AlignRight
+                color: "black"
+            }
+        }
+    }
+}
diff --git a/examples/quick/localstorage/localstorage/MyModel.qml b/examples/quick/localstorage/localstorage/MyModel.qml
new file mode 100644
index 0000000000..0677ec74d6
--- /dev/null
+++ b/examples/quick/localstorage/localstorage/MyModel.qml
@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 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$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.LocalStorage 2.0
+import "Database.js" as JS
+
+ListModel {
+    id: listModel
+    Component.onCompleted: JS.dbReadAll()
+}
diff --git a/examples/quick/localstorage/localstorage/localstorage.qml b/examples/quick/localstorage/localstorage/localstorage.qml
index 61e9eff8b6..b85fad4764 100644
--- a/examples/quick/localstorage/localstorage/localstorage.qml
+++ b/examples/quick/localstorage/localstorage/localstorage.qml
@@ -1,54 +1,183 @@
- /****************************************************************************
+/****************************************************************************
 **
-** Copyright (C) 2015 The Qt Company Ltd.
+** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: http://www.qt.io/licensing/
 **
-** This file is part of the examples of the Qt Toolkit.
+** This file is part of the documentation 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_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$
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import "../../shared" as Examples
+import QtQuick 2.5
+import QtQuick.Window 2.2
+import QtQuick.Layouts 1.1
+import QtQuick.LocalStorage 2.0
+import "Database.js" as JS
+
+Window {
+    visible: true
+    width: Screen.width / 2
+    height: Screen.height / 1.8
+    color: "#161616"
 
-Item {
-    height: 480
-    width: 320
-    Examples.LauncherList {
-        id: ll
+    property bool creatingNewEntry: false
+    property bool editingEntry: false
+
+    Rectangle {
         anchors.fill: parent
-        Component.onCompleted: {
-            addExample("Hello World", "Simple SQL operations with local storage API",  Qt.resolvedUrl("hello.qml"));
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Header {
+                id: input
+                Layout.fillWidth: true
+            }
+            RowLayout {
+                MyButton {
+                    text: "New"
+                    onClicked: {
+                        input.initrec_new()
+                        creatingNewEntry = true
+                        listView.model.setProperty(listView.currentIndex, "id", 0)
+                    }
+                }
+                MyButton {
+                    id: saveButton
+                    enabled: (creatingNewEntry || editingEntry) && listView.currentIndex != -1
+                    text: "Save"
+                    onClicked: {
+                        var insertedRow = false;
+                        if (listView.model.get(listView.currentIndex).id < 1) {
+                            //insert mode
+                            if (input.insertrec()) {
+                                // Successfully inserted a row.
+                                input.setlistview()
+                                insertedRow = true
+                            } else {
+                                // Failed to insert a row; display an error message.
+                                statustext.text = "Failed to insert row"
+                            }
+                        } else {
+                            // edit mode
+                            input.setlistview()
+                            JS.dbUpdate(listView.model.get(listView.currentIndex).date,
+                                        listView.model.get(listView.currentIndex).trip_desc,
+                                        listView.model.get(listView.currentIndex).distance,
+                                        listView.model.get(listView.currentIndex).id)
+                        }
+
+                        if (insertedRow) {
+                            input.initrec()
+                            creatingNewEntry = false
+                            editingEntry = false
+                            listView.forceLayout()
+                        }
+                    }
+                }
+                MyButton {
+                    id: editButton
+                    text: "Edit"
+                    enabled: !creatingNewEntry && !editingEntry && listView.currentIndex != -1
+                    onClicked: {
+                        input.editrec(listView.model.get(listView.currentIndex).date,
+                                      listView.model.get(listView.currentIndex).trip_desc,
+                                      listView.model.get(listView.currentIndex).distance,
+                                      listView.model.get(listView.currentIndex).id)
+
+                        editingEntry = true
+                    }
+                }
+                MyButton {
+                    id: deleteButton
+                    text: "Delete"
+                    enabled: !creatingNewEntry && listView.currentIndex != -1
+                    onClicked: {
+                        JS.dbDeleteRow(listView.model.get(listView.currentIndex).id)
+                        listView.model.remove(listView.currentIndex, 1)
+                        if (listView.count == 0) {
+                            // ListView doesn't automatically set its currentIndex to -1
+                            // when the count becomes 0.
+                            listView.currentIndex = -1
+                        }
+                    }
+                }
+                MyButton {
+                    id: cancelButton
+                    text: "Cancel"
+                    enabled: (creatingNewEntry || editingEntry) && listView.currentIndex != -1
+                    onClicked: {
+                        if (listView.model.get(listView.currentIndex).id === 0) {
+                            // This entry had an id of 0, which means it was being created and hadn't
+                            // been saved to the database yet, so we can safely remove it from the model.
+                            listView.model.remove(listView.currentIndex, 1)
+                        }
+                        listView.forceLayout()
+                        creatingNewEntry = false
+                        editingEntry = false
+                        input.initrec()
+                    }
+                }
+                MyButton {
+                    text: "Exit"
+                    onClicked: Qt.quit()
+                }
+            }
+            Component {
+                id: highlightBar
+                Rectangle {
+                    width: listView.currentItem.width
+                    height: listView.currentItem.height
+                    color: "lightgreen"
+                }
+            }
+            ListView {
+                id: listView
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                model: MyModel {}
+                delegate: MyDelegate {}
+                // Don't allow changing the currentIndex while the user is creating/editing values.
+                enabled: !creatingNewEntry && !editingEntry
+
+                highlight: highlightBar
+                highlightFollowsCurrentItem: true
+                focus: true
+
+                header: Component {
+                    Text {
+                        text: "Saved activities"
+                    }
+                }
+            }
+            Text {
+                id: statustext
+                color: "red"
+                Layout.fillWidth: true
+                font.bold: true
+                font.pointSize: 20
+
+            }
         }
     }
+    Component.onCompleted: {
+        JS.dbInit()
+    }
 }
diff --git a/examples/quick/localstorage/localstorage/localstorage.qmlproject b/examples/quick/localstorage/localstorage/localstorage.qmlproject
deleted file mode 100644
index 6835d23503..0000000000
--- a/examples/quick/localstorage/localstorage/localstorage.qmlproject
+++ /dev/null
@@ -1,16 +0,0 @@
-import QmlProject 1.0
-
-Project {
-    mainFile: "localstorage.qml"
-    /* Include .qml, .js, and image files from current directory and subdirectories */
-
-    QmlFiles {
-        directory: "."
-    }
-    JavaScriptFiles {
-        directory: "."
-    }
-    ImageFiles {
-        directory: "."
-    }
-}
\ No newline at end of file
diff --git a/examples/quick/localstorage/localstorage/localstorage.qrc b/examples/quick/localstorage/localstorage/localstorage.qrc
index 09ac2de033..079438be2b 100644
--- a/examples/quick/localstorage/localstorage/localstorage.qrc
+++ b/examples/quick/localstorage/localstorage/localstorage.qrc
@@ -1,6 +1,10 @@
 <RCC>
-    <qresource prefix="/localstorage/localstorage">
-        <file>hello.qml</file>
+    <qresource prefix="/">
+        <file>Header.qml</file>
+        <file>Database.js</file>
+        <file>MyModel.qml</file>
+        <file>MyButton.qml</file>
+        <file>MyDelegate.qml</file>
         <file>localstorage.qml</file>
     </qresource>
 </RCC>
diff --git a/examples/quick/localstorage/localstorage/main.cpp b/examples/quick/localstorage/localstorage/main.cpp
index 6e522753e9..9f8adbb7a5 100644
--- a/examples/quick/localstorage/localstorage/main.cpp
+++ b/examples/quick/localstorage/localstorage/main.cpp
@@ -1,41 +1,38 @@
 /****************************************************************************
 **
-** Copyright (C) 2015 The Qt Company Ltd.
+** 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."
-**
+** 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$
 **
 ****************************************************************************/
-#include "../../shared/shared.h"
-DECLARATIVE_EXAMPLE_MAIN(localstorage/localstorage/localstorage)
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:/localstorage.qml")));
+
+    return app.exec();
+}
diff --git a/examples/quick/localstorage/localstorage/qml-localstorage-example.png b/examples/quick/localstorage/localstorage/qml-localstorage-example.png
new file mode 100644
index 0000000000..7d7edafe63
--- /dev/null
+++ b/examples/quick/localstorage/localstorage/qml-localstorage-example.png
diff --git a/examples/quick/quickwidgets/quickwidget/fbitem.cpp b/examples/quick/quickwidgets/quickwidget/fbitem.cpp
index fc2a4ea7ad..cb3cc976fb 100644
--- a/examples/quick/quickwidgets/quickwidget/fbitem.cpp
+++ b/examples/quick/quickwidgets/quickwidget/fbitem.cpp
@@ -44,7 +44,7 @@
 #include <QtGui/QOpenGLFunctions>
 #include <QtCore/QDebug>
 
-#ifndef QT_NO_OPENGL
+#if QT_CONFIG(opengl)
 class FbRenderer : public QQuickFramebufferObject::Renderer
 {
 public:
@@ -82,7 +82,7 @@ private:
 
 QQuickFramebufferObject::Renderer *FbItem::createRenderer() const
 {
-#ifndef QT_NO_OPENGL
+#if QT_CONFIG(opengl)
     return new FbRenderer;
 #else
     return nullptr;
diff --git a/examples/quick/scenegraph/rendernode/customrenderitem.cpp b/examples/quick/scenegraph/rendernode/customrenderitem.cpp
index a92a400922..27c55bf86d 100644
--- a/examples/quick/scenegraph/rendernode/customrenderitem.cpp
+++ b/examples/quick/scenegraph/rendernode/customrenderitem.cpp
@@ -62,7 +62,7 @@ QSGNode *CustomRenderItem::updatePaintNode(QSGNode *node, UpdatePaintNodeData *)
             return nullptr;
         switch (ri->graphicsApi()) {
             case QSGRendererInterface::OpenGL:
-#ifndef QT_NO_OPENGL
+#if QT_CONFIG(opengl)
                 n = new OpenGLRenderNode(this);
                 break;
 #endif
diff --git a/examples/quick/scenegraph/rendernode/openglrenderer.cpp b/examples/quick/scenegraph/rendernode/openglrenderer.cpp
index 2edb6bd929..c84867797d 100644
--- a/examples/quick/scenegraph/rendernode/openglrenderer.cpp
+++ b/examples/quick/scenegraph/rendernode/openglrenderer.cpp
@@ -41,7 +41,7 @@
 #include "openglrenderer.h"
 #include <QQuickItem>
 
-#ifndef QT_NO_OPENGL
+#if QT_CONFIG(opengl)
 
 #include <QOpenGLShaderProgram>
 #include <QOpenGLBuffer>
@@ -161,4 +161,4 @@ QRectF OpenGLRenderNode::rect() const
     return QRect(0, 0, m_item->width(), m_item->height());
 }
 
-#endif // QT_NO_OPENGL
+#endif // opengl
diff --git a/examples/quick/scenegraph/rendernode/openglrenderer.h b/examples/quick/scenegraph/rendernode/openglrenderer.h
index 92cc2bc72b..ea2bbcbc38 100644
--- a/examples/quick/scenegraph/rendernode/openglrenderer.h
+++ b/examples/quick/scenegraph/rendernode/openglrenderer.h
@@ -43,7 +43,7 @@
 
 #include <qsgrendernode.h>
 
-#ifndef QT_NO_OPENGL
+#if QT_CONFIG(opengl)
 
 QT_BEGIN_NAMESPACE
 
@@ -75,6 +75,6 @@ private:
 
 QT_END_NAMESPACE
 
-#endif // QT_NO_OPENGL
+#endif // opengl
 
 #endif
diff --git a/examples/quick/scenegraph/scenegraph.pro b/examples/quick/scenegraph/scenegraph.pro
index e13e8198b0..2efeb5ed83 100644
--- a/examples/quick/scenegraph/scenegraph.pro
+++ b/examples/quick/scenegraph/scenegraph.pro
@@ -7,7 +7,6 @@ qtConfig(opengl(es1|es2)?) {
             sgengine \
             textureinsgnode \
             openglunderqml \
-            textureinsgnode \
             textureinthread \
             twotextureproviders
 }