GUI programming glade ubuntu 1

If you are a Linux newbie, you may want to read about Wubi (installation) of Ubuntu

Linux for Windows users – Wubi Installation

———————————————————————————>

I am trying to learn GUI programming in Ubuntu using glade-2.

There are some tutorials that I have referred to

http://wingtk.sourceforge.net/ishan/glade.html – by Ishan Chattopadhyaya is a good source and is referred to in other places too.

Though glade-3 is recent version, I had a horrible time using it in my earlier attempt at programming a window. Now, I have reverted to Galde-2. If I am right the problem I faced was due to the developers attempt to keep C source code generation out of glade http://glade.gnome.org/

Here, we will try to create a small window that will have a text box with a default text and a button. When the button is clicked, the text in the text box changes.

First install glade

sudo apt-get install glade-2

There are few other packages I needed to install while trying to compile the GUI program we are going to create

sudo apt-get install autoconf automake libglib2.0-dev libc6-dev libgtk2.0-dev

Now, launch glade Applications->Programming->Glade Interface Designer

Observe the main, palette and Properties window that opens up. GUI programming in glade is based on the concepts of widgets that you can see on the palette window. You add widgets depending on what you need. We will be using Fixed Position, Text entry and Button widgets. Now click the Window button in the palette window. You should observe a “window1” screen in the main window and a new window should open up

Click on the Fixed positions button in the Palette window  and then on the window1 screen to see something like this

Now click on the text entry button in Palette window and then double click on the window1 screen to drop a text entry on it. In a similar fashion, click on the “Button” button and double click on the window1 screen below the text entry to see something like below

Now modify the default text on the text entry and the label on the button.

Now click on the empty place in window1 screen (i.e. other than the text entry and button) to select fixed1. Now in the properties, select signals tab and then the button next to the “signal” text entry. It will display a list of signals that fixed1 emits. Select destroy under GtkObject signals and click OK.

Click add in the properties window and you should find “destroy” under signal and “on_window1_destroy” under handler. This is needed to make the window exit properly.

Now, select the button and in the signals tab of the properties window, and in the signals list, select clicked and Ok. Click add and you should find something like below

This is signal is used to perform the task of changing the text in the text entry when the user clicks, though we have not added the code needed for the latter half.

Save the project to its default location ~/Projects/project1/ and click Build in the main window. We now have the source code written

Stage 2:

Goto ~/Projects/project1 and browse through the listing

The autogen.sh script is used to create the makefiles which will compile your source code. The src directory contains yoru source code. cd to src directory

main.c contains code to create the window1 and then wait for events (click of button or exit) in an endless loop within gtk_main(). Though, it creates the window1 interface, the code defining window1 exists in the file interface.c

interface.c defines the appearance of your window. The create_window1() called in main.c is defined here. You can find the declaration for window1, fixed1, entry1, button1. Two important instructions defined in this code are the two g_signal_connect(). In event driven programming, which is what GUI programming is, events such as clicking a mouse button, changing the state of a radio button are assosciated with particular functions or callbacks which wil perform the corresponding task. As noted at the start of this file, we shouldnt be modifying this file since, it will overwritten by Glade when you change options are rebuild it.

Coming back to the g_signal_connect functions,

g_signal_connect ((gpointer) window1, “destroy”,
G_CALLBACK (on_window1_destroy),
NULL);

means that the destroy signal of window1 will execute the callback function on_window1_destroy()

Similarily, g_signal_connect ((gpointer) button1, “clicked”,
G_CALLBACK (on_button1_clicked),
NULL);

means that the clicked signal of button1 is connected to the callback function on_button1_clicked()

callbacks.c is the file containing the definitions for the callbacks associated with signals. This is the file which we will need to modify to make our window respond to user generated events. However, to modify the properties of other widgets ( change text in the entry), we will need to know the variables (pointers) representing those widgets, which is done using the name of the widget and lookup_widget(). For this look into the last few lines of interface.c. You will find the names of the widgets.

Add the code for on_window1_destroy() –

gtk_main_quit();

Add the code for on_button1_clicked() –

GtkWidget *text1 = lookup_widget(GTK_WIDGET(button), “entry1″);
gtk_entry_set_text(GTK_WIDGET(text1),”Hi. I am fine”);

Stage 3:

Having completed the coding, let us compile and run the program.

goto ~/Projects/project1 and run ./autogen.sh

then run make

Now run src/project1 to run the program

And you have your first GUI program on Linux.

Extras:

I would suggest that you try changing various properties like, altering the position of the window, changing the name of the window, name of the project, introduce a toglling effect when you click the button. This will give you a better understanding of the functionality.

The code that you wrote in callbacks.c is essentially GTK code and its homepage here

http://www.gtk.org/

You will need the functions that you can use within callbacks in order to modify the properties of other widgets. A much more elaborate example is in Ishan’s page http://wingtk.sourceforge.net/ishan/glade.html.

When you make a modification to the UI, you will need to save the project and build it again so that the effect is observed in the source code. Also, when you make a change to callbacks.c, you only need to run the make command and then run the program. Keep tweaking the properties of this working program and you will learn lot more.

Enjoy……