Introduction to QtQuick

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

English Български Русский

[toc align_right="yes" depth="2"]

Introduction to Qt Quick

About Qt Quick

Qt Quick is a technology for creating fluid user interfaces using a straight-forward declarative language that allows the user to build up a hierarchical visual tree of elements. The underlying technology supports traditional mouse and keyboard input as well as touch gestures. The technology also recognizes the importance, and fully supports the use of transitions and animations (tweens) 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 allowing designers to participate in the C++ development process. Qt Quick was designed from the ground up to make that hurdle drastically lower. It provides an environment that allows designers and coders to work collaboratively. As a domain-specific language it is specifically targeted toward the creation of user interfaces. It puts a declarative layer on top of JavaScript. It looks similar to cascading style sheets (CSS). It won't bother you much with type casting, pointers or object lifetimes. Instead the focus remains on the creation of rich user interfaces.

Terms and terminology

Before we get started coding in Qt Quick, let us get some terms straight. As the technology is still new, lots of myths and "myth"information surrounds 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 a 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
 onClicked: Qt.quit()
 }
}

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 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. 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 we like to think of it as an improvement. While JavaScript is a fully duck-typed 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. Modifying the global object can easily occur by accident when you forget to declare local variables using the var statement. Besides these minor improvements, the JavaScript expression syntax is fully compatible with 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. Consider 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.