Qt Quick Tutorial
|This article is far from being complete.
En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh
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.
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 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.
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 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.
In this section, we describe where to download the source code for the tutorial, which tools we need and how to run the examples.
Keywords: components, component composition, built-in and custom properties
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.