Walkthrough: A Simple Application

Since the implementation is quite large (almost 300 lines) we won't list the whole thing. (The source code is included in the examples/application directory.) Before we start with the constructor there are three #includes worth mentioning:

    #include "filesave.xpm"
    #include "fileopen.xpm"
    #include "fileprint.xpm"

The tool buttons in our application wouldn't look good without icons! These icons can be found in the XPM files included above. If you ever moved a program to a different location and wondered why icons were missing afterwards you will probably agree that it is a good idea to compile them into the binary. This is what we are doing here.

    ApplicationWindow::ApplicationWindow()
        : QMainWindow( 0, "example application main window", WDestructiveClose | WGroupLeader )
    {

ApplicationWindow inherits QMainWindow, the Qt class that provides typical application main windows, with menu bars, toolbars, etc.

        printer = new QPrinter( QPrinter::HighResolution );

The application example can print things, and we chose to have a QPrinter object lying around so that when the user changes a setting during one printing, the new setting will be the default next time.

        QPixmap openIcon, saveIcon, printIcon;

For the sake of simplicity, our example only has a few commands in the toolbar. The above variables are used to hold an icon for each of them.

        QToolBar * fileTools = new QToolBar( this, "file operations" );

We create a toolbar in this window ...

        fileTools->setLabel( "File Operations" );

... and define a title for it. When a user drags the toolbar out of its location and floats it over the desktop, the toolbar-window will show "File Operations" as caption.

        openIcon = QPixmap( fileopen );
        QToolButton * fileOpen
            = new QToolButton( openIcon, "Open File", QString::null,
                               this, SLOT(choose()), fileTools, "open file" );

Now we create the first tool button for the fileTools toolbar with the appropriate icon and the tool-tip text "Open File". The fileopen.xpm we included at the beginning contains the definition of a pixmap called fileopen. We use this icon to illustrate our first tool button.

        saveIcon = QPixmap( filesave );
        QToolButton * fileSave
            = new QToolButton( saveIcon, "Save File", QString::null,
                               this, SLOT(save()), fileTools, "save file" );

        printIcon = QPixmap( fileprint );
        QToolButton * filePrint
            = new QToolButton( printIcon, "Print File", QString::null,
                               this, SLOT(print()), fileTools, "print file" );

In a similar way we create two more tool buttons in this toolbar, each with appropriate icons and tool-tip text. All three buttons are connected to appropriate slots in this object; for example, the "Print File" button to ApplicationWindow::print().

        (void)QWhatsThis::whatsThisButton( fileTools );

The fourth button in the toolbar is somewhat peculiar: it's the one that provides "What's This?" help. This must be set up using a special function, as its mouse interface is unusual.

        const char * fileOpenText = "<p><img source=\"fileopen\"> "
                     "Click this button to open a <em>new file</em>.<br>"
                     "You can also select the <b>Open</b> command "
                     "from the <b>File</b> menu.</p>";

        QWhatsThis::add( fileOpen, fileOpenText );

With the above line we add the "What's This?" help-text to the fileOpen button...

        QMimeSourceFactory::defaultFactory()->setPixmap( "fileopen", openIcon );

... and tell the rich-text engine that when a help-text (like the one saved in fileOpenText) requests an image named "fileopen", the openIcon pixmap is used.

        const char * fileSaveText = "<p>Click this button to save the file you "
                     "are editing. You will be prompted for a file name.\n"
                     "You can also select the <b>Save</b> command "
                     "from the <b>File</b> menu.</p>";

        QWhatsThis::add( fileSave, fileSaveText );
        const char * filePrintText = "Click this button to print the file you "
                     "are editing.\n"
                     "You can also select the Print command "
                     "from the File menu.";

        QWhatsThis::add( filePrint, filePrintText );

The "What's This?" help of the remaining two buttons doesn't make use of pixmaps, therefore all we need to do is to add the help-text to the button. Be careful though: To invoke the rich-text elements in fileSaveText(), the entire string must be surrounded by <p> and </p>. In filePrintText(), we don't have rich-text elements, so this is not necessary.

        QPopupMenu * file = new QPopupMenu( this );
        menuBar()->insertItem( "&File", file );

Next we create a QPopupMenu for the File menu and add it to the menu bar. With the ampersand in front of the letter F, we allow the user to use the shortcut Alt+F to pop up this menu.

        file->insertItem( "&New", this, SLOT(newDoc()), CTRL+Key_N );

Its first entry is connected to the (yet to be implemented) slot newDoc(). When the user chooses this New entry (e.g. by typing the letter N as marked by the ampersand) or uses the Ctrl+N accelerator, a new editor-window will pop up.

        int id;
        id = file->insertItem( openIcon, "&Open...",
                               this, SLOT(choose()), CTRL+Key_O );
        file->setWhatsThis( id, fileOpenText );

        id = file->insertItem( saveIcon, "&Save",
                               this, SLOT(save()), CTRL+Key_S );
        file->setWhatsThis( id, fileSaveText );

        id = file->insertItem( "Save &As...", this, SLOT(saveAs()) );
        file->setWhatsThis( id, fileSaveText );

We populate the File menu with three more commands (Open, Save and Save As), and set "What's This?" help for them. Note in particular that "What's This?" help and pixmaps are used in both the toolbar (above) and the menu bar (here). (See QAction and the examples/action example for a shorter and easier approach.)

        file->insertSeparator();

Then we insert a separator, ...

        id = file->insertItem( printIcon, "&Print...",
                               this, SLOT(print()), CTRL+Key_P );
        file->setWhatsThis( id, filePrintText );

        file->insertSeparator();

        file->insertItem( "&Close", this, SLOT(close()), CTRL+Key_W );
        file->insertItem( "&Quit", qApp, SLOT( closeAllWindows() ), CTRL+Key_Q );

... the Print command with "What's This?" help, another separator and two more commands (Close and Quit) without "What's This?" and pixmaps. In case of the Close command, the signal is connected to the close() slot of the respective ApplicationWindow object whilst the Quit command affects the entire application.

Because ApplicationWindow is a QWidget, the close() function triggers a call to closeEvent() which we will implement later.

        menuBar()->insertSeparator();

Now that we have done the File menu we shift our focus back to the menu bar and insert a separator. From now on further menu bar entries will be aligned to the right if the windows system style requires it.

        QPopupMenu * help = new QPopupMenu( this );
        menuBar()->insertItem( "&Help", help );

        help->insertItem( "&About", this, SLOT(about()), Key_F1 );
        help->insertItem( "About &Qt", this, SLOT(aboutQt()) );
        help->insertSeparator();
        help->insertItem( "What's &This", this, SLOT(whatsThis()), SHIFT+Key_F1 );

We create a Help menu, add it to the menu bar, and insert a few commands. Depending on the style it will appear on the right hand side of the menu bar or not.

        e = new QTextEdit( this, "editor" );
        e->setFocus();
        setCentralWidget( e );

Now we create a simple text-editor, set the initial focus to it, and make it the window's central widget.

QMainWindow::centralWidget() is the heart of the entire application: It's what menu bar, statusbar and toolbars are all arranged around. Since the central widget is a text editing widget, we can now reveal that our simple application is a text editor. :)

        statusBar()->message( "Ready", 2000 );

We make the statusbar say "Ready" for two seconds at startup, just to tell the user that the window has finished initialization and can be used.

        resize( 450, 600 );

Finally it's time to resize the new window to a a nice default size.

    }

