Creating a GUI Application with wxRuby

Creating a GUI Application with wxRuby


You want to write a portable GUI application that looks better than a Tk application.


Use the wxRuby library, available as a third-party download. It uses native GUI widgets on Windows, Unix, and Mac OS X. It's got many more features than the Tk library, and even greater complexity.

Here's a very simple wxRuby application (Figure):

	#!/usr/bin/ruby -w
	# wxtrout.rb

	require 'wxruby'
	class TroutApp < Wx::App
	  def on_init
	    frame =, -1, 'Tiny wxRuby Application')
	    panel =, -1, 'You are a trout!',
	                     ,1), Wx::DEFAULT_SIZE,

You are a wxRuby trout


The simple wxRuby application has the same basic structure as its Tk cousin (see Recipe 21.12). A top-level widget is created (here called a Frame) and a label (StaticText) widget is added to it. The application then goes into an event loop, listening for and retrieving events like mouse clicks.

A wxRuby version of the Tk stopwatch program is also similar, although much longer. wxRuby code tends to be more verbose and less idiomatic than Ruby Tk code.

The core methods are nearly unchanged, because they have little to do with the GUI:

	#!/usr/bin/ruby -w
	# wx_stopwatch.rb
	require 'wxruby'

	class StopwatchApp < Wx::App

	  def start
	    @start =
	    @frame.evt_button(@button.get_id) { stop }
	    @timer.start(100) # The timer should tick every 100 milliseconds.

	  def stop
	    @frame.evt_button(@button.get_id) { start }
	    @accumulated += @elapsed

	  def reset
	    @accumulated, @elapsed = 0, 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)
	    newtime = "#{h}:#{m}:#{s}:#{mt}"

The menu bar takes a lot more code in wxRuby than in Tk. Every widget in a wxRuby program has a unique ID, which must be passed in when you register an event handler. I've defined a hardcoded ID for each menu item, so that after I create the "menu item" widget, I can pass its unique ID into the event-handler registration method, evt_menu. You can really sense the underlying C code here:

	  # Constants for the IDs of the menu items.
	  START_MENU = 10
	  STOP_MENU = 11
	  EXIT_MENU = 12
	  RESET_MENU = 13

	  # Constant for the ID of the timer widget, used below.
	  TIMER_ID = 14

	  def on_init
	    @accumulated, @elapsed = 0, 0
	    @frame =, -1, ' 
wxRuby Stopwatch')

	    menu_bar =

	    program_menu =
	    menu_bar.append(program_menu, '&Program')
	    program_menu.append(START_MENU, '&Start', 'Start the stopwatch')
	    @frame.evt_menu(START_MENU) { start }
	    program_menu.append(STOP_MENU, 'S&top', 'Stop the stopwatch')
	    @frame.evt_menu(STOP_MENU) { stop }
	    menu_exit = program_menu.append(EXIT_MENU, "E&xit\tAlt-X",
	                                    'Exit the program')
	    @frame.evt_menu(EXIT_MENU) { exit }

	    reset_menu =
	    menu_bar.append(reset_menu, '&Reset')
	    reset_menu.append(RESET_MENU, '&Reset', 'Reset the stopwatch')
	    @frame.evt_menu(RESET_MENU) { reset }

wxRuby uses Sizer objects to pack widgets into their display areas. The BoxSizer object used below arranges widgets within the frame vertically, so that the label will be above the stopwatch button.

	    sizer =

	    @label =, -1, '00:00:00.0')
	    font =
	    sizer.add(@label, 1, Wx::ALIGN_CENTER)

The button and the timer work more or less like their Tk equivalents. The call to @frame.set_sizer tells the root widget to use our vertical BoxSizer when deciding how to arrange widgets on the screen (Figure).

	    @button =, -1, 'Start')
	    @frame.evt_button(@button.get_id) { start }
	    sizer.add(@button, 0, Wx::ALIGN_CENTER, 2)

	    @timer =, TIMER_ID)
	    @frame.evt_timer(TIMER_ID) { tick }

The wxRuby stopwatch looks more like a native application than the Tk one

See Also

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