One of my recent adventures has led to packaging the bindings I promised, so you can now develop GTK+ desktop applications that are powered by Ruby! The package I created is for SliTaz Linux, which I’ll be using in this series of posts to get you up and running. We shall walk through the process to get a basic application designed, built and running with the help of a couple of tools. I came up against a couple of problems just setting it up but this was new territory to me!

Prerequisites

This should work with any distribution provided you have the following software installed:

• Ruby (to write your code)
  • I’m using 1.8.7, but it may work with 1.9. It’s up to the bindings to represent the GTK+ stuff in Ruby correctly.
• GTK+ (to show your UI)
  • I’m using version 2.16, others may work. It’s up to GTK+ to have what the bindings expect, so you may be able to get away with earlier versions depending on what you want; likewise, newer versions should be backward-compatible.
• Glade (to easily construct a UI)
  • This should come with the GTK+ development tools but you may need to install it separately. You should also have LibGlade, which should be included.
• the bindings betwixt them
  • usually a ruby-gtk2 package but this will vary. Search your package management system for them; the ‘big ones’ should have them. You will need this on any system on which you intend to run your project.
• Gladex (to write a kick-start file)
  • This tiny utility creates a kick-start file in Python, Perl or Ruby. We’ll use this only once and it’s a tiny package. Unfortunately this is not yet available in the SliTaz repositories but the Debain package converts perfectly. Gladex replaces use of a tool in the Ruby/GTK2 package that requires modifications of the Ruby file.

If you’re using SliTaz, start a Terminal window and switch to root user (su), then run these commands to install them and their dependencies:

yes y | tazpkg get-install ruby-gtk2 ruby-dev glade3 gtk+-dev
tazpkg convert gladex-0.4.1-linux-2.6-intel.deb && \
tazpkg install gladex-0.4.1.tazpkg

Designing with Glade³

I found the easiest way of getting a small application together is to start with a basic UI design, without being fussy. By starting with the front-end, you can keep in your mind the function of the application and thus a roadmap with which to start. So, let’s start up the interface designer Glade³ for a blank canvas on which we can create our masterpiece!

You should immediately notice the main designing window but we need to set-up the project first. A Glade³ project is not just one window (though it can be) but houses all the graphical elements that one application needs. Sure, you can create one project for an application, another for its About window and so on, but I think it more commonsensical to keep them all in one project.

The abstracted nature of the Glade³ designer means that each project must have defined details of the environment in which you intend to run your project. The Ruby/GTK2 bindings need to use the LibGlade format, the predecessor to the newer GtkBuilder. To do this, ensure that LibGlade is set in the Project Preferences window:

Other options such as the version of GTK+ needed to run the project are also defined here. It will be fine to leave object names unique within the project and image resources within the project directory for portabilities sake. Click Close to set those options and get back to the designer window.

Here you face two options: design the windows yourself, or pick a template design from the Toplevels area of the toolbox. We shall do the latter, to save a little time. Moreover, experimenting with both will no doubt be fruitful in the future, to discover the GTK+ stacking of objects and such, but we are covering enough to understand the basics. Let’s create a basic wizard-style dialog, with the Assistant template.

The basic framework for a three-page assistant is created, just with one click. You can even jump through the pages with the buttons! You should see it in the Project Inspector to the top-right of the window. Each page is one widget, in the default case three text labels.

Before we do anything, let’s make this window active by turning on Visible in the Common tab of the assistant Properties. This will show the window when the application is started; without it, nothing would happen!

Now we can customise the front page with a welcome message, in just five steps:

1. Activate the widget by clicking in its centre. The Properties should now change to reflect its selection.
2. Modify its name to something a little more descriptive, lbl_Welcome. You should see this reflected in the Inspector.
3. Fill in a welcome message by changing the contents of the Label property under the Edit label appearence: sub-heading. LibGlade uses just plain text by default, so don’t worry about formatting it; if you want to include basic mark-up, select the Use markup: option below. You may find it easier to click the button to the right of the field, to open a new editor window.
4. If you enter a long line of text, the window will expand to fit it. Split up the text by turning on the Maximum Width in Characters property and setting it to 50. Word-wrap the text by turning on Word-wrap mode just beneath.
5. Lastly, switch to the Packing tab of the Properties and set a Page Title. You can add an icon as a header image too, if you like.

You’ve just made the first screen! Let’s run it… but how?!

Letting Your Glade³ Design Live

We set the project as a LibGlade file, which affects the layout of the Glade³ file. Somehow you need to get Ruby to talk with this Glade³ file. Thankfully, it’s pretty easy and you need to do this once. Use Point Gladex to the Glade³ UI design and an output directory, and choose the Ruby plug-in. This will create a kick-start file ready to run your application. If you open the first Ruby file with a text editor, you should see this line that allows for Ruby and GTK+ to talk:

require 'libglade2'

This makes available the Glade³ and GTK+ functions to Ruby. This includes starting the UI design. Notice that there is no conversion of the UI design, rather it is linked.

Now you should be able to start a Terminal window and run your application:

ruby [name].rb

It lives! Well, nearly; you may find it a bit lifeless at the moment: there is currently no Ruby code to make the UI do anything! Thankfully, as you started the application through a Terminal window, you can press Ctrl+C to force-close the UI.

In this post, we have created a basic GTK+ application with a point-and-click designer, hooked it up to a Ruby file in which we can write Ruby code to power it. Next we can give more life to the application, including when closing its window! Until then, have a look in the Ruby and Glade³ files to see their basic structure and references, and have a think about how we can power the application with Ruby code.