Senior author, Open Source enthusiast.

Saturday, November 24, 2018 at 22:19

Setup C/GTK+ Programming Tools on Ubuntu for Beginners

This one is a continuation to Setup Programming Tools for C, C++, Java, and C++/Gtkmm. This tutorial uses GTK+ version 3 and not version 2. With GTK+ library, you can develop programs with user interface on GNU/Linux (and other platforms, too). An example of greatest thing ever developed with GTK+ is GNOME Desktop Environment. Like in the previous tutorial, here you will also use Geany IDE to write source code. I use Ubuntu 18.04 LTS as my basis here. And below you will see a source code example for you to compile, build, and run it. Happy learning!

Subscribe to UbuntuBuzz Telegram Channel to get article updates directly.

Summary

What you will do in this exercise are simple:

Prepare every tool needed.
Write the source code in C language by following GTK3 rules. Examples available.
Compile every source code with gcc by linking to GTK3 library. Command lines available.
Run produced program.
Configure Geany to automate those tasks by single click.

That's all.

1. Install GTK+ Library Dependencies

First, install GTK3 libraries:

$ sudo apt-get install libgtk-3-dev

2. Install C Compiler

Second, you should have a C compiler:

$ sudo apt-get install gcc

3. Install Geany Text Editor

Then install Geany IDE:

$ sudo apt-get install geany

4. Write Code Example and Compile

This is an empty window application example taken from GTK3 Documentation. It's your first Hello World application. You will copy and paste this code example to Geany, save it as gui.c, and then compile it to be executable named gui, and finally execute that gui.

Filename: gui.c

// copied from https://developer.gnome.org/gtk3/stable/gtk-getting-started.html
#include <gtk/gtk.h>

static void
activate (GtkApplication* app,
          gpointer        user_data)
{
  GtkWidget *window;

  window = gtk_application_window_new (app);
  gtk_window_set_title (GTK_WINDOW (window), "Window");
  gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
  gtk_widget_show_all (window);
}

int
main (int    argc,
      char **argv)
{
  GtkApplication *app;
  int status;

  app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
  g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
  status = g_application_run (G_APPLICATION (app), argc, argv);
  g_object_unref (app);

  return status;
}

Compile:

$ gcc `pkg-config --cflags gtk+-3.0` -o gui gui.c `pkg-config --libs gtk+-3.0`

Execute:

$ ./gui

Result:

**5. Write Second Code Example and Compile**

This is the same window but with a button on center, taken from GTK+ Documentation as well. It's your second Hello World application. This time, save it as gui2.c on Geany.

Filename: gui2.c

// copied from https://developer.gnome.org/gtk3/stable/gtk-getting-started.html
#include <gtk/gtk.h>

static void
print_hello (GtkWidget *widget,
             gpointer   data)
{
  g_print ("Hello World\n");
}

static void
activate (GtkApplication *app,
          gpointer        user_data)
{
  GtkWidget *window;
  GtkWidget *button;
  GtkWidget *button_box;

  window = gtk_application_window_new (app);
  gtk_window_set_title (GTK_WINDOW (window), "Window");
  gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);

  button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL);
  gtk_container_add (GTK_CONTAINER (window), button_box);

  button = gtk_button_new_with_label ("Hello World");
  g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL);
  g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy), window);
  gtk_container_add (GTK_CONTAINER (button_box), button);

  gtk_widget_show_all (window);
}

int
main (int    argc,
      char **argv)
{
  GtkApplication *app;
  int status;

  app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
  g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
  status = g_application_run (G_APPLICATION (app), argc, argv);
  g_object_unref (app);

  return status;
}

Compile:

$ gcc `pkg-config --cflags gtk+-3.0` -o gui2 gui2.c `pkg-config --libs gtk+-3.0`

Execute:

$ ./gui2

The result:

6. Compile using Geany

Finally, how to setup Geany so you can compile code easily? Or, more precisely, how to make Geany recognizes every file name to compile correctly without you change the command every time? That's easy as long as you know those two compile commands above. Go to Geany main menu Build > Set Build Commands > copy and paste second compile command from here > change gui2.c to %f and gui2 to %e > OK. See below.

(%f represents source code file and %e represents executable file)

Now for gui.c and gui2.c, try to compile them with Geany instead with Terminal. You will find the results are the same. See below.

Result from gui.c:

(Notice the file gui.c opened)

Result from gui2.c:

(Notice the button Hello World there)

Starting from now, you are ready to compile GTK3 source code examples using Geany IDE. Go ahead!