Windowed Applications ☺ [GTK+]

> : The goal of this tutorial is to learn how to code, simply, a windowed application, with GTK+. (I love the colors )
Keep in mind that is the manner i'm going to explain to you is not the propest one, but the simplest one.

What is GTK ? I suggest you to go on the Wikipedia page.
To resume :
> Cross-platform for creating graphical user interfaces
> Object oriented widget toolkit written in the C programming language (also exists in many other langages : Python, Php, Ruby, Java, Perl, .NET...)
> GIMP, Inkscape, VMware, Wireshark, Pidgin has been developped with GTK.


This tutorial has some requirements :
- You have to know the C langage, at least a bit. (each functions is goins to be detailled)
- You have to install the GTK+ Framework ; Read the part I (Installation) if you don't know how to do. I'm going to explain with CodeBlocks IDE.

I ) Installation

First of all, you can download the last stable version here : http://www.gtk.org/download.html
For Windows, i advice you to install the "Bundle all-in-one" ; And choose the 2.18 version (or the last version displayed in this paragraph!)


Put this archive in you compilater folder ; For example, if you have CodeBlocks, put that in C:/Program Files/CodeBlocks/MinGW/

Then, you can create with CodeBlocks a new project : > "GTK+ Project"


Then, try to execute the code which is appeared ; If it is correctly compilated, congratulations, it works !
Else, feel free to post your errors message, I will help you.

II ) Create a Window

Let's code a bit now !
Firstly, we are going to see how to create a Window.
> In GTK, each object (buttons, windows, entry, labels) is a GtkWidget
So, we declare each object like this :

Quote:GtkWidget *window; // It creates a Window Widget
GtkWidget *label; // It creates a Widget which contains text[/color]

Lets see how we initialized it now :

Quote:window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

That's all !

> You have noticied that if you directly put that code into your file and try to compile, it doesn't work... Why ?
It's easy : We haven't initialized GTK yet !
So, let's call GTK, and tell him to keep our window opened

This is done like this :

Quote:#include <stdio.h>
#include <stdlib.h>
#include <gtk/gtk.h>

int main (int argc, char **argv) {

// We declare the window
GtkWidget *window;

// We ask to GTK to be initialized
gtk_init ( &argc , &argv );

// We create our window
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

// We ask to GTK to show our window
gtk_widget_show_all(window);

// We ask to GTK not to quit
gtk_main();


return 0;
}

Let's compile it ...
Oh ! Look at that !

Wonderful Our first GTK window.

III ) Put some Widgets

Ok, now, let's put some widgets on it, for making it a bit more interesting.

> You have to know that our window widget is considerated by GTK as a "Container". What does this mean ?
A container is, in GTK, an object which can contain only one widget.
So, we are going to put, in this container, a widget which can contain many others widgets, not only one !
This is Widget is called : Box

In GTK, it exists two differents boxes : hbox, and vbox.
The difference between them is the manner how the widgets are going to be added in the box :

> The Hbox is going to order its widget like this :

> The Vbox like that :


> How do I put something in my box ? Give me the code !
Hey, slowly, don't be impatient ! First, we are going to see how to initialize it :

Quote:GtkWidget *hbox;
GtkWidget *vbox;

hbox = gtk_hbox_new( TRUE, 0 );
vbox = gtk_vbox_new( TRUE, 0 );

The "TRUE" parameter is for "homogenious" :
"The homogeneous argument to gtk_hbox_new (and the same for gtk_vbox_new) controls whether each object in the box has the same size (i.e., the same width in an hbox, or the same height in a vbox). If it is set, the gtk_box_pack routines function essentially as if the expand argument was always turned on."
The "0" is for padding, the space between each widget in the box.

> Ok, understood, now, tell me how do i do for packing these widgets in the box ?!
We are going to use for that :

Quote:gtk_box_pack_start( hbox, button, TRUE, TRUE, 0 );

