O'Reilly Network    
 Published on O'Reilly Network (http://www.oreillynet.com/)
 See this if you're having trouble printing code examples

Visual Design With Qt

by Boudewijn Rempt

Related Articles

Qt Attracting Interest Among Application Developers

Boudewijn and Cameron Argue for Qt

A criticism often leveled at Qt (and GTK) is that there isn't a professional visual design tool, like X-designer for Motif, Java or Windows. Of course, developers can tap a multitude of free, open-source visual design tools currently available. Some of these tools have reached great sophistication, like Qt Architect, while others are languishing in the proof-of-concept stage, like viPyl. However, Trolltech AS is on the brink of releasing their long-awaited Qt Designer, a sophisticated, stable, and capable visual design tool, and I've just had the opportunity to play with a pre-release version.

Types of design tools

There are three kinds of visual design tools: tools that generate code, tools that generate a resource file that's interpreted at runtime, and tools that interweave code and design. Qt Designer falls in the first category: the tool generates an XML file which is compiled into C++ code by a separate compiler, uic. An example of the second category is Glade, which produces XML files that libglade reads (Glade can also produce C output). The best example of the third kind of visual design tool is Visual Basic, where you can't separate GUI design and code design.

Each approach has its pros and cons. Generating C++ code means fast applications, but it's not flexible: If the GUI changes, the app must be recompiled. Run-time reading resource files offers all the flexibility you can ask for, but can be very slow. Users tend to expect dialog windows to pop up in less than two seconds! Writing the application code in the same tool you use to design the interface makes for rapid prototyping, but often leads to an incoherent application architecture, with the attendant lack of maintainability.

Design tool characteristics

Visual design tools, whichever kind they might be, sport much the same interface: a palette with widgets, a canvas to place the widgets on, and property sheets to customize the widgets. Beyond that, there are only differences in sophistication. Here are some of the characteristics that help us evaluate these design tools.

Moving from the broader set of tools to what's available in the Qt world, let's look at some of the basic characteristics of visual design offerings that predate Trolltech's Qt Designer:

Of these options, Qt Architect, by Jeff Harris and Klaus Ebner, is certainly the most mature. It offers good, albeit low-level, layout management support, and it's fairly easy to add home-made widgets to the palette. The most recent version saves its dialogs in an XML format. Qt Architect uses that xml file format only for saving dialogs; when the dialog is finished, it generates C++ code. The XML format is not suited for anything else: It would probably be difficult and certainly very time-consuming to have Qt Architect generate Python instead of C++, or use the XML files as a resource file for a running program. Qt Architect is not entirely stable -- very complex layouts can make the layout editor crash.

QtEZ is another well-developed project. Originally created by Sam Magnusson, it is now maintained by Jan Prokop. QtEZ offers a fairly complete environment for Qt/C++ project development, including generation of makefiles, source code editing, and dialog design. QtEZ also offers support for layout management.

Ebuilder, created by Ernie van der Meer, is said to be approaching version 1.0. I couldn't get it to compile, so I can say little about it.

KDevelop, by Sandy Meier and a team of dedicated developers, is another mature and complete C++ development environment. As a development environment, it's very good, with an excellent class browser, but the included dialog designer is quite primitive, and doesn't support layout management at all.

ViPyl and XML-Builder are interesting in that they try a different approach from source-code generation. ViPyl, by Henning Schroeder, tries to work in the same way as Visual Basic, by offering integrated code and layout design. ViPyl is based on Python, but unfortunately remains in a very early stage. XML-builder, by David W. Schere, uses XML files to generate dialogs run-time. It's Python-based and so old it used the obsolete PythonQt bindings instead of PyQt.

Enter Qt Designer

The QT Designer About screen.

Figure 1. The QT Designer "about" screen (click for larger view).

Qt Architect and QtEZ are certainly very good solutions, but Trolltech has long promised a GUI builder of their own, and they have finally delivered. The application needs the latest version of the Qt library: It makes use of the most advanced features, such as properties. Qt Designer can generate dialog windows, wizards, and general purpose widgets.

