GTK+ programming with Glade

Tutorial By: Ishan Chattopadhyaya
Original Source: Developer IQ magazine July 2002

Introduction

When it comes to developing programs based on Graphical User Interfaces (GUIs) on the Linux platform, you have the option to use either QuickTime libraries on KDE or GTK+ libraries with GNOME. Both these development toolkits have nice IDEs & GUI builders written for them, viz., KDevelop for QT and Glade for GTK+/GNOME. In this article, we shall explore the latter and try to create a simple GTK+ application.

Glade is a tool, which creates the graphical front-ends for your GTK programs. Unlike Visual Basic or Delphi, Glade cannot be termed as an Integrated Development Environment (IDE). It just builds the interface exactly as you want, and then writes the GTK code which produces the actual interface after compilation of the code.

So let’s get down to some business and create a simple ‘Country Information Program’. This program, though simple, shall help understand the basic concepts of widgets, callbacks etc. in GTK+. ‘Country Information Program’ shall provide the user with an entry field where he’ll enter a country’s name. The program shall then process the user’s entry and subsequently show either its Capital or Currency.

Example: Country Information Program

Open Glade. You'll see three component windows of Glade (see above figure). This shall be your working environment for designing your interface(s). From the Palette window, click on the icon the insert a new window (first icon of the Palette) to your project. This shall serve as your main window of the project. The Properties window shows the properties of the selected items. From there, name this window as "main_window" and give its name as "Country Information Program."

GTK follows the container-child concept of packing widgets. A widget can roughly be equated with User Controls in VB, but still a widget means a lot more than that. A widget can be a simple text box, text entry box or even a container like Vertical Box Container or a Fixed Position Container. In VB or Delphi, one uses the latter concept of fixed positions, i.e., the controls are placed at a fixed position in a window which are not changed when the window is resized or maximized. With the container widgets, which GTK provides, there is a lot more flexibility regarding resizing or maximizing your windows.

To your main_window, add a Horizontal Pane container widget. This widget can hold two child widgets, one on the left of the pane and the other at the right. These child widgets can also be containers. In the left portion, add a vertical box container. For this click on the icon from the Palette, click on the left of the pane on the main_window and then specify 4 rows to be placed. This divides the area further into four rows where you can place more child widgets. Add a Frame widget into the right portion of the main_window and like before add a vertical box container with 2 rows inside the frame.

Now into these rows of the vertical boxes, child widgets can easily be placed. Adding a Fixed Position container widget might make things easy to follow for VB users but then make sure that you disable main_window’s Grow property as things may look hideous if the main_window is resized by the user. Nevertheless, it is my opinion that one should try to use the fixed position container widget as less as possible.

Now add a Label widget to the first row of the Vertical box on the left of the pane (vbox1). Similarly, add a Text Entry Widget into the second row of the vbox1. Now place a Horizontal Box container widget into the third row and specify 2 columns to be added. This will divide this row further into two columns. In both these columns, add a Radio Button widget each. Finally in the fourth row of vbox1, add a Button widget.

In the two rows inside the Frame widget, add a Label widget and a Text Entry widget respectively. Your interface might look somewhat like the desired interface (see figure below), but a lot of finer tuning still needs to be done.

Now one by one select all the child widgets placed inside the vertical boxes and the horizontal box and from the Properties window change their properties as shown in above figure. For the button (named ok_button), right-click on it and select ‘Remove Label’. This removes the label from the button and acts like a conatainer where other widgets can also be placed. Place an Arrow widget (from the GTK+ Additional tab of the Palette window) in the button.

It is easy to select the visible widgets like labels, buttons etc. but the problem arises while selecting the Vertical Boxes or Horizontal Boxes. For this, from the View menu of the Glade window, click ‘Widget Tree’. Now from this ‘Widget Tree’ window, select the hbox1 & hbox2 one-by-one and set their ‘Homogeneous’ property to Yes. This gives a better look to the arrangement of the widgets.

Signal Handlers

To place code to this frontend, you have to specify which widgets you want to be connected to any callback functions that shall be executed when a particular signal is emitted. Callback functions are functions which are executed when, suppose, a button is clicked or a radio-button is toggled.

We shall have to connect the ok_button, rad_currency & rad_capital to their callback functions. For this, first select the ok_button (from the Widget Tree) and click on the ‘Signals’ tab of the Properties window. Here select the ‘clicked’ signal (see above figure) and after accepting the suggested callback function name, click on the ‘Add’ button. Similarly, connect the two radio-buttons to the callbacks of the ‘toggled’ signal. Also connect the main_window’s (Select it from the main Glade window) ‘destroy’ signal to the function: gtk_main_quit from the drop-down menu.

This completes the entire designing part of the interface for the example program. Now save the project under a suitable project directory, e.g. /home/<username>/Projects/country. Build the source code and exit Glade. Now the time comes for writing the code, which will drive the program.

Coding the app

Now, in any of your favourite text editor e.g., gedit, emacs or vi etc., load the file: /home/<username>/Projects/country/src/callbacks.c. This is the source file where all the coding shall be done. The callback functions connected to the widgets are present in this file. Here we’ll add the standard GTK functions using C language.

In the first time, you’ll see three callback functions, viz., on_ok_button_clicked, on_rad_currency_toggled & on_rad_capital_toggled. Now just before the first function and after the include directives, add the following code.

gboolean gb_currency=TRUE;
gboolean gb_capital=FALSE;

This declares two Boolean variables, which would be used to check whether a radio-button has been activated, or not.

Now make the functions for the radio-buttons look like this.

The code used here is pretty self-explanatory -- just changes the value for the currently active radio-button. For the ok_button callback, add code to the on_ok_button_clicked function such that the function looks like this.

This function works in this way: i) Variables of ‘GtkWidget’ type are declared and pointers to already existing widgets are obtained using the lookup_widget() ii) A ‘gchar’ type variable is used to extract the text from the entry widget and 3 other subscripted variables of the same type are declared for storing the Country, Currency & Capital data iii) The text entered by the user is checked against the pre-defined country names from the subscripted variable. If a match is found, the widgets of the frame are made visible, it is checked which radio-button is currently activated and consequently the corresponding value (of Currency or Capital) is displayed in the info_entry widget. If no match has been found, a dialog box is created and displayed saying "Entry not found".

It can be noted that if we are using GNOME libraries as well as GTK libraries, then gnome_app widget can be used to display message boxes. Nevertheless creating a dialog of our own, which we have done here, can help one understand how windows are built. Also, customizations can also be done to self-created windows.

Building and executing the project

After coding is complete, close all files and open a terminal window. Type the follwing in sequence, one-after-the-other.

Remember to change the <username> with your actual username. ./configure & make might take some time depending upon the speed of your computer. If the project is built without any errors, you’ll be ready to execute the executable file country from the src directory.

If your program runs, rejoice! Try typing "India" in the entry box and press the button. Does it show you it’s currency or capital? Now try typing "Pakistan" in the entry. Can you see your dialog box? (figure below)

Conclusion

Hopefully, this example will carry out to you the basic way of functioning of GTK+ and the basic concepts of programming in it, which might get you started in the world of programming for the Linux platform.