×
Namespaces

Variants
Actions

Earthquake-Reporting application with XmlListModel

From Nokia Developer 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.

Contents

Introduction

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.

main.qml

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
anchors.top: window.top;
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
anchors.top: window.top;
width: window.width - listView.width
height: window.height
wrapMode: Text.Wrap
text: events.text
}
 
XmlListModel {
id: feedModel
source: "http://earthquake.usgs.gov/earthquakes/catalogs/1day-M2.5.xml"
namespaceDeclarations:
"declare default element namespace 'http://www.w3.org/2005/Atom';"
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.


QuakeListDelegate.qml

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: File:EarthQuakesQtQuick.zip

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

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×