diff options
author | Venugopal Shivashankar <Venugopal.Shivashankar@qt.io> | 2018-10-03 13:50:13 +0200 |
---|---|---|
committer | Venugopal Shivashankar <Venugopal.Shivashankar@qt.io> | 2018-10-11 12:36:36 +0000 |
commit | b6f7fe1f80e6beed62ef47691fae6aa9f4a851b8 (patch) | |
tree | 92055e528215632ee4872c1f87793f535746e656 /examples/quick | |
parent | b8f4005f132c26b842387e1ae5f492594dc03d86 (diff) |
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 <shawn.rutledge@qt.io>
Diffstat (limited to 'examples/quick')
-rw-r--r-- | examples/quick/particles/itemparticle/itemparticle.pro | 12 | ||||
-rw-r--r-- | examples/quick/particles/itemparticle/main.cpp (renamed from examples/quick/particles/itemparticle/content/RssModel.qml) | 21 | ||||
-rw-r--r-- | examples/quick/particles/itemparticle/particleview.qml | 116 | ||||
-rw-r--r-- | examples/quick/particles/particles.pro | 4 | ||||
-rw-r--r-- | examples/quick/shared/FlickrRssModel.qml | 86 | ||||
-rw-r--r-- | examples/quick/shared/shared.qrc | 1 | ||||
-rw-r--r-- | examples/quick/views/delegatemodel/delegatemodel.qmlproject (renamed from examples/quick/views/visualdatamodel/visualdatamodel.qmlproject) | 0 | ||||
-rw-r--r-- | examples/quick/views/delegatemodel/dragselection.qml (renamed from examples/quick/views/visualdatamodel/dragselection.qml) | 0 | ||||
-rw-r--r-- | examples/quick/views/delegatemodel/slideshow.qml (renamed from examples/quick/views/visualdatamodel/slideshow.qml) | 25 | ||||
-rw-r--r-- | examples/quick/views/views.qml | 2 | ||||
-rw-r--r-- | examples/quick/views/views.qrc | 4 |
11 files changed, 186 insertions, 85 deletions
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/content/RssModel.qml b/examples/quick/particles/itemparticle/main.cpp index d839087301..da21f15be3 100644 --- a/examples/quick/particles/itemparticle/content/RssModel.qml +++ b/examples/quick/particles/itemparticle/main.cpp @@ -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. @@ -47,20 +47,5 @@ ** $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()" } -} +#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 @@ <RCC> <qresource prefix="/shared"> + <file>FlickrRssModel.qml</file> <file>LauncherList.qml</file> <file>SimpleLauncherDelegate.qml</file> <file>Button.qml</file> diff --git a/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject b/examples/quick/views/delegatemodel/delegatemodel.qmlproject index 2bb4016996..2bb4016996 100644 --- a/examples/quick/views/visualdatamodel/visualdatamodel.qmlproject +++ b/examples/quick/views/delegatemodel/delegatemodel.qmlproject diff --git a/examples/quick/views/visualdatamodel/dragselection.qml b/examples/quick/views/delegatemodel/dragselection.qml index 15fd2654c2..15fd2654c2 100644 --- a/examples/quick/views/visualdatamodel/dragselection.qml +++ b/examples/quick/views/delegatemodel/dragselection.qml diff --git a/examples/quick/views/visualdatamodel/slideshow.qml b/examples/quick/views/delegatemodel/slideshow.qml index 369b5a46ac..b252519bbf 100644 --- a/examples/quick/views/visualdatamodel/slideshow.qml +++ b/examples/quick/views/delegatemodel/slideshow.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,9 +48,9 @@ ** ****************************************************************************/ -import QtQuick 2.0 -import QtQuick.XmlListModel 2.0 -import QtQml.Models 2.1 +import QtQuick 2.12 +import QtQml.Models 2.12 +import "../../shared" as Shared Rectangle { id: root @@ -61,18 +61,14 @@ Rectangle { color: "black" + Shared.FlickrRssModel { + id: flickrModel + tags: "fjords,mountains" + } 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()" } - } - + model: flickrModel delegate: Item { id: delegateItem @@ -90,9 +86,8 @@ Rectangle { anchors.leftMargin: 1 anchors.topMargin: 1 - source: imagePath + source: thumbnail fillMode: Image.PreserveAspectFit - } MouseArea { 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 @@ <file>pathview/pics/EMail_48.png</file> <file>pathview/pics/TodoList_48.png</file> <file>pathview/pics/VideoPlayer_48.png</file> - <file>visualdatamodel/slideshow.qml</file> - <file>visualdatamodel/dragselection.qml</file> + <file>delegatemodel/slideshow.qml</file> + <file>delegatemodel/dragselection.qml</file> <file>objectmodel/objectmodel.qml</file> <file>views.qml</file> <file>listview/displaymargin.qml</file> |