Quick User Interfaces with Qt

When building user interfaces, a common scenario is to show a list of data. As you already have guessed, QML provides support for this as well. Listing 2 shows how this can be used.

import Qt 4.7

Rectangle {
  width: 200; height: 200

  ListModel {
    id: countries

    ListElement {
      name: "Denmark"; capital: "Copenhagen"
    }

    ...

    ListElement {
      name: "Sweden"; capital: "Stockholm"
    }
  }

  Component {
    id: countryDelegate

    Item {
      width: listView.width; height: 50

      MouseArea {
        anchors.fill: parent
        onClicked: { listView.currentIndex = index; }
      }

      Rectangle {
        x: 3; y: 3
        width: parent.width-6
        height: parent.height-6

        color: listView.currentIndex==index?"white":"lightgray"
        radius: 8

        Column {
          anchors.fill: parent
          anchors.margins: 5
          Text {
            font.bold: true; font.pixelSize: 18
            color: "#444444"; text: name
          }
          Text {
            font.italic: true; font.pixelSize: 10
            color: "#666666"; text: capital
  } } } } }

  Component {
    id: highlightFrame

    Item {
      width: listView.width; height: 50;
      y: listView.currentItem.y
      Rectangle {
        x: 3; y: 3
        width: parent.width-6
        height: parent.height-6
        radius: 8
        border.width: 4; border.color: "darkGray"
      }
    }
  }

  ListView {
    id: listView
    anchors.fill: parent
    model: countries
    delegate: countryDelegate
    highlight: highlightFrame
    focus: true
    highlightFollowsCurrentItem: true
  }
}

The example in Listing 2 consists of four major parts: the countries model, the countryDelegate component, the highlightFrame component and the ListView item, which puts it all together. Starting from the bottom, the list view item refers to a model, a delegate and a highlight. These are the model and components implemented earlier. In addition to this, some tuning of the view's behavior is needed to allow keyboard navigation in parallel with mouse navigation.

Returning to the top of the example, the model is a ListModel containing a set of ListElement items. The properties of the list elements are made available through the view, as you can see if you continue into the countryDelegate component and its text items.

The countryDelegate component is what the list view uses to visualize each item of the list. It consists of a mouse area and a rectangle with two texts in it. The mouse area sets the current item of the list if an item is clicked, while the texts show the data of the model. Notice that the text property of the items is bound to the property names used in the list elements of the model. This makes it easy to tie items in a delegate to model data.

Let's continue to the highlightFrame component. This is a frame that the view places over the current item. In this case, it adds a border to the item. The countryDelegate changes its own background color if it is the current item. This is because the current item is shown without a background color instead of with one. That is not possible to achieve using only a highlight frame.

Finally, the list view puts it all together. The result is shown in Figure 2.

Figure 2. A List View with a Delegate and Highlight Rectangle

It is common to rely on the QML viewer tool when developing QML applications. It also is common to use QML for populating models with data, be it phony or real data. Most state management and work also can be carried out from QML with the aid of JavaScript. However, in most cases, a native application is needed as the runtime environment for any QML application. This is where the QtDeclarative module enters the picture.

For readers who are familiar with Qt, it is good to know that QML consists of a language engine, a context for the scripts to execute in and a QGraphicsScene to operate inside. All these components can be set up manually—it even is possible to add QML components to an existing scene. This way, you can upgrade an existing application gradually.

If you start from scratch with a QML application, the QDeclarativeView encapsulates all these components into a single class, which also happens to be a widget. For an application relying only on QML for its user interface, this is all that it takes.

To integrate C++ objects into QML, the QObject meta-system is used. This means that any QObject-derived class can be exposed to QML. From QML, properties, signals and slots will be available. As QML properties are bound to values, rather than assigned, any changes in the C++ part of the application is reflected automatically in the QML part.

It is beyond the scope of this article to go into details on this, but in the first example, the state could have been driven from C++. This would have let QML handle what it is good at: visuals and dynamic transitions. In the second example, a typical application would provide the model from C++—again, letting QML focus on the visuals.

This approach has a number of benefits. The first one is that the user interface is created quickly using QML as the whole language is focused on that goal. The other is that you are forced to maintain a clear division between the user interface and the rest of the application. This leads to more structure and better code.