Introduction to GUI Programming in C++

In C++, Graphical User Interface (GUI) programming is important in modern application development where users have nice graphics to work with. Although C++ is commonly linked with system programming and game development, it can be an excellent alternative for GUI development. 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. The GUI offers an interactive and easy-to-use platform 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, text boxes, labels, etc. The 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:

• Window: A top-level window frame that hosts other widgets inside itself.
• Button: A clickable button that has some event associated with its click.
• Label: Simple read-only text.
• Checkbox: A box that provides the options to be on or off.
• Radio Button: A box that provides the options to be on or off, but we can only choose one radio button in a group.
• Dropdown/Combo Box: Opens a dropdown menu when clicked. Only one item can be displayed in the non-opened form.
• Textbox: An editable text area.
• Listbox: A box with multiple items and a scroll bar to go through all of them.
• Slider: A navigation widget used to move around the application.
• Menu: Shown at the top, the menu provides different options to the application user.
• Dialog Box: A box that is displayed on top of a window, sometimes to display a notification.
• Grid: Used for the layout management of the UI.

Layout Management

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

Event Handling

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

• Click Event
• Mouse Move Event
• Focus In Event
• Focus Out Event

Popular GUI Libraries for C++

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

• gtkmm
• Qt
• wxWidgets
• Dear ImGui

Example of C++ GUI Application

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

• Qt Library: The GUI library for our program.
• Qt Designer: An interactive GUI template designer for Qt.
• 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 with 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 Qt Creator and create a new project of type "Qt Widget Application". Enter the name, select the location, and you are good to go. 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

#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

#include "mainwindow.h"

#include <QApplication>

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

mainWindow.cpp

#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 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 3: 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 offer 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 to software applications compared to other approaches that would take more time.
• Enhanced Interactivity: It encompasses interactive features like buttons, drop-down menus, checkboxes, and sliders that give users power over their experiences.
• Cross-Platform Compatibility: Libraries such as Qt enable the creation of GUI applications for Windows, macOS, and 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.

ujjwalshrivastava2309

Follow

Improve

Article Tags :

• C++
• Geeks Premier League
• Geeks Premier League 2023

Practice Tags :

• CPP