StocQt example: Use QtQuick.Layouts instead of anchors

- Move the StockListView delegate and the top banner to
separate files.
- Use QtQuick.Layouts in place of anchors for most parts,
improving code readability and app scalability.

Change-Id: Ie8f13ef261bb343f15e9484bd15f8b94101daeb5
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>

11 files changed, 734 insertions, 654 deletions

diff --git a/examples/quick/demos/stocqt/content/Banner.qml b/examples/quick/demos/stocqt/content/Banner.qml
new file mode 100644
index 0000000000..8d64e88410
--- /dev/null
+++ b/examples/quick/demos/stocqt/content/Banner.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** 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.0
+import QtQuick.Layouts 1.1
+
+Rectangle {
+    id: banner
+    height: 80
+    color: "#000000"
+
+    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
+
+                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
+        }
+    }
+}
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>