Ruby In Steel 1

Back to -Tutorials -Sapphire (Ruby In Steel) Tutorials -Archives -Ruby In Steel 1

GUI Drag-and-Drop Development For Ruby and Rails

Three solutions in Ruby In Steel

A question that frequently arises on Ruby and Rails forums and newsgroups is: ‘How can I create a GUI with Ruby’? If you are expecting a ‘Visual Studio’ way of accomplishing this (drag-drop-code-and-run) you may be disappointed by some of the suggested solutions. However, with Ruby In Steel, you have not just one but three different ways of creating GUI applications using drag+drop design tools.

The Visual Rails Workbench - a drag-and-drop design environment for Ruby on Rails

These are your options:

- The Visual Rails Workbench

This is our unique full web-page design and coding environment for Ruby On Rails. This lets you design cross-platform Rails applications by dragging and dropping components from the Toolbox onto a page.

- IronRuby In Steel

We have a free IDE for Microsoft’s IronRuby (this is also incorporated into our commercial product). In addition to its visual designer, the IronRuby In Steel IDE has all the editing features of our standard Ruby product.

NOTE: This tutorial was published in September 2008. As of January 2010, SapphireSteel Software is no longer actively developing an IronRuby IDE and can offer no support related to IronRuby.

- The Ruby Connector

This is a widget that lets you connect .NET programs to the Ruby interpreter. You can use the Microsoft form designer for C# or VB to design the front end and run Ruby at the back end.

So which of the three options should you use...?

Let me try to summarise the differences between them.

The Visual Rails Workbench

Designing good-looking Rails applications using the standard ERb (or RHTML) templating system can often be a bit ‘hit and miss’. The problem is that a single Rails page can be made of multiple templating files (for example, a Layout, a View and one or more Partials) and none of these files is ‘standard’ HTML - instead, they are fragments of HTML with bits of Ruby mixed in. This means that you do not have the option of editing a full page Rails layout using a drag and drop designer such as the Visual Studio web editor or a third party tool such as Adobe’s Dreamweaver. Well, with the Visual Rails Workbench, this is exactly what you can do!

Here in the Page (Code) editor, you can navigate the ‘composite’ HTML page which has been constructed from Rails (ERb) Layout, View and Partial templates. The corresponding areas of the HTML page are colour-highlighted in the editor and shown as branches in the Document Outline.

The Visual Rails Workbench auto-assembles full HTML web pages from multiple template files and translates the embedded Ruby code which defines visual controls into standard HTML. Once you’ve finished designing your pages, the Visual Rails Workbench retranslates them back into ERb/RHTML and breaks them apart into their original format (the multiple Rails templates). This lets you do drag-and-drop design in Visual Studio itself or export whole pages to be designed in a third-party tool such as Dreamweaver.

The Visual Rails Workbench is unique to Ruby In Steel. There is, quite simply, nothing else like it. Its main features are summarised below:

- Full page editing of complete web pages (“composites” of Rails layouts/views/partials)
- Drag and Drop design - add controls from a toolbox - Set properties using the Property panel - Resize and move controls using mouse or keyboard - Split view code/form editing - Toggle ERb/RHTML editing between HTML editor and Rails (Ruby-aware) editor - Round-tripping between ‘web format’ HTML and ‘Rails format’ ERb/RHTML - Edit code as ERb/RHTML or as HTML - Document Navigator navigates DOM or “composite” structure (HTML)/or methods (ERB/Ruby) - Quick navigation between controller and view - Import/Export to other web page design tools (such as Dreamweaver or Expression Web) - Save/restore named ‘versions’ of page designs to/from an archive of work in progress

More information online:


Note that some of the above articles were written when the Visual Rails Workbench was still in development and there may have been some minor cosmetic changes to certain features. The Ruby In Steel manual and integrated help system contains a fully updated reference.

In addition we have this short screencast movie that demos some basic features of the Visual Rails Workbench:


IronRuby In Steel

First, I should say that our IronRuby IDE is an alpha release. IronRuby itself (Microsoft’s implementation of Ruby for .NET) is still in development and we released our IDE earlier in the year in order to provide IronRuby coders with a Visual Studio environment incorporating powerful code editing features and a basic design environment. Neither IronRuby itself nor our IronRuby IDE is yet ready for real-world development and we probably won’t significantly update this IDE until version 1 of IronRuby is released. If you working with IronRuby, you can use our IDE to create IronRuby projects in the Solution Explorer, format and edit your IronRuby code (with code colouring, collapsing, auto-indenting etc.) and create front ends by dragging and dropping controls from the Visual Studio toolbox.

Download the IronRuby IDE (alpha) Note: As of January 2010, the IronRuby IDE is no longer supported and is no longer in active development:


The Ruby Connector

The Ruby Connector is a widget that opens up channels of communication between a .NET program and the Ruby interpreter. In principle, you could use this either to run small bits of Ruby code from a much larger VB or C# application or run large Ruby programs from a small VB or C# ‘front end’.

If all you want to do is provide a traditional ‘Widows-style’ interface (Windows forms, buttons, menus, text entry boxes, dialogs etc.) to your Ruby programs, then you could simply design the user interface in C#, VB or some other .NET language, drop on the Ruby Connector control and ‘wire up’ your buttons and menus to your Ruby program. Then when the user clicks a button or selects a menu item on the form, the Ruby program would run some code and send back some data which the .NET program can display. The Ruby Connector is a free tool and we provide a comprehensive programming manual to explain how to use it.

The Ruby Connector is supplied as standard with Ruby In Steel Developer (look under your installation directory) or you can download it here:


There is a short screencast movie showing how to use it HERE

So, in short, if you are wondering how you can create Ruby or Rails applications using a drag and drop design environment, there are your answers. Enjoy!

Bookmark and Share   Keywords:  visual design
© SapphireSteel Software 2014