> What are these "true" and 0 again ?!
I'm going to quote the GNOME Documentation about this, it's gonna explain better than me :

> link

Now we know how to create a window, create a box, add widgets in boxes...
But, what sort of widgets are we going to use ?

Here is a little list, the most basics widgets :

Quote:#include <stdio.h>
#include <stdlib.h>
#include <gtk/gtk.h>

int main (int argc, char **argv) {

// We declare our Widgets
GtkWidget *window;
GtkWidget *hbox;
GtkWidget *button;
GtkWidget *label;
GtkWidget *entry;

// We initialize GTK+
gtk_init( &argc, &argv );

// We initialize them
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
hbox = gtk_hbox_new( TRUE, 10 );
button = gtk_button_new_with_label("This is a Button !");
label = gtk_label_new("This is a Label !");
entry = gtk_entry_new();

// We put the hbox in the window :
gtk_container_add( window, hbox );

// We put the Widgets in the box :
gtk_box_pack_start (hbox, entry, TRUE, TRUE, 0);
gtk_box_pack_start (hbox, button, TRUE, TRUE, 0);
gtk_box_pack_start (hbox, label, TRUE, TRUE, 0);

// We ask to GTK to show our window
gtk_widget_show_all(window);

// We ask to GTK not to quit
gtk_main();


return 0;
}

Try to compile it ...

Nice !

IV ) Call Functions (CallBack)
Well, nothing happens when we click on the button ... Let's put a life in this button !
We are going to connect a signal on the button, with this function :

Quote: g_signal_connect(button, "clicked", on_button_click, NULL);

button : The Widget subject of the event
"clicked" : The type of the event = We click on the button
on_click_button : The function which is going to be called
NULL : a pointer, if we want to give a parameter to our function.

And let's create our function "on_click_button" :

Quote: void on_click_button (GtkWidget *button, gpointer data) {
/* The Callback Function is always like that in its parameters :
- the Widget which is subject of the event, and the pointer to the last parameter of g_signal_connect.
- gpointer is the same thing as void *, the generic pointer.*/

printf ("Hello SupportForums!");
}

Let's test with that code ...


Nice, the text appears in the console !

> Now, how to get what the user type in the entry, and display it in the label ?
Remember the g_signal_connect function : You can give only ONE pointer in the callback function. And we want to retrieve the text of the entry, then put it in the label, so we have to manipulate two differents objects.
The solution is to create a structure ; Personnaly, i often do the things like this :

Quote:
#include <stdio.h>
#include <stdlib.h>
#include <gtk/gtk.h>



typedef struct Window {
GtkWidget *window;
GtkWidget *hbox;
GtkWidget *button;
GtkWidget *label;
GtkWidget *entry;
}Window;



Window *new_gtk_window () {
Window *gtkw = (Window *) malloc (sizeof (Window) );

gtkw->window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtkw->hbox = gtk_hbox_new( TRUE, 10 );
gtkw->button = gtk_button_new_with_label("This is a Button !");
gtkw->label = gtk_label_new("This is a Label !");
gtkw->entry = gtk_entry_new();

return gtkw;
}




void gtk_window_build (Window *gtkw) {

// We put the hbox in the window :
gtk_container_add( gtkw->window, gtkw->hbox );

// We put the Widgets in the box :
gtk_box_pack_start (gtkw->hbox, gtkw->entry, TRUE, TRUE, 0);
gtk_box_pack_start (gtkw->hbox, gtkw->button, TRUE, TRUE, 0);
gtk_box_pack_start (gtkw->hbox, gtkw->label, TRUE, TRUE, 0);

}


void on_click_button (GtkWidget *button, gpointer data) {
/* The Callback Function is always like that in its parameters :
- the Widget which is subject of the event, and the pointer to the last parameter of g_signal_connect.
- gpointer is the same thing as void *, the generic pointer.*/

printf ("Hello SupportForums!");
}


