3.01

XML List Model (P1 | 2h)

Explanation of the contents of a topic page @ Topic reference page

Back to Week 3

Objective: XML parsing in QML

J:While XML is something to be introduced, at least for the starters we probably won't need exercises for it.

Tino: I disagree. The level of understanding XML is that there is a tag, possibly an attribute, and data. That is trivial. So, yes exercise please, because this may be fun.

Kimmo: Explained some XML and XPath details, reworded some things to be a bit more explicit/correct

Tino: Objective: XML parsing in QML. (This is what the model actually does)

Beginner

• What is XML?

Intermediate

• How to visualise RSS feeds in QML?
• What is XQuery and Path?

Tino Very short intro of XQuery/Path needed

• How to visualise XML in QML?

Expert

Omitted

Course material content

XmlListModel

Qt Quick provides an easy and convenient way to construct models from XML data with XmlListModel.

If we have XML document of the form

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
    <channel>
        <item>
            <title>A blog post</title>
            <pubDate>Sat, 07 Sep 2010 10:00:01 GMT</pubDate>
        </item>
        <item>
            <title>Another blog post</title>
            <pubDate>Sat, 07 Sep 2010 15:35:01 GMT</pubDate>
        </item>
    </channel>
</rss>

We can see that XML documents have tags (<rss>), which can have attributes (version="2.0"). Start tag <item> and end tag </item> form an element, and an element can have child elements. This basically means we have a tree of nodes, and we need to traverse the tree to extract data.

We can construct a model the following way:

import QtQuick 2.0
import QtQuick.XmlListModel 2.0

XmlListModel {
    id: xmlModel
    source: "http://www.mysite.com/feed.xml"
    query: "/rss/channel/item"

    XmlRole { name: "title"; query: "title/string()" }
    XmlRole { name: "pubDate"; query: "pubDate/string()" }
}

In source we define the location for the XML document, which can be either local or remote resource.

The query property value should contain a valid XPath (XML Path Language) selector. Among other things, XPath is used to select nodes from the XML document tree that match a given path expression.

With the query of /rss/channel/item we select any <item> that are children of <channel> that are children of the document root element <rss> to be the items for the model. See XPath usage examples for more detailed usage.

Now that we have data for our model, we need to define roles with XmlRole definitions to bind our data for our delegates. Notice that the <item> elements contain other arbitrary elements, so we need a query to bind specific data. In the example, we query the <title> and <pubDate> elements inside the <item>, get their values with the string() function and bind the value to the aptly named roles title and pubDate. See XmlRole::query for more examples.

Using the generated models in ListView works as usual, we can access the defined roles inside our delegate:

ListView {
    width: 180; height: 300
    model: xmlModel
    delegate: Text { text: title + ": " + pubDate }
}

---

Instructions and description for the exercise of the topic

• Do something interesting with this API maybe https://api.digitransit.fi/routing/v1/routers/hsl/bike_rental

---

Exhaustive reference material mentioned in this topic

https://doc-snapshots.qt.io/qt5-5.9/qtquick-modelviewsdata-modelview.html#xml-model

https://qmlbook.github.io/en/ch06/index.html#a-model-from-xml

http://doc.qt.io/qt-5/xquery-introduction.html

Further reading topics/links: