Table of Content
Introduction to Qt Quick
About Qt Quick
User interfaces developed in Qt Quick are created as rectangular elements in visual trees. The technology is limited to a set of elements focusing on touch and gesture-based interactions. Qt Quick introduces a new concept of modeling application logic using hierarchical state machines. Furthermore transitions and a rich set of animations (tweens [en.wikipedia.org]) make it easier to create rich user experiences.
Although web developers more frequently refer to themselves as designers and most software developers see coding as an art, there was still a big hurdle to jump over if designers wanted to participate in the development process with Qt and C++. C++, after all, is a low-level language targeted at system and embedded programming. Qt Quick was designed from the ground up to fill that gap. As a domain-specific language it is specifically targeted toward the creation of user interfaces. It puts a declarative layer on top of JavaScript which looks similar to cascading style sheets (CSS). It won’t bother you much with type casting, pointers or object lifetimes. Instead the focus lies within the creation of rich user interfaces.
Terms and terminology
Before we get started coding in Qt Quick, let us get some terms straight. Everyone seems to talk about Qt Quick these days and, as the technology is still new, lots of myths surround it.
First of all, Qt Quick, QtQuick and QML all refer to different things! Qt Quick and QML are frequently used interchangeably, which is not entirely correct. QML is the language, QtQuick (without a space) is the name of the standard component library and Qt Quick (with a space) refers to the technology as a whole. QML as a language allows the declaration of object hierarchies and state based application logic. It can also be used in other application domains beyond user interface design.
Setting up your development environment
Starting from version 4.7, Qt ships with Qt Quick. You can edit your QML files with your favorite editor, but Qt Creator currently supports it best. Qt ships a new tool called “qmlviewer” which allows you to display QML files. Starting from version 2.1, Qt Creator also supports a special QML design mode. Depending on your target platform you may opt for downloading all tools in one package – including the necessary cross-compile chains. Qt Quick is also included in the latest Nokia and Meego/AppUp SDKs. You can avoid these SDKs (and their gigabytes) by installing Qt with your favorite package manager and setting your editor to highlight QML files (*.qml) as JavaScript or CSS. As of Maverick (10.10), Qt 4.7 and qmlviewer are both included in Ubuntu. Look out for the libqt4-dev and qt4-qmlviewer packages.
Hello, world!
We will start with the most simple program showing the famous getting started message. To load the file, be sure to have the qmlviewer at hand. If you’d like to use QtCreator, simply click through File->New->Qt Quick Project->Qt Quick UI. Then paste the source code and click on the big triangular button at the bottom left of the interface.
- // HelloWorld.qml
- import QtQuick 1.0
- Rectangle {
- color: "beige"
- width: 100; height: 100
- Text {
- anchors.centerIn: parent
- color: "chocolate"
- text: "Hello, world!"
- }
- MouseArea {
- anchors.fill: parent
- }
- }
The first line is just a comment. Comment syntax is the same as in C++. Lines starting with // and text enclosed in /* … */ are ignored. The second line imports all default components: Rectangle, Image, Text, MouseArea, Flickable, … etc. The third line creates the root node of your visual hierarchy. The Rectangle element simply shows a rectangle filled with a given color and possibly rounded edges. You can use any of the SVG color names or specify the color directly using RGB color names. In our example we could have written #F5F5DC instead of “beige”. The dimensions of the rectangle are given using the width and height properties. For each visual element you can specify geometry using the x, y, width and height properties in number of pixels. For the most part, this is only needed for top-level and animated elements.
Thereafter we have added 2 child elements: a Text and a MouseArea. We use anchors to bind the geometry of the children to its parent. The text element’s center is anchored to its parent center. Try to resize the window to verify that. The second child element is a MouseArea, which is anchored to fully overlap its parent. The MouseArea is one of the invisible elements for capturing user input. It’s called MouseArea, but also delivers touch and tab events in a seamless manner. Finally the MouseArea includes a onClicked event handler, which calls the default function to shutdown the Qt Quick application.
The QML language
QML is a declarative language which specifies a hierarchy of objects. The tree of objects is instantiated when loading the QML file. A set of properties is specified for each object. Property values are given using constants or JavaScript expressions. Property values are given as javascript expressions and the expressions are reevaluted if any of the properties used in the expression change. This concept of declaring properties that depend on each other and are updated live is called property binding in QML.
QML is said to be an extension on top of JavaScript, but it’s actually also an improvement. While JavaScript is a fully duck-typed [en.wikipedia.org] language, QML does basic type and syntax checking when loading files. Try the following for instance:
- import QtQuick 1.0
- Rectangle {
- color: 0
- }
When loading this file in the qmlviewer the declarative context correctly reports on the type mismatch:
- file:///home/frank/gitorious/qml-demos/MyRectangle.qml:3:12: Invalid property assignment: color expected
- color: 0
Furthermore in QML you are not allowed to modify the global object. It commonly occurs on accident when you forget declaring local variables using the var statement.
Besides these minor improvements, the JavaScript expression syntax is fully compatible to the JavaScript used in web browsers. You can use built-in objects like Date, Number or Math. You can write the JavaScript code in separate JavaScript files and import them into your QML context. You can also declare JavaScript functions within your components. Take a look at the following example:
- import QtQuick 1.0
- Rectangle {
- width: 100; height: 100
- color: red(0.5)
- Rectangle {
- anchors.verticalCenter: parent.verticalCenter
- width: parent.width / 2
- height: parent.height / 2
- color: red(1.)
- }
- function red(v) { return '#' + Math.floor(v * 255).toString(16) + '0000'; }
- }
Here we have declared the red function to compute color names of red tones.
Qt Quick standard components
The QtQuick components library provides a rich set of animation elements, elements for handling images, input handling elements and model-view elements. The main focus lies within creating custom designed user interfaces for embedded and mobile devices. There are anchor based layouts and positioners, but there are no highlevel components like combo boxes or toolbars. There is an ongoing effort called Qt Components [developer.qt.nokia.com] to provide such highlevel components, but it’s still at an early stage.
