Qt Quick Tutorial

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.

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

Qt Quick Tutorial

Motivation

Qt Quick has been released with Qt 4.7. Companies use it to build user interfaces (UIs) for set-top boxes, tablet devices, in-vehicle infotainment systems, e-readers or mobile phones. Many more companies are seriously evaluating Qt Quick. Such an interest is quite amazing for a new and unproven technology, so Qt Quick must have hit a nerve - or actually a couple of nerves.

Qt Quick provides a declarative language called QML (Qt Meta-object Language) for the design and implementation of UIs. QML is based on "CSS":http://en.wikipedia.org/wiki/CSS and "JavaScript":http://en.wikipedia.org/wiki/JavaScript. Large parts of QML code are just CSS-style name-value pairs of properties (e.g., color: "red"). The rest, typically the behavioral parts like the response to a mouse click, is written in JavaScript. Thanks to its similarity to CSS and JavaScript and its simplicity, QML is easily picked up by web and Flash developers, and it is a no-brainer for Qt/C+, C and Java developers. Despite its simplicity, Qt Quick makes it easy to write the kind of fluid UIs popularized by Apple's iPhone.

Quite honestly, Qt Quick empowers teams to develop applications boasting the best possible interactivity with the best possible functionality. This is all due to a very simplified development process beginning with UI designers getting access to Qt Quick through Quick Designer: a visual design tool for QML applications which closes the gap between UI designers and developers because it facilitates communication via one common medium. The medium I am referring to is, of course, QML code. So essentially, the designers create a UI and the developers add the functionality to that UI while having the ability to maintain close interaction with the designers. This also gives developers and designers the opportunity to work side-by-side during the entire development process toward enhancing the UI and adding killer features to the application.

Now compare this to a more traditional development process in which the designers initially come up with a fantastic UI design in Photoshop and Flash followed by the developers reimplementing this design in C+ or Java and, after a couple of days or weeks even, the developers proudly show their result, which by the way doesn't even remotely resemble the original design (see the famous "tree swing cartoon":http://www.projectcartoon.com/cartoon/1111 for an illustration).

As if this is not enough yet, Qt Quick has access to the full power of Qt. All the properties, signals and slots of a QObject-derived class are instantly accessible from QML. Actually, all visual QML components are implemented as QGraphicObjects and are exposed to QML through Qt's meta-object system. We extend QML with our own components in the very same way.

So far, we have made a lot of promises. Qt Quick is easy-to-use and easy-to-learn, it bridges the chasm between designers and developers, it is powerful and it lets us write fluid UIs. Now we must make good on these promises and this is exactly the motivation for this Qt Quick tutorial. We want to show you how easy it is to build amazing UIs with Qt Quick and we want to teach you how to build these UIs. When you have worked your way through this tutorial, you should have a clear idea whether Qt Quick is the right technology for your next UI project and you should have the technical means to realize this project.

Contents

It's high time we gave an overview of the topics of this tutorial. The following nine modules come from materials based on QML training sessions (see "Qt Training":http://qt.nokia.com/partners/training for more information). Such training sessions are already available as heavily documented QML code and just waiting to be transformed into wiki pages. Of course, there are many more topics on QML: flipable, web view, path view, C++ models for QML views, internationalization, dynamic object creation, performance optimization and so on. We hope to add these topics in the future. We welcome and would appreciate any of your suggestions for new topics as well as any kind of general feedback.

How to Follow Along

In this section, we describe where to download the source code for the tutorial, which tools we need and how to run the examples.

Module 1 - Basics

We introduce the basic concepts of QML: components and properties. We go on to show how to compose components from simpler components, how to use JavaScript expression in property values, and how to access properties of other components. We illustrate these concepts with simple examples. We start with a blue rectangle and evolve it in a row of three photos with titles. This simple photo viewer will accompany us as a running example through the next modules.

Keywords: components, component composition, built-in and custom properties

Module 2 - Components

We learn to write our own custom components and how to use them in client code. In our photo viewer, we introduce a Photo component and use it in the viewer code.

Keywords: custom components, property aliases, property id (instance identifiers)

Module 3 - Modules

Libraries of reusable QML components are called modules. In this "module", we show how to organize QML components into modules and how to access components from modules in client code. Components stored in modules or directories are made available in client code through import statements. We explain in detail how import statements like import Qt 4.7 or import "../dir" work.

Module 4 - Layouts

So far, we have laid out QML components by specifying absolute x and y positions. This is cumbersome and hard to maintain. A much better solution are layouts performing the positioning automatically. QML provides row, column, grid and anchor layouts. Using our photo viewer example, we explain the different layout possibilities.

Module 5 - Key and Mouse Input

Our photo viewer is not quite suited for end users yet. They would have to change the QML code to enter a title, description or date for a photo and the photo viewer should allow end users to select a photo with the mouse or with the cursor keys and then enter the title, description and date in a form. We find out in this module how to handle key and mouse input in QML.

Module 6 - List View

List views give us the first glimpse at fluid UIs in QML. By default, list views are flickable and can be pushed to the left or right by the flick of a finger or mouse pointer. List views use Qt's model-view architecture and are made of a view, a normal delegate, a highlight delegate and a model. We implement a very basic cover flow for our photo viewer.

Module 7 - States and Transitions

Interaction between user and system or transitions from one screen to another are typically modeled with state machines. Every visual QML component provides properties for implementing state machines. We use the photo viewer example to illustrate states and transitions in QML. The photo viewer has three screens. The first screen shows the photos in a list view. On the first screen, the user can choose to view or edit the selected photo by clicking on the respective button or the photo itself. This takes the user to the second screen for viewing a single photo or to the third screen for editing the additional information of the photo. By clicking on a back button, the user returns to the first screen. If we consider the screens as states, the above description defines a state machine with states and transitions.

Module 8 - Animations

With animations, we will breathe even more life into QML applications. We can attach animations to transitions of a state machine. This makes, among other things, fading effects when transitioning from one screen or photo to the next possible. Animations can also be attached to properties. For example, the selected photo in a list of photos can gradually be shrunk to a smaller size when another photo is selected.

Module 9 - Writing New QML Components in Qt/C++

Using the example of a simple music player, we explain how QML and Qt/C++ communicate with each other. We show how a QML component can access properties of a Qt object or how it can call slots of the Qt object. The music player can play the songs from one playlist. It can jump to the next or previous song. It can pause or play a song. It can shuffle the songs of the playlist, repeat one song or all songs of the playlist. The music player shows in a progress bar how long the song plays already. It also shows information about the song like artist, title, album and year.