We have now finished with the constructor. Now we'll deal with the destructor.

    ApplicationWindow::~ApplicationWindow()
    {
        delete printer;
    }

The only thing an ApplicationWindow widget needs to do in its destructor is to delete the printer it created. All other objects are child widgets, which Qt will delete when appropriate.

Now our task is to implement all the slots mentioned in the header file and used in the constructor.

    void ApplicationWindow::newDoc()
    {
        ApplicationWindow *ed = new ApplicationWindow;
        ed->setCaption("Qt Example - Application");
        ed->show();
    }

This slot, connected to the File|New menu item, simply creates a new ApplicationWindow and shows it.

    void ApplicationWindow::choose()
    {
        QString fn = QFileDialog::getOpenFileName( QString::null, QString::null,
                                                   this);
        if ( !fn.isEmpty() )
            load( fn );
        else
            statusBar()->message( "Loading aborted", 2000 );
    }

The choose() slot is connected to the Open menu item and tool button. With a little help from QFileDialog::getOpenFileName(), it asks the user for a file name and then either loads that file or gives an error message in the statusbar.

    void ApplicationWindow::load( const QString &fileName )
    {
        QFile f( fileName );
        if ( !f.open( IO_ReadOnly ) )
            return;

        QTextStream ts( &f );
        e->setText( ts.read() );
        e->setModified( FALSE );
        setCaption( fileName );
        statusBar()->message( "Loaded document " + fileName, 2000 );
    }

This function loads a file into the editor. When it's done, it sets the window system caption to the file name and displays a success message in the statusbar for two seconds. With files that exist but are not readable, nothing happens.

    void ApplicationWindow::save()
    {
        if ( filename.isEmpty() ) {
            saveAs();
            return;
        }

        QString text = e->text();
        QFile f( filename );
        if ( !f.open( IO_WriteOnly ) ) {
            statusBar()->message( QString("Could not write to %1").arg(filename),
                                  2000 );
            return;
        }

        QTextStream t( &f );
        t << text;
        f.close();

As its name suggests, this function saves the current file. If no filename has been specified so far, the saveAs() function is called. Unwritable files cause the ApplicationWindow object to provide an error-message in the statusbar. Note that there is more than one way to do this: compare the above statusBar()->message() line with the equivalent code in the load() function.

        e->setModified( FALSE );

Tell the editor that the contents haven't been edited since the last save. When the user does some further editing and wishes to close the window without explicit saving, ApplicationWindow::closeEvent() will ask about it.

        setCaption( filename );

It may be that the document was saved under a different name than the old caption suggests, so we set the window caption just to be sure.

        statusBar()->message( QString( "File %1 saved" ).arg( filename ), 2000 );
    }

