Creating a GUI Application Using Glade and Ruby

Creating GTK based applications using Glade and Ruby is very easy indeed. Firstly, get yourself hold of a copy of Glade from somewhere, I used aptitude on my Ubuntu 7.04 desktop:

sudo aptitude install glade

I used aptitude because it gets the recommended files as well as the bare program. Fire Glade up and you should be greeted by 3 windows – one called the “palette” which contains many of the widgets which we will be using to put into the application, the “Properties” window which is where we handle labels and signals and the project manager.

Lets get going now! Firstly we have to realize that by no means is Glade a full blown IDE and so we don’t do any of the coding inside it, we just handle signals and the bare beauty of the application.

Create a new window by clicking the little widget icon in the palette. This will open up a nice new window in front of you. It should all look like this:

Now that we’ve got a new window we need to add some widgets in. Gtk works quite strangely with widgets and to fit more than one widget into a window it requires you to use a vertical box, a horizontal box or a table. For this we will just use a vertical box so we select the vertical box icon and click anywhere in the window. Glade then asks how many rows we want in the window and we will be only using two widgets so set the number of rows to “2″ and click ok.

Now you should be left with a division in the middle of the window sitting in front of you. Now we’ll fill those two spaces with two widgets: a label and a button. Click the label widget in the palette and then click in the top half of the window, a label will appear. Next, click the button widget and select the bottom half of the window. Now to change the text in the label, select it where you placed it in your window and glance over towards the properties window. Change the label property to “hello world”.

Now select the button you created earlier and set the label of that to whatever you want. Then click the “signals” tab in the properties window and click the “…” button next to the “signal” label. Select the value “clicked” and click ok.

Then click the “add” button at the bottom left of the properties window. This is called creating a signal and will enable our application to do something when an event happens, in this instance when the button is clicked.

Now resize your window that you have created and save the glade project somewhere. It does not matter which language the output is is because we will not be using that file, we will be using the “.glade” XML file outputted by the application.

Now, onto the Ruby!

To create a ruby file that utilizes our .glade file that we have just created we can cheat a little bit: we use a program to quickly form the basis of the ruby file for us. The program ruby-glade-create-template creates the basis of the ruby program for us and comes in the package libglade2-ruby. It can also be installed as part of the ruby-gnome2 package. To execute it simply run this command in the terminal in the directory in which you saved the glade files:

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

simply replace the names of the files as needed. hello_world.glade is the file that outputted from glade (four files were outputted from glade but we only use the one with the .glade extension for this) and helloworld.rb is the ruby file in which the code is dumped.

Open the helloworld.rb file and have a good look around at the code. The signal which we created for the click of button1 is this bit in the code:

def on_button1_clicked(widget)
puts “on_button1_clicked() is not implemented yet.”
end

At the moment all this application does is launch and when button one is click output “on_button1_clicked() is not implemented yet.” to the command line.

We want to change something in the application so we will need to assign a variable to the widget that we want to alter. We want to alter “label1″ and so we insert this code in the button1_clicked function.

@label1 = @glade.get_widget(“label1″)

Now that we have the variable we can alter it. To simply change the label that it shows we insert this line into the same place:

@label1.label = “Feedback achieved!”

You will notice that the .label bit of the variable corresponds to the variable in glade which we altered to show “hello world” earlier. Now save that file and we are ready to run it!

Go to the terminal and go to the directory of the file. Execute this command:

ruby helloworld.rb

(or the file name of your program) and a window should pop up. Try clicking the button and the label’s text should change!

Have fun playing around with glade and ruby and see what signals and feedback it is possible to do. It’s always best to learn by doing so don’t be afraid to get your hands messy.

This is the full source code of my file:

#!/usr/bin/env ruby
#
# This file is gererated by ruby-glade-create-template 1.1.4.
#
require 'libglade2'

class HelloWorldGlade
include GetText

attr :glade

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)}

end

def on_button1_clicked(widget)
@label1 = @glade.get_widget("label1")
@label1.label = "Yeah! Feedback!"
end
end

# Main program
if __FILE__ == $0
# Set values as your own application.
PROG_PATH = "hello_world.glade"
PROG_NAME = "YOUR_APPLICATION_NAME"
HelloWorldGlade.new(PROG_PATH, nil, PROG_NAME)
Gtk.main
end

---

Possibly related posts: (automatically generated)

• How’s this for open? Nokia posts some code to get you started on your own…
• Calculator using Python and Glade
• Giving Glade a fair shake