int main (int argc, char **argv) {

// We declare our Widgets
Window *gtkw;

// We initialize GTK+
gtk_init( &argc, &argv );

// We initialize our GtkWindow
gtkw = new_gtk_window();

// We build our window :
gtk_window_build (gtkw);

// We connect the signal with the event "clicked" on the button
g_signal_connect(gtkw->button, "clicked", on_click_button, gtkw);

// We ask to GTK to show our window
gtk_widget_show_all(gtkw->window);

// We ask to GTK not to quit, before calling gtk_main_quit()
gtk_main();


return 0;
}

So, we create a type "Window", and we initialize all inside ... Then we can the adress of this new object in the g_signal_connect, and we can retrieve all inside !

The function is going to be that :

Quote:
void on_click_button (GtkWidget *button, gpointer data) {
/* The Callback Function is always like that in its parameters :
- the Widget which is subject of the event, and the pointer to the last parameter of g_signal_connect.
- gpointer is the same thing as void *, the generic pointer.*/

Window *gtkw = (Window*) data;
char *buffer;

// We retrieve the text from the entry
buffer = gtk_entry_get_text(gtkw->entry);

// We put it in the label
gtk_label_set_text(gtkw->label, buffer);

// We clear the entry
gtk_entry_set_text(gtkw->entry, "");
}

Now, you know how to connect a signal, retrieve and use the data of the user ...
The rest is the work of C langage.
Don't hesitate to see the Gnome Tutorial if you want to go further : http://library.gnome.org/devel/gtk-tutorial/stable/ !

This tutorial is finished !
I hope you will love GTK as i love it !
Don't hesitate to tell me if you encounter any problem during this tutorial.

Nice work man, I use QT but this is also helpful....
Thanks for sharing!!!!!

I never tried QT, is this easy ?
Thanks for your comment !

(12-22-2009, 05:33 PM)Spl3en Wrote: I never tried QT, is this easy ?
Thanks for your comment !

Yeah it's pretty easy, their documentation is awsome and they
have awsome sample codes, like Syntax Highlighting editor...
You should take a look at it.

http://qt.nokia.com/doc/qtjambi-4.3.5_01...ghter.html

Thanks for the tut, it helped me understand few things in PHP Gtk

Oh, it seems interesting
I mainly love the GTK Framework for his image editing library, as Cairo (vector graphics-based) or GDK.
Does any equivalent exists in Qt ? Or is it just for UI ?

Quote:Thanks for the tut, it helped me understand few things in PHP Gtk

Ask to me if you need help, i would be glad to help you !

Edit : Oh, i didn't know that KDE was mainly based on Qt ! So, Gnome got GTK and KDE is Qt, funny So, i guess there is a war between those two libraries xD

Wow, this is great thanks alot mate!

Cool tutorial, nice work.

Quote:> Object oriented widget toolkit written in the C programming language (also exists in many other langages : Python, Php, Ruby, Java, Perl, .NET...)

I'd like to point out that C's not an objected oriented language, so calling it an object oriented toolkit written in C doesn't make much sense ;P.

Most languages have their own wrappers for the C library that are object oriented, so I can see where your explanation got mixed up .

Still nice tutorial, good job.

Great tut! I'm considering learning C++ now. Can GTK be used in python? Because imo Tkinter is ugly .

Quote:Can GTK be used in python? Because imo Tkinter is ugly

You can !
It is called PyGTK, you can find a lot of documentation on their site ! (Documentation, Tutorials, References, etc ...)

Quote:I'd like to point out that C's not an objected oriented language, so calling it an object oriented toolkit written in C doesn't make much sense ;P.

Most languages have their own wrappers for the C library that are object oriented, so I can see where your explanation got mixed up .

I agree, i just didn't know how to say it in english, thanks to notice that

Hay ty man this is a good tutorial.

I have one question to ask you, Can i use this and mix it with gdk(makes games) to make a start window for my game and then play my game all in one project?