GUI Design in C++
Graphical User Interface (GUI) programming in C++ is crucial for creating contemporary applications that provide users with attractive graphics. While C++ is usually associated with system programming and game development, it can be a great substitute for building graphical user interfaces.
This tutorial will cover basic GUI application creation in C++, common C++ GUI libraries, and GUI programming in C++.
Graphical User Interface (GUI): What is it?
A computer interface where a user interacts with graphical elements, including buttons, menus, and icons, is called a graphical user interface (GUI). A GUI uses images to present the user with pertinent information and actionable items.
The Graphical User Interface (GUI) is a graphical application interface that allows users to interact with the program through graphics such as buttons, text fields, and windows. Compared with the Command Line Interface (CLI), the Graphical User Interface (GUI) provides a more interactive and user-friendly platform since it allows users to use different input devices, such as a touchscreen, mouse, etc., in addition to the keyboard.
Key Ideas in GUI Programming
Designing windows, dialogues, buttons, and other interactive UI elements is part of creating a graphical user interface (GUI). Then, we use event handlers like onClick, onHover, etc., to control these widgets.
The following are the key ideas in GUI programming:
1. Widgets:
The components of a graphical user interface (GUI) are called widgets. These consist of things like labels, textboxes, buttons, etc. Every widget has properties and behaviours that can be altered to meet the unique requirements of a certain application. Typically, a GUI library contains the following widgets:
- Window: An upper-level window frame that contains additional widgets.
- Button: A button that can be clicked and triggers an event.
- Label: Easy-to-read text
- Checkbox: A choice box with on and off options.
- Radio Button: A box with on/off options; each group of radio buttons can only have one selected.
- Dropdown/Combo Box: Clicking this opens a dropdown menu. The non-opened form can only have one item displayed at a time.
- Textbox: Modifiable Text Field.
- Listbox: The multi-item box with a scroll bar to view every item.
- Slider: An application navigation widget for navigating around.
- Menu: Located at the top, the menu offers the application user a variety of options.
- Dialog Box: An area that appears at the top of a window. Occasionally, to show the alert.
- Grid: Used to manage the user interface's layout.
2. Arrangement Control
To maintain an eye-catching yet functional user interface with the numerous widgets arranged on the screen, GUI programs must be optimised for various screens with varying sizes, resolutions, and other characteristics.
3. Managing Events
Events such as key presses and button clicks are important in GUI programming. The program handles these events so that it may react to the user's activities. Different widgets are linked to different events. For instance, the corresponding events for a clickable button are:
- Select Event
- Mouse Click.
- Focus In Event
- Highlight Out Event
We will now examine actual GUI programming scenarios using C++ and Qt. We're going to create a simple "Hello World" application that consists of a button that, when pressed, opens a dialogue box with the words "Hello World" displayed on it. We'll put it into practice by following these steps:
Step 1: First, make a Qt project.
Launching Qt Creator, we will start a new project called "Qt Widget Application." You're ready to begin after entering the name and choosing the location. The Qt creator will create the project with all the necessary files.
Step 2: Creating the Window Design
Next, we'll open the mainWindow.ui file, which includes the application's user interface. We'll use the newly launched designer to add one text label.
my Window.h
#ifndef MY_MAIN_WINDOW_H
#define MY_MAIN_WINDOW_H
#include <QMainWindow>
QT_BEGIN_NAMESPACE
namespace Ui { class MyMainWindow; }
QT_END_NAMESPACE
class MyMainWindow: public QMainWindow
{
Q_OBJECT
public:
MyMainWindow(QWidget *parent = nullptr);
~MyMainWindow();
private:
Ui::MyMainWindow *userInterface;
};
#endif // MY_MAIN_WINDOW_H
main.cpp
#include "mywindow.h"
#include <QApplication>
int startApplication(int numberOfArguments, char *arguments[])
{
QApplication appInstance(numberOfArguments, arguments);
MyWindow mainWindow;
mainWindow.display();
return appInstance.exec();
}
myWindow.cpp
#include "mywindow.h"
#include "./ui_mywindow.h"
MyWindow::MyWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MyWindow)
{
ui->setupUi(this);
}
MyWindow::~MyWindow()
{
delete ui;
}
myWindow.ui
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MyWindow</class>
<widget class="QMainWindow" name="MyWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>600</height>
</rect>
</property>
<property name="windowTitle">
<string>MyWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<widget class="QLabel" name="label">
<property name="geometry">
<rect>
<x>260</x>
<y>140</y>
<width>100</width>
<height>80</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>
You'll note that the XML writing in mainWindow.ui. This is so because Qt uses XML to write its UI files.
Step 4: Construct and Execute
We may use Qt Creator to build and execute the Qt project with just one click.
Output:
![GUI Design in C++](https://static.tutorialandexample.com/cpp/gui-design-in-cpp1.png)