summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorVenugopal Shivashankar <Venugopal.Shivashankar@qt.io>2016-11-18 17:35:29 +0100
committerShawn Rutledge <shawn.rutledge@qt.io>2016-11-30 14:28:25 +0000
commit63c34dc6c1c6f24f8e83f295adc70fdcc392f8c5 (patch)
tree8081b7de90b5f2deab0fe74af7991229070dbc6c /examples
parent005857c492ff2a907987e5aed4c61163a6f3fc44 (diff)
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>
Diffstat (limited to 'examples')
-rw-r--r--examples/quick/demos/stocqt/content/Banner.qml86
-rw-r--r--examples/quick/demos/stocqt/content/CheckBox.qml1
-rw-r--r--examples/quick/demos/stocqt/content/StockChart.qml535
-rw-r--r--examples/quick/demos/stocqt/content/StockInfo.qml99
-rw-r--r--examples/quick/demos/stocqt/content/StockListDelegate.qml153
-rw-r--r--examples/quick/demos/stocqt/content/StockListView.qml124
-rw-r--r--examples/quick/demos/stocqt/content/StockSettingsPanel.qml204
-rw-r--r--examples/quick/demos/stocqt/content/StockView.qml67
-rw-r--r--examples/quick/demos/stocqt/content/qmldir2
-rw-r--r--examples/quick/demos/stocqt/stocqt.qml115
-rw-r--r--examples/quick/demos/stocqt/stocqt.qrc2
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>