Using Glade for UI development on Gnome

On my post about network traffic monitor project, I said that I will share some details on it here. Well here it is. My application works on a GNOME desktop environment which is the default Ubuntu desktop. Now there are two ways to go about creating GUI application on GNOME. The hard way would be to hardcode the UI from scratch using the GTK libraries or the easier way would be using a tool like Glade that helps to generate the codes for you. Glade is an open source RAD tool.

I used Glade for my project as it is so much easier to use than hardcoding each widget like windows and text boxes. It also saves a lot of time since it is much faster too. With glade you can add any widgets that the GTK library provides into a container. You can then configure the properties of that widget for example the title name, the width and length etc. When saving the project, Glade will create an glade file which is in fact a XML file that describes all the widget and its properties so that you can use it on your application.

The Glade file can be loaded by applications dynamically by using GtkBuilder GTK object. GtkBuilder adds connection between widgets and the application source code. By using GtkBuilder, Glade XML files can be used in numerous programming languages including C, C++, C#, Vala, Java, Perl, Python,and others. Below is the code snippet to add the Glade file using python.

builder = gtk.Builder()

builder will be used as a reference to the Glade file that is added as To interact with a widget on the Glade file you need to reference it first for example:

window = builder.get_object(“main_window”)
combo = builder.get_object(“combobox_interface”)

window is now referencing the widget named “main_window” that is defined in Glade. combo is referencing “combobox_interface” widget. Once you successfully reference the widget, you can interact with them for example connecting signals to it. A signal is used to tell the application that an event has occurred. Examples of events are user clicking a button or resizing the window. Since my application is GUI based, it needs to be event-driven so that it will react whenever a user interacts with it. The codes below is an example of how to connect signals.

window.connect(“delete-event”, destroy_window)
window.connect(“response”, destroy_window)

In the codes above, I’ve connected the “delete-event” and “response” signal to the window widget. The “delete-event” signal will be emitted when the window is closed for example the user clicked to the ‘X’ button on the window. destroy_window is a callback function which is called when the signals are emitted. Callback functions are used to execute codes in response to the events.

Glade can be a pretty neat tool if you ask me especially for developers that uses RAD methodology. You can change the interface easily without changing much of the codes. You can also see the changes nearly instantly after editing the design.

I will post other information of my project soon.