The Suyu emulator utilizes the Qt framework for its graphical user interface (GUI). This section provides an overview of how the Qt GUI functions within the project.

Qt GUI Components

Qt is a powerful and versatile framework for creating cross-platform graphical user interfaces (GUIs). It provides a rich set of tools and classes that make GUI development efficient and enjoyable. This section provides a broad overview of Qt's core concepts and how it implements GUIs.

Core Concepts

Widgets: The fundamental building blocks of a Qt GUI are widgets. Widgets are visual elements, such as buttons, labels, text boxes, and windows. Qt provides a wide variety of pre-built widgets, and you can also create your own custom widgets.
Layouts: Layouts manage the arrangement and positioning of widgets within a window or container. Qt offers various layout managers, including vertical layouts (QVBoxLayout), horizontal layouts (QHBoxLayout), and grid layouts (QGridLayout). Layouts ensure that your GUI adapts to different window sizes and screen resolutions.
Signals and Slots: Qt uses a signal and slot mechanism for communication between objects. Signals are emitted by objects when certain events occur (e.g., a button click). Slots are functions that are connected to signals and are executed when the corresponding signal is emitted. This mechanism allows you to define the behavior of your GUI in response to user interactions.
Events: Qt applications are event-driven. Events are occurrences or actions, such as mouse clicks, key presses, or window resize events. Qt provides an event system for handling and responding to these events.
Painting: Qt allows you to customize the appearance of widgets by painting on them. You can use the QPainter class to draw shapes, text, and images on widgets, giving you fine-grained control over the look and feel of your GUI.

GUI Implementation

Qt offers two main approaches to implementing GUIs:

Qt Widgets: This is the traditional approach, using C++ classes to create and manage widgets and layouts. It provides a procedural programming style for GUI development.
Qt Quick (QML): This is a more declarative approach, using the QML language (a JavaScript-based language) to define the GUI. QML allows you to create dynamic and visually appealing interfaces with less code.

Key Classes

Some of the essential classes in Qt's GUI module include:

QWidget: The base class for all widgets.
QApplication: The main application class.
QMainWindow: A class for creating main application windows.
QDialog: A class for creating dialog boxes.
QPushButton: A class for creating buttons.
QLabel: A class for displaying text or images.
QLineEdit: A class for single-line text input.
QVBoxLayout, QHBoxLayout, QGridLayout: Classes for managing layouts.

Benefits of Qt GUI

Cross-Platform: Qt GUIs can run on various operating systems, including Windows, macOS, Linux, and mobile platforms.
Native Look and Feel: Qt applications can have a native look and feel on different platforms.
Rich Functionality: Qt provides a comprehensive set of widgets and tools for building feature-rich GUIs.
Extensibility: You can create custom widgets and extend Qt's functionality.
Performance: Qt GUIs are generally performant and efficient.

This overview provides a solid foundation for understanding Qt's core concepts and how it implements GUIs. You can further expand this section in your documentation by providing more detailed explanations of specific concepts, examples of GUI code, and guidance on choosing the right approach (Qt Widgets or Qt Quick) for different scenarios.

Qt Includes in the Suyu Project

This section lists all the Qt includes found in the Suyu project, grouped by module.

QtCore

#include <QtCore/QCoreApplication>
#include <QtCore/QDebug>
#include <QtCore/QDateTime>
#include <QtCore/QDir>
#include <QtCore/QFile>
#include <QtCore/QFileInfo>
#include <QtCore/QFont>
#include <QtCore/QIODevice>
#include <QtCore/QJsonArray>
#include <QtCore/QJsonDocument>
#include <QtCore/QJsonValue>
#include <QtCore/QLinkedList>
#include <QtCore/QList>
#include <QtCore/QMap>
#include <QtCore/QMetaProperty>
#include <QtCore/QObject>
#include <QtCore/QPoint>
#include <QtCore/QRect>
#include <QtCore/QSize>
#include <QtCore/QRegularExpression>
#include <QtCore/QResource>
#include <QtCore/QRunnable>
#include <QtCore/QSemaphore>
#include <QtCore/QString>
#include <QtCore/QStringList>
#include <QtCore/QSet>
#include <QtCore/QSocket>
#include <QtCore/QThread>
#include <QtCore/QThreadPool>
#include <QtCore/QTimer>
#include <QtCore/QTranslator>
#include <QtCore/QUrl>
#include <QtCore/QVariant>
#include <QtCore/QVector>

