GTK4 Pt. 1

This is the first article in the series of articles where we are going to learn GTK4 or GTK to build the desktop applications for the GNU/Linux systems. In order to follow this sereis, you need to install couple of software (and few more along the way).

  1. GTK has the official supports for the few programming language such as C, JavaScript, Rust, Vala, Python, etc. We are going to use C and because of that we need to install C compiler. Go ahead and install GCC as C compiler. If you’re using Debian/Ubuntu run this command - sudo apt install gcc.
  2. Of course, we need to install GTK itself. Please refer the official documentation on how to install the GTK4 development packages on your system. If you’re using Debian/Ubuntu run this command - sudo apt install libgtk-4-dev.

Finally, I assume that you already have Terminal and text-editor of your choice on your system to write code and run commands against your code. Try terminator and zed if you are exploring the options for the terminal and editor respectively.

Go ahead and create a file with name main.c and write the following code.

#include <stdio.h>

int main(int argc, char** argv) {
    printf("hello, world\n");

    return 0;
}

I am not going to explain the meaning of this code as you should know C programming language in order to follow this series.

To run this program, following command is used.

gcc main.c -o main

Here, we have invoked gcc or GCC compiler on the main.c program and after successful compilation, it should generate an object (-o) file with name main.

Check in the current directory, you should have main object or executable file. Running this executable is as simple as running following command.

./main
hello, world

By seeing this output, we can confidently confirm that C compiler is installed correctly and we are now ready to write the hello, world program using GTK library.

Go ahead and delete everything you write in main.c file and write the following command.

#include<gtk/gtk.h>

We are importing/including gtk/gtk.h header file to use GTK in our main.c. Interesting enough, we only need this single header file to work with GTK.

Next, go ahead and add main() function with return value 0.

#include<gtk/gtk.h>

int main(int argc, char** argv) {
    return 0;
}

Within this main() function, we need to initialize the GTK using gtk_init() function. It will initialize everything needed to operate the GTK. For example, it will open the default display to render your application.

#include<gtk/gtk.h>

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

    return 0;
}

Note: If you know gtk_init() from version 2 and 3 then in version 4, this function no longer accepts any arguments.

gtk_init() function must be called before using any other GTK functions in our application. But, as we called this function at the start of the program, we are now ready to write the application code. Let’s add a comment as placeholder for the application code for now.

#include<gtk/gtk.h>

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

    /* application code should be written here. */

    return 0;
}

Once we are done with the application code, we continue need to run the application for the user to interact with. In other words, the application should continue run in interactive mode AND in infinite loop until user explicitly terminate the application. We don’t have solve this puzzle by ourself. We just need to write an infinite loop and call g_main_context_iteration() function.

gboolean done = FALSE;
while (!done) {
    g_main_context_iteration(NULL, TRUE);
}

This code continue runs the g_main_context_iteration() function until somehow done variable set to TRUE. Explaining the meaning of this function and its arguments is complicated at this stage. So, for now just remember this snippet of code to run the GTK application in loop.

Don’t worry about gboolean, FALSE, TRUE, and g_main_context_iteration(). All are available for you from the gtk/gtk.h header file.

Note: If you’re thinking that we are writing low level code instead of the application code then you are correct. We are writing some boilerplate code that is needed for the GTK4 application to correctly initialize and run. Even further, this is not how we will write the GTK4 application. There is standard way to do and it and we will follow that standard practice. The way, we are currently writing is for the educational purpose.

#include<gtk/gtk.h>

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

    /* application code should be written here. */

    gboolean done = FALSE;
    while (!done) {
        g_main_context_iteration(NULL, TRUE);
    }
    return 0;
}

What I just written is the skeleton of the GTK4 application code. Save as template or re-write it couple of time as for next few chapters we’ll use this skeleton code to experiment GTK functionalities. Although, the program is a valid C and GTK4 program but it is useless. I mean if you run this program, it will do nothing and continue run this program in terminal.

