I assume you have written C programs under Linux which display their output at the terminal and now you would like to work under X as well. So you need something that will generate a user interface for you. Right.. that's what GTK is for. It gives you ready made stuff with which you can design a user-interface quickly and easily. You don't require to have extensive knowledge. Just the basics will help you get started and then you can learn more on your own. So in this article I shall show you a C program without a user-interface (it would do its work and display the result at the terminal) and then I would explain the program that displays the same output under X Windows.

Note : GTK stands for Gimp Toolkit. You must have heard of the much talked about software called Gimp used for image editing. The various libraries that the programmers of Gimp used were so useful that they decided to package it as a User Interface Toolkit and distribute it. Thus its called GTK, since it was originally meant only for the software GIMP.

So lets begin with GTK programming..

Here is my C program that prints a string "Hello Linux World" at the terminal. How original !! ;-)

/* hello-terminal.c */ int main(){ printf("Hello Linux World\n"); return(1); }

Now this is a very simple example. It just prints a string at the terminal. But its enough to start explaining GTK programming.

Now here is the modified new version that would display the same string inside a window under X.

/* hello-gtk.c */ #include <gtk/gtk.h> gint QuitProg(GtkWidget *widget, gpointer gdata){ gtk_main_quit(); return (FALSE); } int main (int argc, char *argv[]){ GtkWidget *window; GtkWidget *text_pane; gtk_init(&argc, &argv); /*required initializing */ window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_widget_set_usize(window,200,100); gtk_window_set_title(GTK_WINDOW(window) , "First Program"); gtk_container_set_border_width(GTK_CONTAINER(window),5); gtk_signal_connect (GTK_OBJECT (window), "delete_event", GTK_SIGNAL_FUNC(QuitProg), NULL); text_pane = gtk_text_new(NULL, NULL); gtk_text_set_editable(GTK_TEXT(text_pane) , FALSE); gtk_container_add(GTK_CONTAINER(window) , text_pane); gtk_widget_realize(text_pane); gtk_text_insert(GTK_TEXT(text_pane) , NULL , NULL , NULL , " Hello Linux World \n\n" , -1); gtk_widget_show(text_pane); gtk_widget_show (window); gtk_main (); }

Phew!! seeing the above code might give you a feeling that GTK programming is not really simple after all. Just read the explanation given below once and you would no longer feel that..


Executing the GTK program :

Before we start discussing the code, for those who would be interested in getting this program to run first, here is how you compile this program. Since its a GTK based program you cannot compile it the normal way. You have to tell gcc where you can find the GTK libraries to include the necessary things.

Note : In case you do not know how to compile normal C programs under Linux, refer to Article No. 18

Assuming you named the above program hello-gtk.c type the following at the prompt

$ gcc -o hello-gtk hello-gtk.c `gtk-config --cflags --libs`

Once your program compiles without any errors type the following at the prompt from within the same directory as the source file.

$ ./hello-gtk

Remember you should be working in X. You would see a nice window with the string "Hello Linux World" within that window.


Code Explanation :

Now lets discuss the lines that are not commented in the program

#include <gtk/gtk.h>

Without this nothing is going to work. Its the line that includes the GTK libraries in your program.


GtkWidget *window;
GtkWidget *text_pane;

These 2 lines each define a Widget of the GTK kind. One named window and the other named text_pane .
The structure of a GtkWidget is defined in the GTK libraries which you include when compiling your program.


window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

This initializes the window widget to be of the kind GTK_WINDOW_TOPLEVEL. That would mean the main outer window for an application. Always create your main window in this fashion. gtk_window_new() is a function that is already defined in the GTK libraries. It takes a few parameters. To know these parameters you would have to refer to the GTK Documentation. I cannot cover all the possible parameters in this article.


gtk_widget_set_usize(window,200,100);

This line obviously sets the size of the window specified as the first parameter to this function. In this case its the window that you just initialized. 200 would be the width and 100 would be the height.