With a message in the statusbar, we inform the user that the file was saved successfully.

    void ApplicationWindow::saveAs()
    {
        QString fn = QFileDialog::getSaveFileName( QString::null, QString::null,
                                                   this );
        if ( !fn.isEmpty() ) {
            filename = fn;
            save();
        } else {
            statusBar()->message( "Saving aborted", 2000 );
        }
    }

This function asks for a new name, saves the document under that name, and implicitly changes the window system caption to the new name.

    void ApplicationWindow::print()
    {
        printer->setFullPage( TRUE );
        if ( printer->setup(this) ) {               // printer dialog
            statusBar()->message( "Printing..." );
            QPainter p;
            if( !p.begin( printer ) ) {               // paint on printer
                statusBar()->message( "Printing aborted", 2000 );
                return;
            }

            QPaintDeviceMetrics metrics( p.device() );
            int dpiy = metrics.logicalDpiY();
            int margin = (int) ( (2/2.54)*dpiy ); // 2 cm margins
            QRect body( margin, margin, metrics.width() - 2*margin, metrics.height() - 2*margin );
            QSimpleRichText richText( QStyleSheet::convertFromPlainText(e->text()),
                                      QFont(),
                                      e->context(),
                                      e->styleSheet(),
                                      e->mimeSourceFactory(),
                                      body.height() );
            richText.setWidth( &p, body.width() );
            QRect view( body );
            int page = 1;
            do {
                richText.draw( &p, body.left(), body.top(), view, colorGroup() );
                view.moveBy( 0, body.height() );
                p.translate( 0 , -body.height() );
                p.drawText( view.right() - p.fontMetrics().width( QString::number( page ) ),
                            view.bottom() + p.fontMetrics().ascent() + 5, QString::number( page ) );
                if ( view.top()  >= richText.height() )
                    break;
                printer->newPage();
                page++;
            } while (TRUE);

            statusBar()->message( "Printing completed", 2000 );
        } else {
            statusBar()->message( "Printing aborted", 2000 );
        }
    }

print() is called by the File|Print menu item and the filePrint tool button.

We present the user with the print setup dialog, and abandon printing if they cancel.

We create a QSimpleRichText object and give it the text. This object is able to format the text nicely as one long page. We achieve pagination by printing one paper page's worth of text from the QSimpleRichText page at a time.

Now let's see what happens when a user wishes to close() an ApplicationWindow.

    void ApplicationWindow::closeEvent( QCloseEvent* ce )
    {

This event gets to process window system close events. A close event is subtly different from a hide event: hide often means "iconify" whereas close means that the window is going away for good.

        if ( !e->isModified() ) {
            ce->accept();
            return;
        }

If the text hasn't been edited, we just accept the event. The window will be closed, and because we used the WDestructiveClose widget flag in the ApplicationWindow() constructor, the widget will be deleted.

        switch( QMessageBox::information( this, "Qt Application Example",
                                          "Do you want to save the changes"
                                          " to the document?",
                                          "Yes", "No", "Cancel",
                                          0, 1 ) ) {

Otherwise we ask the user: What do you want to do?

        case 0:
            save();
            ce->accept();
            break;

If they want to save and then exit, we do that.

        case 1:
            ce->accept();
            break;

If the user doesn't want to exit, we ignore the close event (there is a chance that we can't block it but we try).

        case 2:
        default: // just for sanity
            ce->ignore();
            break;

The last case -- the user wants to abandon the edits and exit -- is very simple.

        }
    }

Last but not least we implement the slots used by the help menu entries.

    void ApplicationWindow::about()
    {
        QMessageBox::about( this, "Qt Application Example",
                            "This example demonstrates simple use of "
                            "QMainWindow,\nQMenuBar and QToolBar.");
    }

    void ApplicationWindow::aboutQt()
    {
        QMessageBox::aboutQt( this, "Qt Application Example" );
    }

These two slots use ready-made "about" functions to provide some information about this program and the GUI toolkit it uses. (Although you don't need to provide an About Qt in your programs, if you use Qt for free we would appreciate it if you tell people what you're using.)

That was all we needed to write a complete, almost useful application with nice help-functions, almost as good as the "editors" some computer vendors ship with their desktops, and in less than 300 lines of code!

See also Step-by-step Examples.