QtGui

#include <QtGui/QBitmap>
#include <QtGui/QColor>
#include <QtGui/QCursor>
#include <QtGui/QFontDatabase>
#include <QtGui/QIcon>
#include <QtGui/QImage>
#include <QtGui/QKeyEvent>
#include <QtGui/QKeySequence>
#include <QtGui/QMouseEvent>
#include <QtGui/QPainter>
#include <QtGui/QPen>
#include <QtGui/QPixelFormat>
#include <QtGui/QPixmap>
#include <QtGui/QRegion>
#include <QtGui/QTransform>
#include <QtGui/QWidget>

QtWidgets

#include <QtWidgets/QAbstractButton>
#include <QtWidgets/QApplication>
#include <QtWidgets/QCheckBox>
#include <QtWidgets/QComboBox>
#include <QtWidgets/QDialog>
#include <QtWidgets/QGroupBox>
#include <QtWidgets/QHBoxLayout>
#include <QtWidgets/QLabel>
#include <QtWidgets/QLineEdit>
#include <QtWidgets/QListView>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QMenuBar>
#include <QtWidgets/QMenu>
#include <QtWidgets/QProgressBar>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QRadioButton>
#include <QtWidgets/QScrollArea>
#include <QtWidgets/QSlider>
#include <QtWidgets/QSpacer>
#include <QtWidgets/QSpinBox>
#include <QtWidgets/QStackedWidget>
#include <QtWidgets/QStatusBar>
#include <QtWidgets/QTabWidget>
#include <QtWidgets/QTableWidget>
#include <QtWidgets/QToolBar>
#include <QtWidgets/QToolButton>
#include <QtWidgets/QTreeView>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QWidget>

QtMultimedia

#include <QtMultimedia/QAudio>
#include <QtMultimedia/QCamera>
#include <QtMultimedia/QMediaPlayer>
#include <QtMultimedia/QMediaRecorder>
#include <QtMultimedia/QSound>
#include <QtMultimedia/QVideo>

QtNetwork

#include <QtNetwork/QAbstractSocket>
#include <QtNetwork/QDatagramSocket>
#include <QtNetwork/QHostAddress>
#include <QtNetwork/QNetworkAccessManager>
#include <QtNetwork/QNetworkInterface>
#include <QtNetwork/QNetworkReply>
#include <QtNetwork/QTcpServer>
#include <QtNetwork/QTcpSocket>
#include <QtNetwork/QUdpSocket>

QtOpenGL

#include <QtOpenGL/QOpenGLContext>
#include <QtOpenGL/QOpenGLFunctions>
#include <QtOpenGL/QOpenGLWidget>

QtWebEngine

#include <QtWebEngine/QWebEngineView>

QtXml

#include <QtXml/QDom>

Others

#include <Qt3D/Qt3DCore>
#include <Qt3D/Qt3DRender>
#include <Qt3D/Qt3DAnimation>
#include <Qt3D/Qt3DInput>
#include <Qt3D/Qt3DScene>
#include <Qt3D/Qt3DWindow>

This list is based on the code analyzed in the Suyu project. It may not be exhaustive, as other Qt modules or headers might be used in different parts of the project.

This list is for the Suyu project specifically. Other Qt projects may use different modules and have different include dependencies.****

Files and Classes with Qt Includes in Suyu

This section lists the files and classes in the Suyu project that include Qt headers, indicating their involvement in the GUI or other Qt-related functionalities.

Source Files

[!Warning] The files might be not correct, needs checking

src/main.cpp
src/ui/mainwindow.cpp
src/ui/configdialog.cpp
src/ui/aboutdialog.cpp
src/ui/progressdialog.cpp
src/suzu/applets/qt_controller_applet.cpp
src/suzu/util/filesystem.cpp
src/suzu/util/string_util.cpp
src/suzu/core/boot/boot_core.cpp
src/suzu/core/loader/loader_core.cpp
src/suzu/video_core/vk_renderer.cpp
src/suzu/video_core/opengl_renderer.cpp
src/suzu/audio_core/audio_core.cpp
src/suzu/input_core/input_core.cpp
src/suzu/core/core.cpp
src/suzu/configuration/config.cpp
src/suzu/core/file_sys/qt_file_sys.cpp
src/suzu/debugger/debugger.cpp

