Designing GUIs

So far, we have coded all the user interfaces manually by writing C++ code that instantiates widgets, arranges them in layouts, and connects signals to slots. It is not that hard for simple widgets, but becomes tedious and time-consuming when the UI becomes more and more complex. Fortunately, Qt provides tools to do all this in a more pleasant way. Instead of writing C++ code, we can create forms using a graphical tool by dragging and dropping widgets on a canvas, applying layouts to them, and even establishing signal-slot connections using the point-and-click technique. Later during the compilation, such forms will get converted into C++ code for us and will be ready for applying onto a widget.

The tool is called Qt Designer and is integrated with Qt Creator. To use it, select New File or Project from the File menu and choose the Qt Designer Form Class template available after selecting Qt in the Files and Classes section of the dialog box. You get to choose a template for the form and configure details such as the names of the files to create. In the end, three files will get created—two of them implement a C++ class derived from QWidget or one of its subclasses and the last one contains data for the form itself.

After closing the wizard, we are taken to Qt Creator's Design mode that looks as shown in the following screenshot:

The Design mode consists of four major parts that are marked on the preceding figure with numbers.

The area marked as 1 is the main worksheet. It contains a graphical representation of the form being designed where you can move widgets around, compose them into layouts, and see how they react. It also allows further manipulation of the form using the point-and-click method that we will learn later.

The second area 2 is the widget box. It contains a list of available types of widget that are arranged into groups containing items with a related or similar functionality. Over the list, you can see a box that lets you filter widgets that are displayed in the list to only show those that match the entered expression. In the beginning of the list, there are also items that are not really widgets—one group contains layouts and the other one contains so-called spacers, which are a way to push other items away from each other.

The main purpose of the widget box is to add widgets to the form in the worksheet. You can do that by grabbing a widget from the list with the mouse, dragging it to the canvas, and releasing the mouse button. The widget will appear in the form and can be further manipulated with further tools in Creator's Design mode.

The next area 3, which we are going to talk about, is situated on the right-hand side of the window and consists of two parts. At the top of the figure, you can see Object Inspector. It presents the parent-child relationship of all widgets that are currently present in the edited form. Each line contains the name of the object and the name of its class as seen by the meta-object system. If you click on an entry, a corresponding widget in the form gets selected (and vice versa).

The lower part of the figure shows the property editor. You can use it to change the values of all the properties that each object has. Properties are grouped by their classes that they have been declared in, starting from QObject (the base class implementing properties), which declares only one but an important property—objectName. Following QObject, there are properties declared in QWidget, which is a direct descendant of QObject. They are mainly related to the geometry and layout policies of the widget. Lower in the list, you can find properties that come from further derivations of QWidget. If you prefer a pure alphabetical order where properties are not grouped by their class, you can switch the view using a pop-up menu that becomes available after you click on the wrench icon positioned over the property list; however, once you get familiar with the hierarchy of Qt classes, it will be much easier to navigate the list when it is sorted by a class.

Having a closer look at the property editor, you can see that some of them have arrows beneath them that reveal new rows when clicked. These are composed properties where the complete property value is determined from more than one subproperty values; for example, if there is a property called geometry that defines a rectangle, it can be expanded to show four subproperties: x, y, width, and height. Another thing that you should quickly notice is that some property names are displayed in bold. This means that the property value was modified and is different from the default value for this property. This lets you quickly find those properties that you have modified.

The last group of functionality 4 that we will explain now is the one positioned in the lower part of the window. By default, you will see two tabs—Action Editor and Signal/Slot Editor. They allow us to create helper entities such as actions for the menus and toolbars or signal-slot connections between widgets using a clean tabular interface.

What was described here is the basic tool layout. If you don't like it, you can invoke the context menu from the main worksheet, uncheck the Locked entry, and rearrange all the windows to your liking or even close the ones you currently don't need.