Building a Desktop GUI App with Ruby

It's 2020 and just about every other blog post on software development captures experiences in web development. Desktop development is as uncommon as spotting an orangutan on a beach. In this blog post, we are going to briefly look at how we can build a desktop user interface using Ruby and the GTK3 library. Also, this post assumes that you are using Mac OS.

To get started, you would need to install the following dependencies. GTK3 is available as a brew package and so is the Glade user interface designer. We will use the gtk3 gem for Ruby.

brew install gtk+3
brew install glade
gem install gtk3

If you did any kind of programming with Windows Forms, AWT, Swing, native iOS, or native Android, then you have used a GUI library that introduces you to the basics of building desktop user interfaces - they involve adding controls/widgets into layout containers that fit into a top-level window/frame.

Within the UI heirarchy, Window is a top-level container. You can set properties such as the size, position, and border of windows and can add child widgets to it. The following code creates a new Window object, sets the size property, and adds a delete event handler.

require 'gtk3'

window = Gtk::Window.new("My Window")
window.set_size_request(300,200)
window.signal_connect "delete-event" do |e|
  Gtk.main_quit
end

Typically, you would use a layout manager within a window to help with the placement of widgets. Grid layout is pretty simple - all you would need to do is specify the column and row within which you want to place a widget, for instance a label. The code for this appears below.

grid = Gtk::Grid.new
label = Gtk::Label.new("Name")
grid.attach label, 0, 0, 1, 1

Let's do something useful by displaying IP addresses within the label:

require 'socket'
ips = Socket.ip_address_list
label.text = ips.map { |iter| iter.ip_address }.join ("\n")

Looks simple so far? We then put the grid into the window and display it on-screen.

window.add grid
window.show_all
Gtk.main

You now have a perfectly good way to see the IP addresses of the host you are running this code on. GTK includes lots of widgets from Entry (text boxes) to Notebooks (tabbed panels), which you can see on the widget gallery at:
https://developer.gnome.org/gtk3/stable/ch03.html

You can experiment with the code above by adding buttons:

button = Gtk::Button.new(:label => "Click Me")
button.signal_connect "clicked" do |e|
  puts "Hello"  # Displayed on the text console that you run the script from
end
grid.attach button, 0, 1, 1, 1

As the user interface gets more complex, you may want to use the Glade UI designer instead of hand-coding the interface.