The ListView can also be used with more advanced models, like the XmlListModel. The XmlListModel allows you to specify a XPath query to extract information from the XML data source.
We will use flickr’s feed services as a data source.
This is how the final list of flickr thumbnails will look like.
Image may be NSFW.
Clik here to view.
First we investigate into the format used. A simple call to curl will provide us the http response.
curl http://api.flickr.com/services/feeds/photos_public.gne?format=rss2
You could also just point your browser to that url. The response looks similar to this (simplified):
<?xml version="1.0" encoding="utf-8"?>
<rss>
<channel>
<item>
<title>Maringá 123</title>
<media:thumbnail url="http://farm5.static.flickr.com/4052/4362801819_e2f46d6306_s.jpg" height="75" width="75"/>
</item>
<item>
<media:thumbnail url="http://farm5.static.flickr.com/4048/4362801851_b80289ca0e_s.jpg" height="75" width="75"/>
We are mostly interested in the url attribute of the media:thumbnail tag to display later the thumbnail in our delegate.
To catch the url we use an xpath expression: /rss/channel/item. This gives us the list of items in the feed.
To access the url attribute we use in a further step a second selector: media:thumbnail/@url. This gives us the desired url, which we can feed to our delegate.
There is still one roadblock left. We use the xml namespace media:. To make the namespace available we will add it to the XmlListModel later.
Here now the code:
import Qt 4.6
Rectangle {
width: 200
height: 200
Component {
id: delegate
Image {
source: thumbnail
}
}
ListView {
id: view
anchors.fill: parent
model: model
delegate: delegate
}
XmlListModel {
id: model
namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2"
query: "/rss/channel/item"
XmlRole { name: "thumbnail"; query: 'media:thumbnail/@url/string()' }
}
}
The most interesting part is the XmlListModel. First we make the xml namespace available to the XmlListModel and then we add the query, which provides us a list of item elements. N
The XmlRole extracts information per item, in this case the thumbnail url attribute, which is converted into a string with string().
We use the thumbnail role now in our delegate to load an image from this url. We have not set a size on the image. It will take in this case the loaded image size.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
