Hello World using the QtGui library

One of Qt's strengths is its rich collection of GUI elements that you can use to create windowed applications. Making a GUI application is similar in principle to making a console application; instead of choosing Qt Console Application, select Qt Widgets Application from the New dialog presented when you choose New File or Project. Try it now:

1. First, close the current file and project by clicking on Close All Projects and Editors from the File menu.
2. Next, click on New File or Project… again and click on Qt Widgets Application from the first step of the wizard.
3. Walk through the wizard again, naming your project HelloWorldGui.
4. Then, select the default kit. The New project wizard will prompt you for the name of the class implementing your main window. Leave the subclass as QMainWindow and the name as MainWindow. Skip the version control dialog portion of the wizard.

Qt Creator creates a default subclass of the class that provides the platform's basic window in the mainform.h and mainform.cpp files, and creates a form that will contain the widgets for your application's window.

The following screenshot shows a default form as you're editing it in Qt Designer. If you run the application at this point, you'll see an empty window. Instead, double-click on the Forms folder in the project tree (the second pane) of Qt Creator and then double-click on the mainwindow.ui file. Qt Creator switches to the Design view, and you'll see something similar to the next screenshot:

On the left-hand side is a list of the layouts that you can choose to organize widgets, such as spacers, views, containers, buttons, and other widgets; on top of this, there are various edit and layout options. In the middle is a view of the layout of your application's main window, and to the right are panes with a hierarchy of objects in your main window and the properties of any item that you click on in the main window.

While we will explore Qt Designer more in Chapter 3, Designing Your Application with Qt Designer, you can get a feel of using it to build a simple UI. Begin by ensuring that you're in the Designer mode:

1. Where it says Type Here, right-click and choose Remove menu bar.
2. Drag a label (under Display Widgets in the left-hand side pane) and drop it in the window preview in the center pane.
3. Double-click on the label that appears and type Hello world!.
4. Grab a corner of the label and resize it so that the entire text is shown. You can also move it around in the window.
5. Note that when you click on the label, the Property field in the lower-right pane is updated to show the properties of your new label.
6. Drag a button (under Buttons in the left-hand side pane) and drop it in the window preview in the center pane.
7. Double-click on the button and change its text to Exit.
8. With the new button selected, change the objectName field in the Property browser to exitButton.
9. Right-click on the button and select Go to slot…. A window appears with a list of slots (for now, you can think of a slot as something that is triggered on an action; we will discuss them more in Chapter 2, Building Applications with Qt Creator).
10. Choose clicked() from the list that appears.
11. Qt Creator returns to the Edit view for your mainwindow.cpp file. Change it to read as follows:

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include <QApplication>
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    voidMainWindow::on_exitButton_clicked()
    {
        QApplication::exit();
    }

Before running your application, let's be sure that you understand the implementation of the MainWindow class. The constructor of the MainWindow class loads the description of the user interface for the main window and sets it up using the Qt Creator-generated class Ui::MainWindow. The destructor deletes the implementation of the code layout, and the on_exitButton_clicked method simply terminates the application by calling the exit static method implemented by the QApplication class.

Finally, we have to add the on_exitButton_clicked method declaration to mainwindow.h if it's not already added. Double-click on this file in the browser on the left and make sure that it reads as follows:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespaceUi {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT
    
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    
private slots:
    void on_exitButton_clicked();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

The key lines you need to add are highlighted in the previous listing.

We'll learn more about signals and slots in the next chapter; for now, it's enough for you to know that you're declaring a private function to be triggered when you click on the button.

Run the application. It should open a single window with the text Hello World!; clicking on the Exit button in the window (or on the close box in the upper-right corner) should close the application. At this point, if you think you want to learn more about Qt Widget applications, go ahead and try dragging other GUI items to the window, or explore the help documentation for Qt Widget applications by switching to the Help view and clicking on Qt GUI from the list of help items.