From KitwarePublic
Jump to: navigation, search

Qt Designer(¹)

Qt Designer layout and forms builder
Qt Designer is a powerful GUI layout and forms builder, which enables rapid development of high-performance user interfaces with native look and feel across all supported platforms. Stand-alone, or integrated with IDEs like Microsoft Visual Studio .NET, Qt Designer includes powerful features such as preview mode, automatic widget layout, support for custom widgets, an advanced property editor and more.

Quote taken from the Trolltech site, Qt Designer section.

    The version used for this study is version 4.1.1, downloaded from the Trolltech site and compiled from source code.

List of basic widgets

    Qt Designer offers a 'Widget Box' where ALL the widgets are displayed at once, each widget with an icon and some text next to it. This is ideal for first-time users.

    Instead of having a long list with all these widgets, like done for the Glade study, have a look at the following screen-shot. In-detailed documentation of the Qt API can be found here. Most of these widgets and their names are analogous to the gtk+ widgets listed in the results page for Glade, so if in doubt you can either take a look at that list or browse the Qt reference documentation.

Widgets proposed by Qt Designer version 4.1.1

Disposition of tools in the environment and the environment itself

    When Qt Designer is first started, it presents itself as a multiple-detached-windows environment and a pop-up window offers you the possibility to create a new form based on templates. You can switch back and forth to a multiple-document-interface, this is a new feature included in Qt-Designer 4.

    The next sections explain what you can find in all the multiple windows, or tool windows as Qt Designer calls them.

1.) The 'Qt Designer' (main) window

    From this window you have access to the main menus of the application and to the list of widgets. In MDI mode the widgets are grouped in the 'Widget Box' window.

Qt Designer's main window and its menu entries

Using the menus

    From the 'File' menu you can create or open a form, selection of a recently opened form is supported. You can also save the form as a form or as a template. Which is really handy. You can also close a form or quit the application. The 'Close' action is a plus compared to Glade in where this is absent. Note : a form might be a window, a dialog box or a custom widget.

    From the 'Edit' menu you can undo/redo --which seems to be unlimited as tested with up to 80 undo actions and it all passed--, copy, cut, paste, delete, select all widgets in a given form. You have the possibility to bring to the front or send to the back overlapping widgets.

    You can also switch between 4 different edit modes :

  1. ) Editing widgets : in this mode you can select widgets from the 'Widget Box' (main window if using multiple-detached-windows) and add them to a given form. To add them you have to drag them to the form. This is somehow tricky, maybe having to ways of adding them would be better : click on the 'Widget Box' window and then on the form and/or by dragging them.

  2. ) Editing signals/slots : in this mode you can specify that when a certain widget emits/receives a certain signal a certain method, the slot, belonging to the same widget or another one will be called. In this mode the 'Widget Box' is grayed-out, quite handy to avoid user-generated errors. You can indicate the "signaler" and the "slotter" by clicking on a given widget and dragging the mouse either to the same or another one widget, or you can use the 'Signal/Slot Editor' window to do this. You can have the same or different signals being "slotted" to the same or different widgets, every combination is possible, though you cannot indicate a customized code for the slot. Having a visual way to define signal/slots overpasses the 'Properties' window way of working propose by Glade.

  3. ) Editing buddies : in this mode you can define that a certain widget will get the focus when you type a given label's shortcut key combination. This "relationship" is established by dragging the mouse, as in the signal/slot edit mode. This feature is quite "hidden" in Glade, for a given widget you can define a signal, a handler(=slot) and the object whose handler is to be called, i.e. the widget who would get the focus, but in order to emulate this Qt-Designer's 'buddy' behavior you will have to manipulate way too many things. Having such an edit mode is a plus.

  4. ) Editing tab order : in this mode you can specify the order in which you can navigate/focus the widgets in a given form using the TAB key. This feature doesn't exist in Glade, but its definitely supported by gtk+. It is a quite neat feature, the BIG minus is that the only way to specify the tabbing order is by clicking on an auto-incrementing number, impossible to assign it by hand and what is worst when you've set the order for a given widget setting it for another one will disturb/unset the previously set one.

    From this menu you can also switch between the layout of the environment : multiple-detached-windows or MDI. This quite handy to develop big forms as you are not constraint to use a scrollbar to browse around. Though there's the same limitation as with Glade while working with multiple-detached-windows : clicking on one doesn't bring the other siblings to the front, quite annoying if you're working with multiple applications at the same time as you'll have to look around for the other windows to appear. If our application is to use multiple-detached-windows we need to bring the focus of ALL siblings.

    In comparison to Glade many things are far off better : unlimited undo, selection of groups, "layering" of overlapping widgets, the fact that you can work in different edit modes (let's recall in Glade you "access" this edit modes via the 'Properties' window) and the possibility to use a MDI or a multiple detached windows environment. One big minus remains on the way to specify the tabbing order.

    From the 'Form' menu you can layout a given group of widgets. You can lay them out horizontally, vertically, with or without a splitter in between each widget, or in a grid. You can also break the layout of a group of widgets (note you cannot select which widgets are to be taken out of the layout, you actually destroy THE layout). You can also automatically adjust the size of a given group of widgets, so that they occupy just the minimum size for them to be properly displayed. You can also preview a given form, either by selecting a window manager style, like Windows, CDE, Motif or KDE/Plastic, or by using a simple styled preview mode. And finally you can use the 'From' menu to specify form settings, like the name of the author, layout defaults (margin and spacing), amidst others.

    From the 'Tools' menu you can activate/deactivate the visibility of the various tool-windows and of the tool-bars. You can also close a given tool-window just by clicking on a 'close' button on its top-right corner.

    From the 'Window' menu you can select a given form and minimize/maximize it. This action can also be preformed by simply double-clicking on the caption bar of a given form.

    From the 'Help' menu you can access the off-line reference documentation. The documentation is really detailed and helps in many ways both first-time and experienced users, either by describing the environment and its possibilities or by offering the Qt reference documentation. This 'Help' overpasses Glade's and *really helps*.

2.) The 'Signal/Slot Editor' window

