Design mode interface

Open the mainwindow.ui file and examine Qt Creator's Design mode:

The Design mode consists of five major parts (they are marked on this screenshot):

• The central area (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 toolbox (2) is located in the left part of the window. 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 show only those that match the entered expression. At 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 or create an empty space in layouts. The main purpose of the toolbox is to add items to the form in the worksheet. You can do that by grabbing a widget from the list with the mouse, dragging it to the widget in the central area, and releasing the mouse button.
• The two tabs (3) in the lower part of the window—Action Editor and Signal/Slot Editor—allow us to create helper entities such as actions for the menus and toolbars or signal-slot connections between widgets.
• The object tree (4) is situated in the top-right corner and contains the hierarchy tree of the form's items. The object name and class name of each item added to the form is displayed in the tree. The topmost item corresponds to the form itself. You can use both the central area and the object tree to select the existing items and access their context menu (for example, if you want to delete an item, you can select the Remove... option in the context menu).
• The property editor (5) is located in the bottom-right corner. It allows you to view and change the values of all the properties of the item currently selected in the central area and the object tree. 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. Further down the list, you can find properties that come from further derivations of QWidget, down to the concrete class of the selected widget. The Filter field above the properties can help you find the needed property quickly.

Taking a closer look at the property editor, you can see that some of them have  arrows, which reveal new rows when clicked. These are composed properties where the complete property value is determined from more than one subproperty value; 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 may quickly note 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 the properties that you have modified.

If you changed a property's value but decided to stick to the default value later, you should click on the corresponding input field and then click on the small button with an arrow to its right:  . This is not the same as setting the original value by hand. For example, if you examine the 
spacing property of some layouts, it would appear as if it had some constant default value for (example, 6). However, the actual default value depends on the style the application uses and may be different on a different operating system, so the only way to set the default value is to use the dedicated button and ensure that the property is not displayed in bold anymore.

If you prefer a purely 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 class affinity.

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 Automatically Hide View Title Bars entry, and use the title bars that appear to re-arrange all the panes to your liking, or even close the ones you don't currently need.

Now that you are familiar with the structure of the visual form editor, you can finally add some content to our widget. We are making a tic-tac-toe game with local multiplayer, so we need some way of displaying which of the two players currently moves. Let's put the game board in the center of the window and display the names of the players above and below the board. When a player needs to move, we will make the corresponding name's font bold. We also need a button that will start a new game.