Qt Quick Designer in Qt Creator 2.2

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.