QT #3 : Hello World using Qt Widgets

Earlier in this series of Qt byte sized tutorials, we wrote our first program, a console based “Hello World”. In this part, we will build a GUI application (after all Qt is mainly a GUI Framework) using Qt Widgets. In doing so, we will also leverage the functionalities of Slots and Signals, which we learned in previous post.

Widgets are primary elements for building user interfaces in Qt. Each UI element in the GUI (buttons, text and many more) are example of Widgets. Each widget in Qt Widget are subclasses of QWidget, which of course derieves from QObject.

Lets not waste any more time and head over to Qt Creator to build our GUI based application. Select the Qt Widget Application in the Project Template selector to create a Qt Widget based GUI application. You might also notice another project template, namely Qt Quick Application. This is the template we use when we would like to work with Qt Quick and Qml. For now, let us stick to the Qt Widget application.

When selecting the Project details, do ensure you select the Generate Form checkbox as shown in screenshot below.

This would generate a Form in the Qt Creator, which you could visualize and edit. At the end of Project Creator Wizard, you would generate a solution which resembles the following.

Notice the MainWindow.ui under Forms. This is our Main Window Form and you can use the Visual Editor provided by Qt Creator to edit and add more controls to it. Let use go ahead and add a Button to Form. Drag/Drop a Button control from the Control list.

You can also add a Text to display in the Button, in the above example, I have set the Text as “Click Me !!”. I have also set the name of button as pushButton using the properties editor.

You can also the control defined in XML by editing the MainWindow.ui.

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>198</width>
    <height>133</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>50</x>
      <y>30</y>
      <width>93</width>
      <height>29</height>
     </rect>
    </property>
    <property name="text">
     <string>Click Me !!</string>
    </property>
   </widget>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

So, at this point we have defined a Window which has a single PushButton with text Click Me !!. What do we do with the button ? We would like to display a message box when the button is clicked. This can be done with slots and signals.

Let us head over to mainwindow.h and add some code there. We will define a slot called OnButtonClick.

classMainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
public slots:
    void OnButtonClick(bool isClicked = false);
};

As mentioned earlier, we will need to display a MessageBox when the button is clicked. We can now proceed to define the slot behavior.

#include <QMessageBox>void MainWindow::OnButtonClick(bool isClicked)
{
    qInfo() << "Button Clicked : #" << isClicked;

    QMessageBox msgBox;
    msgBox.setText("Hello there !!!");
    msgBox.exec();
}

Do not forget to include QMessageBox so that we could display the Messagebox using the Qt’s utility classes. The code in the slot is quite self-explanatory – We create an instance of a QMessageBox, with the Text set as “Hello there !!!”. We will then display the newly created Messagebox.

But we are yet to connect any signal to the slot. The signal we want the slot to bound to is the clicked signal of the QPushButton. Yes, you guessed it right, the very PushButton which we had previously added to the MainWindow. We add the magic glue code in the constructor of MainWindow.

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->pushButton->connect(ui->pushButton,&QPushButton::clicked,this,&MainWindow::OnButtonClick);
}

With the UI definition and Signals & Slots in place, we are ready to ensure our MainWindow is invoked by our main() function.

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow mainWindow;
    mainWindow.show();
    return a.exec();
}

That’s all we need to build our Hello World Gui application using Qt Widgets. In the next part/post we will build the same application using QML.