9.2. Designer Introduction

9.2. Designer Introduction
	Chapter 9. Widgets and Designer

[ fromfile: designer-intro.xml id: designer-intro ]

Designer is a graphical program for composing and editing the GUI for an application.
The output of a Designer session is an XML file named appname.ui

In QtCreator, Designer has been included as an embedded "Design Mode" that is invoked automatically whenever a .ui file opens.

A classname.ui file can describe a Designer widget with children, layout, and internal connections.

You can drag widgets from the Widget Box, into the central widget, the Widget Editor.
After you have some widgets, you can select any of them in the Object Inspector and see its properties in the Property Editor, as shown in Figure 9.5.

Figure 9.5. QtCreator in Design Mode

In the Property Editor you can change any of the properties
If the property edit changes the visual appearance of the widget, you can see the change immediately in the Widget Editor.

Give Good Names to Your Widgets

	Give Good Names to Your Widgets
Most objects can be renamed from the Widget Editor or the Object Inspector, by either selecting the widget with a single left-click and then pressing F2, or by double-clicking on the widget. If you prefer, you can set the `objectName` from the Property Editor. Later, it will be important that the input widgets have sensible names because those will also be the data member names of the `uic` generated class.

Most objects can be renamed from the Widget Editor or the Object Inspector, by either selecting the widget with a single left-click and then pressing F2, or by double-clicking on the widget. If you prefer, you can set the objectName from the Property Editor. Later, it will be important that the input widgets have sensible names because those will also be the data member names of the uic generated class.

You can drag and drop connections between widgets by switching into the Signals & Slots Editor (F4), as shown in Figure 9.6.

Figure 9.6. Designer Signals & Slots Editor

When you release the mouse button, a Configure Connection dialog pops up, as shown in Figure 9.7.
It first shows a list of signals in the left panel and, when one is selected, the compatible slots display in the right panel.

Figure 9.7. Configure Connection

When you finish forming new connections, you can get back into Edit Widgets by pressing F3.
You can always view or edit existing connections with the Signals & Slots Editor dockable (shown near the bottom of Figure 9.6) regardless of whether the widget editor is in widget editing mode, connection mode, or buddy editing mode.
You can preview the dynamic behavior of the connections you just formed with Preview Widget (Ctrl+Alt+R), as shown in Figure 9.8

Figure 9.8. Widget Preview

Even though no code at all has been written at this point, you can preview the dynamic behavior of your newly created ui file immediately with Designer.
Section 9.7 describes how to integrate your ui file with your own (data handling) class.


9.1. Widget Categories		9.3. Dialogs