Menu

Introduction to GTK--

Foreword

First of all, what is GTK--? GTK-- (or gtkmm) is a C++ Binding for GTK/GTK+. It allows users to easily create user interfaces through a nice and easy to use object oriented API.

This tutorial, though intended for the ones that are discovering linux programming, assumes that you already know how to write C++ code and that you know the basics of your GNU/Linux distribution.

Note that in this case we use glade and glademm. You should start by using them as it really makes the whole process easy, then, if you want, you can later drop them and write all your code in gtkmm. It's not hard, but it's good to use glade to get used to gtkmm.

Setting up your development environnement

Most likely, you will need some tools from now on. So, you're going to need

• GCC : A C/C++ compiler.
• Anjuta : A powerful development environment.
• GTKmm (and it's dependencies) : The user interface we will use.
• Glade : A graphical tool that helps us build visually the user interface.
• glademm : Converts glade files into GTKmm-usable code.
• devhelp : A complete reference, it will be very useful once you are on your own.

If you run ubuntu (or debian, though some packages are named differently), you can easily install all required packages:

$ sudo apt-get install build-essential gcc anjuta anjuta-common glade-common-2
    glade-gnome-2 glademm devhelp

Creating the project

Now, let's run Anjuta, then run the application wizard, hit forward and create a "gtkmm 2.0 Project", forward, then fill in your project information and description. In the next box, make sure that "Generate code source using glade or glademm" is enabled. Then, finally, generate the project.

You'll now see that your project has been created and it does contain 3 files, one of which has been generated by glademm (typically window1_glade.cc). Let's now build the project by doing "Build/Configure" and "Build/Build" and finally, to test it out, "Build/Execute". This should open a blank window.

You just created your first app. Well, kind of, let's say you now have the skeleton to further work. We'll now modify the blank window to add our controls and bind some effect to them.

Creating the Layout

Now do "Project/Edit Application GUI". This will run Glade. From the glade window, open your window, it will open there, empty. Now, it's time to fill it up.

If you come from the Microsoft Windows programming world, you are probably familiar with GUI programming, you know, coordinates and all those stuff. The good news is that GTK does not work like that at all. Rather than positionning the controls, we will separate the workspace in different spaces which we will fill as we wish. You will notice it is much more convenient and it will create windows that scale wonderfully.

Now, on to the layout. For this tutorial, we will create a little application that will check wether a number is superior to ten or not. (it's intended to be very basic ... yet).

Create a 2 box vertical box. And, in the top box, create a 3 box horizontal box. Boxes are layout elements. They will contain the controls. Fill them in with Labels, edit boxes and buttons so they look like the following screenshot.

Now, show the widget tree, edit the properties of the HBOX, set "Packing/Expand" and "Packing/Fill" to "No". Select the text entry to the bottom and set the same attributes to yes. Size the window to your convenience. Modify the properties of the labels to give them meaningful names and change the label text. Make the bottom editbox not userchangeable. Now save your work.

Signals

The application will communicate with your code through signals. Select the button, bring up the signal pannel (in the properties window) and add a signal similar to the one in the screenshot then save your work.

Writing the code

Alright, back to the code. Fire up a terminal, go to your project directory (~/Projects/yourpoject). Now, we'll have to rebuild to code. As suggested in the window1_glade.cc, we will do

$ glade-- --noautoconf --directory src gtkmmtutorial.glade

You should now have a look at the files glade-- generated for us. You'll see that it has created an object for everycontrol in the header and that it inserts them correctly in the window in the source file. You will also notice that it created a virtual function virtual void on_Evaluate_pressed() = 0;. Now, you'll also have noticed in your window1.hh that your class window1 inherits from window1_glade. Let's write the function body.

// window1.hh
...
class window1 : public window1_glade
{  
	void on_Evaluate_pressed();
};

Now we have to write the code for the signal. It's fairly easy as gtkmm is extremely easy to use. I would recommend running "devhelp" so you can read gtkmm API specifications.

// window1.cc
...

#include <stdlib.h>
void window1::on_Evaluate_pressed()
{
	Glib::ustring IN_string;
	Glib::ustring OUT_string;
	int numdata;
	
	IN_string = InputNumber->get_text();		// Retrieves the content of the input box
	sscanf(IN_string.data(),"%d",&numdata);		// Converts the string into an integer
	if(numdata>10)
		OUT_string="Greater than 10";
	else
		OUT_string="Lesser or equal 10";
	
	OutputResult->set_text(OUT_string);		// Sets the content of the output box
}

Now, build and run as you did before, and test the software. (I did intentionnally not write error checking for the cases when input is not a number).

Conclusion

There you go, you just created your first GTKmm app. You will be able to very easily adapt to other types of widget (use devhelp !!!). You'll see that creating user interfaces with gtkmm and glademm is very straightforward.