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.