Besides the basic dropping of widgets on a canvas and setting their properties, Qt Architect offers the following features:

The QT Designer main interface.

Figure 2. The QT Designer main interface (click for larger view).

Qt Designer's handling of layout management is especially clever. It hides a lot of the complexity of the mechanism by doing much of the work behind the scenes. For instance, margins are automatically added. This means of course that certain complex layouts can be difficult to achieve, at least more difficult than with Qt Architect. However, I find that the ease of use more than makes up for this lack of control, especially since the results of the automatic layout management are very pleasing aesthetically.

Qt Designer's handling of layout management is especially clever.

Figure 3. Qt Designer's handling of layout management is especially clever (click for larger view).

One very important design decision has been the separation of the designer tool and the user interface compiler, uic. In Qt Architect, the C++ generation code has been interwoven with the designer GUI, making it very difficult to replace the generator with one for another language. This decision also means that the .ui XML-file format is very sensible, which means that it can be handled with custom tools -- an important consideration in a corporate development environment.

As for third-party widgets, they are easy to include with Qt Designer. You don't need to enter any code, just to fill in the dialog shown in Figure 4.

Third-party widgets are easy to include.

Figure 4. Third-party widgets are easy to include (click for larger view).

The Qt signals/slots mechanism is supported in a very innovative manner. The developer simply draws a line from the signal-emitting widget to the signal-accepting widget. A box then pops up that shows all the relevant signals and slots, the developer selects the signal and the slot he wants to connect, and the connection is made!

People who have worked with Visual Basic know what an agony getting the tab order of the controls on a form just right can be -- there are a dozen third-party tools available, but it remains a finicky business. The Qt Designer solution is astonishingly simple: a small blue circle with a number is superimposed on all widgets, and the developer simply clicks on the widgets in the desired order. Likewise, the accelerator-checking option is extremely handy.

Setting the tab order of form controls.

Figure 5. Setting the tab order of form controls (click for larger view).

Once a form has been created, it's very easy to preview the design in any of the supported styles (Motif, CDE, SGI, Windows, Platinum) -- there's no compilation needed, so the preview is instantaneous.

Another very important consideration is documentation. While I saw a pre-release copy, and the documentation wasn't finished yet, it was clear that the Qt Designer documentation is on the same level as the Qt library documentation. That means that it is well-written, in a fresh, engaging style, that it is complete, up-to-date and accurate. The documentation is written by Matthias Kalle Dalheimer, the author of the widely-acclaimed book "Programming with Qt".

Of course, there are some features missing, too. There's no real concept of a project -- every form is on its own, and there's no way to group related forms. This also means that it isn't possible to connect signals from one form to another. Qt Designer is capable of designing forms, wizards, and widgets, but it cannot design application windows. This means that there's no menu editor, nor a toolbar or status bar editor. But all these features are already planned for the second version.


The release of Qt Designer will invalidate one of the most serious objections to using Qt in commercial, large-scale development projects, namely that there is no professional, commercially supported GUI designer. Qt Designer is very stable, very easy to use and has some very innovative and very usable features. Importantly, the Qt Designer .ui file format is XML-based and has been sensibly designed: It will be easy to develop in-house tools to work with these files.

I've left the best for the last, though -- Reginald Stadlbauer, one of the Trolltech developers responsible for Qt Designer, assures me that Qt Designer will be included in the free edition of Qt, complete with sources. The definitive version will be released together with Qt 2.2, which is planned for August 2000.

Boudewijn Rempt is a senior developer with Tryllian, a mobile agent company. He has worked with PyQt since its inception.

Related Articles

Qt Attracting Interest Among Application Developers

Boudewijn and Cameron Argue for Qt

Discuss this article in the O'Reilly Network Forum.

Return to the O'Reilly Network Hub.

Copyright © 2009 O'Reilly Media, Inc.