Using GTK, Glade and Codeblocks together in Ubuntu - Level Beginner

Last updated on: March 25, 2016

Looks like you need to do a lot of things to properly set an environment where you can peacefully create UI files using Glade which uses GTK-3.0 version in the backend while using CodeBlocks!

The major steps for setting up environment are:

  1. Install latest stable version of CodeBlocks (for me, 16.01)
  2. Install GTK-3.0 related libraries
  3. Modify the Template Script in CodeBlocks
  4. Install Glade

The major steps for creating an UI are:

  1. Create design using Glade
  2. Connect it to a C code

Latest CodeBlocks!

Installing CodeBlocks from PPA

sudo apt-add-repository ppa:damien-moore/codeblocks-stable
sudo apt-get update
sudo apt-get install codeblocks

GTK-3.0 Libraries!

Installing GTK-3.0 libraries:

sudo apt-get install libgtk3.0-dev
sudo apt-get install libgtk3.0-cil libgtk3.0-cil-dev

Modify Template Script in CodeBlocks

This is the tricky part. You see, the CodeBlocks still uses GTK+-2.0 libraries by default for the GTK+ projects in its template. You need to edit the template file and modify the parts where it will reference the GTK-3.0 libraries instead of the libraries from version 2.

start with this command:

pkg-config --cflags --libs gtk+-3.0

See the output? It is showing the necessary files you need to successfully build a gtk based app. For me, it is:

-pthread -I/usr/include/gtk-3.0 -I/usr/include/at-spi2-atk/2.0 -I/usr/include/at-spi-2.0 -I/usr/include/dbus-1.0 -I/usr/lib/x86_64-linux-gnu/dbus-1.0/include -I/usr/include/gtk-3.0 -I/usr/include/gio-unix-2.0/ -I/usr/include/mirclient -I/usr/include/mircommon -I/usr/include/cairo -I/usr/include/pango-1.0 -I/usr/include/harfbuzz -I/usr/include/pango-1.0 -I/usr/include/atk-1.0 -I/usr/include/cairo -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng12 -I/usr/include/gdk-pixbuf-2.0 -I/usr/include/libpng12 -I/usr/include/glib-2.0 -I/usr/lib/x86_64-linux-gnu/glib-2.0/include -lgtk-3 -lgdk-3 -lpangocairo-1.0 -lpango-1.0 -latk-1.0 -lcairo-gobject -lcairo -lgdk_pixbuf-2.0 -lgio-2.0 -lgobject-2.0 -lglib-2.0

Now, Open CodeBlocks. Right click on New > Project > GTK+ Project, edit this script. It may throw an error saying it can not find the file, making it in read-only mode. Hence, go to ~/.local/share/codeblocks/templates/wizard/gtk and open the wizard.script. Replace the version values with the values you found from the pkg-config part. For example,

# modifying versions from wizard.script file - before change
if (!VerifyFile(dir_nomacro_inc + wxFILE_SEP_PATH + _T("gtk-2.0")))

will become

# c modifying versions from wizard.script file - after change

if (!VerifyFile(dir_nomacro_inc + wxFILE_SEP_PATH + _T("gtk-3.0")))

In case you are clueless, you can take a look at my wizard.script.

Installing Glade

sudo apt-get install glade

Create Design Using Glade

Open glade, drag and drop a Window top-level container. Add some more things if you want inside it. From the properties pane at the right side, go to general tab, and write mywindow in the ID.

The key things to remember here are:

  1. You got to have a Window ID, and it must be used in the C code
  2. You have to save it in GtkBuilder format (file > save as)

C code example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# C Code that includes a testGlade.glade file
# for designing UI
#include<gtk/gtk.h>

int main(int argc, char *argv[]){
    GtkBuilder *gtkBuilder;
    GtkWidget *window;

    gtk_init(&argc, &argv);

    gtkBuilder = gtk_builder_new();
    gtk_builder_add_from_file(gtkBuilder, "testGlade.glade", NULL);
    window = GTK_WIDGET(gtk_builder_get_object(gtkBuilder, "mywindow"));

    g_object_unref(G_OBJECT(gtkBuilder));
    gtk_widget_show(window);
    gtk_main();

    return 0;
}

Compile and run. Comment below if this works for you or if you got a feedback! share your screen shot of what you built :)

Written on March 25, 2016