Qt

Address Book 1 - Designing the User Interface

The first part of this tutorial covers the design of the basic graphical user interface (GUI) you use for the Address Book application.

The first step to creating a GUI program is to design the user interface. In this chapter, your goal is to set up the labels and input fields needed to implement a basic address book application. The figure below is a screenshot of our expected output.

Begin by launching Qt Creator and use it to generate a new project. To do this, select File > New File or Project... > Qt Application Project > Qt Gui Application and click OK. Set your project name to part1 with the QtCore and QtGui modules checked. Ensure that you select QWidget as your base class and name it AddressBook.

When you click Next, five files will be generated in this Project:

  • main.cpp - the file containing a main() function, with an instance of AddressBook,
  • addressbook.cpp - the implementation file for the AddressBook class,
  • addressbook.h - the definition file for the AddressBook class,
  • addressbook.ui - the user interface file created with Qt Designer, and
  • part1.pro - the project file.

Now that you have all the files you need, click Finish so you can start designing the user interface.

Note: For more details on how to create a Project with Qt Creator, refer to Creating a Project.

Placing Widgets on The Form

In the Projects sidebar, double-click on the addressbook.ui file. The Qt Designer plugin will be launched, allowing you to design your program's user interface.

You require two QLabels to label the input fields as well as a QLineEdit and a QTextEdit for the input fields. To create this follow the steps mentioned below:

  • Drag those widgets from the Widget Box to your form.
  • In the Property Editor, set their objectName property to nameLabel and addressLabel for the QLabels, nameLine for the QLineEdit and finally, addressText for the QTextEdit.
  • Position the widgets properly, according to the screenshot above.
  • Use a QGridLayout to position our labels and input fields in a structured manner. QGridLayout divides the available space into a grid and places widgets in the cells you specify with row and column numbers.
  • Place the caption of the addressLabel on the top, change the vertical alignment property to AlignTop.

The figure below shows the layout cells and the position of our widgets. Place your widgets accordingly and save the form by choosing File > Save or use the shortcut key Ctrl+S.

A common mistake when designing user interfaces with Qt Designer is overlooking the top level widget's layout. Unlike sub-layouts, which Qt Designer displays with a red border, top level layouts have no graphical representation. Layouts are necessary for top level widgets, in this case QWidget, to ensure that when the window is resized, the widgets on the form will resize accordingly. You can try this out by pressing Alt+Shift+R now. To correct it, click anywhere on the form and select Lay out Horizontally or Lay out Vertically. The output will be the same. Now your widgets will resize correctly.

Note: Refer to the Layout Classes document for more details on Qt's layout management classes. In addition, the Getting to Know Qt Designer document explains how to use layouts with Qt Designer.

The AddressBook Class

The addressbook.h file is used to define the AddressBook class.

Let's take a look at what is already provided for us by Qt Creator. The AddressBook class has been defined as a QWidget subclass with a constructor and destructor.The Q_OBJECT macro is used to indicate that this class uses internationalization as well as Qt's signals and slots features. Although the macro implements some of Qt's more advanced features, for now, it is useful to think of it as a shortcut that allows us to use the tr() and connect() functions.


Qt Creator's Project Wizard provides you with the Ui object as a way to access the widgets on our form.

The addressbook.cpp file is used to implement the AddressBook class. The constructor sets up the ui file; the destructor deletes it.



The main() Function

The main.cpp file contains the main() function It is generated by the Project Wizard. Within this function, a QApplication object, a, is instantiated. QApplication is responsible for various application-wide resources, such as the default font and cursor, and for running an event loop. Hence, there is always one QApplication object in every GUI application using Qt.


The code constructs a new AddressBook widget on the stack and invokes its show() function to display it. However, the widget will not be shown until the application's event loop is started. This is done by calling the application's exec() function. Finally, the result returned by exec() is used as the main() function's return value.

Running the Application

To run your application with Qt Creator, simply click, . A bare bones Address Book will be displayed.

Qt Programming - Subclassing

When writing Qt programs, you usually subclass Qt objects to add functionality. This is one of the essential concepts behind creating custom widgets or collections of standard widgets. Subclassing to extend or change the behavior of a widget has the following advantages:

  • You can write implementations of virtual or pure virtual functions to obtain exactly what you need, falling back on the base class's implementation when necessary.
  • It allows you to encapsulate parts of the user interface within a class, so that the other parts of the application do not need to know about the individual widgets in the user interface.
  • The subclass can be used to create multiple custom widgets in the same application or library, and the code for the subclass can be reused in other projects.

Since Qt does not provided a specific address book widget, you subclass a standard Qt widget class and add features to it. The AddressBook class you create in this tutorial can be reused in situations where a basic address book is needed.