delirial

Glade has become a relatively popular tool for developing user interfaces for GTK+. The cool thing about Glade is the fact that it generates the interface in an XML dialect that can be imported by several programming languages, including C/C++, Python, Mono and Ruby among others.

A programmer can design an interface in Glade, and specify signals (events) for each of the components in the graphical user interface. Using tools like ‘ruby-glade-create-template’, one can have the method signatures generated automatically, then just fill in the blanks and end up with pretty nifty applications. Pretty neat, huh?

The problem? Finding the necessary information to get started.

In this tutorial we will use Ruby and Glade in order to generate a simple, but graphical, ‘Hello World!’ program. I’m assuming you have Glade 3 installed on your system and all the necessary libraries (libglade, et al).

1. Generating the GUI

When you fire up Glade, you’ll see three windows. The Main Window, the Palette, and the Properties Window.

I suggest clicking on View -> Palette Appearance -> Text Beside Icons in order to make it easier to identify components while you get used to the icons.

The first thing we want to do is add a window component to our project and modify its properties to suit our needs. This window object will be a container of our other elements.

In the Palette, click on Window. A new Window object will appear on screen.

Now, we will change some properties.

• In the General tab of the Properties window, click on the Name field. Change it to myWindow. (It is important to use names we can remember, as we will need to use them in the code.)
• We will leave the Window Title property blank, as this is what we will be changing to Hello World in the code.
• Set the Window Position property to Center.
• Set the Default Width property to 400 and the Default Height property to 50.

Now, we need to add a signal (event) for quiting our program.

• Go to the Signals tab in the Properties window.
• Expand the GtkWidget node.
• Select delete-event and type on_quit in the Handler column.

With this, we have made sure the event signature will be created for us and all we will need to do is fill-in our code.We are now done modifying our Window object. Our next step is adding a Button.

• Go to the Palette and add a Button object to myWindow.

By default, the button will take all the window space. (Dont worry about that for now. It can be changed by adding a Fixed object to the window.)

• Change the button’s name to myButton and change the label to Say Hello!

• Now move into the Signals tab, click on the clicked event, select in on_myButton_clicked and press Enter.

We’ve completed the design of the GUI. Save the project.

2. Generate the Ruby template

ruby-glade-create-template helloworld.glade > helloworld.rb

Now, if you open helloworld.rb, you should see something similar to this…

With a working template, we are now left with only one task: filling in the necessary code to make our program work.

3. Writing our code

Open up helloworld.rb with your favorite text editor.

Change the initialize definition to look like this:

def initialize(path_or_data, root = nil, domain = nil, localedir = nil, flag = GladeXML::FILE)


bindtextdomain(domain, localedir, nil, "UTF-8")
@glade = GladeXML.new(path_or_data, root, domain, localedir, flag) {|handler| method(handler)}
@mywindow = @glade.get_widget("myWindow")
@mywindow.show

end

Basically, we are setting an instance variable @mywindow with the myWindow object returned by Glade. Then, we tell that object to show himself.

Now, change the on_quit method definition:

def on_quit(widget, arg0)

puts "This is me leaving."
Gtk.main_quit

end

We are outputting a message before leaving and then asking GTK to shut down this bastard.

Last, define the on_myButton_clicked handler:

def on_myButton_clicked(widget)

@mywindow.title = 'Hello World!'

end

Save your file and exit!

4. Execute and Enjoy!

ruby helloworld.rb

Click the button and you should see the Window Title change to Hello World!

Who would have thought of that?