Declarative UI is one of the big things on the Qt Roadmap for Qt 4.7 and 4.6.x. I already enjoyed working with the Qml language and the developers behind it for quite some time - and believe me, this one will fundamentally change the way slick Qt UIs are designed and look like! If you have not checked it out yet, do so … although it is not yet part of the Qt package, it is very mature, and just fun to experiment with

Anyhow, a technology like this of course does not come out of the blue, neither do the tools to support it - I think the first discussions about a Visual Editor for a language yet-to-be-invented on the basis of the QGraphicsView framework started in summer 2008! In early 2009 I first heard about the name “Qml”, and was soon the lead of a development project, with right now 5 people working full time in this project. One of the most important decisions we had to make early on was for a cool project name - we eventually settled for “Bauhaus”, as a reminiscence to the famous German school for design.

Back to the facts: What I want to share with you today are our plans for supporting Declarative UI / Qml in QtCreator. This is an important one, because with Declarative UI we target not only the traditional Qt/C++ developers, but also more design centric people - the goal is to let both share the same language, from early prototyping until the final product. We can only achieve this with good tools in place.

Here are the things we are currently working on for the next major version of QtCreator:

Qml Text Editor - We already have some basic syntax highlighting / formatting support in QtCreator 1.3, but in the QtCreator master branch we are right now working on really mature Qml/JavaScript support. This will include all the goodies you kind of expect these days: Code completion, context sensitive help, …

Visual Qml Editor - After all, we are talking about graphical user interfaces, and you will not make UI designers happy just with a text editor . Here we decided for a fresh start and developed the components for the Visual Editor from the ground up. Interestingly, we are using Qml heavily ourselves here - e.g. in the Property Editor and States View.

Seamless Integration - It is no either text, or visual editing: You want to use both, and quickly switch between both. This is why we deeply integrate the Visual Editor into QtCreator, share the same Undo/Redo history and are also preserving the Qml file formatting as much as possible when doing file changes.

Debugging - We integrate the Qml debugger, which allows you to inspect the qml item tree and its properties at runtime, to check framerates, to evaluate JavaScript expressions and so on inside QtCreator.

Enough said - Nigel recorded a nice video showing you how the support currently looks like:

If you want to try it out yourself, we also packaged a technical preview of creator, qmlviewer/qmldebugger and the declarative examples & demos in one installer:

qt-creator-win-opensource-1.3.80-qml-tp1.exe (Windows 32 bit)
qt-creator-linux-x86-opensource-1.3.80-qml–tp1.bin (Linux 32 bit)
qt-creator-mac-opensource-1.3.80-qml-tp1.dmg (Mac OS X)

Disclaimer: The binaries are unsupported, and are only meant for early testing. In fact they are based on an untested snapshot of Qt, and an (almost) untested version of QtCreator! If you want to use qml for production work, stay with QtCreator 1.3.1.

Of course we are interested in all kind of feedback, preferably via the bug tracker or on the qt-creator mailing list.

Recently, Qt Declarative for Qt 4.6.0 got released. We got a lot of requests for Maemo 5 support (well - some people just wanted to play the SameGame on their N900 ). And voilà - declarative hit Maemo’s extras-devel repository. Obligatory screenshot:

Currently, the following packages are available:

• libqt4-maemo5-declarative: The QtDeclarative library
• libqt4-maemo5-declarative-dev: The development package, contains the headers for QtDeclarative
• libqt4-maemo5-declarative-dbg: The debugging symbols, for more meaningful backtraces
• qt4-maemo5-declarative-qmlviewer: The “player” for QML based apps
• qt4-maemo5-samegame: The SameGame demo

To just get the SameGame, all you need to do is

apt-get install qt4-maemo5-samegame

(provided that you enabled the extras-devel repository). And the neatest thing - with the N900’s text editor, you can program your own QML applications directly on the phone. Launch them from the xterm with /opt/qt4-maemo5/bin/qmlviewer ./myapp.qml

No need to stop hacking just because space is too constraint to get out your laptop

Obligatory note: Qt 4 for Maemo 5 is still in tech preview status, reports about molten N900s will be met with a compassionate “Told you”.

At the Munich DevDays we got a lot of questions about QML - first among them was where to download it. To celebrate DevDays in San Francisco we are releasing binary snapshots that you can download now for Windows, Mac and Linux.

For those of you who couldn’t attend DevDays, QML helps you create exciting UIs like this:

Remember - QML still isn’t released so it isn’t as solid as we’d like, but it should be enough for you to get started. The packages include a full version of Qt Creator - simply create a new QML project, let your creative juices flow and press play to view your creation in the QML viewer.

When Qt 4.6 is released, we’ll make another more up to date package. As we approach this milestone we’re focusing our attention on writing tests, squashing bugs, updating docs and giving the examples a little love - so by Qt 4.6 QML should be even better!

