A Dialog with Qt Designer

As we have seen in the previous post, to create a dialog we should go through these steps:

1. create (and initialize) the contained widgets.
2. organize the widgets in layouts.
3. optionally set the tab order.
4. set the signal-slot connections.
5. implements the dialog custom slots, where provided.

We have done that programmatically, but we can do the same also using a visual tool, Qt Designer.

In this post we are about to create a dialog to get from the user a cell location, information that will be used from to application to move the current cell selection to the provided one. We need just a label-line edit pair and the usual ok-cancel buttons.

To do that, instead of Qt Creator we'll use Qt Designer. That means, we run designer.exe, found in our Qt bin directory. As we open the application a simple wizard is showed (until you decide to turn it off for good). Among the options there is what looks exactely what we are looking for: a dialog with buttons on the bottom. But let's so it by hand, and just start with a dialog without buttons.

The first step is just a matter of drag and drop from the panel Widget Box.

We put on the top of our dialog the label and line edit pair:
From the section "Display Widget" we grab a Label and put it in our dialog.
From "Input Widget" a Line Edit.

Then on the bottom the buttons. But on the left we put want to leave an empty space, so we put:
From section "Spacer" a Horizontal Spacer.
From "Buttons" two Push Buttons.

It's not worthy to spend much time in organizing the widget, since we'll use layout managers to do the job. But we should do some property setting for all our widgets.

Notice that we can access all available objects in the window through the Object Inspector window, and all the properties of any object through the Property Editor window.

Label: double clicking on it we can change the text property, setting it to "&Cell location", then we set its buddy to "where".

Line Edit: we set its objectName to "where".

First button: set its text to "OK" and its objectName to btnOK.
Second button: set its text to "Cancel" and its objectName to btnCancel.

Dialog: set its objectName to DlgGoToCell and its windowTitle to "Go To Cell".

Now the second step, we think about the layout.

We select both the label and the line edit and specify Lay Out Horizontally for them.

We select spacer and buttons and specify Lay Out Horizontally for them.

Click on the dialog background, to work on the dialog object, and click on Lay Out Vertically.

And that's it. We could now resize the window to specify our preferred size for it.

To have a preview of our job we can use the shortcut Ctrl-R, or call the menu item Form-Preview.

For the third step we click on the menu item Edit-Edit Tab Order. We see the numbers identifying it, and we can change it. We shouldn't have anything to modify in this case, but we could play around a bit with this feature. When we are done, F3 will bring us back to the "normal" edit state.

We are ready to save our dialog. Let's call it DlgGoToCell.ui and put it in the source folder of our project.

And that's it for this post. In the next one we are going to complete the functionality of this dialog using Qt Creator.

I wrote this post as homework while reading "C++ GUI Programming with Qt 4, Second Edition" by Jasmin Blanchette and Mark Summerfield.