Important : In case you aren't familiar with any UI programming then generally the approach is that you always set all the parameters for a particular widget first and then display the widget once you have done all the settings. Thus these couple of lines that we are discussing right now doesn't really display anything on screen. It is only setting all the parameters for this widget in the memory. Finally when we display this widget all these parameters would be used to display it correctly.


gtk_window_set_title(GTK_WINDOW(window) , "First Program");

This line sets the title of your program. This would be the text that is displayed in the title bar for any application. Here we set it to First Program .


gtk_container_set_border_width(GTK_CONTAINER(window),5);

This is a little bit of extra decoration. We set the border width to 5. Note how this function is used. The first parameter is the widget whose border width we want to set and the second parameter is the actual amount that we are setting.

Note : In non-Object Oriented languages such as C it is frequently seen that you would be passing the object on which you want to make a modification as the first parameter to a function. To site an example we could say setborderwidth(window,5) . This is just an example and not the actual function from any library. Whereas in Object Oriented Language such as C++ you might see something like window.setborderwidth(5) . These 2 examples are just made up for explanation sake and do not really exist in either of the languages. That how Object Oriented programming makes the program much easier to read and follow.


gtk_signal_connect (GTK_OBJECT (window), "delete_event", GTK_SIGNAL_FUNC(QuitProg), NULL);

This is a very important line. This line basically says that associate the delete_event for the widget named window to the QuitProg() function that is present in our program. Note that when a user clicks on the Close button for an application the delete_event is invoked. This line indicates that when such an event occurs call the QuitProg() function. The QuitProg() function in our case calls the gtk_main_quit() function that actually quits the application. In case you don't have this line in your program you would note that the window disappears when you click on the close icon for a window but the application doesn't yet exit from the memory. Only the front end has disappeared. Whereas the gtk_main_quit() function actually shuts down the entire application.

In case you followed the lines associated with the window widget then the following would be as easy.


text_pane = gtk_text_new(NULL, NULL);

This line creates a new text widget with no special settings. Once again please refer to the GTK documentation in case you want to figure out all the parameters you want to set.


gtk_text_set_editable(GTK_TEXT(text_pane) , FALSE);

This line makes the text widget that is going to present to be un-editable. That means the user will not be able to click inside this text widget and change the text present in that.


gtk_container_add(GTK_CONTAINER(window) , text_pane);

The line adds the text_pane widget you created inside the window widget that you had created.


gtk_widget_realize(text_pane);

I would not get into the details of the gtk_widget_realize() function , but its required for a text widget.


gtk_text_insert(GTK_TEXT(text_pane) , NULL , NULL , NULL , " Hello Linux World \n\n" , -1);

This line inserts the text into the text widget you just created. For simplicity sake so as to not overburden you with extra details, I have kept 3 of the parameters NULL and the rest are essential. Change the text to whatever you want and you will see that in the text widget.
For example you could also pass some string which you have created in your program. You could possibly use the gtk_text_insert() function within some kind of a for loop to add repeatedly to a text widget. But all this won't be possible without more knowledge of the way the text widget works. For example there is a gtk_text_thaw() function that is required to be called whenever you want to update any text in the text widget. So in our case since the text you enter is at initialization time its doesn't matter. But in case you are adding text after the initialization then you need to call the gtk_text_thaw() function every time you want the updated text to be displayed in the text widget. These issues may be discussed in some future article.


gtk_widget_show(text_pane);
gtk_widget_show (window);

As I had explained earlier, you would be initializing all the parameters for the widgets initially and then at last you would display these widgets. You use the gtk_widget_show() function and pass to it a widget name which you would like to be displayed.

Finally

gtk_main ();

This is the line that signals the end of the initialization and begins the process of waiting for events to take place. Events may be clicking of buttons, click of the close button for a window or any key press event. If there is an associated event handler for a event then that would be called as in our QuitProg() function that handles the delete_event, else nothing shall happen.

That's it. I guess you must have grasped the basics of GTK programming. The important part in GTK programming is to have a reference book listing all the widgets and the associated parameters that they work with, so that you know how to configure the vast array of available widgets to suit your needs.