Product Reviews

Flash began life as a way for web designers to add simple vector animations to their web pages. In the 12 years since it has grafted on impressive content handling, interactivity and programmability and become the one must-have browser plug-in.

In the process, and almost unnoticed, Flash has turned itself into an online computing platform with Flash content viewable by almost all internet users. Now Adobe is determined to fully capitalise on this platform by unleashing Flash's ability to create full-blown, self-contained Rich Internet Applications (RIAs) - and to take the same power to the desktop (click here to read more).

To unlock Flash's full potential as a computing platform, however, Adobe needed to rebuild its technology and applications to appeal not to the designer but to the developer. What it came up with was Flex.

Flex is a radical reworking of Flash built around two major languages. The first is MXML (Macromedia eXtensible Markup Language) - a declarative language for describing Flash-based application interfaces. The second is ActionScript 3, which is a reworking of Flash's long-standing procedural scripting language rewritten to today's more exacting programming standards.

Put the two together - presentation and logic - and compile the results to the binary Flash SWF movie format and the resulting RIA is immediately viewable by anyone with the Flash Player 9 installed. According to Adobe, that's around 95% of the total internet audience.

Adobe is keen to spread the use of Flex as quickly as possible hence its recent decision to make the Flex 3 SDK (software development kit) open source.

This means that you can create your own Flex apps for free in any code editor, but the majority of serious users will be happy to pay something for a dedicated solution. This is where Flex Builder comes in, providing a dedicated IDE for working with MXML and ActionScript 3.

Rather than reinventing the wheel, Adobe makes much of the benefits of working with existing open standards and so Flex Builder is based on the open source, cross-platform Eclipse IDE. This environment consists of one central Application window, which can be switched between Design and Source view for designing visually or coding directly, and it's surrounded by various panels which are used to navigate your project, drag controls from, set properties, view errors and so on.

It's all pretty logical, but the open source origins are clear in the less-than-attractive look-and-feel and the number of rough edges such as the lack of a split view and inability to filter files by type when importing. Developers should feel reasonably comfortable with it, but it's ironic that an application whose whole purpose is to produce sophisticated design-rich applications should itself feel so unpolished and basic.

Developing with Flex-ibility
Once you've come to terms with Flex Builder's interface, the easiest way to start creating the interface for your own application is by switching to Design view and dragging and dropping controls from the Components panel. By default these are categorized into three groups: the Layout controls such as Canvas, Form and Grid which act as containers for all others; the Navigator controls such as Accordion, TabBar and ViewStack which are used for navigating between alternative child controls; and the general Controls, such as Button, TextArea, and ComboBox which act as the front-end for your application's user-interface.

These three control categories are always available but there are two other context-sensitive collections. If you buy the Professional Edition of Flex Builder (£349 exc VAT) then the major difference - apart from some additional profiling and debugging tools - is the inclusion of a collection of Chart controls which make it simple to include area, bar, line, pie and other charts for visualising numeric data. Connect these controls to server-held data - a process made easier in this release by the addition of wizards to help connect to Web Services and to back-ends based on PHP, ASP.NET, ColdFusion and Java - and you can include live graphics in your RIAs, for example graphing real time share price movements, just as you would include live XML-based text.

Alternatively, if when you first create your project you choose the new option of creating a Desktop rather than Web application, then you'll find another category of components available: AIR controls. Most of these such as FileSystemTree and FileSystemList are used to enable local file handling, but the HTML control is even more important.

Essentially it allows AIR applications, which operate outside the browser, to provide their own embedded browser based on the WebKit open source project. WebKit's support for HTML/CSS/Ajax means that it's relatively simple to rework an existing website for offline delivery and this is likely to be a major use for AIR.

By default all Flex controls share similar styling based on the Halo theme which is fine but a bit dull. To create a custom look for your application you can change parameters such as colour, font size, border colour, corner radius and so on in the Properties panel

ADVERTISEMENT

with all changes reflected immediately in Design view.

Another interesting use of existing technology is the way that Flex takes advantage of CSS for such styling, which means that the look and feel of your application can be efficiently, consistently and centrally managed.

Such CSS handling has advantages but it's hardly the state-of-the-art for rich design so, by default, Flex applications actually look pretty dull and rudimentary. To fully stamp your brand onto your application you need to move from styling to skinning. Skins define the appearance of the various states of your controls and these can be based on bitmaps or, for full scalability, vectors.

Disappointingly this isn't possible within Flex Builder but, once you've installed new Skin Design Extensions, you can prepare your skins for import with the latest CS3 versions of Photoshop, Fireworks, Illustrator and Flash. The closest connection naturally is with Flash and, if you install the Flex Component Kit for Flash CS3 Professional, you can create interactive animated content that can then be imported as a ready-to-use Flex Builder component. It's workable but presumably with CS4 the integration will be tightened up considerably.

So far we've been designing visually but Flex Builder 3's real power becomes available when you switch to Source view and begin coding. Here you can directly edit the MXML mark-up that you've built up complete with colour-coded syntax, code assist, auto completion and so on. It's here too that you add behaviours and effects, for example to make buttons blur or spin - though why this can't be done in Design view is a mystery.

Most importantly it's in Source view that you add the logic to your application using ActionScript 3. Flex Builder allows ActionScript to be handled locally or via separate code-behind files and provides exactly the same coding support as it does for MXML.

Based on Javascript, ActionScript is relatively easy to get to grips with and provides a similar platform for scripting both player and browser. Moreover, in its latest object-oriented, ECMAScript incarnation, it's more efficient and powerful than many people realise. However, for advanced jobs ActionScript is unlikely to be able to compete with Microsoft's support for .NET languages such as C# and IronRuby through its upcoming Silverlight 2.0 technology.

Conclusion
Microsoft is the elephant in the room when it comes to discussing to the success or otherwise of Flex Builder. Compared to the supremely professional Expression Blend authoring environment, with its deep integration with the other Expression Studio apps and with Visual Studio and its dedicated and powerful XAML and .NET presentation and logic technologies, Flex Builder, with its associated CS3 extensions and use of existing standards and binary delivery, can suddenly appear dated, cobbled together and underpowered.

It's possible that when Expression/Silverlight 2.0 arrives to enable RIA as well as desktop application authoring then Flex will get blown away. On the other hand, the full potential of the RIA space is so enormous that there should be plenty of room for more than one solution especially as multiple players should happily co-exist in the same browser.

And Flex Builder has a lot going for it when compared to Expression Studio. In particular Adobe's all-in-one approach to handling both presentation and logic is simpler and cheaper than Microsoft's. It's also better suited to the average independent designer-cum-developer who will benefit greatly by familiarity with underlying technologies such as CSS, ActionScript/Javascript, and HTML/Ajax.

More to the point, until the Silverlight 2.0 player arrives and takes off, Microsoft isn't even in the race while Flex is up-and-running and able to deliver cross-platform RIAs that are immediately accessible by 95% of internet users.

With Flex, Adobe effectively owns today's online RIA platform, and with this version's new AIR technology it can reinforce that dominance and hit Microsoft where it hurts the most - on the desktop.

===========================

There's something in the AIR
Flex Builder 3's most significant new capability is its support for Adobe's new AIR platform. AIR stands for Adobe Integrated Runtime and is designed to allow cross-platform Rich Internet Applications (RIAs) based upon Flash and Flex technologies to move from the browser to the desktop.

Click here to return to the top of the review