Qt Designer's 'Signal/Slot Editor' window showing two drop-down lists of available senders and receivers in a given form

    From within this window you can specify signals and slots, instead of using the 'Signal/Slot' edit mode. You can conveniently choose from a drop-down list the signal's sender, the signal, the receiver and the slot. This is quite handy as user interaction is controlled, the drop-down list avoids malformed input, and you get to know which signal and slots are available.

3.) The 'Resource Editor' window

Qt Designer's 'Resource Editor' window displaying a set of 'resourced' pixmaps

    The Qt resource system is a platform-independent mechanism for storing binary files in the application's executable. This is useful if your application always needs a certain set of files (icons, translation files, etc.) and you don't want to run the risk of losing the files.
    From within this window you can specify, by creating or opening resource files, which are the resources for a given form.

4.) The 'Action Editor' window

Qt Designer's 'Action Editor' window showing actions in a menu for a given widget

    From within this window you can add 'actions' which can be selected from the 'Signal/Slot Editor' window as the sender or the receiver, for instance menu entries.

5.) The 'Property Editor' window

Qt Designer's 'Property Editor' window showing properties for a given widget

    From within this window you can change the properties of a given object (widgets, layout managers, container, etc...). All the properties are listed in the same frame, not like Glade that has several frames to separate property categories.

6.) The 'Object Inspector' window

Qt Designer's 'Object Inspector' window showing the arborescence of a given form

    This window is the analogous of the 'Widget Tree' window in Glade. It displays the arborescence of the objects in a given form. Unlike Glade, it does not propose interaction for selection, it is just a non-editable display.

