From 793a01d28fb5f0b99b638332214b2267c2ca29db Mon Sep 17 00:00:00 2001 From: Andrew den Exter Date: Thu, 8 Mar 2012 10:50:11 +1000 Subject: [PATCH] Update model view examples to common launcher format. Change-Id: I8dc30a9ade3cbbfa91d51d85617975ad7d46ee15 Reviewed-by: Andrew den Exter Reviewed-by: Alan Alpert --- .../quick/modelviews/listview/dynamiclist.qml | 121 ++++++++------- .../quick/modelviews/listview/highlight.qml | 4 + .../modelviews/listview/highlightranges.qml | 56 +++++-- examples/quick/modelviews/main.cpp | 41 +++++ examples/quick/modelviews/modelviews.pro | 20 ++- examples/quick/modelviews/modelviews.qml | 51 +++++-- .../quick/modelviews/package/Delegate.qml | 18 +-- examples/quick/modelviews/package/view.qml | 22 ++- .../quick/modelviews/parallax/parallax.qml | 2 +- .../visualdatamodel/sortedmodel.qml | 141 ------------------ examples/quick/quick.pro | 4 +- 11 files changed, 235 insertions(+), 245 deletions(-) create mode 100644 examples/quick/modelviews/main.cpp delete mode 100644 examples/quick/modelviews/visualdatamodel/sortedmodel.qml diff --git a/examples/quick/modelviews/listview/dynamiclist.qml b/examples/quick/modelviews/listview/dynamiclist.qml index ee7c6329bc..e6d43a0d61 100644 --- a/examples/quick/modelviews/listview/dynamiclist.qml +++ b/examples/quick/modelviews/listview/dynamiclist.qml @@ -87,70 +87,84 @@ Rectangle { Item { id: delegateItem - width: listView.width; height: 55 + width: listView.width; height: 100 clip: true - Row { - anchors.verticalCenter: parent.verticalCenter - spacing: 10 - - Column { - Image { - source: "content/pics/arrow-up.png" - MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) } - } - Image { source: "content/pics/arrow-down.png" - MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) } - } + Column { + id: arrows + anchors { + left: parent.left + verticalCenter: parent.verticalCenter } - - Column { - anchors.verticalCenter: parent.verticalCenter - - Text { - text: name - font.pixelSize: 15 - color: "white" - } - Row { - spacing: 5 - Repeater { - model: attributes - Text { text: description; color: "White" } - } - } + Image { + source: "content/pics/arrow-up.png" + MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) } + } + Image { source: "content/pics/arrow-down.png" + MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) } } } - Row { - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - spacing: 10 - - PressAndHoldButton { - anchors.verticalCenter: parent.verticalCenter - source: "content/pics/plus-sign.png" - onClicked: fruitModel.setProperty(index, "cost", cost + 0.25) + Column { + anchors { + left: arrows.right + horizontalCenter: parent.horizontalCenter; + bottom: parent.verticalCenter } - Text { - id: costText - anchors.verticalCenter: parent.verticalCenter - text: '$' + Number(cost).toFixed(2) + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: name font.pixelSize: 15 color: "white" - font.bold: true } + Row { + anchors.horizontalCenter: parent.horizontalCenter + spacing: 5 + Repeater { + model: attributes + Text { text: description; color: "White" } + } + } + } - PressAndHoldButton { - anchors.verticalCenter: parent.verticalCenter - source: "content/pics/minus-sign.png" - onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25)) + Item { + anchors { + left: arrows.right + horizontalCenter: parent.horizontalCenter; + top: parent.verticalCenter + bottom: parent.bottom } - Image { - source: "content/pics/list-delete.png" - MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) } + Row { + anchors.centerIn: parent + spacing: 10 + + PressAndHoldButton { + anchors.verticalCenter: parent.verticalCenter + source: "content/pics/plus-sign.png" + onClicked: fruitModel.setProperty(index, "cost", cost + 0.25) + } + + Text { + id: costText + anchors.verticalCenter: parent.verticalCenter + text: '$' + Number(cost).toFixed(2) + font.pixelSize: 15 + color: "white" + font.bold: true + } + + PressAndHoldButton { + anchors.verticalCenter: parent.verticalCenter + source: "content/pics/minus-sign.png" + onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25)) + } + + Image { + source: "content/pics/list-delete.png" + MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) } + } } } @@ -174,12 +188,17 @@ Rectangle { // The view: ListView { id: listView - anchors.fill: parent; anchors.margins: 20 + anchors { + left: parent.left; top: parent.top; + right: parent.right; bottom: buttons.top; + margins: 20 + } model: fruitModel delegate: listDelegate } Row { + id: buttons anchors { left: parent.left; bottom: parent.bottom; margins: 20 } spacing: 10 diff --git a/examples/quick/modelviews/listview/highlight.qml b/examples/quick/modelviews/listview/highlight.qml index d8f76080e6..2dca1f4b18 100644 --- a/examples/quick/modelviews/listview/highlight.qml +++ b/examples/quick/modelviews/listview/highlight.qml @@ -69,6 +69,10 @@ Rectangle { transitions: Transition { NumberAnimation { properties: "x"; duration: 200 } } + MouseArea { + anchors.fill: parent + onClicked: wrapper.ListView.view.currentIndex = index + } } } diff --git a/examples/quick/modelviews/listview/highlightranges.qml b/examples/quick/modelviews/listview/highlightranges.qml index a536ddcbb2..1cf5c06f45 100644 --- a/examples/quick/modelviews/listview/highlightranges.qml +++ b/examples/quick/modelviews/listview/highlightranges.qml @@ -44,7 +44,27 @@ import "content" Rectangle { id: root property int current: 0 - width: 600; height: 300 + // Example index automation for convenience, disabled on click or tap + SequentialAnimation on current { + id: anim + loops: -1 + NumberAnimation { + duration: 5000 + to: aModel.count - 1 + } + NumberAnimation { + duration: 5000 + to: 0 + } + } + MouseArea{ + id: ma + z: 1 + anchors.fill: parent + onClicked: {ma.enabled = false; anim.running = false;} + } + + width: 320; height: 480 // This example shows the same model in three different ListView items, // with different highlight ranges. The highlight ranges are set by the @@ -72,9 +92,10 @@ Rectangle { ListView { id: list1 - width: 200; height: parent.height - model: PetsModel {} + height: 160; width: parent.width + model: PetsModel {id: aModel} delegate: petDelegate + orientation: ListView.Horizontal highlight: Rectangle { color: "lightsteelblue" } currentIndex: root.current @@ -84,10 +105,11 @@ Rectangle { ListView { id: list2 - x: list1.width - width: 200; height: parent.height + y: list1.height + height: 160; width: parent.width model: PetsModel {} delegate: petDelegate + orientation: ListView.Horizontal highlight: Rectangle { color: "yellow" } currentIndex: root.current @@ -97,10 +119,11 @@ Rectangle { ListView { id: list3 - x: list1.width + list2.width - width: 200; height: parent.height + y: list1.height + list2.height + height: 160; width: parent.width model: PetsModel {} delegate: petDelegate + orientation: ListView.Horizontal highlight: Rectangle { color: "yellow" } currentIndex: root.current @@ -112,11 +135,20 @@ Rectangle { // The delegate for each list Component { id: petDelegate - Column { - width: 200 - Text { text: 'Name: ' + name } - Text { text: 'Type: ' + type } - Text { text: 'Age: ' + age } + Item { + width: 160 + height: column.height + Column { + id: column + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + + MouseArea { + anchors.fill: parent + onClicked: wrapper.ListView.view.currentIndex = index + } } } } diff --git a/examples/quick/modelviews/main.cpp b/examples/quick/modelviews/main.cpp new file mode 100644 index 0000000000..77f0e59b34 --- /dev/null +++ b/examples/quick/modelviews/main.cpp @@ -0,0 +1,41 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** 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 Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +#include "../../shared/shared.h" +DECLARATIVE_EXAMPLE_MAIN(modelviews) diff --git a/examples/quick/modelviews/modelviews.pro b/examples/quick/modelviews/modelviews.pro index 7748da0471..59c5e231a2 100644 --- a/examples/quick/modelviews/modelviews.pro +++ b/examples/quick/modelviews/modelviews.pro @@ -1,8 +1,18 @@ -TEMPLATE = subdirs +TEMPLATE = app -SUBDIRS += \ - abstractitemmodel \ - objectlistmodel \ - stringlistmodel +QT += quick qml +SOURCES += main.cpp +target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/modelviews +qml.files = \ + modelviews.qml \ + gridview \ + listview \ + package \ + parallax \ + pathview \ + visualdatamodel \ + visualitemmodel +qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/modelviews +INSTALLS += target qml diff --git a/examples/quick/modelviews/modelviews.qml b/examples/quick/modelviews/modelviews.qml index f11608bcc7..ce0880c057 100644 --- a/examples/quick/modelviews/modelviews.qml +++ b/examples/quick/modelviews/modelviews.qml @@ -39,26 +39,49 @@ ****************************************************************************/ import QtQuick 2.0 -import "../../shared" +import "../../shared" as Examples + +/*! + \title QtQuick Examples - ModelViews + \example quick/modelviews + \brief This is a collection of QML drag and drop examples + \image qml-modelviews-example.png + + This is a collection of small QML examples relating to model and view functionality. + + GridView and PathView demonstrate usage of these elements to display views. + + Dynamic List demonstrates runtime modification of a ListModel. + + Expanding Delegates demonstrates delegates that expand when activated. + + Highlight demonstrates adding a custom highlight to a ListView. + + Highlight Ranges shows the three different highlight range modes of ListView. + + Sections demonstrates the various section headers and footers available to ListView. + + Packages demonstrates using Packages to transition delegates between two views. + + VisualItemModel uses a VisualItemModel for the model instead of a ListModel. +*/ Item { height: 480 - width: 480 - LauncherList { + width: 320 + Examples.LauncherList { id: ll anchors.fill: parent Component.onCompleted: { - addExample("Dynamic List", "A ListView harboring dynamic data", Qt.resolvedUrl("listview/dynamiclist.qml")); - addExample("Expanding Delegates", "Delegates that expand to fill the list when clicked", Qt.resolvedUrl("listview/expandingdelegates.qml")); - addExample("Highlight", "Adding a highlight to the current item", Qt.resolvedUrl("listview/highlight.qml")); - addExample("Sections", "A ListView with section headers", Qt.resolvedUrl("listview/sections.qml")); - addExample("GridView", "A view laid out in a grid", Qt.resolvedUrl("gridview/gridview-example.qml")); - addExample("PathView", "A view laid out along a path", Qt.resolvedUrl("pathview/pathview-example.qml")); - addExample("Package", "Using a package to transition items between views", Qt.resolvedUrl("package/view.qml")); - addExample("Parallax", "Adds a background and a parallax effect to a ListView", Qt.resolvedUrl("parallax/parallax.qml")); - addExample("Slideshow", "A model demonstrating delayed image loading", Qt.resolvedUrl("visualdatamodel/slideshow.qml")); - addExample("Sorted Model", "Two views on a model, one of which is sorted", Qt.resolvedUrl("visualdatamodel/sortedmodel.qml")); - addExample("VisualItemModel", "A model that consists of the actual Items", Qt.resolvedUrl("visualitemmodel/visualitemmodel.qml")); + addExample("GridView", "A simple GridView", Qt.resolvedUrl("gridview/gridview-example.qml")) + addExample("Dynamic List", "A dynamically alterable list", Qt.resolvedUrl("listview/dynamiclist.qml")) + addExample("Expanding Delegates", "A ListView with delegates that expand", Qt.resolvedUrl("listview/expandingdelegates.qml")) + addExample("Highlight", "A ListView with a custom highlight", Qt.resolvedUrl("listview/highlight.qml")) + addExample("Highlight Ranges", "The three highlight ranges of ListView", Qt.resolvedUrl("listview/highlightranges.qml")) + addExample("Sections", "ListView section headers and footers", Qt.resolvedUrl("listview/sections.qml")) + addExample("Packages", "Transitions between a ListView and GridView", Qt.resolvedUrl("package/view.qml")) + addExample("PathView", "A simple PathView", Qt.resolvedUrl("pathview/pathview-example.qml")) + addExample("VisualItemModel", "Using a VisualItemModel", Qt.resolvedUrl("visualitemmodel/visualitemmodel.qml")) } } } diff --git a/examples/quick/modelviews/package/Delegate.qml b/examples/quick/modelviews/package/Delegate.qml index 97c7840cb4..3028318f10 100644 --- a/examples/quick/modelviews/package/Delegate.qml +++ b/examples/quick/modelviews/package/Delegate.qml @@ -42,26 +42,16 @@ import QtQuick 2.0 //![0] Package { - Text { id: listDelegate; width: 200; height: 25; text: 'Empty'; Package.name: 'list' } - Text { id: gridDelegate; width: 100; height: 50; text: 'Empty'; Package.name: 'grid' } + Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' } + Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' } Rectangle { id: wrapper - width: 200; height: 25 + width: parent.width; height: 25 color: 'lightsteelblue' Text { text: display; anchors.centerIn: parent } - MouseArea { - anchors.fill: parent - onClicked: { - if (wrapper.state == 'inList') - wrapper.state = 'inGrid'; - else - wrapper.state = 'inList'; - } - } - - state: 'inList' + state: root.upTo > index ? 'inGrid' : 'inList' states: [ State { name: 'inList' diff --git a/examples/quick/modelviews/package/view.qml b/examples/quick/modelviews/package/view.qml index 7ba6664ae2..b12dec3de2 100644 --- a/examples/quick/modelviews/package/view.qml +++ b/examples/quick/modelviews/package/view.qml @@ -41,9 +41,16 @@ import QtQuick 2.0 Rectangle { + id: root color: "white" - width: 400 - height: 200 + width: 320 + height: 480 + property int upTo: 0 + SequentialAnimation on upTo { + loops: -1 + NumberAnimation { to: 8; duration: 3500 } + NumberAnimation { to: 0; duration: 3500 } + } ListModel { id: myModel @@ -64,17 +71,22 @@ Rectangle { } ListView { - width: 200; height:200 + id: lv + height: parent.height/2 + width: parent.width + model: visualModel.parts.list } GridView { - x: 200; width: 200; height:200 + y: parent.height/2 + height: parent.height/2 + width: parent.width + cellWidth: width / 2 cellHeight: 50 model: visualModel.parts.grid } //![0] Text { anchors.bottom: parent.bottom - text: "Tap a delegate to move between views" } } diff --git a/examples/quick/modelviews/parallax/parallax.qml b/examples/quick/modelviews/parallax/parallax.qml index 30578e510e..9e0a957f97 100644 --- a/examples/quick/modelviews/parallax/parallax.qml +++ b/examples/quick/modelviews/parallax/parallax.qml @@ -69,7 +69,7 @@ Rectangle { anchors { top: parent.top; topMargin: 10; horizontalCenter: parent.horizontalCenter } width: 300; height: 400 clip: true; - source: "../../samegame/samegame.qml" + source: "../../../demos/samegame/samegame.qml" } } } diff --git a/examples/quick/modelviews/visualdatamodel/sortedmodel.qml b/examples/quick/modelviews/visualdatamodel/sortedmodel.qml deleted file mode 100644 index 8d3b0a58e5..0000000000 --- a/examples/quick/modelviews/visualdatamodel/sortedmodel.qml +++ /dev/null @@ -1,141 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/ -** -** 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 Nokia Corporation and its Subsidiary(-ies) 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 - -Rectangle { - width: 480; height: 640 - - Component { - id: numberDelegate - - Text { - id: numberText - anchors { left: parent.left; right: parent.right } - text: number - - horizontalAlignment: Text.AlignHCenter - font.pixelSize: 18 - - Text { - anchors { left: parent.left; baseline: parent.baseline } - text: index - - horizontalAlignment: Text.AlignLeft - font.pixelSize: 12 - } - Text { - anchors { right: parent.right; baseline: parent.baseline } - text: numberText.VisualDataModel.itemsIndex - - horizontalAlignment: Text.AlignRight - font.pixelSize: 12 - } - } - } - - ListView { - anchors { - left: parent.left; top: parent.top; - right: parent.horizontalCenter; bottom: button.top - leftMargin: 2; topMargin: 2; rightMargin: 1; bottomMargin: 2 - } - - model: ListModel { - id: unsortedModel - } - delegate: numberDelegate - } - ListView { - anchors { - left: parent.horizontalCenter; top: parent.top; - right: parent.right; bottom: button.top - leftMargin: 1; topMargin: 2; rightMargin: 2; bottomMargin: 2 - } - model: VisualDataModel { - model: unsortedModel - delegate: numberDelegate - - items.onChanged: { - for (var i = 0; i < inserted.length; ++i) { - for (var j = inserted[i].index; j < inserted[i].index + inserted[i].count; ++j) { - var number = items.get(j).model.number - for (var l = 0, k = 0; l < unsortedModel.count; ++l) { - if (l == inserted[k].index) { - l += inserted[k].count - 1 - ++k - } else if (number < items.get(l).model.number) { - items.move(j, l, 1) - break - } - } - inserted[i].index += 1; - inserted[i].count -= 1; - } - } - } - } - } - - Rectangle { - id: button - - anchors { left: parent.left; right: parent.right; bottom: parent.bottom; margins: 2 } - height: moreText.implicitHeight + 4 - - color: "black" - - Text { - id: moreText - - anchors.fill: parent - text: "More" - color: "white" - font.pixelSize: 18 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - MouseArea { - anchors.fill: parent - - onClicked: unsortedModel.append({ "number": Math.floor(Math.random() * 100) }) - } - } -} diff --git a/examples/quick/quick.pro b/examples/quick/quick.pro index 529f65ac25..d715d4787c 100644 --- a/examples/quick/quick.pro +++ b/examples/quick/quick.pro @@ -1,11 +1,11 @@ TEMPLATE = subdirs SUBDIRS = accessibility \ animation \ - draganddrop + draganddrop \ #canvas \ #imageelements \ #keyinteraction \ - #modelviews \ + modelviews \ #mousearea \ #openglunderqml \ #painteditem \