Creating a GUI Application with Ruby/GTK

Creating a GUI Application with Ruby/GTK


You want to write a GUI application that uses the GTK widget library, perhaps so you can integrate it with the Gnome desktop environment.


Use the Ruby bindings to Gnome's GTK widget library, available as a third-party download. Here's a simple Ruby/GTK application (Figure).

	#!/usr/bin/ruby -w
	require 'gtk2'

	window = 'Tiny Ruby/GTK Application'
	label = 'You are a trout!'
	window.add label
	window.signal_connect('destroy') { Gtk.main_quit }

You are a GTK trout


Gnome is one of the two most popular Unix desktop suites. The Ruby-Gnome2 project provides and documents Ruby bindings to Gnome's vast array of C libraries. You can write Ruby applications that fully integrate with the Gnome desktop, but in this recipe I'm going to focus on the basics of the Gnome GUI library GTK.

Although the details are different, the sample program above is basically the same as it would be with Tk (Recipe 21.12) or the wxRuby library (Recipe 21.13). You create two widgets (a window and a label), attach the label to the window, and tell the GUI library to display the window. As with Tk and wxRuby, the application goes into a display loop, capturing user events like mouse clicks.

The sample program won't actually respond to any user events, though, so let's create a Ruby/GTK version of the stopwatch program seen in previous GUI recipes.

The core methods, the ones that actually implement the stopwatch, are basically the same as the corresponding methods in the Tk and wxRuby recipes. Since GTK doesn't have a timer widget, I've implemented a simple timer as a separate thread. The other point of interest is the HTML-like markup that GTK uses to customize the font size and weight of the stopwatch text.

	#!/usr/bin/ruby -w
	# gtk_stopwatch.rb
	require 'gtk2'

	class Stopwatch

	  LABEL_MARKUP = '<span font_desc="16" weight="bold">%s</span>'

	  def start
	    @accumulated ||= 0
	    @elapsed = 0
	    @start =

	    @mybutton.label = 'Stop'
	    set_button_handler('clicked') { stop }
	    @timer_stopped = false
	    @timer = do
	      until @timer_stopped do
	        tick unless @timer_stopped

	  def stop
	    @mybutton.label = 'Start'
	    set_button_handler('clicked') { start }
	    @timer_stopped = true
	    @accumulated += @elapsed

	  def reset
	    @accumulated, @elapsed = 0, 0
	    @mylabel.set_markup(LABEL_MARKUP % '00:00:00.0')

	  def tick
	    @elapsed = - @start
	    time = @accumulated + @elapsed
	    h = sprintf('%02i', (time.to_i / 3600))
	    m = sprintf('%02i', ((time.to_i % 3600) / 60))
	    s = sprintf('%02i', (time.to_i % 60))
	    mt = sprintf('%1i', ((time - time.to_i)*10).to_i)
	    @mylabel.set_markup(LABEL_MARKUP % "#{h}:#{m}:#{s}:#{mt}")

Now begins the GUI setup. Ruby uses VBox and HBox objects to pack widgets into the display area. The stopwatch application will give its main window a single VBox containing three widgets arranged from top to bottom: a menu bar, a label (displaying the stopwatch time), and a button (to start and stop the stopwatch):

	  def initialize
	    root ='GTK Stopwatch')

	    accel_group =
	    root.set_border_width 0

	    box =, 0)

The program's menu bar consists of many nested MenuBar, Menu, and MenuItem objects. Rather than create these objects ourselves, we define the parameters of our menu bar in a nested array, and pass it into an ItemFactory object:

	    menu_factory =,
	                                        '<main>', nil)
	    menu_spec = [
	                  ['/Program/_Start', '<Item>', nil, nil, lambda { start } ],
	                  ['/Program/S_top', '<Item>', nil, nil, lambda { stop } ],
	                  ['/Program/_Exit', '<Item>', nil, nil,
	                   lambda { Gtk.main_quit } ],
	                  ['/Reset/_Reset Stopwatch', '<Item>', nil, nil,
	                   lambda { reset } ]
	    menu_root = menu_factory.get_widget('<main>')

The label and the button are pretty simple: just define them and pack them into the VBox:

	    @mylabel =
	    @mylabel.set_markup(LABEL_MARKUP % '00:00:00.0')

	    @mybutton ='Start')
	    set_button_handler('clicked') { start }

	    root.signal_connect('destroy') { Gtk.main_quit }


I've been calling a nonexistent method Stopwatch#set_button_handler whenever I want to modify the code that runs when the user clicks the button. I close out the Stopwatch class by defining that method (Figure):

	  def set_button_handler(event, &block)
	    @mybutton.signal_handler_disconnect(@mybutton_handler) if @mybutton_handler
	    @mybutton_handler = @mybutton.signal_connect(event, &block)

In the Tk recipe, I simply called a button's command method whenever I needed to change the code block that runs when the user clicks the button. So why this set_ button_handler code? Why not just call signal_connect whenever I need to change what the button does here? I can't do that because GTK lets you associate multiple code blocks with a single event. This doesn't usually come up, but it's a problem here because I'm changing the function of a button.

The GTK stopwatch

If the button is set up to call start when you click it, and you call signal_ connect('clicked',proc { stop }), then clicking on the button will call start and then call stop. You've added a second code block to the "clicked" event, when what you want is to replace the old "clicked" code with the new code. To avoid this problem, set_button_handler removes any old handler from the button before installing the new handler. The set_button_handler method tracks the internal ID of the newly installed handler, so that it can be removed if the user clicks the button yet again.

See Also

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows