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.

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.