Time for action – designing the game configuration dialog

Now, we will use Qt Designer forms to build a simple game configuration dialog that will let us choose names for our players.

First, invoke the new file dialog from the menu and choose to create a new Qt Designer Form Class as shown in the following screenshot:

In the window that appears, choose Dialog with Buttons Bottom:

Adjust the class name to ConfigurationDialog, leave the rest of the settings at their default values, and complete the wizard.

Drag and drop two labels and two line edits on the form, position them roughly in a grid, double-click on each of the labels, and adjust their captions to receive a result similar to the following figure:

Select the first line to edit and look at the property editor. Find a property called objectName and change it to player1Name. Do the same for the other line and call it player2Name. Then, click on some empty space in the form and choose the Layout in a grid entry in the upper toolbar. You should see the widgets snap into place—that's because you have just applied a layout to the form. When you're done, open the Tools menu, go to the Form Editor submenu, and choose the Preview entry.

What just happened?

You can see a new window open that looks exactly like the form we just designed. You can resize the window and interact with the objects inside to monitor the behavior of the layouts and widgets. What really happened here is that Qt Creator built a real window for us based on the description that we provided in all the areas of the design mode. Without any compilation, in a blink of an eye we received a fully working window with all the layouts working and all the properties adjusted to our liking. This is a very important tool so make sure to use it often to verify that your layouts are controlling all the widgets as you intended them to—it is much faster than compiling and running the whole application just to check whether the widgets stretch or squeeze properly. It's all possible thanks to Qt's meta-object system.