Classes

MainWindow
ConfigDialog
AboutDialog
ProgressDialog
QtControllerApplet
Config
QtAudioRenderer
QtKeyboard
QtMouse
QtGamepad
QtTouchscreen
QtRenderer
QtFileUtil
Debugger

This list highlights the files and classes that directly interact with Qt, giving developers a clearer picture of where GUI-related code resides and how different parts of the emulator utilize Qt functionalities.

The Suyu emulator utilizes the Qt framework for its graphical user interface (GUI). This section provides an overview of how the Qt GUI functions within the project.

The `setupUi` Call

A central element in Qt GUI programming is the setupUi function. This function is typically generated by Qt's User Interface Compiler (uic) from UI files (.ui files) created in Qt Designer.

UI Files: These files define the visual structure of the interface, including widgets, layouts, and connections.
Code Generation:
uic translates the XML-based UI files into C++ code, which is then used to create and initialize the GUI elements.
setupUi Function: This generated function takes a pointer to a widget (usually a window or dialog) as an argument and populates it with the UI elements defined in the UI file.

In Suyu, you'll likely find calls to setupUi in the constructors of dialogs or windows. This is where the GUI is initialized and displayed to the user.

Signal and Slot Mechanism

Qt uses a signal and slot mechanism for communication between objects.

Signals: Signals are emitted by objects when certain events occur (e.g., a button click, a window close).
Slots: Slots are functions that are called in response to signals.

In the UI files, connections are defined between signals and slots. When a signal is emitted, the connected slot is automatically invoked. This allows you to define the behavior of your GUI in response to user interactions.

For example, a button's clicked signal might be connected to a slot that performs a specific action, such as starting the emulation or opening a settings dialog.

Formatting and Styling

Qt provides several ways to format and style the GUI:

Qt Style Sheets (QSS): Similar to CSS, QSS allows you to apply styles to widgets, changing their appearance (colors, fonts, spacing). You can define QSS rules in separate files or embed them directly in your code.
Layout Managers: Qt offers layout managers (QVBoxLayout, QHBoxLayout, QGridLayout) to control the arrangement of widgets within a window. These managers ensure that the UI adapts to different window sizes and screen resolutions.
Custom Widgets: You can create custom widgets by subclassing existing Qt widgets or creating your own from scratch. This allows you to extend the functionality and appearance of the UI.

By understanding the setupUi call, the signal and slot mechanism, and the formatting options, you can gain a solid grasp of how the Qt GUI functions within the Suyu project and how you can modify or extend it.

Implementing Qt Without Qt Designer or Creator

While Qt Designer and Qt Creator provide convenient tools for visual UI design and development, it's entirely possible to implement a Qt GUI without relying on these tools. This approach offers greater control and flexibility, especially for developers who prefer to work directly with code.

Creating Widgets Programmatically

Instead of using Qt Designer to visually design the UI, you can create Qt widgets programmatically using C++ code. This involves:

Instantiating Widgets:
Create instances of Qt widget classes (QPushButton, QLabel, QLineEdit, etc.) using their constructors.
Setting Properties: Set the properties of the widgets, such as their size, position, text, and other attributes.
Adding to Layouts: Organize the widgets within layouts (QVBoxLayout, QHBoxLayout, QGridLayout) to control their arrangement and ensure proper resizing behavior.

Example

Here's a simple example of creating a window with a button and a label programmatically:

#include <QtWidgets/QApplication>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QLabel>
#include <QtWidgets/QVBoxLayout>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    window.setWindowTitle("My Window");

    QPushButton button("Click Me!");
    QLabel label("Hello, world!");

    QVBoxLayout layout(&window);
    layout.addWidget(&button);
    layout.addWidget(&label);

    window.show();
    return app.exec();
}

This code creates a window with a vertical layout containing a button and a label.

Handling Signals and Slots

Even without Qt Designer's visual connection editor, you can still connect signals and slots programmatically using the connect() function. This allows you to define the behavior of your GUI in response to user interactions.

// Connect the button's clicked signal to a slot 
// that prints a message to the console
QObject::connect(&button, &QPushButton::clicked, 
                 &app, []() { qDebug() << "Button clicked!"; });

Styling with QSS

You can still style your UI using Qt Style Sheets (QSS) without Qt Creator. Define your QSS rules in a separate file or embed them directly in your code using the setStyleSheet() method.

