Thomas Hartmann

Qt Quick Designer in Qt Creator 2.2

Published Thursday May 5th, 2011
10 Comments on Qt Quick Designer in Qt Creator 2.2
Posted in Qt, Qt Quick, QtCreator, Symbian | Tags: , ,

Qt Creator 2.2 will feature an update of Qt Quick Designer (download).

Qt Quick Designer is a visual editor for QML files which supports WYSIWYG editing.

Qt Quick Designer is completely integrated into Qt Creator and works seamlessly together with the QML text editor. Changes from the code editor are immediately propagated to the visual editor and vice versa.

Only QML elements that were modified in the design mode are updated in the text, leaving the rest of the QML document untouched. This means that any QML code that is (not yet) supported by the visual editor can be ignored and any formating of the code is always preserved. For any missing functionality the user can always fall back to the code editor. Examples of features that are currently not supported are transitions and behaviors.

One important aspect is that Qt Quick Designer only works on the declarative parts of QML. Imperative Java Script code is not executed unless it is part of an extra component.
The reason is that it is impossible for a tool to properly understand the complete semantics of  imperative Java Script code. If you want to use Java Script to e.g. layout items and you want to be able to use the visual editor properly, you can always factor out the code into a separate component and expose the functionality by using properties.

Qt Quick Designer is a prime example of eating our own dog food (Using our own technology). The item library, the states editor and the property editor are done in QML. While the item library and the states editor are pure Qt Quick the property editor is done with traditional widgets in conjunction with QML.

A short introduction into Qt Quick Designer together with Qt Components for Symbian.

Besides many small improvements and bug fixes Qt Quick Designer now supports C++ plug-ins for Qt Quick.
To achieve this while guaranteeing the stability of Qt Creator we had to move the Qt Quick emulation (responsible for the behavior and painting of items) into another process (called qmlpuppet).
This way we can load any C++ plug-in without jeopardizing the stability of Qt Creator. Nobody likes if the IDE is crashing, because of some bug in a plug-in that might be still under development.

Since the technology preview of the Qt Quick Components for Symbian is already released,  we decided to show how they work inside Qt Quick Designer. Note that since the Qt Quick Components are not final, we do not ship any Qt Quick Components with Qt Creator 2.2 and there is no official support, yet.

Qt Quick Designer also allows the usage of any custom components defined in QML.This allows users to define their own application specific components and use them in the visual editor to create forms and fluid UIs quickly. The next video shows how to build a UI with a custom collapsible groupbox and finally how it runs on an N8.

A short demonstration how to use custom components


More detailed information and documentation about Qt Quick Designer can be found in the official documentation.


Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Qt, Qt Quick, QtCreator, Symbian | Tags: , ,


QtRoS says:

It is sad, that Symbian dying, because all this cool Opportunities nowhere to use… Sad Nokia…

Jose Torres says:

Really awesome!, great work!

Kelvie says:

You can run Qt on Android now:

The latest git works quite well (I don’t think there’s OpenGL support yet).

And thanks to qt-lighthouse, it’s easy to port to other platforms, as well.

QtRoS says:

Sry, but android have it’s own perfect SDK with good predefined views, options, menus, dialogs… No need Qt to write perfect applications! And if anyone cares, I now also become android developer after year Qt on Symbian

Daniel says:

@QtRoS: But Android has nothing that is comparable to Qt Quick/QMl.

This stuff has amazing potential not just in the mobile world, but also for automotive and embedded development in general.

Pat says:

QtRos: What are you going to do when you want to run your app with the perfect Android UI on platforms other than Android?

Mika says:

This is great stuff! I hope this has a future.

Guido Seifert says:

> Qt Quick Designer is a prime example of eating our own dog food

Since the last DevDays I really hate this phrase. 🙁

Rene Jensen says:

This is great and all, but you seriously need to consider bridging some gaps platform wise. At least a fully working and fast browser plugin for QML.
I also hope this has a future. In the meantime I will sadly have to learn flash/flex/actionscript.
Good luck, diligent coders.

Jiaer says:

Don’t worry.Intel .fujiton.tencent etc..will support qt on Meego continue.and more app will develop on Meego using QML.

Commenting closed.

Get started today with Qt Download now