Qt Widgets Designer

Qt Creator automatically opens all .ui files in the integrated Qt Widgets Designer, in Design mode.

Widgets and forms created with Qt Widgets Designer are integrated seamlessly with programmed code by using the Qt signals and slots mechanism that allows you to easily assign behavior to graphical elements. All properties set in Qt Widgets Designer can be changed dynamically within the code. Furthermore, features such as widget promotion and custom plugins allow you to use your own widgets with Qt Widgets Designer.

For more information about Qt Widgets Designer, see the Qt Widgets Designer Manual.

Generally, the integrated Qt Widgets Designer has the same functions as the standalone Qt Widgets Designer. The following sections describe the differences.

The following video shows how to use the integrated Qt Widgets Designer to create a small Qt Widgets-based application:

Code Editor Integration

To switch between forms (Design mode) and code (Edit mode), press Shift+F4.

You can use Qt Creator to create stub implementations of slot functions. In the Design mode, right-click a widget to open a context menu, and then select Go to Slot. Select a signal in the list to go to an existing slot function or to create a new slot function.

Managing Image Resources

In standalone Qt Widgets Designer, image resources are created using the built-in Resource Editor. In Qt Creator, .ui files are usually part of a project, which may have several resource files (.qrc). They are created and maintained by using the Qt Creator Resource Editor. The Qt Widgets Designer Resource Editor is de-activated and the image resources are displayed in the Qt Widgets Designer Resource Browser.

To open resource files from the code editor, select Follow Symbol Under Cursor in the context menu or press F2 when the cursor is over a string literal.

Specifying Settings for Qt Widgets Designer

You can drag and drop the views in Qt Widgets Designer to new positions on the screen.

To specify settings for Qt Widgets Designer:

• Select Preferences > Designer.
• Specify embedded device profiles, that determine style, font, and screen resolution, for example, in Embedded Design.
• Specify settings for the grid and previewing forms in Forms.
• Specify an additional folder for saving templates in Template Paths.

To preview the settings, select Tools > Form Editor > Preview, or press Alt+Shift+R.

Previewing Forms Using Device Profiles

A device profile is a set of configuration files that describe a mobile device. It includes a border image that surrounds the form and depicts a mobile device with its buttons.

To preview your form using device profiles, select Tools > Form Editor > Preview In, and then select a device profile.

Adding Device Profiles

To add device profiles:

1. Preferences > Designer.

   

2. In Embedded Design, select to open the Add Profile dialog.

   

3. In Name, enter a name for the device. The name is displayed as an option in Preview In.
4. In Family, select the font to use.
5. In Point Size, select the font size.
6. In Style, select one of the predefined styles.
7. In Device DPI, select one of the predefined DPI values or User defined to specify a custom value.
8. Select OK to add the device profile to the list.

To import device profiles from .qdp files, select Open. To save them as .qdp files, select Save.