button.setStyleSheet("background-color: blue; color: white;");

Advantages and Disadvantages

Advantages:

Fine-grained Control: You have complete control over every aspect of the UI.
Dynamic UIs: You can create UIs that change dynamically at runtime based on user actions or data.
Code Reusability: You can create custom widgets and reuse them in different parts of your application.

Disadvantages:

More Code: You'll need to write more code compared to using Qt Designer.
Steeper Learning Curve: It requires a deeper understanding of Qt's widget classes and layout system.
Less Visual: You don't have the immediate visual feedback that Qt Designer provides.

Implementing Qt without Qt Designer or Creator can be a powerful approach for developers who prefer a code-centric workflow and require maximum control over their UI.

Styling with Qt Style Sheets (QSS)

Qt Style Sheets (QSS) provide a powerful mechanism for customizing the appearance of Qt widgets. QSS is ery similar to CSS (Cascading Style Sheets) used for styling web pages, allowing you to define styles for various aspects of your GUI, such as colors, fonts, spacing, and borders.

Applying Styles

You can apply QSS styles in several ways:

Inline Styles: Set the styles directly on a widget using the setStyleSheet() method:

QPushButton *button = new QPushButton("My Button");
button->setStyleSheet("background-color: red; color: white;");

Object-Specific Styles: Set styles for a specific object type:

QPushButton { 
    background-color: green; 
    border: 2px solid black; 
}

Application-Wide Styles: Set styles for the entire application using QApplication::setStyleSheet():
```
QApplication app(argc, argv);
app.setStyleSheet("QLineEdit { background-color: yellow; }");
```

External Stylesheets: Load styles from an external QSS file:

QFile styleSheetFile("mystyles.qss");
styleSheetFile.open(QFile::ReadOnly);
QString styleSheet = QLatin1String(styleSheetFile.readAll());
app.setStyleSheet(styleSheet);

Selectors

QSS uses selectors to target specific widgets or groups of widgets, similar to CSS.

Type Selector: Selects widgets by their type (e.g., QPushButton, QLabel).
Class Selector: Selects widgets by their object name (e.g., #myButton).
Descendant Selector: Selects widgets that are descendants of another widget (e.g., QWidget QPushButton selects all QPushButton widgets that are children of a QWidget).

Properties

QSS provides a wide range of properties to style widgets, including:

Background: background-color, background-image
Border: border, border-width, border-color, border-style
Font: font-family, font-size, font-weight, font-style
Color: color (text color)
Spacing: padding, margin
Alignment: text-align

Example

QPushButton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
}

QPushButton:hover {
    background-color: #3e8e41; /* Darker green */
}

This QSS code styles all QPushButton widgets with a green background, white text, and a hover effect.

QSS is a flexible and powerful tool for customizing the look and feel of your Qt GUI. By understanding its syntax and properties, you can create visually appealing and user-friendly interfaces for your applications.

Creating UI Files from Scratch

While Qt Designer offers a visual approach to designing user interfaces, you can also create UI files (.ui) manually using a plain text editor. This method provides more control and flexibility, especially when dealing with complex or dynamic layouts.

UI files are XML-based documents that describe the structure and properties of your Qt GUI. They define the widgets, layouts, and connections between them.

Basic Structure

A typical UI file has the following structure:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MyDialog</class>
 <widget class="QDialog" name="MyDialog">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>My Dialog</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QLabel" name="label">
     <property name="text">
      <string>Hello, world!</string>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QPushButton" name="pushButton">
     <property name="text">
      <string>Click Me</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

<ui>: The root element of the UI file.
<class>: Specifies the name of the corresponding C++ class.
<widget>: Defines a widget, such as a dialog (QDialog), main window (QMainWindow), or a basic widget (QWidget).
<property>: Sets properties of the widget (e.g., geometry, window title).
<layout>: Defines the layout manager for arranging widgets (e.g., QVBoxLayout, QHBoxLayout, QGridLayout).
<item>: Represents an item within a layout.
<resources>: (Optional) For adding resources like images or icons.
<connections>: (Optional) For defining signal-slot connections.

Creating a UI File

