Introduction to GUI Programming in C++

In C++, Graphical User Interface (GUI) programming is important in modern application development where users have nice graphics for them to work with. Although C++ is commonly linked with system programming and game writing, it can be an excellent alternative to GUI writing. In this article, we will discuss GUI programming in C++, some popular GUI libraries for C++, and how to create a basic GUI application in C++.

Prerequisites: Fundamentals of C++, C++ OOPs, Some GUI Library.

What is GUI (Graphical User Interface)?

The Graphical User Interface (GUI) is a visual application interface that is provided using graphics like windows, text boxes, and buttons through which users can communicate with the software. GUI offers an interactive and easy-to-use platform as compared to the Command Line Interface (CLI) as users can use the mouse or other input devices such as a touchscreen, etc. without relying only on the keyboard.

Main Concepts of GUI Programming

A graphical user interface (GUI) involves designing windows, dialogs, buttons, etc which are all interactive user interface components. Then we control these widgets using event handlers like onClick, onHover, etc.

The main concepts of GUI Programming are:

Widgets

A graphical user interface (GUI) is made up of widgets. For example, these include buttons, textboxes, labels, etc. Properties and behaviors of each widget can be customized in accordance with the specific needs of an application. There are generally the following widgets in a GUI library:

1. Window: A top level window frame that host other widgets inside itself.
2. Button: A clickable button that have some event associated with its click.
3. Label: Simple read-only text
4. Checkbox: Box that provide the options to be on or off.
5. Radio Button: Box that provide the options to be on or off but we can only choose one radio button in a group.
6. Dropdown/Combo Box: Opens a dropdown menu when clicked. Only one item can be displayed in the non-opened form.
7. Textbox: Editable Text area.
8. Listbox: The box with multiple items and a scroll bar to go through all of them.
9. Slider: A navigation widget used to move around the application.
10. Menu: Shown at the top, menu provides different options to the application user.
11. Dialog Box: A box that is displayed on the top of a window. Sometimes to display the notification.
12. Grid: Used for the Layout Management of the UI.

Layout Management

The GUI applications must be optimised for various screens of different sizes, resolutions etc which seeks to keep an attractive but effective user interface with the various widgets organized onto the screen.

Event Handling

In GUI programming, the events like button clicks or key presses are critical. These events are handled by the app in order that it could follow the user actions. There are different events associated with different widgets. For example, for a clickable button, the associated events are:

1. Click Event
2. Mouse Move Event
3. Focus In Event
4. Focus Out Event

Popular GUI Libraries for C++

C++ have many platform independent GUI libraries that can be used to develop a GUI application. Some of the popular ones are:

1. gtkmm
2. Qt
3. wxWidgets
4. Dear ImuGui

Example of C++ GUI Application

We will be using the following tools for the below programs:

1. Qt Library: The GUI library for our program.
2. Qt Designer: An interactive GUI template designer for Qt.
3. Qt Creator: IDE for Qt GUI Applications

Now, we will look at real cases for GUI programming with C++ and Qt. We are going to develop a basic “Hello World” application a button and when the button is clicked, a dialog box will appear with “Hello World” text written on it. We will implement it using these steps:

Step 1: Creating a Qt Project

We will open the Qt Creator and create a new project of type “Qt Widget Application”. Enter the name, select the location and you are good to go. The Qt creator will create the project with all the required files.

Step 2: Designing the Window

We will then open the file mainWindow.ui. This file contains the UI of the application. We will add one text label using the designer that just opened.

Now our files will contain the following code:

mainWindow.h

C++

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
  Q_OBJECT

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

private:
  Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

main.cpp

C++

#include "mainwindow.h"

#include <QApplication>

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

mainWindow.cpp

C++

#include "mainwindow.h"
#include "./ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
  : QMainWindow(parent)
  , ui(new Ui::MainWindow)
{
  ui->setupUi(this);
}

MainWindow::~MainWindow()
{
  delete ui;
}

mainWindow.ui

XML

<?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>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>260</x>
      <y>140</y>
      <width>81</width>
      <height>71</height>
     </rect>
    </property>
    <property name="text">
     <string>Hello World</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

Notice that mainWindow.ui is written in XML. It is because Qt writes its UI files in XML.

Step 4: Build and Run

We can build and run the Qt project in Qt creator using a single click.

Output

Advantages of GUI Applications

GUI applications offers several advantages, contributing to a better user experience and streamlined development:

• User-Friendly Interface: The use of graphical user interfaces (GUIs) provides a simple and easy-to-use approach towards software applications compared to other approaches that would take more time.
• Enhanced Interactivity: It encompasses interactive features like buttons, drop-down menus, checkbox, and slider that give users power over their experiences.
• Cross-Platform Compatibility: The languages such as Qt enable creation of GUI application for windows, macOS, Linux with C++.
• Rapid Prototyping: The presence of many GUI builders and design tools in GUI frameworks promotes quick prototyping of interfaces, making the entire development process faster.