The Designer program is used to layout a user interface on a form. The following list describes the basic steps for creating a new form or editing an existing one.

1. Create a new form or open an existing .UI file
2. Drag and drop widgets on the form
3. Add one or more Layouts to the form
4. Preview the form and resize to ensure the look and feel is correct

Creating a UI form

For this example we will design a form which contains controls to adjust the values for Red, Green, and Blue.

The first step is to open a new form. From the File menu select New. A dialog will be displayed. Locate the list item named Widget and then click the Create button on the bottom of the dialog. Drag three Label display widgets, three SpinBox input widgets, and three Vertical Slider input widgets onto the new form.

To change the default text on the labels double click on the given widget and enter Red, Green, and Blue.

Adding Layouts

The controls need to be added to a layout so when the user resizes the window all the widgets will scale evenly. Now add three layouts to the form. Select the RED label, the spin box below it, and the corresponding slider. From the Form menu select Lay Out in a Grid. Repeat these steps for the other two colors.

The next step is to combine all three vertical layouts into one main layout. It is important to have a main layout otherwise the widgets on your form will not resize correctly. To set the main layout, Right Click on the background of the form. Now select Lay Out Horizontally.

Main layouts are not graphically shown on a form. To verify a main layout exists look at the Object Inspector pane. If your top level widget does not have a layout, the icon to the left of the form name will have a small red circle with a line through it.

Signals and Slots

When the user clicks on the slider and drags it to a certain value, the spin box should be updated at the same time. For this to occur a connection from the slider's valueChanged() signal to the spin box's setValue() slot must be made. The reverse connection should also be set up. The spin box valueChanged() signal needs to be connected to the slider setValue() slot.

(1) There are multiple ways to set up the Signal/Slot connections. Our suggestion is to call the connect() method in your application rather than setting this up in the Designer. The following code shows how to make the connections using the method pointer syntax.

(2) If you prefer to use the Designer there are two ways to proceed. The connections can be made by hand from the Signal/Slot Editor. Click on the green plus icon and then use the drop down boxes to pick the Sender, Signal, Receiver, and Slot.

(3) The last option is to make these connections graphically. The first step is to switch from the Edit Widgets Mode (F3) to the Edit Signals/Slots Mode (F4). The can be done from the Edit menu or the toolbar. Next, click on the slider and then drag your cursor towards the spin box and then release the mouse button. You will see a red box with an arrow showing the path of the connection. The Configure Connection dialog (shown below) will be displayed where the Signal and Slot methods can be selected. Repeat this step in the reverse order to connect the spin box to the slider.

Repeat this entire process for the other two sets of controls.

Set a Range

Since RGB values range between 0 and 255 we need to limit the spin box and slider to the given range. Click on the Red spin box. From the Property Editor enter 255 for the maximum property. Then click the Red vertical slider and enter 255 for the maximum property as well. Repeat this process for the remaining spin boxes and sliders.

Preview

Use the preview option to display the form and verify how it will look in your application. To do this press Ctrl + R or select Preview from the Form menu. When dragging the slider or changing the value of the spinbox, the other control will automatically change. This will only occur if the connections were set in the Designer.