Qt

Address Book 2 - Adding Addresses

The next step to creating our basic address book application is to allow a little bit of user interaction.

You will provide a push button that the user can click to add a new contact. Also, some form of data structure is needed to store these contacts in an organized way.

Placing Widgets on The Form

You can continue with the form from the last chapter; you have the labels and input fields set up, but you need to add push buttons to complete the process of adding a contact. Break the existing layouts by following the steps below:

  • Select, Break Layout from the context menu. You might have to do a Select All with Ctrl+A first..
  • Add three push buttons and double-click on each of them to set their text to "Add", "Submit", and "Cancel".
  • Set the objectName of the buttons to addButton, submitButton and cancelButton respectively.
  • A Vertical Spacer is required to ensure that the push buttons will be laid out neatly; drag one from the Widget Box.
  • Lay out these three push buttons and the spacer vertically, by selecting all three of them using Ctrl + click and selecting Lay out Vertically from the context menu. Alternatively you can use the Ctrl+L shortcut key.

    Note: Use the spacer as you do not want the buttons to be evenly spaced, but arranged closer to the top of the widget.

  • The figure below shows the difference between using the spacer and not using it.

  • Select all the objects on the form using, Ctrl+A and lay them out in a grid.
  • Lastly, set the top level widget's layout by right-clicking anywhere on the widget and selecting Lay out Horizontally or Lay out Vertically.

The final design of the form is shown in the screenshot below:

The AddressBook Class

To ensure that the Address Book reacts to user interaction, you need to write slots for each push button that you added earlier. A slot is a function that responds to a particular signal. This concept will be discussed further in detail below. However, for an overview of Qt's signals and slots concept, you can refer to the Signals and Slots document.

In the addressbook.h file, add the following code:


Since the AddressBook class is a subclass of QWidget, Qt Creator includes QWidget in the header file.


You need a container to store our address book contacts, so that you can traverse and display them. A QMap object, contacts, is used for this purpose as it holds a key-value pair: the contact's name as the key, and the contact's address as the value.


You also declare two private QString objects, oldName and oldAddress. These objects are needed to hold the name and address of the contact that was last displayed, before you click Add. So, when you click Cancel, you can revert to displaying the details of the last contact.

Let's move on to implementing the slots defined earlier. Within the constructor of AddressBook, you set up our fields by ensuring that nameLine and addressText are read-only, so that you can only display but not edit existing contact details.

Note: In order to prevent crashes, you need make sure that the autogenerated setupUi() call is always first in the constructor.


You also hide both submitButton and cancelButton as they will only be displayed when you click Add, and this is handled by the addContact() function discussed below.


You connect the push buttons' clicked() signal to their respective slots. The figure below illustrates this.

Finally, set the window title to "Simple Address Book" using the setWindowTitle() function. The tr() method allows us to translate user interface strings.



The addContact() Function

In this function, begin by storing the last displayed contact details in oldName and oldAddress. Then clear these input fields and turn off the read-only mode. The focus is set on nameLine and display submitButton and cancelButton; but disable addButton.



The submitContact() Function

This function can be divided into three parts:

  1. Extract the contact's detail from nameLine and addressText and store them in QString objects. Also validate to ensure that you did not click Submit with empty input fields; otherwise, a QMessageBox is displayed to remind you for a name and address.
    
    
  2. Then proceed to check if the contact already exists. If it does not exist, add the contact to contacts and display a QMessageBox to inform you about this, preventing you from adding duplicate contacts. Our contacts object is based on key-value pairs or name and address, hence, you want to ensure that key is unique.
    
    
  3. Once you have handled both cases mentioned above, restore the push buttons to their normal state with the following code:
    
    

The screenshot below shows the QMessageBox object used to display information messages to the user.

The cancel() Function

This function restores the last displayed contact details and enables addButton, as well as hides submitButton and cancelButton.


The general idea behind adding a contact is to give you the flexibility to click Submit or Cancel at any time. The flowchart below further explains this concept:

Running the Application

Run your application now. You will be able to add as many unique contacts as you like.