dev-resources.site

for different kinds of informations.

Creating a Native Desktop GUI Using C++ with GTK

Published at

10/13/2024

Creating a CMAKE File for the Project

I used CMAKE to define the build configurations. I find it very convenient that CMAKE generates the Makefile on Linux and can also create a Visual Studio project on Windows.

CMAKE can be installed via APT on Debian distributions.

sudo apt install cmake

The CMakeLists file looks like this:

cmake_minimum_required(VERSION 3.0)
project(todolist_app)
set(CMAKE_CXX_STANDARD 17)

# Find GTK3 package
find_package(PkgConfig REQUIRED)
pkg_check_modules(GTK3 REQUIRED gtk+-3.0)

file(GLOB SOURCES
    "src/sample.cpp"
)

add_compile_options(-fpermissive)
include_directories(./)
include_directories(${GTK3_INCLUDE_DIRS})

add_executable(todolist_app ${SOURCES})


target_link_libraries(todolist_app ${GTK3_LIBRARIES})

add_definitions(${GTK3_CFLAGS_OTHER})

To generate the Makefile, simply run:

mkdir build
cd build
cmake ../

Before running the Makefile script, you need to install the GTK library:

sudo apt install libgtk-3-dev

Of course, the GCC compiler (and build-essential) along with make must also be installed. These packages are generally already configured on almost every developer's machine. To compile the project, just use make:

cd build
make
./todolist_app

Main loop

The code below is the file containing the project's void main. Here, the main loop of the application is started. Before that, some structs and modules were defined to save, update, list, and delete the to-do list. Since the focus is only on the interface, these methods persist in a local list in memory.

Main loop:

#include <gtk/gtk.h>
#include<list>
#include<string>

// Types
#include "types/models.h"

// Services
#include "services/todo-service.h"

// Views
#include "views/dialogs.h"
#include "views/main.h"


int main(int argc, char *argv[]) 
{
    gtk_init(&argc, &argv);

    // Show all widgets
    MainWindow::openMainWindow();

    gtk_main();

    return 0;
}

Before the application window is created, the GTK API requires an initialization call passing the arguments from the function call. The gtk_main method starts the graphical interface's event loop.

The MainWindow module is defined in views/main.h:

#define APP_MAIN_WINDOW_WIDTH 400
#define APP_MAIN_WINDOW_HEIGHT 800
#define SUCCESS_COLOR "#99DD99"

namespace MainWindow
{
    // Main widget pointers
    GtkWidget *mainWindow = nullptr;
    GtkWidget *mainWindowContainer = nullptr;
    GtkWidget *(*mainWindowRefresh)();
    GtkWidget *todoInputText;
    int inEdition = 0;

    // Button events
    void mainWindowViewTodoListSaveClicked(GtkWidget *widget, gpointer data)
    {
        GtkEntry *entry = GTK_ENTRY(data);
        const gchar *text = gtk_entry_get_text(entry);
        Todo todoDto;
        todoDto.description = (char *)text;
        if (inEdition)
        {
            todoDto.id = inEdition;
            TodoService::todolistUpdate(&todoDto);
        }
        else
        {
            TodoService::todolistSave(&todoDto);
        }
        inEdition = 0;
        mainWindowRefresh();
        gtk_widget_show_all(mainWindowContainer);
    }

    void mainWindowViewTodoListEditClicked(GtkWidget *widget, int id)
    {
        Todo *todo = TodoService::todolistLoad(id);
        inEdition = id;
        g_print("Editing %i %s\n", todo->id, todo->description);
        gtk_entry_set_text(GTK_ENTRY(todoInputText), todo->description);
    }

    void mainWindowViewTodoListDeleteClicked(GtkWidget *widget, int id)
    {
        TodoService::todolistDelete(id);
        mainWindowRefresh();
        gtk_widget_show_all(mainWindowContainer);
    }

