Ruby GUI: Use Pre-built Toolkits to Create Awesome GUI, Quickly

ruby guiRuby is a comparatively new programming language- it first appeared on the scene a little less than two decades ago. If you think that makes it an old language, you would have been right- if it were a hardware component we were discussing, instead of software. You just need to a take a look at some of the other popular programming languages out there, like C or C++, to see that solid software always lasts for a long, long time. The C programming language, for example, was developed in 1972, while C++ is a little newer- it first appeared in the year 1983. This newness of Ruby is one of its greatest strengths. The authors of the language were able to avoid the pitfalls that the older programming languages suffered from and could anticipate the needs of the future while designing it.

The coding and structure of the Ruby language is based on Perl, Smalltalk, Eiffel, Ada and Lisp. It is fast, efficient, compact and relatively easy to learn- especially if you have some experience with programming. If you’re looking to learn Ruby, you can sign up for our introductory course to Ruby programming. We’ll make sure you’ll pick up the language in quick time. You can also read up about Ruby in this step by step tutorial.

Developing a GUI with Ruby

Developing an attractive, understandable GUI using Ruby can be a time-consuming venture, especially if you have just begun learning the language. The easiest way to come up with your own GUI is to study the code found in an existing GUI and incorporate the code when you’re making your own GUI.

If you need a GUI to run applications, we recommend that you download existing GUI toolkits and use them to make GUIs. This will save you a lot of time and effort, as GUI toolkits will help you avoid dozens of tiny mistakes you’d have made striking out on your own. In this tutorial, we’ll give you a brief over view of two of the more powerful and effective GUI toolkits you can use to design your own GUI.

The TK/TCL Toolkit

The TK/TCL GUI was first designed for the tcl language, but then incorporated into Ruby. If you’re looking for a GUI toolkit that supports Ruby to help you create or run complex applications, this might the GUI toolkit you’re looking for. TK is a little complex to use, and we don’t recommend using it if you’re new to Ruby. You can use TK if you are an advanced user.

TK is a cross platform GUI- it is compatible with Linux, Mac and Windows. If you have Linux and Max, chances are it’s already installed on your system. If you have Windows, you will need to download the toolkit from here.

The base unit of the TK GUI toolkit is a widget. The main widget is known as the root widget and newer widgets (widgets are also called as windows) are designed inside this root widget. If you’re familiar with Java, you known that all the classes in the language are derived from the “Object” class- it is the super class from which all other sub classes are derived. The root widget in TK can be termed as a super class, while all other widgets are its sub classes (Ruby supports inheritance. You can learn more about it in this basic course).

The root widget in TK is created by extending the TkRoot class. When new widgets are created in Ruby, they are placed inside the widget created earlier. To design an application using Tk, you need to create a widget and link it to a method. Multiple widgets will create multiple methods. Geometry managers help you decide where these widgets are placed in the interface (which is useful when you design your GUI).

If you wanted to print a simple message using TK, it would look something like this:

require ‘tk’
root = TkRoot.new { title “A Simple Message” }
TkLabel.new(root) do
text ‘A Simple Message’
pack { padx 14; pady 14; side ‘left’ }
end
Tk.mainloop

To create a program in TK, you need to first create an instance of the main TkRoot class (like we have done) and then you need to add widgets to it. In our program, the TkLabel.new line creates a new widget called TkLabel that is a child widget of the main TkRoot class. You can use the geometry managers to customize how the end result is displayed. In our program, the line “pack { padx 14; pady 14; side ‘left’ } “ used the geometry manager pack to display the result correctly. Finally, the Tk.mainloop is called, which is the main GUI loop. The end result is a message box that displays the text “A Simple Message”. You will need to adjust the settings before that, though (there are many).

The TK toolkit uses Ruby along with its concept of widgets to create attractive GUIs. Learn more about creating your own web designs with Ruby, in this course. You can create and manage label widgets, button widgets, scrollbar widgets, window panels, dialog boxes, canvas widgets, listboxes, text widgets, spinboxes, progress bars and generally everything you expect to see in a GUI. Some of the widgets may be a little complex to implement, but the structure of Tk makes them easy to fit into existing widgets. The geometry management lets you manage the master widget- the main widget into which other widgets are fit in. If you control the master widget, you can decide how the other widgets fit into it. TK also supports typical events, like mouse clicks and mouse movement in general.

The Shoes GUI Toolkit

TK is a pretty complex GUI toolkit and it may take you some time to master it. If you’re looking for something that you can learn quickly with minimum fuss, take a look at the Shoes GUI toolkit.  The Shoes GUI toolkit is designed to be simple to set up and attractive. Like TK, Shoes is a cross platform toolkit that can help you create simple programs with attractive GUIs. Ruby is built into Shoes- if you can use Ruby, you can use Shoes.

One of the most important elements in a Shoes program is stacks. Stacks, like the name suggests, let you group two or more buttons in a stack (on top of each other) like in the image:

To create an app in Shoes, you need to define its name followed by .app. For example, the app in the image above is named Shoes.app. To create a simple clickable button in Shoes, you can use the following code line:

Shoes.app { button “A Simple Clickable Button” }

Using the above line of code, we are creating a simple program called Shoes.app. It will have a box (like in the image above) and it will have a single button with a caption “A Simple Clickable Button”.

If you want to group two or more buttons together, you can use the stack keyword. For example, if you wanted to create three buttons like in the image above, the code would be:

Shoes.app {
stack {
button "A bed of clams"
button "A coalition of cheetahs"
button "A gulp of swallows"
}
}

If you want to learn more about the Shoes GUI toolkit, we suggest you download it and experiment with it. The only way you can create a functioning, attractive GUI is you practice and put some time and effort into it. If you’re having a hard time with the code we’ve used in this tutorial, we recommend that you sign up for this awesome Ruby courses. Once you’ve had a chance to play around with it and are ready to move on to the next level, our advanced course can help you gain mastery over Ruby.