Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Earthquake-Reporting application with XmlListModel

From Wiki
Jump to: navigation, search

This article shows how to use the XmlListModel Qt Quick element that lets you fetch RSS feeds and parse out data from them using only XPath queries.



The XmlListModel has a key feature of QML that can not only just fetch content from local device but also can fetch over the internet. Any element with a source property can present data from any URL, letting you freely mix local and remote resources in your Qt Quick applications. In fact, we can do this with whole Qt Quick items. The Loader element has a source property and at runtime replaces itself with the contents at the URL of its source element. That allows a Qt Quick application to load other QML from the Web.

Basic Idea

In this article we will create an earthquake-reporting application that takes data from the U.S. Geological Survey and renders the result as a list of earthquake events using some basic features of Qt Quick. Before we begin discussing about the application development, we need to create a new QML project. To do this, launch Qt Creator and select Create Project… and then choose Qt Quick Application from the New Project dialog.

Earthquake Reporting Application

Creating the User Interface

The user interface consists of two pieces: the list view, a ListView element, and the item view, a Text element. The below code shows main.qml, the QML that defines the entire user interface.


import QtQuick 1.0
Rectangle {
property bool loading: feedModel.status == XmlListModel.Loading
id: window
width: 640
height: 360
Rectangle {
id: listView
anchors.left: window.left;
width: window.width/3
height: window.height
color: "#efefef"
ListView {
id: events
property string text: window.loading ?
"Loading data... please wait" :
"<b><center>" +
feedModel.get(0).title.replace(",","\n").replace(",","\n") +
"</center></b><br/>" + feedModel.get(0).summary
focus: true
anchors.fill: parent
model: feedModel
delegate: QuakeListDelegate {}
highlight: Rectangle { color: "steelblue" }
highlightMoveSpeed: 9999999
Text {
id: itemView
anchors.left: listView.right;
width: window.width - listView.width
height: window.height
wrapMode: Text.Wrap
text: events.text
XmlListModel {
id: feedModel
source: ""
"declare default element namespace '';"
query: "/feed/entry"
XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "summary"; query: "summary/string()" }

The top level of the UI is a single rectangle, sized to fit on the device screen at 640x360 characters with the ID window. It has a single property, a Boolean value loading, which is true while the XmlListModel is loading the XML from the U.S. Geological Survey. Inside the main rectangle is a smaller rectangle containing a ListView, and the Text element that shows the details of a single earthquake event. We place the ListView in its own rectangle and position this and the Text element to be adjacent to each other, spanning the entire height of the containing rectangle using their anchor properties. They permit us to anchor item borders by referring to the borders of adjacent items. The ListView itself has a property, the text to show for the current element. When the application starts, it simply shows a canned string indicating that the application is loading data; because QML maintains bindings between all the properties, as the list model’s status changes, so does the window’s loading property, and so does the text property of the ListView. The JavaScript expression for the text property creates a bit of HTML to present a rich-text version of the earthquake data that reiterates the quake’s magnitude, location, and detail data the U.S. Geological Survey provides. A ListView doesn’tdraw its own items; instead, it relies on a delegate,a separate item that draws contents once for each item in the ListView’s model. The code below shows the QuakeListDelegate.qml (put it into the same directory as your main.qml file), our item for displaying a single item of the list.


import QtQuick 1.0
Item {
id: delegate
width: delegate.ListView.view.width; height: 60
Text {
text: title.replace(",","\n").replace(",","\n")
color: delegate.ListView.isCurrentItem ? "white" : "black"
font { family: "Helvetica"; pixelSize: 16; bold: true }
anchors {
left: parent.left; leftMargin: 15
verticalCenter: parent.verticalCenter
Rectangle {
width: delegate.width; height: 1; color: "#cccccc"
anchors.bottom: delegate.bottom
visible: delegate.ListView.isCurrentItem ? false : true
Rectangle {
width: delegate.width; height: 1; color: "white"
visible: delegate.ListView.isCurrentItem ? false : true
MouseArea {
anchors.fill: delegate
onClicked: {
delegate.ListView.view.currentIndex = index
delegate.ListView.view.text = "<b><center>" +
title.replace(",","\n").replace(",","\n") +
"</center></b><br/>" + summary

The delegate has a single Text item that displays the title of an earthquake report as a series of three lines. It’s in black for all items but the currently focused item, which is white and drawn over the highlight rectangle at the end of the listing. After the Text item is a dividing line one pixel tall. It provides separation between this and subsequent items.

A MouseArea in the item filling the entire region handles clicks by setting the ListView’s text property to the full text description of the event. When the XmlListModel finishes loading or you click on an item, the QML runtime updates the ListView’s text property. The itemView, a single Text element, displays this by setting its text property to shadow the text property of the event list itself.

The XmlListModel is a specific list model that handles both the fetching of an XML feed and parsing the feed into roles defined by XPath queries. The fetch begins when the XmlListModel is created, and the status is updated after the load completes. The ListView draws each item using the delegate in QuakeListDelegate.qml , obtaining the fields in each list item using the title and summary attributes extracted from a specific feed entry based on the entry’s index. We can also fetch a specific XmlListModel’s item using the get method and passing an index, as we do when we draw the 0th element after the loading completes.

Source Code

The full source code for this article is available here:

Article Metadata
Code ExampleTested with
Devices(s): N8/N950/Windows Desktop
Keywords: XmlListModel
Created: somnathbanik (24 Jul 2015)
Last edited: hamishwillee (11 Oct 2012)
This page was last modified on 11 October 2012, at 01:20.
151 page views in the last 30 days.