Glimmer - Using Ruby to Build SWT User Interfaces

Glimmer is a JRuby DSL that enables easy and efficient authoring of user-interfaces using the robust platform-independent Eclipse SWT library. Glimmer comes with built-in data-binding support to greatly facilitate synchronizing UI with domain models. The goal of the Glimmer project is to create a JRuby framework on top of Eclipse technologies to enable easy and efficient authoring of desktop applications by taking advantage of the Ruby language. With Glimmer having just become an Eclipse project, it's a good time to find out more.

Philosophy

Glimmer's design philosophy can be summarized as follows:

• Concise and DRY
• Asks for minimum info needed to accomplish task
• Convention over configuration
• As predictable as possible for existing SWT developers

Conventions

Since Glimmer relies on Ruby, it is different in its syntax and conventions from what typical Java SWT developers would expect: 

• Method parentheses are optional
• Java-vs-Ruby example: show() => show
• Method names follow underscored syntax
• Java-vs-Ruby example: addListener => add_listener
• Classes are constructed using the new(...) method (as opposed to new keyword):
• Java-vs-Ruby example: new GridLayout() => GridLayout.new

Download

Please download Glimmer from RubyForge: https://rubyforge.org/projects/glimmer/

NOTE: Glimmer is moving to Eclipse.org. Please visit http://andymaleh.blogspot.com for up-to-date news on the move and the upcoming download location on the Eclipse website.

Installation

Extract the Glimmer zip file and follow the installation instructions in the README file.

NOTE: While Glimmer is platform-independent, its functionality has only been verified on Windows. Feedback from Mac and Linux users would be greatly appreciated.

Tutorial

Let's start with a very simple Glimmer Hello World example:

shell {
  label { text “Hello World!” }
}

This will render the following:

In the SWT library a shell represents an application's window. It acts as a frame around the application widgets, which are visual components that display information and/or enable interaction with the user.

One widget that was used in the Hello World example is the label widget, which simply displays text on the screen. Shell is also considered a widget, except it is a special kind of widget called composite.

The shell keyword, which declared the application's shell, was followed by a block of code encased in curly braces. This block contains the shell content declarations, such as the Hello World label. The label keyword was also followed by a block of code. However, this block contained a property declaration for the label, stating that the text value is “Hello World!”

So, to declare a widget, simply state its name followed by a block of code. The block may specify property values or nest other widget declarations for composite widgets.

Now, let's move on to a more advanced example:

shell {
  text "User Profile"
  composite {
    layout GridLayout.new(2, false)
    group {
      text "Name"
      layout GridLayout.new(2, false)
      layout_data GridData.new(fill, fill, true, true)
      label {text "First"}; text {text "Bullet"}
      label {text "Last"}; text {text "Tooth"}  
    }
    group {
      layout_data GridData.new(fill, fill, true, true)
      text "Gender"
      button(radio) {text "Male"; selection true}
      button(radio) {text "Female"}  
    }
    group {
      layout_data GridData.new(fill, fill, true, true)
      text "Role"
      button(check) {text "Student"; selection true}
      button(check) {text "Employee"; selection true}  
    }
    group {
      text "Experience"
      layout RowLayout.new
      layout_data GridData.new(fill, fill, true, true)
      spinner {selection 5}; label {text "years"}
    }
    button {
      text "save"
      layout_data GridData.new(right, center, true, true)
    }
    button {
      text "close"
      layout_data GridData.new(left, center, true, true)
    }
  }
}.open

This will render the following:

The example contains a variation of widgets from SWT:

• Composite: a widget that can simply contain other widgets and manage their layout
• Group: Similar to Composite except that it usually has a border and a title.
• Text Field: Enables user to type in text information
• Checkbox Button: Allows user to make a selection from different options
• Radio Button: Allows user to make a selection between options that are mutually exclusive
• Spinner: Enables user to type in numeric information or spinning a number selection by mouse
• Push Button: Enables user to initiate actions