the blog
Back to -Blog

Visual Rails Workbench - a peek behind the scenes

Assembly and Disassembly
by Huw Collingbourne
Wednesday 9 April 2008.

It’s been a long time in development but our drag and drop design-and-code environment, The Visual Rails Workbench, is now pretty much ready to go. You can already download the 3rd (and probably final) beta and test it out for 30 days or, if you already have a licence, you can use your current registration details to unlock it - though, in fact, we expect to release the final shipping version (part of Ruby In Steel Developer 1.2) before those 30 days are out!

One of the things I am doing at the moment is going through the user guide and manual, updating any out of data documentation and adding sections covering all the (rather numerous) new features which will appear in Ruby In Steel 1.2. These include reference guides and tutorials not only to the Visual Rails Workbench but also to other new features such as the significantly enhanced Cylon debugger.

Today I happen to be working on a chapter which explains some of the things that go on ‘behind the scenes’ in order to implement our drag and drop designer and ‘round trip’ this to and from Rails templates. For the benefit of those of you who may already have read my previous descriptions of the Visual Rails Workbench (or tried out the beta for yourself) and wondered what dark magic was used to implement this, here is a brief insight...

ERb / HTML Round-Tripping - How It Works

In essence the Workbench provides two linked editors - the Rails Code Editor (for working with ‘native’ Rails-format ERb templates) and the HTML Page Designer (for working with full HTML page designs).

When you move from the Rails Editor to the HTML Page Designer, the Visual Rails Workbench assembles and translates the multiple Rails (ERb) template files in order to create a complete, HTML ‘composite’ page.

To understand how this works, let’s assume that you load the View template, edit.html.erb into the Rails Editor. When rendered as a web page in the running application, this View will be ‘contained’ by a Layout template called posts.html.erb and it will itself contain a Partial called _dataentry.html.erb.

The Visual Rails Workbench constructs a representation of this runtime web page at design-time. It does this by inserting the Partial into its containing View and inserting the View into the Layout. It then translates any embedded Ruby code which relates to the page design and layout into the corresponding HTML. The end result is that you now have an editable HTML page that was created from several ERb-format Rails templates.

If you switch to the Page(Code) editor and view the Document Outline (from the Workbench Tools menu), the structure of this ‘composite’ HTML page becomes clear. The HTML areas which correspond to the original Layout, View and Partial templates are colour-coded in the editor and shown on branches in the Document Outline:

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 color-highlighted in the editor and shown as branches in the Document Outline.

This is, of course, a much simplified explanation of what is actually happening. From the end user’s perspective the transition between Rails ERb templates and the full web page drag-and-drop designer should seem pretty seamless. In fact, behind the scenes, Ruby In Steel has to do a lot more work than meets the eye in order to move from the world of Rails with its multiple ERb templates into the world of HTML web pages that can be designed using the Property panels and mouse control for pixel-perfect accuracy.

Bookmark and Share   Keywords:  visual design
© SapphireSteel Software 2014