Something we’ve been trying out recently with Qt Declarative UI is a Plasma integration. A characteristic of plasmoids is that they tend to have their own unique UI design. Integration of Declarative UI with Plasma has the potential to make it much easier to design such plasmoids. There is also the potential to help make plasmoid development easier by providing a declarative language that is designed specifically for fluid user interfaces, and is more accessible to designers without C++ knowledge. And it also has the potential to facilitate the construction of highly animated plasmoids, like the weather example which animates the clouds and rain/snow all separately. As a prototype we are hoping that its use will provide constructive feedback which enables Declarative UI to truly fulfill these potentials.

There is one very tricky aspect to Declarative UI’s Plasma integration. That is that there are large sections of Plasma code which are already written, containing widgets and QGraphicsItems, which might like to add some declarative parts but are certainly not going to re-write themselves. Declarative UI is based on existing Qt technologies, GraphicsView in particular, and can be integrated into existing applications. We just have very little experience with doing that right now and are still investigating how well this works, so feedback on this issue is warmly welcomed. We do intend to get things so that, as much as possible, existing Qt code can easily add Declarative UI bits to its UI when and if they want. You certainly won’t have to rewrite your application to use Declarative UI if you’re happy with your Graphics View solution. In fact, the prototype Plasma integration makes the existing Plasma QGraphicsWidgets directly usable in QML without altering their code at all (we’re still checking how well this works though).

We’re hoping that, at some point in the future, people will have Declarative UI as another one of their options for how to build their plasmoids. An especially compelling one if it’s to be heavily animated or they don’t like coding.

Below is a screen shot showing some of what we have so far. On the left is the weather example, and those are Plasma::PushButtons being used in the middle. On the right is a data source example, printing all the information it can get from the time data source. On the right, below the QML plasmoid, is the file watcher plasmoid showing the full QML source for the data source example just above it.

A few weeks ago, the LinuxTag 2009 took place in Berlin. Of course some of us Trolls went there to present Qt. We ran a little booth where we had the possibility to talk to many Qt users (and future Qt users).

But that was not all. Some Trolls gave talks about very interesting topics. And because on that day I found my camera somewhere in my pocket, it made sense to film some of the talks (three to be exact) and share them with those who were not able to travel to Berlin. Here we go -in chronological order-…

Creating Qt Creator
Free Software Development at Nokia, Qt Development Frameworks

Speaker: Matthias Ettrich

“Nokia Qt Development Frameworks - the former Trolltech - announced earlier this year that they will open up their software development process and establish a new contribution model. One pillar of this change is a more permissive licensing under the terms of the GNU LGPL. In addition, Qt source code repositories will be made publicly available and contributions from desktop and embedded developer communities will be encouraged.” more…

New user interface paradigms on mobile devices

Speaker: Matthias Ettrich

“Today’s mobile devices have large high-resolution screens, touch input and significant graphics power. Applications on such devices no longer compete on features, but on graphical “wow”. It is not even unusual to hear people buying apps just because they have a cool UI.” more…

Advanced Graphics Programming with Qt

Speaker: Ariya Hidayat

“This talk highlights several key features of Qt graphics programming, including the low-level, immediate-mode painting system and 2D scene graph provided by Graphics View. To ensure a successful smooth and attractive user interface, this can be complemented by animation, Web engine, scripting, and graphics effects, which will be suitable discussed as well.” more…

As with any Qt API, the Qt Declarative QML API that we expose needs to be carefully thought through to provide a consistent and intuitive developer experience.

One area of inconsistency has been the mixing of nouns and verbs. A declarative language describes what, not how. An example of this is the SetProperties element. This element describes the changes to one or more properties in a particular state. The SetProperties name has a distinctly imperative flavor. It implies an immediate action and fails to capture the nature of the element. Changes to properties in a state are merely overrides that will be restored when the state is left. These factors lead to the proposed renaming of SetProperties to PropertyChanges.

We are currently in the process of reviewing the entire QML element API. We expect the review to be complete by the end of August, though it may take a little longer for the proposed changes to propagate into the code. Unfortunately, if you are a Qt Declarative early adopter you will need to update your code. In order to help with this there is a list of changes and pending changes in the src/declarative/QmlChanges.txt file in the kinetic-declarativeui branch of the Kinetic repo.

BTW, if you’ve been experimenting with Qt Declarative we’d love to hear what you’ve been doing and how you’ve found using QML.

Here’s a video of a game we’ve written with Qt Declarative UI:

