From b6f7fe1f80e6beed62ef47691fae6aa9f4a851b8 Mon Sep 17 00:00:00 2001 From: Venugopal Shivashankar Date: Wed, 3 Oct 2018 13:50:13 +0200 Subject: Examples: Use XmlHttpRequest to fetch flickr public photos This change is to facilite moving the XmlListModel code to the qtxmlpatterns repo, but still keep all the Particles examples together. Also fixed: - the old TODO about darkening images according to depth, and make it generally look a bit better. - move the visualdatamodel examples to a directory called delegatemodel, since that's how they work now. And add them to the main "views" example launcher so that they become more visible to users. Change-Id: I78f9f19e1e110608580adedcf4cd3be554222515 Reviewed-by: Shawn Rutledge --- .../particles/itemparticle/content/RssModel.qml | 66 ------- .../quick/particles/itemparticle/itemparticle.pro | 12 ++ examples/quick/particles/itemparticle/main.cpp | 51 +++++ .../quick/particles/itemparticle/particleview.qml | 116 ++++++----- examples/quick/particles/particles.pro | 4 +- examples/quick/shared/FlickrRssModel.qml | 86 +++++++++ examples/quick/shared/shared.qrc | 1 + .../views/delegatemodel/delegatemodel.qmlproject | 14 ++ .../quick/views/delegatemodel/dragselection.qml | 211 +++++++++++++++++++++ examples/quick/views/delegatemodel/slideshow.qml | 162 ++++++++++++++++ examples/quick/views/views.qml | 2 + examples/quick/views/views.qrc | 4 +- .../quick/views/visualdatamodel/dragselection.qml | 211 --------------------- examples/quick/views/visualdatamodel/slideshow.qml | 167 ---------------- .../visualdatamodel/visualdatamodel.qmlproject | 14 -- 15 files changed, 611 insertions(+), 510 deletions(-) delete mode 100644 examples/quick/particles/itemparticle/content/RssModel.qml create mode 100644 examples/quick/particles/itemparticle/itemparticle.pro create mode 100644 examples/quick/particles/itemparticle/main.cpp create mode 100644 examples/quick/shared/FlickrRssModel.qml create mode 100644 examples/quick/views/delegatemodel/delegatemodel.qmlproject create mode 100644 examples/quick/views/delegatemodel/dragselection.qml create mode 100644 examples/quick/views/delegatemodel/slideshow.qml delete mode 100644 examples/quick/views/visualdatamodel/dragselection.qml delete mode 100644 examples/quick/views/visualdatamodel/slideshow.qml delete mode 100644 examples/quick/views/visualdatamodel/visualdatamodel.qmlproject (limited to 'examples/quick') diff --git a/examples/quick/particles/itemparticle/content/RssModel.qml b/examples/quick/particles/itemparticle/content/RssModel.qml deleted file mode 100644 index d839087301..0000000000 --- a/examples/quick/particles/itemparticle/content/RssModel.qml +++ /dev/null @@ -1,66 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2017 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:BSD$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, 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.XmlListModel 2.0 - -XmlListModel { - property string tags : "" - - function encodeTags(x) { return encodeURIComponent(x.replace(' ',',')); } - - source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+encodeTags(tags)+"&" : "") - query: "/feed/entry" - namespaceDeclarations: "declare default element namespace 'http://www.w3.org/2005/Atom';" - - XmlRole { name: "title"; query: "title/string()" } - XmlRole { name: "content"; query: "content/string()" } - XmlRole { name: "hq"; query: "link[@rel='enclosure']/@href/string()" } -} diff --git a/examples/quick/particles/itemparticle/itemparticle.pro b/examples/quick/particles/itemparticle/itemparticle.pro new file mode 100644 index 0000000000..f5c0576b4a --- /dev/null +++ b/examples/quick/particles/itemparticle/itemparticle.pro @@ -0,0 +1,12 @@ +TEMPLATE = app + +QT += quick qml +SOURCES += main.cpp +RESOURCES += \ + ../images.qrc \ + ../../shared/shared.qrc \ + $$files("content/*") \ + $$files("*qml") + +target.path = $$[QT_INSTALL_EXAMPLES]/quick/particles/itemparticle +INSTALLS += target diff --git a/examples/quick/particles/itemparticle/main.cpp b/examples/quick/particles/itemparticle/main.cpp new file mode 100644 index 0000000000..da21f15be3 --- /dev/null +++ b/examples/quick/particles/itemparticle/main.cpp @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +#include "../../shared/shared.h" +DECLARATIVE_EXAMPLE_MAIN(particleview) diff --git a/examples/quick/particles/itemparticle/particleview.qml b/examples/quick/particles/itemparticle/particleview.qml index 8d7b1eb66b..3b412e37e5 100644 --- a/examples/quick/particles/itemparticle/particleview.qml +++ b/examples/quick/particles/itemparticle/particleview.qml @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2017 The Qt Company Ltd. +** Copyright (C) 2018 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of the Qt Toolkit. @@ -48,8 +48,9 @@ ** ****************************************************************************/ -import QtQuick 2.0 -import QtQuick.Particles 2.0 +import QtQuick 2.12 +import QtQuick.Particles 2.12 +import "shared" as Shared import "content/script.js" as Script import "content" @@ -96,7 +97,7 @@ Item { ImageParticle { system: sys groups: ["fireworks"] - source: "qrc:particleresources/star.png" + source: "qrc:///particleresources/star.png" color: "lightsteelblue" alpha: 0 colorVariation: 0 @@ -112,8 +113,13 @@ Item { Component { id: alertDelegate Rectangle { - width: 132 + color: "DarkSlateGray" + border.width: 1 + border.color: "LightSteelBlue" + width: 144 height: 132 + antialiasing: true + radius: 3 NumberAnimation on scale { running: true loops: 1 @@ -121,13 +127,14 @@ Item { to: 1 } Image { - source: "../asteroid/../images/rocket.png" + source: "qrc:///particles/images/rocket.png" anchors.centerIn: parent } Text { anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter text: "A new ship has arrived!" + color: "LightSteelBlue" } } } @@ -198,84 +205,97 @@ Item { } Item { x: -1000; y: -1000 //offscreen Repeater {//Load them here, add to system on completed - model: theModel + model: flickrModel delegate: theDelegate } } - RssModel {id: theModel; tags:"particle,particles"} + Shared.FlickrRssModel { + id: flickrModel + tags: "particle,particles" + } Component { id: theDelegate - Rectangle { - id: container - border.width: 2 - antialiasing: true - property real myRand: Math.random();//'depth' - z: Math.floor(myRand * 100) - scale: (myRand + 1.0)/2; - //TODO: Darken based on 'depth' + Image { + id: image + antialiasing: true; + source: thumbnail + cache: true + property real depth: Math.random() + property real darken: 0.75 + z: Math.floor(depth * 100) + scale: (depth + 1) / 2 + sourceSize { + width: root.width + height: root.height + } width: 132 height: 132 - //ItemParticle.onAttached: console.log("I'm in" + x + "," + y + ":" + opacity); - ItemParticle.onDetached: mp.take(container);//respawns - function manage() - { - if (state == "selected") { - console.log("Taking " + index); - mp.freeze(container); - } else { - console.log("Returning " +index); - mp.unfreeze(container); - } - } - Image { - id: img + fillMode: Image.PreserveAspectFit + Rectangle { + // Darken based on depth anchors.centerIn: parent + width: parent.paintedWidth + 1 + height: parent.paintedHeight + 1 + color: "black" + opacity: darken * (1 - depth) antialiasing: true; - source: "http://" + Script.getImagePath(content); cache: true - fillMode: Image.PreserveAspectFit; - width: parent.width-4; height: parent.height-4 - onStatusChanged: if (img.status == Image.Ready) { - loading.opacity = 0; - mp.take(container); - } } Text { anchors.bottom: parent.bottom - width: parent.width + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottomMargin: Math.max(parent.paintedWidth, parent.paintedHeight) - Math.min(parent.width, parent.height) + width: parent.paintedWidth - 4 horizontalAlignment: Text.AlignHCenter elide: Text.ElideRight text: title color: "black" } - MouseArea { - anchors.fill: parent - onClicked: container.state == "selected" ? container.state = "" : container.state = "selected" + ItemParticle.onDetached: mp.take(image); // respawns + onStatusChanged: if (image.status == Image.Ready) { + loading.opacity = 0; + mp.take(image); + } + function manage() + { + if (state == "selected") { + console.log("Taking " + index); + mp.freeze(image); + } else { + console.log("Returning " +index); + mp.unfreeze(image); + } + } + TapHandler { + gesturePolicy: TapHandler.ReleaseWithinBounds + onTapped: image.state = (image.state == "" ? "selected" : "") } states: State { name: "selected" ParentChange { - target: container + target: image parent: root - x: 0 - y: 0 } PropertyChanges { - target: container + target: image + source: media + x: 0 + y: 0 width: root.width height: root.height z: 101 opacity: 1 rotation: 0 + darken: 0 } } transitions: Transition { to: "selected" reversible: true SequentialAnimation { - ScriptAction {script: container.manage();} + ScriptAction { script: image.manage() } ParallelAnimation { - ParentAnimation {NumberAnimation { properties: "x,y" }}//Doesn't work, particles takes control of x,y instantly - NumberAnimation { properties: "width, height, z, rotation" } + ParentAnimation {NumberAnimation { properties: "x,y" }} + PropertyAnimation { properties: "width, height, z, rotation, darken"; easing.type: Easing.InOutQuad } } } } diff --git a/examples/quick/particles/particles.pro b/examples/quick/particles/particles.pro index 2ea61751fb..db9033a961 100644 --- a/examples/quick/particles/particles.pro +++ b/examples/quick/particles/particles.pro @@ -3,11 +3,11 @@ SUBDIRS += affectors \ customparticle \ emitters \ imageparticle \ + itemparticle \ system EXAMPLE_FILES = \ - images.qrc \ - itemparticle + images.qrc #Install shared images too qml.files = images diff --git a/examples/quick/shared/FlickrRssModel.qml b/examples/quick/shared/FlickrRssModel.qml new file mode 100644 index 0000000000..cee4022bf0 --- /dev/null +++ b/examples/quick/shared/FlickrRssModel.qml @@ -0,0 +1,86 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, 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.12 + +ListModel { + id: flickrImages + property string tags : "" + readonly property string queryUrl : "http://api.flickr.com/services/feeds/photos_public.gne?" + + function encodeParams(x) { + return encodeURIComponent(x.replace(" ",",")); + } + function fetchImages(format) { + var requestURL = queryUrl + (tags ? "tags="+encodeParams(tags)+"&" : "") + "format=" + format + "&nojsoncallback=1"; + var xhr = new XMLHttpRequest; + xhr.onreadystatechange = function() { + if (xhr.readyState === XMLHttpRequest.DONE) { + var jsonText = xhr.responseText; + var objArray = JSON.parse(jsonText.replace(/\'/g,"'")) + if (objArray.errors !== undefined) + console.log(lCategory, "Error fetching tweets: " + imageItems.errors[0].message) + else { + for (var key in objArray.items) { + var rssItem = objArray.items[key]; + var jsonObject = "{ \"title\": \"" + rssItem.title +"\",\"media\": \"" + rssItem.media.m + "\", \"thumbnail\": \"" + rssItem.media.m.replace(/\_m\.jpg/,"_s.jpg") +"\"}" + flickrImages.append(JSON.parse(jsonObject)); + } + } + } + } + xhr.open("GET", requestURL, true); + xhr.send(); + } + Component.onCompleted: { + fetchImages("json"); + } +} + diff --git a/examples/quick/shared/shared.qrc b/examples/quick/shared/shared.qrc index 89b3ff757e..cce683f8a3 100644 --- a/examples/quick/shared/shared.qrc +++ b/examples/quick/shared/shared.qrc @@ -1,5 +1,6 @@ + FlickrRssModel.qml LauncherList.qml SimpleLauncherDelegate.qml Button.qml diff --git a/examples/quick/views/delegatemodel/delegatemodel.qmlproject b/examples/quick/views/delegatemodel/delegatemodel.qmlproject new file mode 100644 index 0000000000..2bb4016996 --- /dev/null +++ b/examples/quick/views/delegatemodel/delegatemodel.qmlproject @@ -0,0 +1,14 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} diff --git a/examples/quick/views/delegatemodel/dragselection.qml b/examples/quick/views/delegatemodel/dragselection.qml new file mode 100644 index 0000000000..15fd2654c2 --- /dev/null +++ b/examples/quick/views/delegatemodel/dragselection.qml @@ -0,0 +1,211 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, 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 QtQml.Models 2.1 + +Item { + id: root + + width: 320 + height: 480 + + property bool dragging: false + + Component { + id: packageDelegate + Package { + id: packageRoot + + MouseArea { + id: visibleContainer + Package.name: "visible" + + width: 64 + height: 64 + enabled: packageRoot.DelegateModel.inSelected + + drag.target: draggable + + Item { + id: draggable + + width: 64 + height: 64 + + Drag.active: visibleContainer.drag.active + + anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } + + states: State { + when: visibleContainer.drag.active + AnchorChanges { target: draggable; anchors { horizontalCenter: undefined; verticalCenter: undefined} } + ParentChange { target: selectionView; parent: draggable; x: 0; y: 0 } + PropertyChanges { target: root; dragging: true } + ParentChange { target: draggable; parent: root } + } + } + DropArea { + anchors.fill: parent + onEntered: selectedItems.move(0, visualModel.items.get(packageRoot.DelegateModel.itemsIndex), selectedItems.count) + } + } + Item { + id: selectionContainer + Package.name: "selection" + + width: 64 + height: 64 + + visible: PathView.onPath + } + Rectangle { + id: content + parent: visibleContainer + + width: 58 + height: 58 + + radius: 8 + + gradient: Gradient { + GradientStop { id: gradientStart; position: 0.0; color: "#8AC953" } + GradientStop { id: gradientEnd; position: 1.0; color: "#8BC953" } + } + + border.width: 2 + border.color: "#007423" + + state: root.dragging && packageRoot.DelegateModel.inSelected ? "selected" : "visible" + + Text { + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: "white" + text: modelData + font.pixelSize: 18 + } + + Rectangle { + anchors { right: parent.right; top: parent.top; margins: 3 } + width: 12; height: 12 + color: packageRoot.DelegateModel.inSelected ? "black" : "white" + radius: 6 + + border.color: "white" + border.width: 2 + + MouseArea { + anchors.fill: parent + onClicked: packageRoot.DelegateModel.inSelected = !packageRoot.DelegateModel.inSelected + } + } + + states: [ + State { + name: "selected" + ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 } + PropertyChanges { target: packageRoot; DelegateModel.inItems: visibleContainer.drag.active } + PropertyChanges { target: gradientStart; color: "#017423" } + PropertyChanges { target: gradientStart; color: "#007423" } + }, State { + name: "visible" + PropertyChanges { target: packageRoot; DelegateModel.inItems: true } + ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 } + PropertyChanges { target: gradientStart; color: "#8AC953" } + PropertyChanges { target: gradientStart; color: "#8BC953" } + } + ] + transitions: Transition { + PropertyAction { target: packageRoot; properties: "DelegateModel.inItems" } + ParentAnimation { + target: content + NumberAnimation { target: content; properties: "x,y"; duration: 500 } + } + ColorAnimation { targets: [gradientStart, gradientEnd]; duration: 500 } + } + } + } + } + + DelegateModel { + id: visualModel + model: 35 + delegate: packageDelegate + + groups: DelegateModelGroup { id: selectedItems; name: "selected" } + + Component.onCompleted: parts.selection.filterOnGroup = "selected" + } + + PathView { + id: selectionView + + height: 64 + width: 64 + + model: visualModel.parts.selection + + path: Path { + startX: 0 + startY: 0 + PathLine { x: 64; y: 64 } + } + } + + GridView { + id: itemsView + anchors { fill: parent } + cellWidth: 64 + cellHeight: 64 + model: visualModel.parts.visible + } +} diff --git a/examples/quick/views/delegatemodel/slideshow.qml b/examples/quick/views/delegatemodel/slideshow.qml new file mode 100644 index 0000000000..b252519bbf --- /dev/null +++ b/examples/quick/views/delegatemodel/slideshow.qml @@ -0,0 +1,162 @@ +/**************************************************************************** +** +** Copyright (C) 2018 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, 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.12 +import QtQml.Models 2.12 +import "../../shared" as Shared + +Rectangle { + id: root + + property Item displayItem: null + + width: 300; height: 400 + + color: "black" + + Shared.FlickrRssModel { + id: flickrModel + tags: "fjords,mountains" + } + DelegateModel { + id: visualModel + + model: flickrModel + delegate: Item { + id: delegateItem + + width: 76; height: 76 + + Rectangle { + id: image + x: 0; y: 0; width: 76; height: 76 + border.width: 1 + border.color: "white" + color: "black" + + Image { + anchors.fill: parent + anchors.leftMargin: 1 + anchors.topMargin: 1 + + source: thumbnail + fillMode: Image.PreserveAspectFit + } + + MouseArea { + id: clickArea + anchors.fill: parent + + onClicked: root.displayItem = root.displayItem !== delegateItem ? delegateItem : null + } + + states: [ + State { + when: root.displayItem === delegateItem + name: "inDisplay"; + ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 } + PropertyChanges { target: image; z: 2 } + PropertyChanges { target: delegateItem; DelegateModel.inItems: false } + }, + State { + when: root.displayItem !== delegateItem + name: "inList"; + ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 } + PropertyChanges { target: image; z: 1 } + PropertyChanges { target: delegateItem; DelegateModel.inItems: true } + } + ] + + transitions: [ + Transition { + from: "inList" + SequentialAnimation { + PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: true } + ParentAnimation { + target: image; + via: root + NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } + } + } + }, Transition { + from: "inDisplay" + SequentialAnimation { + ParentAnimation { + target: image + NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } + } + PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: false } + } + } + ] + } + } + } + + + PathView { + id: imagePath + + anchors { left: parent.left; top: imageContainer.bottom; right: parent.right; bottom: parent.bottom } + model: visualModel + + pathItemCount: 7 + path: Path { + startX: -50; startY: 0 + PathQuad { x: 150; y: 50; controlX: 0; controlY: 50 } + PathQuad { x: 350; y: 0; controlX: 300; controlY: 50 } + } + } + + Item { + id: imageContainer + anchors { fill: parent; bottomMargin: 100 } + } +} diff --git a/examples/quick/views/views.qml b/examples/quick/views/views.qml index 87f85856ff..bdf05269ae 100644 --- a/examples/quick/views/views.qml +++ b/examples/quick/views/views.qml @@ -69,6 +69,8 @@ Item { addExample("PathView", "A simple PathView", Qt.resolvedUrl("pathview/pathview-example.qml")) addExample("ObjectModel", "Using a ObjectModel", Qt.resolvedUrl("objectmodel/objectmodel.qml")) addExample("Display Margins", "A ListView with display margins", Qt.resolvedUrl("listview/displaymargin.qml")) + addExample("DelegateModel", "A PathView using DelegateModel to instantiate delegates", Qt.resolvedUrl("delegatemodel/slideshow.qml")) + addExample("Draggable Selections", "Enabling drag-and-drop on DelegateModel delegates", Qt.resolvedUrl("delegatemodel/dragselection.qml")) } } } diff --git a/examples/quick/views/views.qrc b/examples/quick/views/views.qrc index 547dbea992..1646c49e81 100644 --- a/examples/quick/views/views.qrc +++ b/examples/quick/views/views.qrc @@ -41,8 +41,8 @@ pathview/pics/EMail_48.png pathview/pics/TodoList_48.png pathview/pics/VideoPlayer_48.png - visualdatamodel/slideshow.qml - visualdatamodel/dragselection.qml + delegatemodel/slideshow.qml + delegatemodel/dragselection.qml objectmodel/objectmodel.qml views.qml listview/displaymargin.qml diff --git a/examples/quick/views/visualdatamodel/dragselection.qml b/examples/quick/views/visualdatamodel/dragselection.qml deleted file mode 100644 index 15fd2654c2..0000000000 --- a/examples/quick/views/visualdatamodel/dragselection.qml +++ /dev/null @@ -1,211 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2017 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:BSD$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, 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 QtQml.Models 2.1 - -Item { - id: root - - width: 320 - height: 480 - - property bool dragging: false - - Component { - id: packageDelegate - Package { - id: packageRoot - - MouseArea { - id: visibleContainer - Package.name: "visible" - - width: 64 - height: 64 - enabled: packageRoot.DelegateModel.inSelected - - drag.target: draggable - - Item { - id: draggable - - width: 64 - height: 64 - - Drag.active: visibleContainer.drag.active - - anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } - - states: State { - when: visibleContainer.drag.active - AnchorChanges { target: draggable; anchors { horizontalCenter: undefined; verticalCenter: undefined} } - ParentChange { target: selectionView; parent: draggable; x: 0; y: 0 } - PropertyChanges { target: root; dragging: true } - ParentChange { target: draggable; parent: root } - } - } - DropArea { - anchors.fill: parent - onEntered: selectedItems.move(0, visualModel.items.get(packageRoot.DelegateModel.itemsIndex), selectedItems.count) - } - } - Item { - id: selectionContainer - Package.name: "selection" - - width: 64 - height: 64 - - visible: PathView.onPath - } - Rectangle { - id: content - parent: visibleContainer - - width: 58 - height: 58 - - radius: 8 - - gradient: Gradient { - GradientStop { id: gradientStart; position: 0.0; color: "#8AC953" } - GradientStop { id: gradientEnd; position: 1.0; color: "#8BC953" } - } - - border.width: 2 - border.color: "#007423" - - state: root.dragging && packageRoot.DelegateModel.inSelected ? "selected" : "visible" - - Text { - anchors.fill: parent - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: "white" - text: modelData - font.pixelSize: 18 - } - - Rectangle { - anchors { right: parent.right; top: parent.top; margins: 3 } - width: 12; height: 12 - color: packageRoot.DelegateModel.inSelected ? "black" : "white" - radius: 6 - - border.color: "white" - border.width: 2 - - MouseArea { - anchors.fill: parent - onClicked: packageRoot.DelegateModel.inSelected = !packageRoot.DelegateModel.inSelected - } - } - - states: [ - State { - name: "selected" - ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 } - PropertyChanges { target: packageRoot; DelegateModel.inItems: visibleContainer.drag.active } - PropertyChanges { target: gradientStart; color: "#017423" } - PropertyChanges { target: gradientStart; color: "#007423" } - }, State { - name: "visible" - PropertyChanges { target: packageRoot; DelegateModel.inItems: true } - ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 } - PropertyChanges { target: gradientStart; color: "#8AC953" } - PropertyChanges { target: gradientStart; color: "#8BC953" } - } - ] - transitions: Transition { - PropertyAction { target: packageRoot; properties: "DelegateModel.inItems" } - ParentAnimation { - target: content - NumberAnimation { target: content; properties: "x,y"; duration: 500 } - } - ColorAnimation { targets: [gradientStart, gradientEnd]; duration: 500 } - } - } - } - } - - DelegateModel { - id: visualModel - model: 35 - delegate: packageDelegate - - groups: DelegateModelGroup { id: selectedItems; name: "selected" } - - Component.onCompleted: parts.selection.filterOnGroup = "selected" - } - - PathView { - id: selectionView - - height: 64 - width: 64 - - model: visualModel.parts.selection - - path: Path { - startX: 0 - startY: 0 - PathLine { x: 64; y: 64 } - } - } - - GridView { - id: itemsView - anchors { fill: parent } - cellWidth: 64 - cellHeight: 64 - model: visualModel.parts.visible - } -} diff --git a/examples/quick/views/visualdatamodel/slideshow.qml b/examples/quick/views/visualdatamodel/slideshow.qml deleted file mode 100644 index 369b5a46ac..0000000000 --- a/examples/quick/views/visualdatamodel/slideshow.qml +++ /dev/null @@ -1,167 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2017 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:BSD$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, 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.XmlListModel 2.0 -import QtQml.Models 2.1 - -Rectangle { - id: root - - property Item displayItem: null - - width: 300; height: 400 - - color: "black" - - DelegateModel { - id: visualModel - - model: XmlListModel { - source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2" - query: "/rss/channel/item" - namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" - - XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" } - XmlRole { name: "url"; query: "media:content/@url/string()" } - } - - delegate: Item { - id: delegateItem - - width: 76; height: 76 - - Rectangle { - id: image - x: 0; y: 0; width: 76; height: 76 - border.width: 1 - border.color: "white" - color: "black" - - Image { - anchors.fill: parent - anchors.leftMargin: 1 - anchors.topMargin: 1 - - source: imagePath - fillMode: Image.PreserveAspectFit - - } - - MouseArea { - id: clickArea - anchors.fill: parent - - onClicked: root.displayItem = root.displayItem !== delegateItem ? delegateItem : null - } - - states: [ - State { - when: root.displayItem === delegateItem - name: "inDisplay"; - ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 } - PropertyChanges { target: image; z: 2 } - PropertyChanges { target: delegateItem; DelegateModel.inItems: false } - }, - State { - when: root.displayItem !== delegateItem - name: "inList"; - ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 } - PropertyChanges { target: image; z: 1 } - PropertyChanges { target: delegateItem; DelegateModel.inItems: true } - } - ] - - transitions: [ - Transition { - from: "inList" - SequentialAnimation { - PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: true } - ParentAnimation { - target: image; - via: root - NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } - } - } - }, Transition { - from: "inDisplay" - SequentialAnimation { - ParentAnimation { - target: image - NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } - } - PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: false } - } - } - ] - } - } - } - - - PathView { - id: imagePath - - anchors { left: parent.left; top: imageContainer.bottom; right: parent.right; bottom: parent.bottom } - model: visualModel - - pathItemCount: 7 - path: Path { - startX: -50; startY: 0 - PathQuad { x: 150; y: 50; controlX: 0; controlY: 50 } - PathQuad { x: 350; y: 0; controlX: 300; controlY: 50 } - } - } - - Item { - id: imageContainer - anchors { fill: parent; bottomMargin: 100 } - } -} diff --git a/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject b/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject deleted file mode 100644 index 2bb4016996..0000000000 --- a/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject +++ /dev/null @@ -1,14 +0,0 @@ -import QmlProject 1.0 - -Project { - /* Include .qml, .js, and image files from current directory and subdirectories */ - QmlFiles { - directory: "." - } - JavaScriptFiles { - directory: "." - } - ImageFiles { - directory: "." - } -} -- cgit v1.2.3