summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorVenugopal Shivashankar <Venugopal.Shivashankar@qt.io>2018-10-03 13:50:13 +0200
committerVenugopal Shivashankar <Venugopal.Shivashankar@qt.io>2018-10-11 12:36:36 +0000
commitb6f7fe1f80e6beed62ef47691fae6aa9f4a851b8 (patch)
tree92055e528215632ee4872c1f87793f535746e656 /examples
parentb8f4005f132c26b842387e1ae5f492594dc03d86 (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')
-rw-r--r--examples/quick/particles/itemparticle/itemparticle.pro12
-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.qml116
-rw-r--r--examples/quick/particles/particles.pro4
-rw-r--r--examples/quick/shared/FlickrRssModel.qml86
-rw-r--r--examples/quick/shared/shared.qrc1
-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.qml2
-rw-r--r--examples/quick/views/views.qrc4
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>