Choose a Text Editor: Use a plain text editor or an IDE with XML support (e.g., VS Code, Sublime Text, Qt Creator).
Create a New File: Create a new file with a .ui extension (e.g., mydialog.ui).
Add the Basic Structure: Start with the basic XML structure shown above, replacing MyDialog with the name of your dialog or window class.
Add Widgets and Layouts: Add <widget> elements for the UI components you want to include (buttons, labels, etc.) and use <layout> elements to arrange them.
Set Properties: Use <property> elements to set the properties of the widgets (e.g., size, position, text).
Define Connections (Optional): If you want to define signal-slot connections in the UI file, add <connection> elements within the <connections> section.
Save the File: Save the file with the .ui extension.

Using the UI File

Once you have created the UI file, you can use it in your Qt project:

Qt Creator: If you're using Qt Creator, you can add the UI file to your project and use it to generate UI header files.
uic Compiler: You can use the uic compiler to generate C++ code from the UI file, which you can then include in your project.

Creating UI files from scratch gives you fine-grained control over your GUI design and allows you to create complex and dynamic interfaces. It's a valuable skill for Qt developers who want to go beyond the visual tools and work directly with the UI definition files.

Compiling UI Files with `uic`

The uic (User Interface Compiler) is a command-line tool included with Qt. It processes UI files (.ui) and generates C++ code that represents the user interface, allowing you to integrate your UI design with your application logic.

This section explains how to use uic without relying on Qt Creator or Qt Designer.

Prerequisites

Qt Installation: Ensure you have Qt installed on your system. The uic tool is usually found in the bin directory of your Qt installation.
UI File: Have your UI file (.ui) ready, either created in Qt Designer or manually written.

Compilation Steps

Open a Terminal or Command Prompt: Open a terminal or command prompt and navigate to the directory where your UI file is located.
Run uic: Execute the following command to generate both a header (.h) and a source (.cpp) file:
```
uic -o <output_header_file> <ui_file> \
    -i <output_header_file> -o <output_source_file> <ui_file>
```
- <output_header_file>: The name you want for the generated header file (e.g., mydialog.h).
- <ui_file>: The name of your UI file (e.g., mydialog.ui).
- <output_source_file>: The name you want for the generated source file (e.g., mydialog.cpp).
Example:
```
uic -o mydialog.h mydialog.ui \
    -i mydialog.h -o mydialog.cpp mydialog.ui
```
This command will produce:
- mydialog.h: Contains the class definition for the UI.
- mydialog.cpp: Contains the implementation of the setupUi() function.

Using the Generated Code

The generated header file will contain a class that inherits from QWidget (or a subclass like QDialog or QMainWindow) and defines the UI elements and their properties.

Here's how to use it in your Qt application:

Include the Header: Include the generated header file in your C++ code:
```
#include "mydialog.h" 
```
Create an Instance: Create an instance of the generated class:
```
MyDialog dialog;
```
Call setupUi(): Call the setupUi() method on the instance, passing a pointer to the widget

where you want to create the UI:

dialog.setupUi(&dialog);
dialog.show();

By using uic, you effectively separate the UI design from your application logic, leading to more organized and maintainable code. This is particularly useful for manual UI file creation or when you need more control over code generation.

Glossary of Terms

This glossary defines common terms used throughout the documentation that might be unfamiliar to some readers.

A

API (Application Programming Interface): A set of rules and specifications that allow one application to access the features or data of another application.
AsciiDoc: A lightweight markup language used for writing documentation. It can be converted to various output formats like HTML and PDF.
Asciidoctor: A toolchain for processing and converting AsciiDoc documents.

B

Backend: The underlying technology or framework that supports an application or system. In the context of Qt, the backend could refer to the graphics rendering system (OpenGL, Vulkan) or the windowing system.
Branch: In version control systems like Git, a branch is a separate line of development that allows you to work on features or bug fixes in isolation.
Build System: A set of tools and processes used to compile and link code into an executable program. Examples include CMake and qmake.

C

CI/CD (Continuous Integration/Continuous Deployment): A set of practices that automate the building, testing, and deployment of software.
Class: In object-oriented programming, a class is a blueprint for creating objects. It defines the data and methods that the objects will have.
Commit: In version control systems, a commit is a snapshot of changes made to files in a repository.
Compiler: A program that translates source code (e.g., C++) into machine code that can be executed by a computer.
CSS (Cascading Style Sheets): A language used to describe the presentation of HTML documents, controlling aspects like colors, fonts, and layout.

D

Debugger: A tool that allows developers to step through code, examine variables, and find and fix errors.
Dependency: A software library or component that a program relies on to function correctly.
Deployment: The process of making an application available for use.

