Using the ListView with an XML Model

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.

First we investigate into the format used. A simple call to curl will provide us the http response.


You could also just point your browser to that url. The response looks similar to this (simplified):

<?xml version="1.0" encoding="utf-8"?>
            <title>Maringá 123</title>
            <media:thumbnail url="" height="75" width="75"/>
            <media:thumbnail url="" 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=\"\";"
    source: ""
    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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s