Qt Designer's 'New Form' dialog box showing available templates and a thumbnail preview of the selected template

    The user has the possibility to create forms based on predefined templates. Qt Designer proposes by default templates for main windows and dialog boxes, and the user can save forms as templates, thus you can configure the templates repertoire to fit all project's needs. When creating new forms you get a snap-shot preview for a given form, which is quite useful as a visual description says more then a written one.

    You can work with as many forms at the same time as you want, but be aware that each form is going to be saved in a separate XML description file. Working/defining projects in a strict sens is thus not supported. This is definitely a NOT-WANTED feature : we need a way to store whole packs of widgets, let's call them projects like in Glade, and individual widgets separately.

    The working area is either your desktop, if you are working with a multiple-detached-top-level-windows, so you can make your forms as big as your desktop area, or the client area of the main window, if you are working in MDI mode. The "canvas" area is always visible even when no form is being edited.

    The complete list of available widget is displayed in the 'Widget Box' window, or the Qt Designer main window if not in MDI mode. The list is divided in sub-categories and each sub-category can be hidden by clicking on its title. This is definitely a WANTED feature.
    If for some reason you do not see the 'Widget Box' window you can reactivate it through the 'Form'->'Widget Box' menu entry in the main window.
    To add widgets to a given form you select them from the 'Widget Box' window by left-clicking and dragging them to the destination form. This is O.K., but for first-time users this might be tricky, so there should be support for the both the traditional click-on-widget-click-on-form, like in Glade, and this click-on-widget-drag-to-form way of adding widgets.
    A nice feature is the fact that you get a thumbnail-preview of the widget you are currently selecting/dragging.

    There is support for multiple-selection of widgets, copy, paste, delete, drag-and-drop, undo, redo and keyboard short-cuts to perform all of these actions. These are big WANTED features in KWWidgets UI-Designer.

    You cannot copy specific attributes from one widget to another, but when you cut/copy and paste a widget, into the same form or to another one, ALL its attributes remain intact. Another WANTED feature.

    Even though the Qt library has a vast multi-language support, there doesn't seem to be a place where to specify this from withing Qt Designer. For this you have to use Qt Linguist

    The way Qt handles fonts is explained in detail here. In short it tests if the specified font for a given widget is installed on the system, if nothing matches it does its best to choose another font which resembles the most the specified one. Font changes from the window manager don't affect font specifications, as it happens with Glade's widgets. *TODO* Study how tcl/tk to manage fonts, fonts' sizes and resize events

    The default naming convention for variables seems to follow the same convention used by Glade : the name of the widget is the name of the class it belongs to, the whole in lower-case characters, appended is a suffix in the form "_<count of existing widgets of that class+1>". Two things must be remarked :

  1. ) if you add say five widgets and you delete the one named "XXX_2", and then add another one, the newly added will be named "XXX_2", so by default an order is defined in the suffix and empty slots are honored over new ones.
  2. ) variable names don't seem/need to be necessarily unique, you can have 50 widgets whose name are all "XXX" without a problem. *IMHO this is possible as in the XML description each widget is a different node*.

    The use of tool-tips is more limited than in Glade : tool-tips seem to be working only on the tool-bar buttons. This is a NOT-WANTED feature : we need/want users to get information from every possible way, having a brief description next to each widget is cool, having a thumbnail preview as well, but besides that you sometimes need a quick way to remind you what this is for, without having to browse the off-line documentation. Tool-tips on EVERY single visual element of the designer is a MUST.
    A status bar seems to be missing. We definitely want one whose use should be more extensive than Glade's.
    Off-line documentation is rock-solid : it englobes the Qt reference documentation, the Qt Designer's manual, the Qt Assistant Manual --the document which englobes all these off-line aids--, the Qt Linguistic manual and the qmake manual --the application used to generate Makefiles--. This help REALLY HELPS and is the LEAST we should aim for, as it aids both first-time and advanced users.

    When using Qt Designer you can only generate an XML description of a single given form, the resulting XML file having the .ui extention. To generate C++ code, with Qt classes, you will have to use 'uic', the Qt user interface compiler. More information about this process can be found here. The way to integrate the generated C++ into your applications is explained in detail here.

