Rails

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

A Brief Guide To The Visual Rails Workbench

Introduction to the drag+drop designer

The Visual Rails Workbench is a drag and drop page design environment for Ruby On Rails. It will form a part of the forthcoming release of Ruby In Steel Developer 1.2. Here I shall describe some of its main features. This document provides a hands-on guide for beta-testers of Ruby In Steel 1.2 (the beta test software will shortly be made available to registered users), and a preview for anyone else who may be interested...

- See also: Part Two of This Guide

Coding and Designing

In essence, the Visual Rails Workbench provides two ways of working with your Rails templates. Use the Rails Editor to write and edit Rails format (‘embedded Ruby’) code.

Switch to the HTML Page Designer when you need to edit your designs visually by dragging, dropping and setting properties.

There is, of course, much more to the Visual Rails Workbench and the remainder of this document describes some of its features in detail. However, just remember that it all boils down to those two ways of working:
- 1) hand code ERb templates in the Rails Editor
- 2) design the user interface in the HTML Page Designer

Features of the Visual Rails Workbench

- 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
- Support for Rails 1 and Rails 2

Enable The Visual Rails Workbench

- Enable For All New Projects

To make the Visual Rails Workbench the default for your Rails projects, select Tools, Options, Projects and Solutions, Ruby In Steel and ensure that the option, Use Visual Rails Workbench is set to True. Every new project will now use the Workbench. This option will not affect the currently loaded project.

- Enable For Current Project

To enable the Visual Rails Workbench for the currently loaded project, select Project, Project Options and ensure that the option, Use Visual Rails Workbench is set to True. If you are currently editing any view templates, close these and reopen them to edit them in the Visual Rails Workbench.

The Rails Workbench Environment

There are two linked coding and design workspaces: the Rails Editor and the HTML Page Designer. You may toggle between these workspaces by clicking one of the buttons at the bottom-left of the Rails Workbench window:

You will usually edit ‘native Rails template’ code (.rhtml or .html.erb views, partials and layouts) in the Rails Editor...

When you need to work with the visual design, you can switch to the HTML Page Designer...

- The currently active workspace (Rails Editor or HTML Page Designer) is indicated by an icon on one of the two buttons.
- The text on the Rails Editor button indicates the type of template file being edited - (Layout, View or Partial).
- The HTML Page Designer button is only displayed when a View template is loaded - a View is required in order to construct a full HTML page for the visual designer.

The Rails Editor

The Rails Editor is where you will enter and edit the code of Rails templates. If you don’t need to use the visual design features of the Rails Workbench, you will probably spend all your time working here.

The Rails Editor has two editing modes - one of which is optimized for embedded Ruby, while the other is optimized for editing HTML.

- ERB Mode

This gives you access to the features of the Ruby In Steel embedded Ruby editor including colour coding of Ruby code, snippets and quick navigation (right-click) between a controller and a view.

- HTML Mode

This gives you access to the features of the Visual Studio HTML editor such as code completion for JavaScript and styles.

To toggle editing modes, click the arrow-head selector to the right of the Rails Editor button.

The HTML Page Designer

- Overview

The HTML Page Designer allows you to edit the loaded view in HTML format. When you switch to the HTML Page Designer, the view is automatically inserted into the layout template to which it belongs. Any partials required by the view are also inserted in the appropriate locations. The Rails Workbench then ‘translates’ the embedded Ruby code and (where possible) substitutes the HTML which corresponds to that code. For example, if an ERb view template contains this...

<%= f.datetime_select :created_at %>

...when loaded into the HTML Page Designer, the following code is substituted:

<span erb:name="erb:datetime_select" erb:blockvar="erb:f" erb:method="erb::created_at" ><select id="f_:created_at_1i" name="f[:created_at(1i)]">
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>

...(etcetera)

Note that the Rails Workbench defines the erb namespace to keep track of translated elements such as <span erb:name="erb:datetime_select" ...>

IMPORTANT: You must not edit any elements containing references to the erb namespace!

When you move from the HTML Page Designer back to the Rails Editor, the HTML code is translated back to ERb format (HTML templates containing embedded Ruby).

In the HTML Page Designer, you may:

- Resize controls by dragging using the mouse.
- Alter Properties using the Properties Panel...

- Set Styles (in the current file) using the Style Property which gives access to Style editing dialogs...

- Set Styles in an attached CSS Style Sheet by loading CSS file into editor...

- Toggle Design/Split/Source

The HTML (Page Designer) has three buttons to switch between the visual designer, the HTML code editor or a split view. You may also click tag elements to the right of these three buttons to navigate through the tags surrounding the currently selected element.

Drag and Drop Design

The HTML Page Design Editor lets you drag and drop components from the Toolbox onto the form. There are three types of component in the Toolbox, arranged in groups (HTML, Embedded Ruby (Model) and Embedded Ruby (Non-model):

[ HTML ]

These are normal HTML components and no translation is done when moving between the HTML Page Designer and the Rails Editor.

- Example

In HTML Designer:

<input id="Text1" type="text" />

In Rails Editor:

<input id="Text1" type="text" />

[ Embedded Ruby (Model) ]

These are ‘Rails-aware’ controls. When you move from the HTML Page Designer to the Rails Editor, they will be translated into embedded Ruby format including dummy ‘block form variables’ (by default, f).

- Example

In HTML Designer:

<input erb:blockvar="erb:f" erb:method="erb::myName"
   erb:name="erb:text_field" name="erb:f[:myName]" size="30" type="text"
   value="erb::myName" />

In Rails Editor:

<%= f.text_field :myName, :size => "30" %>

[ Embedded Ruby (Non-Model) ]

These are ‘Rails-aware’ controls. When you move from the HTML Designer to the Rails Editor, they will be translated into embedded Ruby format but will not include ‘block form variables’.

- Example

In HTML Designer:

<input erb:name="erb:text_field_tag"
   name="TextFieldName" type="text" />

In Rails Editor:

<%= text_field_tag "TextFieldName" %>

Note that when you have made changes to a form design in the HTML Page Designer you will be prompted to save or ‘commit’ those changes when you switch to the Rails Editor. Committing, backing up, restoring and undoing changes will be explained in the next part of this guide.


See also:
- Part Two of This Guide
- Visual Ruby On Rails Drag and Drop Designer
- Visual Rails Workbench - screencast preview
- Visual Rails Workbench - The Import/Export Business

Bookmark and Share   Keywords:  ide  tutorial  visual design
© SapphireSteel Software 2014