E

Emulator: Software that mimics the behavior of a hardware device or system, allowing you to run software designed for that device on a different platform.
Event: An occurrence or action, such as a mouse click, key press, or window resize, that a program can respond to.
Event Handling: The process of responding to events in a program.

F

Fork: In version control platforms like GitHub, a fork is a copy of a repository that allows you to make changes without affecting the original.
Framework: A collection of libraries, tools, and conventions that provide a foundation for developing software. Qt is a framework for cross-platform application development.
Frontend: The part of an application that users interact with directly, typically the graphical user interface (GUI).

G

Git: A distributed version control system used to track changes to files and collaborate on software development.
GUI (Graphical User Interface): A type of user interface that allows users to interact with a program using visual elements like windows, buttons, and menus.

H

Header File: In C++, a header file (.h) contains declarations of classes, functions, and variables.
HTML (HyperText Markup Language): The standard markup language for creating web pages.

I

IDE (Integrated Development Environment): A software application that provides tools for writing, editing, debugging, and building code. Qt Creator is an IDE for Qt development.
Include Directive: In C++, the #include directive is used to include header files in a source file.

L

Layout Manager: In Qt, a layout manager is used to arrange widgets within a window or container. Examples include QVBoxLayout, QHBoxLayout, and QGridLayout.
Library: A collection of pre-compiled code that can be used by other programs. Qt is a collection of libraries for cross-platform development.

M

Markup Language: A system for annotating text with tags that indicate formatting or structure. Examples include HTML, XML, and AsciiDoc.
Merge: In version control systems, merging combines changes from different branches into a single branch.
Module: A self-contained unit of code that provides specific functionality. Qt is organized into modules like QtCore, QtGui, and QtWidgets.

O

Object: In object-oriented programming, an object is an instance of a class. It has its own data and can perform actions defined by its class.
Open Source: Software whose source code is freely available and can be modified and redistributed.

P

Pull: In Git, pulling fetches changes from a remote repository and merges them into your local branch.
Push: In Git, pushing sends your local commits to a remote repository.

Q

QML (Qt Modeling Language): A declarative language used to describe user interfaces in Qt Quick.
QSS (Qt Style Sheets): A language similar to CSS used to style Qt widgets.
Qt: A cross-platform framework for developing applications with graphical user interfaces.
Qt Creator: An IDE for Qt development.
Qt Designer: A visual tool for designing Qt user interfaces.

R

Repository: In version control systems, a repository is a central location where code and its history are stored.
Runtime: The period when a program is executing.

S

Signal: In Qt, a signal is a notification that an object emits when a particular event occurs.
Slot: In Qt, a slot is a function that can be connected to a signal to be executed when the signal is emitted.
Source Code: The human-readable code written by developers.

U

UI (User Interface): The means by which a user interacts with a program.
UI File: In Qt, a UI file (.ui) is an XML-based file that describes the structure and properties of a user interface.
uic (User Interface Compiler): A Qt tool that processes UI files and generates C++ code.

V

Version Control: A system for tracking changes to files over time.
Virtual Machine: Software that emulates a computer system.

W

Widget: In Qt, a widget is a visual element in a user interface, such as a button, label, or text box.

Suyu-GUI-Framework

Qt GUI in Suyu

Qt GUI Components

Core Concepts

GUI Implementation

Key Classes

Benefits of Qt GUI

Qt Includes in the Suyu Project

QtCore

QtGui

QtWidgets

QtMultimedia

QtNetwork

QtOpenGL

QtWebEngine

QtXml

Others

Files and Classes with Qt Includes in Suyu

Source Files

Classes

The setupUi Call

Signal and Slot Mechanism

Formatting and Styling

Implementing Qt Without Qt Designer or Creator

Creating Widgets Programmatically

Example

Handling Signals and Slots

Styling with QSS

Advantages and Disadvantages

Styling with Qt Style Sheets (QSS)

Applying Styles

Selectors

Properties

Example

Creating UI Files from Scratch

Basic Structure

Creating a UI File

Using the UI File

Compiling UI Files with uic

Prerequisites

Compilation Steps

Using the Generated Code

Glossary of Terms

A

B

C

D

E

F

G

H

I

L

M

O

P

Q

R

S

U

V

W

The `setupUi` Call

Compiling UI Files with `uic`