Thursday, August 25, 2011

GUI Programming with C Language on Linux Platform

When you say you gonna write a GUI application in C for Linux platform, some people may laugh at you saying it is really really hard to write GUI applications in C and you will have to write thousands of lines of codes to get even simple GUI components working. However it is not true. You can write very nice GUI applications with C and you don't have to put that much big effort for it.
   
There are different libraries available for writing GUI applications in Linux. Among all these, GTK+ is an interesting library which I have been explored recently. GTK stands for GIMP Tool Kit and it was originally developed for GIMP(GNU Image Manipulation Program). Currently GTK+ has been used for so many applications and specially it has been used for developing GNOME desktop environment.

Before developing applications with GTK+, you have to install it. You can install it by typing the following on the terminal.

sudo apt-get install build-essential
sudo apt-get install libgtk2.0-doc devhelp


Now it's time write some codes and explore. Open your favourite text editor and add the following code into it. Save this file as "first.c".
1:  #include <gtk/gtk.h>  
2:  int main( int  argc,  
3:       char *argv[] )  
4:  {  
5:    GtkWidget *window;  
6:    gtk_init (&argc, &argv);  
7:    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);  
8:    gtk_widget_show (window);  
9:    gtk_main ();  
10:    return 0;  
11:  }  

You can compile this program in the terminal by issuing the following command. You should note that the single quote used here is this (`) one, not this (') one.

gcc first.c -o first `pkg-config --cflags --libs gtk+-2.0`

Run the executable program by typing ./first on the terminal. You will see a window like the one showed in the Figure:1. But when you close the window you will notice that the program doesn't exit from the terminal even the window disappears. You have to put a CTRL+C to exit. This is because our simple program doesn't handle events such as mouse click in different places.

Figure-1















Lets explore much improved program. Copy the following code to a new file and save it as "second.c".

1:  #include<gtk/gtk.h>  
2:  void hello(GtkWidget* widget, gpointer data){  
3:       g_print("Hello World\n");  
4:  }  
5:  gint delete_event_handler(GtkWidget* widget, GdkEvent* event, gpointer data){  
6:       g_print("delete event occured\n");  
7:       return FALSE;  
8:  }  
9:  void destroy(GtkWidget* widget, gpointer data){  
10:       gtk_main_quit();  
11:  }  
12:  int main(int argc, char *argv[]){  
13:       GtkWidget *window;  
14:       GtkWidget *button;  
15:       gtk_init(&argc, &argv);  
16:       window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
17:       g_signal_connect(G_OBJECT(window), "delete_event", G_CALLBACK(delete_event_handler), NULL);  
18:       g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(destroy), NULL);  
19:       gtk_container_set_border_width(GTK_CONTAINER(window), 10);  
20:       button = gtk_button_new_with_label("Hello World");  
21:       g_signal_connect(G_OBJECT(button), "clicked", G_CALLBACK(hello), NULL);  
22:       gtk_container_add(GTK_CONTAINER(window), button);  
23:       gtk_widget_show(button);  
24:       gtk_widget_show(window);  
25:       gtk_main();  
26:       return 0;  
27:  }  

Compile and run this program by issuing following commands in the terminal.

gcc second.c -o second `pkg-config --cflags --libs gtk+-2.0`
./second


This time you have a window with a button. Click on the "Hello World" button and seen how the mouse click event is handled by the hello() function that we have declared and it prints "Hello World" string in the terminal. Click the close button for issuing a delete event and see how the program get exited by calling gtk_main_quit() function inside the destroy() event handler function.

Figure-2 







Having a good understanding about how to register event handlers with the widgets and how to pack the widgets inside the window is necessary for learning to use GTK+. There's a good GTK+ tutorial here that can be viewed online or even off-line by downloading. Different example codes are also included in it and is very helpful. Go though it and explore what are the things you can do with GTK+.

Enjoy GUI programming in C!


13 comments:

  1. මම මේ ලඟදී තමයි ubuntu පාවිච්චි කරන්න පටන් ගත්තේ. මට කියනවඩ Prolink H9601C කියන මොඩම් එක එකේ install කරගන හැටි. මට tutorials හම්බවුණා , ඒත් හරිගියේ නැහැ.

    ReplyDelete
  2. Thanks Asanka.. A very good guide to begin GUI Programming with C in linux. I got something new today from this to make a start.
    Thanks,
    Shobhit

    ReplyDelete
  3. akash@ubuntu:~$ gcc hellowondow.c -o hellowindow `pkg-config --cflags --libs gtk+-3.8.0`
    Package gtk+-3.8.0 was not found in the pkg-config search path.
    Perhaps you should add the directory containing `gtk+-3.8.0.pc'
    to the PKG_CONFIG_PATH environment variable
    No package 'gtk+-3.8.0' found
    gcc: error: hellowondow.c: No such file or directory
    gcc: fatal error: no input files
    compilation terminated.



    plz help i am getting this error

    ReplyDelete
    Replies
    1. 'gcc: error: hellowondow.c: No such file or directory': perhaps you didn't type the name correctly (hellowondow.c or hellowindow.c ???).

      '...was not found in the pkg-config search path': SOLVED. if you run the command:

      pkg-config --variable pc_path pkg-config

      you find out on which dirs (directories) pkg-config searches for '.pc' files by default. you could need to add other dirs yourself by setting an environment variable in a startup file like '.bash_profile', '.profile' or '.bash_login'. for the purpose of this example, i'll use '.bash_profile'. for other shells, names could be different, search on your system to find actual names for your files.

      if you have your gtk+ development tools properly installed you can search for the file 'gtk+-3.8.0.pc' or just 'gtk+-' so you find any version.

      so, suppossing the path to the file is '/usr/local/Gtk/dev/lib/pkgconfig/gtk+-3.8.0.pc', edit '.bash_profile' to include a line like this at the end (you could need permissions to edit the file you find):

      export PKG_CONFIG_PATH="/usr/local/Gtk/dev/lib/pkgconfig/"

      don't include the file name, just the directory. quit terminal and launch it again. type this command:

      pkg-config --modversion gtk+-3.8.0

      if it returns a version number, you've set the environment variable right. any '.pc' files on that dir can now be found.

      i needed to setup paths for Glib and Cairo with the same procedure. just search for any file pkg-config can't find and add the dir where they're located to 'export PKG_CONFIG_PATH=' in the .bash_profile file, so the line will now be:

      export PKG_CONFIG_PATH="/usr/local/Gtk/dev/lib/pkgconfig/:/path/to/Cairo/dev/lib/pkgconfig/:/path/to/Glib/dev/lib/pkgconfig/"

      you add each full path after a ':' (colon, on windows it should be a semicolon like ';'). test some files in the new dirs as you did for 'gtk+-3.8.0'

      your file paths could be quite different. search, and type them exactly as you get them, or find a way to copy-paste them.

      for more info check the documentations for 'pkg-config' and the command 'export'. also research 'environment variables' on the net. you could need similar procedures for other software at some time.

      Delete
  4. are you sure you have that gtk+-3.8.0 version as you written in your command? did it failed to compile when you try with that command I have written as,

    gcc first.c -o first `pkg-config --cflags --libs gtk+-2.0`

    ReplyDelete
  5. for me sudo apt-get install gtk+-2.0 pkg-config resolved the compiler issues

    ReplyDelete
    Replies
    1. thanks, you solved my problem

      Delete
    2. It solved the compiling problem for me. Cheers

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Programming is very interesting and creative thing if you do it with love. Your blog code helps a lot to beginners to learn programming from basic to advance level. I really love this blog because I learn a lot from here and this process is still continuing.
    Love from Pro Programmer

    ReplyDelete
  8. Hi there , How can I resize the button?
    I am using the following to resize it ,
    gtk_widget_set_size_request (GTK_WIDGET (button), 30, 50);
    but unfortunately , I can't get the expected result.

    ReplyDelete