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:
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.
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:
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.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.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.
To run your application with Qt Creator, simply click, A bare bones Address Book will be displayed.
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:
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.