Adobe Flex provides a rich set of User Interface components built on top of the ubiquitous Flash player. Ruby on Rails provides a powerful and productive back-end programming environment for interacting with databases and web services in the cloud. These two technologies together provide a compelling platform for:

• Enterprise & Extranet Applications
• Branded Applications
• Data or Media-Intensive Applications
• Real-time & Charting Applications

Why Flex?

We see three key aspects of the Flex technology which recommend it in certain situations over conventional HTML and Ajax interfaces:

• Fully built-out and documented set of UI Components
• Easy for non-designers to produce solid, polished applications
• Real time data-binding and interaction

We’ll take each of these in turn but first we will discuss the choices.

Alternatives to Flex

Older developers, who remember creating graphical interfaces before the web came along, will recall both the richness and misery of programming for Java Swing or the Unix, Mac or Windows GUI systems. While the simplicity of HTML was liberating, the UI paradigm of shipping tiny slices of a interface around globe in the form of GIFs using flurries of HTTP requests left something to be desired.

With the advent of CSS and modern Javascript frameworks like JQuery, the HTML/Ajax path of interface development promises to approach and perhaps even leapfrog traditional UI toolkits in terms of ease of use and capability. As of this writing in mid-2009 however, the bewildering array of options and cobble-it-together-yourself technologies available still does not provide a clear, winning path for development of rich user interfaces online.

If you set out to develop an online app today, you basically have three options:

1. Hire a designer to lay out your interface in Photoshop and then slice and dice it into HTML while you figure out how to program all the intricate little UI interactions.
2. Choose a UI library like JQueryUI, YUI, Google Web Toolkit, MochaUI or Cappuchino and hope it does everything you need.
3. Use Adobe Flex or possibly if you are in the MS camp, Silverlight.

Each of these choices has something to recommend it and may be the right choice for a given application.

The shop & slice option is traditional and straightforward but is falling by the wayside in preference for #2 and #3.

The new Javascript frameworks have real power and some have polish and we would like to review them in an upcoming article but their major drawback at present is a lack of maturity in terms of completeness, documentation and developer acceptance.

Flex runs on just about everything and has achieved a level of acceptance that makes it a strong choice for many.

The Flex UI Component Library

The menu of available components in Flex 3 is comparable to a mature, traditional GUI toolkit. There are a multitude of layout components which traditional GUI developers will recognize. There are list components, a powerful DataGrid component, formatters and renders, as well tree controls, charts and effects. There are even some licensed components and third party libraries if you exhaust the capabilities of the basic components.

The component API documentation is complete and consistent and is easily navigated via a set of downloadable, framed HTML. Coming from a Java/Swing background, I found Flex mostly works the way you would expect, adhering to the principle of least-surprise.

Easy Styling

Styling an application in HTML involves defining tens if not hundreds of CSS classes. The Javascript libraries offer varying degrees of theme-ability but customizing the look beyond the canned choices is often much more involved. While Adobe Flex is completely “skinable” and style-able, Flex provides a simple CSS-like style mechanism which offers a few settings we can use to give an attractive, custom look to any application:

Application {
   backgroundGradientAlphas: 1, 1;
   backgroundAlpha: 0.25;
}

These two settings combined with a company or application logo image for the background, can get a developer off to a great start even without having much of an eye for design. Even though it was built for the previous version of Flex, a great resource for getting an appreciation of the styling capabilities of Flex components is the Flex 2 Style Explorer.

Data Binding

One of the neatest features of Flex, which is not common in other popular environments, is the notion of data-binding. Attributes of GUI components can be “bound” to the variables of other objects so that when those member variables get updated, they will in turn update whatever components are bound to them.

To understand a little how this works we must delve into how a Flex application is defined and programmed. Flex applications consist of a hierarchy of components laid out in an XML file (called MXML) somewhat analogous to an HTML file. Flex applications are given customized behavior through programming ActionScript much same the way as HTML can be given behavior with Javascript. In fact, ActionScript is basically Javascript with strict typing and some extra syntactic sugar for embedding XML. It is similarly possible to embed ActionScript in certain attributes of UI components in the MXML, like so:

<mx:Button label="Format" click="Format();"/>

Through the use of curly braces in an attribute value, we can “bind” the value or a portion of it to the result of an ActionScript expression:

<mx:Panel id="productPanel" label="Products" status="({_model.products.length}) Products">

This produces a panel with a dynamically updated status section, bound to the number of products on _model:

There is no need to attach listeners or go through any extra ceremony in order to update the displayed value.

Flex and Ruby on Rails

Flex is agnostic about which back-end technology you use. Common choices include Java, PHP, and Adobe’s own Cold Fusion. We use Ruby on Rails because we have found it is the all-around most productive and pleasant environment for us. The intersection of these two technologies continues to evolve. At the time of this writing, there are three open-source libraries promising to ease development of Flex + Rails applications:

• Limber
• RubyAMF
• RestfulX

RubyAMF is currently maintained by Tony Hillerson at EffectiveUI. RubyAMF confines itself to the problem of offering support for Adobe’s serialized communications protocol, AMF. AMF offers some advantages in terms of speed and reduced communications overhead but due to its use of a binary format, it also obscures the communications between the client and the server which can slow development and debugging.

Both Limber, which is my own creation and RestfulX, created by Peter Armstrong at Ruboss, seek to provide a way to make your Flex + Rails app spring to life quickly through the use of code generation. RestfulX provides a passive but powerful code generator which helps to get off to a rapid start but you are expected to pick up from there and develop your Flex and Rails apps in a conventional fashion after several initial iterations with the generator.

Limber by contrast, provides both generators and a Ruby DSL for Active Code Generation, meant to be used throughout the development cycle. This allows you to develop an entire, complex application without resorting to Flexbuilder or hand-coding MXML files. This will be of particular interest to Rubyists who wish to avoid an IDE. With Limber, you write Ruby code which is translated into Flex code at compile time. Limber uses the older Cairngorm framework for RESTful communication via XML with Rails and does not yet support the newer JSON format, like RestfulX does.

The authors of all three of these open source toolkits for integrating Flex on Rails have deployed production systems successfully using their respective tools. Hopefully all three of these approaches can benefit from what the others are doing.

Deciding to use Flex

We would strongly consider using Flex if your requirements include at least one of the following:

• DataGrid, pivot tables or advanced charting and visualization capability
• Live market data or multi-user interaction
• A branded, enterprise-style UI for data entry and forms work
• A highly custom GUI component

Conclusion

As of mid-2009 Flex and Rails are by all indications two major technology trends on the rise and they complement each other nicely. Flex makes it easy to create stylish, rich user interfaces, while Ruby and Rails provides incredible power on the back end. There are three choices for open source libraries to help you integrate these two technologies and two different books out on the subject. At Talcott Systems, we believe Flex and Rails will continue to be a winning combination for select applications in the years ahead.