A Quick Look at Qt Quick

Qt 4.7 has not been released yet, but the curious can download the beta or even grab a snapshot from git. The big news in this point seven release is Qt Quick - a new approach to user interfaces.

Before I get carried away and start throwing screenshots at you, let's step back and look at today's user interfaces. On the desktop, standard buttons, sliders, text fields and windows still serve a purpose. However, on all gadgets running Linux these days, gray buttons are considered boring. Instead, the users want fluid, animated, glossy user interfaces that go with the branding of the device. This is where Qt Quick fits in.

So, back to Qt Quick. The solution can be said to consist of two parts: the QtDeclarative module that runs and integrates Qt Quick in Qt applications, and the language QML. Using QtDeclarative it is possible to share objects between C++ and QML, as well as inserting C++ classes into QML and such. The QML language is a brand new language, primarily for creating user interfaces, but useful in other applications as well.

So, how does QML look, smell and feel? Let's have a look at a minimal example:

import Qt 4.6

Rectangle {
    width: 200
    height: 200

    Text {
        text: "Linux Journal"
        font.pointSize: 10
        font.bold: true

        anchors.centerIn: parent

Reading the code and looking at the screenshot that comes with this article pretty much explains it all. Each word starting with a capital letter (Rectangle and Text) creates a new object. The outer Rectangle forms the area that we have to play with. Then properties are set. The anchors property asks the Text to stay centered in the parent (i.e. the Rectangle) so when the user resizes the window, the text will stay positioned.

So, I talked about fluid, animated, glossy user interfaces and I've shown you a simple text string on a white surface. Well, add the following property assignment to the Text and you will be amazed.

rotation: NumberAnimation {
    to: 360;
    duration: 1500;
    running: true;
    repeat: true;

Now the text is spinning madly (as shown in the screenshot)! Actually, what you have done is that you have bound a property to the value generated by a NumberAnimation object. There is far more to Qt Quick - states, effects and cool elements. Also, there is the whole question of integrating QML with a C++ back-end. I've shown you spinning text but the possibilities are unlimited. They really are.


Johan Thelin is a consultant working with Qt, embedded and free
software. On-line, he is known as e8johan.


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Like it

AnT's picture

I very much like JavaFX and it is great to see that similar concepts are comming to C++ with Qt. I think I will like it even more since it will be completely open source and faster and more efficient.


Anonymous's picture

Looks like JavaFX, but I think that it will be better with Qt because JFX is proprietary (or at least the JFX SDK). Qt Quick will be FOSS.

Reminds me of Java FX

Sergei Mutovkin's picture

The concept reminds me of Java FX. I wonder if it will take off with Qt.

Looks very nice :). I see

Stijn Leenknegt's picture

Looks very nice :). I see many similarities with JavaFX.

Same here, JavaFX all over

Sergei Mutovkin's picture

Same here, JavaFX all over again. Did not notice your comment since page was open for a couple of days in the browser.