PEM's Gentoo

Creating application with GTK+ is a simple process. The Gnome team has made an awesome graphic framework. You can develop your software interface directly by using your favorite programming language (there are bindings for almost every programming languages I've heard off) or you can use a graphic interface builder: Glade-2. I've chosen this convenient mean as it produces one of the most interesting development approach I've seen: graphic interface are stored in XML.
Glade-2 is the interface builder. It's started on the command line by:

glade-2

This produces three windows:

The first one is the palette. A huge selection tool providing an easy access to the widgets available with GTK+ and Gnome.
The second one is the main window or the project window. Change or action on the project are operated here such as: save, generate, and so on.
The third one is the property window. Each time you select a new widget, this window will display some of its properties such as: dimension, placement behaviour, resizing beviour and so on.

It should look like this:

To begin a new project, you can choose the menu access "Project / New" or by the keyboard shortut "CTRL+N". This leads us to dialog box requesting a choice of project you want to start:
PEM's Gentoo
We will focus this mini-howto on the GTK+. So, just choose "New GTK+ Project". The palette window is ungreyed and its choices within becomes available.
Select the little window in it , in order to create the main container of our little application. Now, your desktop should look like this:

This new window, let's call it the application window, will hold our little program. So, let's get it arranged a bit. By default the property window is set on the "Widget" tab. In this tab, set the "Title" field to "Hello world". While your're typing it, you can see the change progressing in the application window. Now, in the "Common" tab, check the checkboxes "Width" and "Height". Modify their value to 200 and 120 respectively, like this:
PEM's Gentoo
There are many possible way to populate our program with others widget. Generally, we add container to divide the available space the most efficiently. In our case, we will remain a light as possible. As a widget window is considered as a normal container, we will add a label widget to it. Now, choose the big "A" on the palette window PEM's Gentoo and move your mouse cursor to the application window. While over it, you may have noticed that the mouse cursor has turned into a crosshair. Just click on the main window grey content. This grey and grided content is replaced by a default label "label1". The property window now displays the properties for this new label widget.

Note that owing to our full scale label widget taking all the available place, we have no easy mean for re-selecting the widow property. Glade-2 proposes a good way to easily select every widget created so far for an application in the form of a widget tree view. To make the window of this widget tree appears, select "View / Show Clipboard" in the project window's menu:
PEM's Gentoo
By using this widget tree, you are now able to freely choose any widget created.

Return the selection to the "label1" widget in case you've selected the "window1". We are gonna put the final touch to our little graphic tour. In the property window, select the "Widget" tab and modify the label field with "Hello world". So, now we got our "Hello world" graphic interface.

At this stage, we could ask Glade-2 to generate the code that goes along with our little interface. That's a very convenient way to use this tool. Unfortunately, by doing so, the complete program would turned into a more static program than we planned. So, just save our marvel by striking [CTRL+S] or pushing the "Save" button on the toolbar or via the menu entry "File / Save" in the project window. As it's our first save for this fresh project, the project window displays a project options windows:
PEM's Gentoo
Give the project a place and name it "helloworld". Name also "helloworld" the program name. As you can see on the project options window, the project file is now named helloworld.glade. That's this file that contains the complete XML description of our graphic interface.

Now, it's time to get to the code. For this, we will use libglade. In the same directory where we just created our XML file, write this little piece of C code. It's well commented and, I hope, self explanatory enough:

// GTK regular header
#include <gtk/gtk.h>
// Glade regular header
#include <glade/glade.h>

// Main program
int main(int argc, char **argv) {
    GladeXML    *xml;
    GtkWidget   *widget;

    // Initilize GTK API
    gtk_init(&argc, &argv);
    // Open the Glade file
    xml = glade_xml_new(// Glade file describing the MMI
                        "helloworld.glade",
                        // Root window (const char)
                        NULL,
                        // Translation domain for XML file
                        NULL);
    // Get the main window container
    widget = glade_xml_get_widget(xml, "window1");
    // We don't handle any signal in this little program
    // but this does not hurt
    glade_xml_signal_autoconnect(xml);
    // Show every widget created so far
    gtk_widget_show_all(widget);
    // Main GTK loop
    gtk_main();

    // Default success code
    return 0;
}

To compile this little source easily, here's a little Makefile:

CC := gcc
CFLAGS :=       -Wall -O3 -fomit-frame-pointer \
                `pkg-config --cflags gtk+-2.0` \
                `pkg-config --cflags libglade-2.0`
CPPFLAGS :=
CXXFLAGS :=     $(CFLAGS)
TARGET_ARCH := -march=athlon-xp -mcpu=athlon-xp
LDFLAGS :=      -Wl,-O1 \
                `pkg-config --libs gtk+-2.0` \
                `pkg-config --libs libglade-2.0`

PRODUCTS :=     helloworld

.PHONY: clean

all:    $(PRODUCTS)

clean:
    find *.o -exec rm {} \; && echo || echo

mrproper: clean
    for product in $(PRODUCTS); \
    do [ -f $$product ] && rm $$product; \
    done && echo || echo

rebuild: mrproper all

helloworld: helloworld.o
    $(CC) $(CFLAGS) $(LDFLAGS) $^ -o $@ && \
    strip $@

In this Makefile, I've set TARGET_ARCH to my processor type. This has to be modified to yours accordingly. In case you hesitate, just replace the 2 "athlon-xp" at the 7th line for "i686".
Once everything saved, just compile it with:

make

To execute our little program, just type:

./helloworld

And voila:
PEM's Gentoo

Wait, wait,... There's more! The real magic is not here: as we have designed our graphic interface with Glade-2 and execute it libglade, it's time to show some hot modification without having to recompile our whole program (though this is not a big deal). For this just edit the helloworld.glade file with your favorite editor and, at line 8, change the line for:

Change the line 10 for:

<property name="title" translatable="yes">Humm... Nice title!</property>

Change the line 25 for:

<property name="label" translatable="yes">Hello world, my friend.</property>

And this time, voila:
PEM's Gentoo
To conclude, Glade-2 and libglade propose a very catchy way of creating easy to maintain GTK+ application.