Using the designer

    Time spent : around 1 hour. This was the first time I used Qt Designer and I was trying to mimic a very specific widget disposition achieved with Glade, though the result was not exactly the same.

Dummy interface developped with Qt Designer

    Adding basic widgets was pretty straightforward once you've realized about the 'click-widget-drag-to-canvas' trick.
    Defining the layout of widgets was a little more difficult : either you add all the widget you want to layout in a "neutral" zone, then you select them and finally you use the 'Form->Lay Out...' menu entries, which I think is the easier way, or you add the layout first and continue by adding the widgets trying to fit them in the right place, but IMHO this is maybe not the best approach, as you will need to perform an extra 'Form->Adjust Size' to discard extra space. Another glitch is the fact that when you have selected a layout and you right-click on it you might loose the selection, as if you have just left-clicked on it.
    Changing widget's attributes was easy by browsing around the 'Property Editor' window. But in order to indicate more specific properties, like the number of pages in a tab widget you must right-click over the widget, which is a bit confusing for first-time users. It would be a good idea to have the possibility to specify such things from within the 'Property Editor' window OR by right-clicking over the widget.

Step 1
Step 2
Step 3
Steps performed to add a widget.
Step 1 : select the widget you want to add from the 'Widget' window by left-clicking on it. A thumbnail preview will appear below the cursor.
Step 2 : while holding the left mouse button pressed, slide the cursor to the "spot" where you want to place the widget. The thumbnail preview will follow the cursor. Sliding the widget over layout containers will highlight them.
Step 3 : once you have reached the desired position let loose on the left mouse button. The widget is added. You might need to change its size to fit your needs. That's all.

    There doesn't seem to be any text limitations, tested with up to 22 thousand characters without problem. This is definitely a WANTED feature.
    Another BIG limitation compared to Glade is the set of widgets Qt Designer proposes. Even though Qt proposes classes for specialized dialog boxes, like file/font/color choosers, Qt Designer doesn't propose them, like Glade does. This also goes for menu bars, tool bars and "system" icons --Glade "binds" a set of icons to each gtk theme, the default set being propose by the GNOME basic theme, so you can easily select icons without having to "resource" them first--. It would be a nice feature to blend the possibility of having user-defined resources (Qt Designer flavor) and default resources (Glade/gtk+ flavor).

    You can edit the XML description and reload it without problem. If you specify a non-recognized tag or attribute it is simply discarded. Though attention : tags having no closing counterpart break things up, which is pretty normal. Such an XML parsing method is a WANTED feature.

    To use only the designer you don't need any extra libraries or applications, everything needed is provided, either with the sources or compiled in the binaries. If you want to develop special things, like multi-language, you need other tools like Qt Linguist

    For information on how to incorporate generated code into applications take a look here.

    All in all Qt Designer presents itself as a really user-friendly application, with rock-solid documentation and real-time preview with theming variants.
    The pros : multiple selection of widget, non-limited undo/redo, possibility to indicate tabbing order, drag-and-drop support, definition of different edit modes, the fact that you can switch the interface in MDI mode or multiple top level windows, right-clicking over a given widget pop ups a context menu, a *REAL* WYSIWYG implementation, resource files, and widget that can be promoted to templates.
    The cons : limited set of proposed widgets compared to the classes furnished by the Qt library, no tool-tips for ALL its visual elements, the 'Property Editor' window doesn't list ALL the properties for widgets, like the pages' number of tab widgets for instance, one needs to access such properties by right-clicking over the widget, no status bar, the XML description references only ONE form.
    Qt Designer definitely gives a big step forward compared to Glade's basic features, documentation and disposition of its tools. Many of its features are highly praised.

This study was undertook by a software engineering student and not an expert in the Qt/Qt Designer field; even though rigorousness was a key element certain assertions might still be wrong.

KWWidgets: [Welcome | Site Map]