Home | All Classes | Main Classes | Annotated | Grouped Classes | Functions

[Prev: Preface] [Home] [Next: Creating a Main Window Application]

Quick Start

This chapter provides a quick start for users of Qt Designer. The chapter takes you step-by-step through the creation of a small dialog-style metric conversion application. It introduces many of the common tasks users perform when creating an application: adding widgets to a form, setting widget properties, making connections between signals and slots, laying out widgets, and adding custom code. This chapter only covers a portion of Qt Designer's functionality; explanations and details are mostly left for the more detailed colortool tutorial presented in chapters two and three.

The Metric Conversion Dialog

Starting and Exiting Qt Designer

Starting Qt Designer under Windows

To start Qt Designer under Windows, click the Start button then select Programs|Qt X.x.x|Designer. (X.x.x is the Qt version number, e.g. 3.3.1.)

Starting Qt Designer under Unix or Linux

Qt Designer may be started in a number of ways, depending on the desktop environment you are using:

Starting Qt Designer under Mac OS X

Double click on Qt Designer in the Finder.


When you have finished using Qt Designer, just click File|Exit. If you have unsaved work, Qt Designer will ask you whether you wish to save or discard any changes.

Creating the Project

Start Qt Designer now. When Qt Designer starts, it shows the New/Open dialog. We will open this dialog ourselves, so click Cancel to close it.

Our metric conversion application is a standard C++ application, so we must create a C++ project, and add our files and code to this project.

Create the new project as follows:

See also Creating the Project.

Creating the Dialog

See also Creating Dialogs and Layouts.

Adding Widgets to the Dialog

Adding Text Labels

See also Adding the Widgets.

We will change the properties of the text labels to suit the application. This will make them easier to refer to later.

See also Using the Property Editor.

Adding Line Edits, Comboboxes, and Spinboxes

Now we need to relate each of the text labels to the corresponding widget. We do this by creating "buddies".

A widget that does not accept focus itself, e.g. a QLabel, can have an accelerator that will pass the focus to its "buddy", e.g. a QLineEdit. In Qt Designer, we enable this by setting the first widget's buddy property to the name of the buddy widget.

Adding Push Buttons

We will change a few properties for each of the push buttons in the Property Editor window.

Adding Spacers

We need to add spacers to absorb redundant space in our dialog, so that it will lay out nicely at any size. Usually spacers are added as you experiment with the layout but, since this is a quick guide to Qt Designer, and we already know that they will be needed, we will add the spacers now.

Click File|Save to save the dialog.

Editing Widgets

We will edit some of the widgets to contain the values needed for the conversions.

The fromComboBox:

The toComboBox:

Laying Out the Dialog

We will lay out the text labels with their corresponding widgets first, and lay out the push buttons last.

Click File|Save to save the dialog.

See also Laying Out the Widgets.

Tab Order

We should make sure that our dialog's tab order is set correctly.

See also Changing the Tab Order.

Previewing the Dialog

To preview the dialog, press Ctrl+T or click Preview|Preview Form from the menubar. Try dragging the corner of the dialog to adjust the size. Note that the the widgets always stay in proportion no matter what size you make the dialog. Check the tab order of the widgets by pressing the Tab key.

Connecting the Widgets

We need to connect three buttons: the Clear button, the Calculate button, and the Quit button. We also need to connect some of the other widgets. For convenience, we can make all of our connections at once using the View and Edit Connections dialog.

We will now connect our clearButton:

We also need to connect the quit button to the form:

We want to connect the calculate button and the other widgets, but the slot we want to use is not listed in the combobox. We will need to create a new slot so that we can select it from the list to complete our connections.

We will now connect the last few widgets:

Click OK to exit the View and Edit Connections dialog.

Click Save to save the project.

Coding the Dialog

Click "conversionform.ui.h" in the Project Overview window to invoke the code editor. We will implement the convert() and init() functions. For faster implementation, copy the code from this section and then follow the brief explanations below:

    void ConversionForm::convert()
        enum MetricUnits {
        enum OldUnits {

        // Retrieve the input
        double input = numberLineEdit->text().toDouble();
        double scaledInput = input;

        // internally convert the input to millimeters
        switch ( fromComboBox->currentItem() ) {
        case Kilometers:
            scaledInput *= 1000000;
        case Meters:
            scaledInput *= 1000;
        case Centimeters:
            scaledInput *= 10;

        //convert to inches
        double result = scaledInput * 0.0393701;

        switch ( toComboBox->currentItem() ) {
        case Miles:
            result /= 63360;
        case Yards:
            result /= 36;
        case Feet:
            result /= 12;

        // set the result
        int decimals = decimalsSpinBox->value();
        resultLineEdit->setText( QString::number( result, 'f', decimals ) );
        numberLineEdit->setText( QString::number( input, 'f', decimals ) );

First, we define some enums for the input and output units. Then we retrieve the input from the numberLineEdit. We convert the input to millimeters because this is the most precise metric unit we support. Then we convert it to inches which is the most precise output unit we support. We then scale it to the selected output unit. Finally, we put the result in the resultLineEdit.

Next, we will implement the init() function which is called when the dialog is created.

    void ConversionForm::init()
        numberLineEdit->setValidator( new QDoubleValidator( numberLineEdit ) );
        numberLineEdit->setText( "10" );

For this function, we set a validator on the numberLineEdit so that the user can only input numbers. To be able to do this, we also need to add #include <qvalidator.h> at the top of the "conversionform.ui.h" file, before the init() function. Lastly, we set the initial input.

We are almost ready to run the application. Before we compile the application, we need a main.cpp file.

Compiling and Running the Application

Wrapping Up

In this brief introduction to Qt Designer, we have covered the basic tasks involved in creating a simple dialog-style application. The user should now be able to add widgets to a form, set widget properties, connect signals and slots, lay out the form, and add custom code. We have ignored many of the details, and deferred some explanations until later chapters. The next two chapters provide a tutorial that covers the development of a small but complete application, and the reference chapters complete the detailed coverage.

[Prev: Preface] [Home] [Next: Creating a Main Window Application]

Copyright © 2007 TrolltechTrademarks
Qt 3.3.8