Home · Examples 


Getting to Know Qt Designer

[Qt Designer Manual]



Launching Designer

The way that you launch Qt Designer depends on your platform:

The User Interface

When used as a standalone application, Qt Designer's user interface can be configured to provide either a multi-window user interface (the default mode), or it can be used in docked window mode. When used from within an integrated development environment (IDE) only the multi-window user interface is available. You can switch modes in the Preferences dialog from the Edit menu.

In multi-window mode, you can arrange each of the tool windows to suit your working style. The main window consists of a menu bar, a tool bar, and a widget box that contains the widgets you can use to create your user interface.



Qt Designer's Main Window

The menu bar provides all the standard actions for managing forms, using the clipboard, and accessing application-specific help. The current editing mode, the tool windows, and the forms in use can also be accessed via the menu bar.

The tool bar displays common actions that are used when editing a form. These are also available via the main menu.

The widget box provides common widgets and layouts that are used to design components. These are grouped into categories that reflect their uses or features.

Most features of Qt Designer are accessible via the menu bar, the tool bar, or the widget box. Some features are also available through context menus that can be opened over the form windows. On most platforms, the right mouse is used to open context menus.


Qt Designer's Widget Box

The widget box provides a selection of standard Qt widgets, layouts, and other objects that can be used to create user interfaces on forms. Each of the categories in the widget box contain widgets with similar uses or related features.

Note: Since Qt 4.4, new widgets have been included, e.g., QPlainTextEdit, QCommandLinkButton, QScrollArea, QMdiArea, and QWebView.

You can display all of the available objects in a category by clicking on the handle next to the category label. When in Widget Editing Mode, you can add objects to a form by dragging the appropriate items from the widget box onto the form, and dropping them in the required locations.

Qt Designer provides a scratch pad feature that allows you to collect frequently used objects in a separate category. The scratch pad category can be filled with any widget currently displayed in a form by dragging them from the form and dropping them onto the widget box. These widgets can be used in the same way as any other widgets, but they can also contain child widgets. Open a context menu over a widget to change its name or remove it from the scratch pad.

The Concept of Layouts in Qt Designer

A layout is used to group and arrange widgets according to a specific user interface design, ensuring that all available space is maximized. Qt provides layout classes to automate the process of arranging widgets and these classes ensure that when a window or dialog is resized, the widgets within it are also resized and positioned automatically.

The process of laying out widgets automatically is triggered by two factors:

  1. Externally by resizing the surrounding window.
  2. Internally by individual widgets changing their size constraints.
A simple example for the external factor is when you resize a widget, Qt's layout classes automatically resizes and rearranges the widgets in the window. For the internal factor, an example would be if the font size of a button is increased. This will cause the button to change its size to accommodate the front. Then, Qt's layout classes will arrange the position of the button's text and if necessary, resize the surrounding widgets as well.
A Dialog in English
A Dialog in French




The dialogs above illustrate the size difference for push buttons in English and push buttons in French. Qt's layout classes handles the sizing and positioning of these buttons automatically.

Relative positioning, which is what Qt's layout classes do, is easier than manually positioning widgets and trying to handle this situation with hardcode. We do not recommend absolute positoning as Qt's layout classes already do all the magic for you under the hood. So, developers no longer have to worry about rearranging widgets for different platforms, settings and languages.


Copyright © 2009 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt Jambi 4.5.2_01