Home · Examples 

A Quick Start to Qt Designer

[Qt Designer Manual]

Using Qt Designer involves four basic steps:

  1. Choose your form and objects
  2. Lay the objects out on the form
  3. Connect the signals to the slots
  4. Preview the form
Suppose you would like to design a small widget (see screenshot above) that contains the controls needed to manipulate Red, Green and Blue (RGB) values -- a type of widget that can be seen everywhere in image manipulation programs.

Choosing a Form

You start by choosing Widget from the New Form dialog.

Then you drag three labels, three spin boxes and three vertical sliders on to your form. You can roughly arrange them according to how you would like them to be laid out.

To ensure that they are laid out exactly like this in your program, you need to place these widgets into a layout. We will do this in groups of three. Select the "RED" label. Then, hold down Shift while you select its corresponding spin box and slider. In the Form menu, select Lay Out in a Grid.

Repeat the step for the other two labels along with their corresponding spin boxes and sliders as well. Your form will now look similar to the screenshot below.

The next step is to combine all three layouts into one main layout. It is important that your form has a main layout; otherwise, the widgets on your form will not resize when your form is resized. To set the main layout, Right click anywhere on your form, outside of the three separate layouts, and select Lay Out Horizontally. Alternatively, you could also select Lay Out in a Grid -- you will still see the same arrangement.

Note: Main layouts cannot be seen on the form. To check if you have a main layout installed, try resizing your form; your widgets should resize accordingly.

When you click on the slider and drag it to a certain value, you want the spin box to display the slider's position. To do this, you need to connect the slider's valueChanged() signal to the spin box's setValue() slot. You also need to make the reverse connections, e.g., connect the spin box's valueChanged() signal to the slider's setValue() slot.

To do this, you have to switch to Edit Signals/Slots mode, either by pressing F4 or something Edit Signals/Slots from the Edit menu.

Repeat the step (in reverse order), clicking on the spin box and dragging the cursor towards the slider, to connect the spin box's valueChanged() signal to the slider's setValue() slot.

Now that you have successfully connected the objects for the "RED" component of the RGB Controller, do the same for the "GREEN" and "BLUE" components as well.

Since RGB values range between 0 and 255, we need to limit the spin box and slider to that particular range.

Now, we preview your form to see how it would look in your application. To preview your form, press Ctrl + R or select Preview from the Form menu.

Try dragging the slider - the spin box will mirror its value too (and vice versa). Also, you can resize it to see how the layouts used to manage the child widgets respond to different window sizes.

Copyright © 2009 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt Jambi 4.5.2_01