GTK4 Tutorial Pt. 1

Viewpoint may be largely unrelated to its usefulness. Many if not most of the software we use is probably obsolete according to the latest design criteria. Most users could probably care less if the internals of the operating system they use is obsolete. They are rightly more interested in its performance and capabilities at the user level. Ken Thompson, The Tanenbaum-Torvalds Debate

GTK+ or GTK is a GUI toolkit (written in C programming language) for building GNU/Linux (and for other platforms, if you care) applications. There are three popular versions of GTK — 2, 3, and 4. GTK 2 is stable but old. GTK 3 is new but occasionally breaks! The focus of this document is — 4 and the language will be C.

This tutorial assumes that you know C programming language. You know that C program has .c extension and here is the simple hello, world program written in C.

#include<stdio.h>

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

  return 0;
}

To compile this program, we need GCC and following is the way to compiles the C program.

gcc hello.c -o hello

gcc is a command that invoke GCC compiler on hello.c file. After successful compilation, it will generate an object(-o) file and name of this object file will be hello. You can easily run this object file by running following command.

./hello
hello, world

But, we are building GUI application using GTK library. So, we need to install GTK on our computer. Almost all popular package managers have entry for GTK and related libraries. You just need to run only one command to install GTK library. For example, here is how you can install on Fedora.

We don’t have to worried about where the GTK is installed. It will be taken care by pkg-config. In order to use GTK in our program or to build an application using GTK, all we have to do is just include one header file - gtk/gtk.h. For example, if I'm creating a hello, world application within hello.c file then the first line must be (remove the complete code from this file and start with blank) -

#include<gtk/gtk.h>

After that as obvious we need a main() function to initiate the execution.

#include<gtk/gtk.h>

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

}

Optionally, you can return the value 0.

#include<gtk/gtk.h>

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

  return 0;
}

Within main() function you need to first initiate the GTK using gtk_init() method. This method will do all the needed configuration for you before your application render on the screen.

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

#include<gtk/gtk.h>

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

  return 0;
}

Then you can write your application code where you can have window, button, label, progress bar and so on.

#include<gtk/gtk.h>

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

  /* application code should be written here. */

  return 0;
}

Once you done with the application code, you’ll run the application that will continue to interact with user, right? In other words, we need to run our application in infinite loop until user explicitly close or terminate the application. This can be done via running g_main_context_iteration() method in infinite but terminative loop as follow.

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

With this code, g_main_context_iteration() method continue run until, in some way the done variable is set to TRUE. Explaining the meaning of method's argument value is little complicated at this stage. So, for now, just remember that we need to pass NULL as context and TRUE as may block value.

Note: If you’re thinking that we’re writing too much low details than focusing on building GUI application then you’re correct. We’re writing unnecessary low details than focusing on what is important for us as application developers. But, this is for educational purpose and after becoming familiar with these fundamentals, we’re going to use different path to hide this information.

#include<gtk/gtk.h>

int main(int argc, char *argv[]) {
  gtk_init();
  gboolean done = FALSE;

  /* application code should be written here. */

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

  return 0;
}

What I just written here is the skeleton of normal desktop application initial code. Although, the above code is valid, but it does not make any sense. If you run the above program it will display nothing and continue run in terminal.

To make it little useful and to demonstrate the GTK functionalities, we need to create GUI. In GTK, everything is widget. The window you are seeing is the widget, the button you will click is the widget, the information your reading as label is the widget and many other things which your are not seeing on screen is the widget! These window, button, label — all are the categories of widget.

Let’s say I want to create a window. To do so, first I need to define a variable window with type GtkWidget.

GtkWidget *window;

Just defining this variable does not make it a window. In order to create a window, I actually need to invoke the window creation method as -

window = gtk_window_new();

gtk_window_new method creates a new toplevel window and reference to this created window is saved into window variable.

Finally, I need to draw this window on screen using gtk_widget_show() method.

gtk_widget_show(window);

With these three lines, the program hello.c becomes

#include<gtk/gtk.h>

int main(int argc, char *argv[]) {
  gtk_init();
  gboolean done = FALSE;

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

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

  return 0;
}

This will create a blank window with size of default 200x200.

We know how to run a C program using gcc command. But, it wouldn't work. Why? Because, gcc don't know about gtk/gtk.h. As I mentioned earlier, pkg-config will take care about installed library. So, we need to use pkg-config with gcc in following way.

gcc `pkg-config --cflags --libs gtk4` hello.c -o hello
./hello

Here, I’m compiling hello.c program using gcc and asking pkg-config to include gtk4 library in compilation process. If everything works then we'll see a 200x200 blank window. We can minimize or maximize the window or re-position the window. But, if we click on x or close icon of window, it will close or terminate the window visually but not as process. You'll see in terminal that the process is still running. You need to press ctrl+c to explicitly terminate process. In next article, we’re going to write few lines of code to close the application when press close icon.