qt-creator/doc/addressbook-sdk.qdoc

/****************************************************************************
**
** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
** Contact: Qt Software Information (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:LGPL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the either Technology Preview License Agreement or the
** Beta Release License Agreement.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 2.1 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL included in the
** packaging of this file.  Please review the following information to
** ensure the GNU Lesser General Public License version 2.1 requirements
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
** In addition, as a special exception, Nokia gives you certain
** additional rights. These rights are described in the Nokia Qt LGPL
** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this
** package.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3.0 as published by the Free Software
** Foundation and appearing in the file LICENSE.GPL included in the
** packaging of this file.  Please review the following information to
** ensure the GNU General Public License version 3.0 requirements will be
** met: http://www.gnu.org/copyleft/gpl.html.
**
** If you are unsure which license is appropriate for your use, please
** contact the sales department at qt-sales@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
    \page tutorials-addressbook-sdk.html

    \startpage {index.html}{Qt Reference Documentation}
    \nextpage \l{Designing the User Interface}{Chapter 1}

    \title Address Book Tutorial
    \ingroup howto
    \ingroup tutorials
    \brief An introduction to GUI programming with Qt and Qt Creator,
    describing in detail how to put together a simple yet fully-
    functioning application.

    This tutorial gives an introduction to GUI programming using the Qt SDK.

    ### Screenshot

    In the process, we will learn about some basic technologies provided by
    Qt, such as:

    \list
        \o  Widgets and layout managers
        \o  Container classes
        \o  Signals and slots
        \o  Input and output devices
    \endlist

    All these technologies will be introduced via the Qt Creator Integrated
    Development Environment (IDE).

    If you are completely new to Qt, please read \l{How to Learn Qt} if you
    have not already done so.

    The tutorial's source code is located in Qt's
    \c{examples/tutorials/addressbook} directory.

    Tutorial chapters:

    \list 1
        \o \l{examples/addressbook-sdk/part1}{Designing the User Interface}
        \o \l{examples/addressbook-sdk/part2}{Adding Addresses}
        \o \l{examples/addressbook-sdk/part3}{Navigating between Entries}
        \o \l{examples/addressbook-sdk/part4}{Editing and Removing Addresses}
        \o \l{examples/addressbook-sdk/part5}{Adding a Find Function}
        \o \l{examples/addressbook-sdk/part6}{Loading and Saving}
        \o \l{examples/addressbook-sdk/part7}{Additional Features}
    \endlist

    Although this 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 the \l{mainwindows/application}{Application}
    example, which presents a small GUI application, with menus, toolbars, a
    status bar, and so on.
*/