To make it useful, let’s add a window in this program. A window is nothing but a main GUI component of the application. We can create a window using gtk_window_new() function. This function return a pointer to newly created window which we need to save into the pointer variable of type GtkWidget.

GtkWidget* window = gtk_window_new();

In GTK, all GUI components are widgets. The window you’re seeing is a widget, the button you’ll press is a widget, the checkbox you’ll checked is a widget and so as many other widgets which are invisible. By creating any widget and saving it into the GtkWidget* give us a lot of flexibility. As GtkWidget is the base class of the all widgets and due to how GTK widgets are implemented, we can access all the functionalities available for GtkWidget even if we have created a window using gtk_window_new() method.

#include<gtk/gtk.h>

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

    GtkWidget* window = gtk_window_new();

    gboolean done = FALSE;
    while (!done) {
        g_main_context_iteration(NULL, TRUE);
    }
    return 0;
}

Finally, we need to render this window on the screen. For that we can use gtk_widget_show() function by passing the name of widget we want to render/show e.g. window.

#include<gtk/gtk.h>

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

    GtkWidget* window = gtk_window_new();
    gtk_widget_show(window);

    gboolean done = FALSE;
    while (!done) {
        g_main_context_iteration(NULL, TRUE);
    }
    return 0;
}

Our program now creates a window and render it on the screen! The window will be blank as we haven’t add anything in this window and the default size will be 200x200 which we will change in future.

If we run this program using the same command as we run the main.c program previously, it will fail.

gcc main.c -o main

main.c:1:9: fatal error: gtk/gtk.h: No such file or directory
    1 | #include<gtk/gtk.h>
      |         ^~~~~~~~~~~
compilation terminated.

GCC don’t know the location of gtk/gtk.h header file. Frankly speaking, even I don’t know the location of this header file. Actually, we don’t need to know the location of this header file because there is an utility we can install and it’ll take care of it. The utility is pkg-config. Go ahead and install this package. If you’re using Debian/Ubuntu run this command - sudo apt install pkg-config.

We are going to use this pkg-config package in compilation of our program in the above command as follow.

gcc main.c -o main `pkg-config --cflags --libs gtk4`

The first part of the command is same as it was before. But, we are now including pkg-config utility and few other options with gtk4. pkg-config will not just find the location of the gtk/gtk.h header file, but it make sure to properly add the needed header files for the correct compilation.

Go ahead and run this command. I would suggest you to type this command instead of copy-paste in that way you get a chance to remember this command. You should see output like this.

gcc main.c -o main `pkg-config --cflags --libs gtk4`

main.c: In function ‘main’:
main.c:7:9: warning: ‘gtk_widget_show’ is deprecated: Use 'gtk_widget_set_visible or gtk_window_present' instead [-Wdeprecated-declarations]
    7 |         gtk_widget_show(window);
      |         ^~~~~~~~~~~~~~~
In file included from /usr/include/gtk-4.0/gtk/gtkapplication.h:26,
                 from /usr/include/gtk-4.0/gtk/gtkwindow.h:32,
                 from /usr/include/gtk-4.0/gtk/gtkaboutdialog.h:29,
                 from /usr/include/gtk-4.0/gtk/gtk.h:33,
                 from main.c:1:
/usr/include/gtk-4.0/gtk/gtkwidget.h:271:12: note: declared here
  271 | void       gtk_widget_show                (GtkWidget           *widget);

Don’t worry about these messages! They are warnings because we are using gtk_widget_show() function and this function is deprecated. Even further, these messages suggest to use gtk_widget_set_visible() or gtk_window_present() which is very nice as GTK is helping us by not just compilaining but also suggesting the solution of the problem! We will fix this warning in next few articles but you should now have a main executable.

./main

Run the executable and you should see a blank 200x200 window. The application will continue run even after you click on x icon from the window. You need to press ctrl+c to actually terminal the program.

Let’s pause here for now. In the next article, we will write few lines of code to actually close/terminate the applicaton when we press x icon.

· Tags: gtk c