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

A Brief Guide To The Visual Rails Workbench - part 2

Navigating and Saving Page Designs...

In the first part of this guide, I explained how to use the editing and visual design features of the Visual Rails Workbench. Now I am going to explain how to use additional tools to navigate through your source code, save and restore named versions of your page designs and export your designs for use with other web design applications.


1) The Document Outline

The Document Outline is a tree-structured window that shows you a hyperlinked outline of the currently active document. To view the Document Outline, select Tools, Document Outline from the toolbar beneath the Rails Workbench editor (alternatively, select the View menu then Other Windows, Document Outline):

The Document Outline displays the following outlines:

- Rails Editor (ERb mode)

When you view Rails Templates as ERb in the Rails Editor, the Document Outline shows all the embedded Ruby (code between <%..%> and <%=..%> tags. It does not show other HTML tags.

- Rails Editor (HTML mode)

When you view Rails Templates as HTML in the Rails Editor, the Document Outline shows all standard HTML tags (including embedded Ruby).

- HTML Page Designer - Code View

When the Page Designer is loaded in code view, the Document Outline shows component parts of the composite HTML web page corresponding to the Rails templates (Layout, View, Partials) defining this page.

- HTML Page Designer - Design View

When the Page Designer is loaded in design view, the Document Outline shows the HTML structure of the web page.

- CSS Stylesheet

When a stylesheet (with the extension .css) is loaded, the Document Outline shows styles grouped by category - such as Elements, Classes and Element IDs.

2) HTML Tags

The HTML Page Designer displays HTML tags beneath the editor. These indicate the tags surrounding your current location in the document. You may click these to select pairs of tags in the document itself.

3) HTML Page Composite

In order to view the component parts of the HTML composite page (in the HTML Page Designer), select the Page (Code) option. This indicates precisely which parts of the HTML page have been derived from specific elements of the Rails template. The Document Outline displays a tree of the component parts and the editor highlights them in different coloured ‘overlays’ (indicating Layout, View, Partial).

By default the code is placed into ‘read-only’ mode. If you need to edit the HTML code you may write-enable a specific section by double-clicking it in the code editor. When an area is edit-enabled the code will be syntax coloured:

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

Note: You may change the colours of the composite overlays in the Tools, Options, Environment, Fonts and Colors dialog. The overlay colours are:
- Rails Layout
- Rails View
- Rails Partial


1) Commit Changes

When you have made changes to a page design in the HTML Page Designer you need to commit to save those changes back to the original Rails ERb templates from which the page was generated.

To Commit Changes, select Tools, Commit

If you leave the HTML designer (by switching back to the Rails Editor) and there are unsaved changes, you will be asked whether or not you wish to commit those changes.

Note: If you simply save changes (CTRL+S), only the ERb file (e.g. the View template) is saved. You must commit in order to disassemble and translate an HTML page into its component Rails-format template files.

2) Archive ‘Working Backups’

When working on a design in the HTML Page Editor, we recommend that you make regular archived backups of your work in progress. This will allow you to backtrack to earlier versions of a design.

- To Archive the Current Design

In the HTML Page Designer select Tools, Archive, enter a name for the design and click Save.

- To Restore an Archived Design

In the HTML Page Designer select Tools, Archive, select a name from the archive and click Load.

Note: The original page design is automatically saved with the name initial.

3) Revert To Earlier Versions of Rails Templates

Changes made to the Rails templates (whether these result from edits made to template code or changes committed from the HTML Page Designer) are automatically saved. If you wish to backtrack to an earlier version of a specific Rails-format template file (for example, a view template called show.html.erb), you should select Tools, Revert in the Rails Editor, pick a backup from the list and click the Revert button.

You may select and preview a specific version of the template before reverting...

Archives or Backups?
The Rails Workbench automatically backs up changes made to Rails (ERb) templates. Changes to the HTML page designs are not automatically backed up but can be explicitly saved into the Archive.

The archive and the backups are complementary: if you restore a backup of a Rails-format template (such as a view), only that one selected template file will be restored. A new HTML page will be constructed using this restored template when you switch to the HTML Page Designer.

On the other hand, if you load a named HTML page design from the Archive, all the Rails template files (Layout, View, Partials) corresponding to that page design will be generated when you commit your changes.

- Reconstruct Page

Select this if you want to rebuild the page in the HTML Page Designer. This will construct the page based on the ERb templates. Un-committed changes made in the HTML Designer will be lost. You will be prompted for confirmation before the Page is reconstructed.

4) Import/Export

You can export page designs from the HTML Page Designer. This gives you the ability either to save sets of alternative designs or to export the design for use in some other web design application such as Adobe’s Dreamweaver or Microsoft’s Expression web. Designs that have been exported can subsequently be imported into the Page Designer. To use this design with Rails you need to select Tools, Commit in order to deconstruct the HTML Page into Rails-format templates.

By default the exported pages are saved into the \export directory under the top-level application directory. This retains the relative directory structure so that references to other folders such as \public\images and \public\stylesheets are preserved. If an external web design program is used to edit the exported files in the \export directory, these relative links will preserve the styles and images. If you need to copy the exported files to another location, you are advised to copy any other references files such as mages and stylesheets, maintaining the relative directory structure.

(Above) - an exported page is being edited using Dreamweaver.

For an overview of Importing and Exporting page designs see: Visual Rails Workbench - The Import/Export Business

See also: Part One Of This Guide

The Visual Rails Workbench will form a part of the next version (1.2) of Ruby In Steel Developer. This will be a free upgrade to registered users.

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