    // Render function
    GtkWidget *createMainWindowView()
    {
        GtkWidget *list_box;
        GtkWidget *row;
        GtkWidget *hbox;
        GtkWidget *label;

        mainWindowRefresh = createMainWindowView;

        // Creates a new window
        if (mainWindow == nullptr)
        {
            mainWindow = gtk_window_new(GTK_WINDOW_TOPLEVEL);
            gtk_window_set_title(GTK_WINDOW(mainWindow), "Todo List");
            gtk_window_set_default_size(GTK_WINDOW(mainWindow), APP_MAIN_WINDOW_WIDTH, APP_MAIN_WINDOW_HEIGHT);
            g_signal_connect(mainWindow, "destroy", G_CALLBACK(gtk_main_quit), NULL);
        }
        else
        {
            gtk_widget_destroy(mainWindowContainer);
        }

        GtkWidget *windowContainer;
        windowContainer = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
        mainWindowContainer = windowContainer;
        gtk_container_add(GTK_CONTAINER(mainWindow), windowContainer);

        GtkWidget *todoFormContainer;
        todoFormContainer = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
        gtk_container_add(GTK_CONTAINER(windowContainer), todoFormContainer);

        GtkWidget *inputVbox;
        inputVbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
        gtk_widget_set_size_request(inputVbox, 250, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), inputVbox);
        todoInputText = gtk_entry_new();
        gtk_box_pack_start(GTK_BOX(inputVbox), todoInputText, TRUE, TRUE, 0);

        GtkWidget *saveBtn;
        saveBtn = gtk_button_new_with_label("Save");
        gtk_widget_set_size_request(saveBtn, 80, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), saveBtn);
        g_signal_connect(saveBtn, "clicked", G_CALLBACK(mainWindowViewTodoListSaveClicked), todoInputText);

        GtkWidget *cancelBtn;
        cancelBtn = gtk_button_new_with_label("Cancel");
        gtk_widget_set_size_request(cancelBtn, 80, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), cancelBtn);

        // // Creates a new GtkListBox
        list_box = gtk_list_box_new();
        gtk_container_add(GTK_CONTAINER(windowContainer), list_box);

        // // Creates and add rows to the GtkListBox
        int i = 0;
        for (std::list<Todo>::iterator it = todoListRepository.begin(); it != todoListRepository.end(); ++it)
        {
            row = gtk_list_box_row_new();
            hbox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 5);

            // Column 1
            gchar *label_text1 = g_strdup_printf(it->description, i);
            label = gtk_label_new(label_text1);
            gtk_widget_set_size_request(label, 250, -1);
            gtk_box_pack_start(GTK_BOX(hbox), label, TRUE, TRUE, 0);
            g_free(label_text1);

            // Column 2
            GtkWidget *editBtn = gtk_button_new_with_label("Edit");
            gtk_widget_set_size_request(saveBtn, 80, -1);
            gtk_box_pack_start(GTK_BOX(hbox), editBtn, TRUE, TRUE, 0);
            g_signal_connect(editBtn, "clicked", G_CALLBACK(mainWindowViewTodoListEditClicked), it->id);

            // Column 3
            GtkWidget *removeBtn = gtk_button_new_with_label("Remove");
            gtk_widget_set_size_request(removeBtn, 80, -1);
            gtk_box_pack_start(GTK_BOX(hbox), removeBtn, TRUE, TRUE, 0);
            int index = i;
            g_signal_connect(removeBtn, "clicked", G_CALLBACK(mainWindowViewTodoListDeleteClicked), it->id);

            gtk_container_add(GTK_CONTAINER(row), hbox);
            gtk_container_add(GTK_CONTAINER(list_box), row);
            i++;
        }

        return mainWindow;
    }

    // Open function
    void openMainWindow()
    {
        gtk_widget_show_all(createMainWindowView());
    }
}

Similar to the approach used in web technologies and Android development, in GTK we have an interface to create a window with gtk_window_new, and inside it, we add various elements that can contain many other elements, forming a tree structure. The elements here are GtkWidget. In the documentation of the library, we can find the various types of widgets we can use.

In my experiment, I did not use any tool for screen design. Everything was done through the programming interface. However, GTK allows the creation of XML files that represent the screen. Glade is a graphical interface that allows the creation of these XMLs.

gui Article's

30 articles in total

Criando interface gráfica Desktop nativa utilizando C++ com GTK3