What the Heck is QML?

As a C++ developer, I’ve spent a great deal of time working with the cross-platform C++ framework, Qt. It’s been a great help in building apps that need to be able to run on Windows, Linux, and OS X. Over the last couple of years there have been more and more mentions of something called QML when talking about Qt. How does this affect me? Do I need to learn yet another language?

A new toolkit, called Qt Quick, was included with the release of Qt 4.7. This toolkit is geared towards a declarative method of building interfaces and interaction, primarily targeting mobile devices. That makes sense; Nokia owns the Qt framework and mobile devices are kind of their thing.

QML is the language that this toolkit is based around. It’s a declarative language that specifies the components of the UI, while the actual user interaction logic is handled with JavaScript, for high-level user interface logic, and a Qt C++ back-end for adding to QML functionality.

So, like me, you’re a C++ developer writing C++ apps and you want to know whether this is something that you absolutely must know? The short answer is “no, not really.” The longer answer is that it wouldn’t hurt to understand but your time would probably be better spent understanding a more generic declarative approach like using AngularJS with HTML5 (just my personal opinion, of course).

So, What is it?

The two-dollar explanation is above but that doesn’t really tell us what Qt Quick actually is and how we would use it. The first step is to throw together a QML interface definition. This tells the QML viewer what the interface looks like. Think of it as something like a .ui file. The major difference is that QML can actually contain interaction logic.

Let’s take a look at a very simple QML declaration:

import QtQuick 1.1
// declare a rectangle for the whole window
Rectangle {
   id: window_rect
   width: 360
   height: 360
   // declare a rectangle for a button
   Rectangle {
       id: simplebutton
       width: 150; height: 75
       // set the button text
       Text {
           id: buttonLabel
           anchors.centerIn: parent
           text: "button label"
       }
       // define the button click event
       signal buttonClick()
       // define a handler/slot
       onButtonClick: {
           console.log(buttonLabel.text + " clicked" )
       }
       // use some simple properties to define the colors used
       property color buttonColor: "lightblue"
       property color onHoverColor: "gold"
       property color borderColor: "red"
       // declare a MouseArea for handling mouse events
       MouseArea {
           id: buttonMouseArea
           anchors.fill: parent
           // make the onClicked handler to emit the buttonClick signal
           onClicked: buttonClick()
           hoverEnabled: true
           onEntered: parent.border.color = parent.onHoverColor
           onExited:  parent.border.color = parent.borderColor
       }
       // determines the color of the button by using the conditional operator
       color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
   }
}

Looking at the above QML file notice that, much like defining a .ui file for an interface, it creates a few nested elements to define the look of the interface:

- Top-level rectangle for the entire window
-- Rectangle for a button
----- Text for the button’s label
----- A MouseArea for the button to specify handling of mouse events

Most importantly though, focusing on the MouseArea element (with the id, "buttonMouseArea”), you can see that this QML actually specifies handling of interactions via JavaScript. When the mouse hovers into or out of the MouseArea, the color will change. Clicking on the MouseArea will generate a slight darkening of the button’s color.

It’s a made-up example just to point out the basic constructs of QML but if you must know, it looks like this when you run it:

While this is a very simple example, it points out the primary difference between Qt’s existing .ui development and the new QML development.

Running QML Apps

As you probably guessed, major browsers don’t support QML. If you write an application in QML using Qt Quick, you’ll need an application to actually load the QML and render it. Luckily, the Qt Quick toolkit includes a wizard for creating a QML-based application, which includes a QDeclarativeView-derived wrapper class for loading your QML file(s) and an application for quickly display your QML.

While this does limit you to devices that are supported by Qt, it allows you to actually extend the capabilities of the QML you load. You can modify or create your own QDeclarativeView-derived class to add further functionality to QML. An example is outside of the scope of this introduction but there are numerous examples on the Qt Project Site.

Why use QML?

Qt Quick and QML seem to me to be a powerful tool to develop some custom interfaces. However, I do have two main concerns. The first is that QML is not an open standard; As the name suggests, it is inherently tied to Qt. While I am fairly certain Qt will be around for quite a while, I am not particularly keen on tying a project to a proprietary technology if there are other options (and there are).

My other main concern is that you are required to use Qt to run QML-based applications. When you take into account that there are very few devices that aren’t supported by major browsers, the decision to create a custom Qt-based application versus a browser/WebKit-based application is not an easy decision.

When you take a look at an alternative like AngularJS, which is a very clean, declarative solution to interface development based on open standards of HTML5 and JavaScript, it makes the decision much more difficult.

So, when would you use QML versus a solution like AngularJS? In my opinion, if you need to add extensibility to the markup language and you are a C++ developer already familiar with Qt, QML might be a good fit.

One Last Note

One final comment that adds a bit of confusion to the discussion is that Qt also supports HTML5 application development. What?!? Yes, just like you can create a QML-based application that provides a built-in wrapper for loading and running QML files, Qt 4.7 offers a similar wrapper for loading and running html files and fully supports HTML5 standards.

This solution isn’t quite the clean declarative interface language that QML offers; it is simply a wrapper around HTML/JavaScript, it does employ more standard functionality and, while I haven’t tested it (so don’t hold me to it), might even support a declarative HTML5-based declarative toolkit like AngularJS within Qt. Best of both worlds?