/*!
    \page tutorials-addressbook-sdk-part1.html
    \contentspage {Address Book Tutorial}{Contents}
    \nextpage \l{examples/addressbook-sdk/part2}{Chapter 2}
    \example examples/addressbook-sdk/part1
    \title Address Book 1 - Designing the User Interface

    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 a GUI 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.

    \image addressbook-tutorial-part1-screenshot.png

    We begin by launching Qt Creator and use it to generate a new project. To
    do this, select \gui New from the \gui File menu. In the
    \gui{New...} dialog, select \gui{Projects|Qt4 Gui Application}. For a step
    by step guide on how to create a \gui Project with Qt Creator, refer to the
    \l{Creating a Project in Qt Creator}. Ensure that you select QWidget as
    your subclass and name it \c AddressBook.

    Five files will be generated in this \gui{Project}:

    \list
        \o  \c{addressbook.pro} - the project file,
        \o  \c{addressbook.h} - the definition file for the \c AddressBook
            class,
        \o  \c{addressbook.cpp} - the implementation file for the
            \c AddressBook class,
        \o  \c{main.cpp} - the file containing a \c main() function, with an
            instance of \c AddressBook, and
        \o  \c{addressbook.ui} - the user interface file created with \QD.
    \endlist

    Now that we have all the files we need, let's move on to designing the user
    interface.


    \section1 Placing Widgets on the Form

    In the \gui{Project Sidebar}, double-click on the \c{addressbook.ui} file.
    The \QD plugin will be launched, allowing you to design your program's user
    interface.

    We require two \l{QLabel}s to label the input fields as well as a QLineEdit
    and a QTextEdit for the input fields. So, drag those widgets from the
    \gui{Widget Box} to your form. In the \gui{Property Editor}, set their
    \gui{objectName} property to \c nameLabel and \c addressLabel for the
    \l{QLabel}s, \c nameLine for the QLineEdit and finally, \c 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 with row and column numbers. The
    diagram below shows the layout cells and the position of our widgets. Place
    your widgets accordingly and save the form by choosing
    \gui{File | Save} or using the \key{Ctrl+S} shortcut.

    \image addressbook-tutorial-part1-labeled-screenshot.png

    A common mistake when designing user interfaces with \QD is overlooking the
    top level widget's layout. Unlike sub-layouts, which \QD 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 \key{Ctrl+R} now. To correct it, simply click
    anywhere on the form and select \gui{Lay out Horizontally} or
    \gui{Lay out Vertically}. The output will be the same. Now your widgets
    will resize correctly.


    \section1 The AddressBook Class

    The \l{examples/addressbook-sdk/part1/addressbook.h}{\c addressbook.h} file
    is used to define the \c AddressBook class.

    Let's take a look at what is already provided for us by Qt Creator. The
    \c 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
    \l{QObject::}{tr()} and \l{QObject::}{connect()} functions.

    \snippet examples/addressbook-sdk/part1/addressbook.h class definition

    Qt Creator's \gui{Project Wizard} provides us with the \c Ui object as a
    way to access the widgets on our form.

    The \l{examples/addressbook-sdk/part1/addressbook.cpp}{\c addressbook.cpp}
    file is used to implement the \c AddressBook class. The constructor sets up
    the \c ui file; the destructor deletes it.

    \snippet examples/addressbook-sdk/part1/addressbook.cpp class implementation


    \section1 The \c{main()} Function

    The \l{examples/addressbook-sdk/part1/main.cpp}{\c main.cpp} file contains
    the \c{main()} function  It is generated by the \gui{Project Wizard}.
    Within this function, a QApplication object, \c 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.

    \snippet examples/addressbook-sdk/part1/main.cpp main function

    The code constructs a new \c AddressBook widget on the heap using the
    \c new keyword and invokes its \l{QWidget::}{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
    \l{QApplication::}{exec()} function. Finally, the result returned by
    \l{QApplication::}{exec()} is used as the \c main() function's return
    value.


    \section1 Running the Application

    To run your application with Qt Creator, simply click on the Play button
    (image). A bare bones Address Book will be displayed. Click on the X button
    to close it.


    \section1 Qt Programming - Subclassing

    When writing Qt programs, we 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:

    \list
        \o  We can write implementations of virtual or pure virtual functions
            to obtain exactly what we need, falling back on the base class's
            implementation when necessary.
        \o  It allows us 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.
        \o  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.
    \endlist

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


/*!
    \page tutorials-addressbook-sdk-part2.html
    \previouspage Address Book 1 - Designing the User Interface
    \contentspage {Address Book Tutorial}{Contents}
    \nextpage \l{examples/addressbook-sdk/part3}{Chapter 3}
    \example examples/addressbook-sdk/part2
    \title Address Book 2 - Adding Addresses

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

    ### \image addressbook-tutorial-part2-add-contact.png

    We 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.


    \section1 Placing Widgets on the Form

    Now that we have the labels and input fields set up, we add push buttons to
    complete the process of adding a contact. So, we begin by breaking the
    existing layouts. Then, we add three push buttons. Double-click on each of
    them to set their text to "Add", "Submit", and "Cancel". We now require a
    vertical spacer to ensure that the push buttons will be laid out neatly;
    drag one from the \gui{Widget Box}.

    Next, lay out these three push buttons and the spacer vertically, by
    selecting all three of them (using the \key{Ctrl + click}) and choosing
    \gui{Lay out Vertically} from the context menu. Alternatively you can click
    on the ... button or use the \key{Ctrl+L} shortcut. We use the spacer as we
    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.

    ## image

    Select all the objects on the form (use \key{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 \gui{Lay out Horizontally} or
    \gui{Lay out Vertically}.

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

    ## image


    \section1 The AddressBook Class

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

    In the \l{examples/addressbook-sdk/part2/addressbook.h}{\c addressbook.h}
    file, we add the following code:

    \snippet examples/addressbook-sdk/part2/addressbook.h slot definition

    Next, we have to provide private members for the \c AddressBook class so
    that we can access these members freely throughout the application.

    \note The names, e.g., \c addButton etc., correspond to the name of the
    actual object. You can modify them by double-clicking on their names within
    \QD's \gui{Object Inspector}.

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

*/