This completely functional implementation of Same Game is 334 LOC, 127 lines of QML and 207 lines of simple Javascript for handling the game logic. Considering that it includes animated movement and visual effects, that seems rather impressive. But LOC is not a very well defined metric - if you really want to see just how simple Qt Declarative UI makes things then checkout the source from the kinetic repository on gitorious (the kinetic-declarativeui branch) and look for yourself . Don’t worry, those 334 lines include some comments to help explain what’s going on. This demo does have a lot of stuff packed into those lines though, including dynamic object creation and great potential for custom themes.

So have a look at the Qt Declarative UI branch if you want to play with this powerful and emerging technology - or just with the games we’ve implemented with it.

We’ve hinted a bit about the Declarative UI part of Kinetic. Well, now it’s time to take a look.

First, here is a video of QML in action:

and some more here:

• calculator demo
• dial example
• listview recipes example

To run the examples for real, either download a binary package including Qt Creator integration, or grab the full source code from the public Gitorious repository.

Declarative UI is a way of making fluid user interfaces by describing them in terms of simple elements (Text, Image, Rect,and other QObjects) that are built up into components. The reason it is “declarative” is that rather than the changes in the UI being expressed as imperative code (”set this, set that, do this, do that, …”), they are instead expressed as sets of QObject property expressions (”this width is always half that width”), grouped into states (”when enabled, the properties are …, when disabled, they are …”).  The language that enables this is named QML.  QML is simple yet powerful. Most of a user interface is described by a simple tree structure of property bindings:

import Qt 4.6

Rectangle {
    width: 200
    height: 200
    color: "white"
    Text {
        text: "Hello World"
        anchors.centerIn: parent
    }
}

The power is that those property values can be any JavaScript expression - and because it’s a binding rather than just an assignment, the expressions are re-evaluated whenever their dependencies change. This concept has been in Qt forever - if you go back to the old cannon tutorial where a QLCDNumber’s display was connected to a QSlider’s value, that’s a binding: the number displayed changes automatically when the slider value changes.

The fluid part comes from animated transitions between the sets of properties. Combined with Qt’s signals and slots, and a little bit of script for the tricky parts, the result is a very powerful technology for making very cool looking UIs that are enjoyable to use.  There is also a set of building blocks useful for creating a fluid UI, including drawing (e.g. Rect, Image), behavior (e.g. MouseRegion, Flickable) and layout (e.g. ListView).  These sorts of fluid user interfaces work well for small simple user interfaces such as those on a phone, or gadget-style desktop applications like media players or VoIP clients. We’ve put a couple of demos like this in qt/demos/declarative/ directory of the source.

For larger applications, especially on the desktop, fancy effects are currently mainly at the fringes - the bulk of any large application will use traditional widgets (there’s a lot of value in desktop consistency!), with just a little “fluidness” at the edges to give the apps a modern feel.

On the web side of things, Declarative UI is completely network transparent - if so configured, Qt will happily load a complete declarative user interface incrementally via HTTP - images and all. And since Declarative UI can use Qt’s XQuery support to process other remote data, there are quite a few applications you can write completely in script - no C++ at all.

Qt Declarative integrates perfectly with existing Qt C++ applications.  Qt Declarative components can expose an API with signals, slots, and properties.  For example, the QML below defines a simple button with an API consisting of a label property and the signal clicked():

import Qt 4.6

Rectangle {
    id: container
    property string label
    signal clicked
    radius: 5; border.color: "black"
    color: mouse.pressed ? "steelblue" : "lightsteelblue"
    gradient: Gradient {
            GradientStop { position: mouse.pressed ? 1.0 : 0.0; color: "steelblue" }
            GradientStop { position: mouse.pressed ? 0.0 : 1.0; color: "lightsteelblue" }
    }
    MouseRegion { id: mouse; anchors.fill: parent; onClicked: container.clicked() }
    Text { anchors.fill: parent; text: container.label; anchors.centerIn: parent }
}

We can create this component in C++ and access its API, just like any other Qt QObject subclass:

QmlComponent component(qmlEngine, "Button.qml");

QObject *button = component.create();

button->setProperty("label", tr("Press Me!"));

connect(button, SIGNAL(clicked()), this, SIGNAL(buttonClicked()));

Qt’s data models also work immediately with QML.  Just expose the C++ model to the QML engine:

MyFancyModel *model = new MyFancyModel();

QmlContext *ctxt = canvas->rootContext();

ctxt->setContextProperty("MyModel", model);

Then reference the model’s name in QML:

Rectangle {
    width: 800; height: 600; color: "black"

    ListView {
        anchors.fill: parent
        model: MyModel
        delegate: Text { text: display; color: "white" }
    }
}

Declarative UI is a new way to use the core concepts of Qt, so it fits in with your existing code.

We’ve already started integrating Declarative UI support in Qt Creator. Right now you get QML syntax highlighting and an integrated viewer - check out the Qt Creator blog for details.

And in the KDE playground, there is a demonstration of KDE Plasma integration, so you can run any Declarative UI as a Plasmoid on the desktop!