In the process, we will learn about some basic technologies provided by Qt, such as:
Widgets and layout managers
Signals and slots
Input and output devices
All these technologies will be introduced via the Qt Creator Integrated Development Environment (IDE).
If youare completely new to Qt, please read How to Learn Qt if you have not already done so.
The tutorial's source code is located in Qt'sexamples/tutorials/addressbook directory.
Designing the User Interface
Navigating between Entries
Editing and Removing Addresses
Adding a Find Function
Loading and Saving
Althoughthis little application does not look much like a fully-fledged modern GUI application, it uses many of the basic techniques that are used in more complex applications. After you have worked through it, we recommend checking out theApplication example, which presents a small GUI application, with menus, toolbars, a status bar, and so on.
Address Book 1 - Designing the User InterfaceFiles:examples/addressbook-sdk/part1/addressbook.cpp
The first part of this tutorial covers the design of the basic graphical user interface (GUI) we use for the Address Book application.
The first step to creating aGUI program is to design the user interface. In this chapter, our 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.
We begin by launching Qt Creator and use it to generate a new project. To do this, select New File or Project... from the Filemenu. In the New... dialog, select Projects ->Qt4 Gui Application and click OK. Set your project name to part1 with the QtCore and QtGui modules checked. Ensure that you selectQWidget 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 fortheAddressBook class,
addressbook.h - the definition file for the AddressBookclass,
addressbook.ui - the user interface file created with Qt Designer, and
part1.pro - the project file.
Now that we have all the files we need, click Finish so 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 Qt Creator. |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.
We require two QLabels to label the input fields as well as aQLineEdit and a QTextEdit for the input fields. So, drag those widgets from the Widget Box to your form. In the Property Editor, settheir objectName property to nameLabel andaddressLabel for the QLabels, nameLine for the QLineEdit and finally, addressText for the QTextEdit.
Next, we have to position the widgets properly, according to the screenshot earlier. We 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 we specify withrow and column numbers. To place the caption of the addressLabel on the top, change the vertical alignment property to AlignTop. The diagram below shows the layout cells and the position of our widgets. Place your widgets accordingly and save the form by choosing File -> Save or using the Ctrl+Sshortcut.
A common mistake when designing user interfaces with Qt Designer is overlooking the...