Banking

Flex: The new face of design and development

Far more than just a toy for graphic-savvy developers, Adobe's Flex is one of the best Rich Internet Application tools around.

Far more than just a toy for graphic-savvy developers, Adobe's Flex is one of the best Rich Internet Application tools around.

In terms of reach, functionality, interface richness, client ubiquity and the number of potential developers worldwide, Flex is one of the best ways to build a Rich Internet Application (RIA) today.

The term RIA was used first by Macromedia in a white paper produced in early 2002. It was a new term for something already perceived; applications that offered the functionality of a desktop application with a richer, more engaging user experience that also ran online.

In that white paper the company identified the drawbacks of the browser that we acknowledge as developers today and how those problems can be addressed with a Flash-based presentation tier.

Let's be honest here — we've all been trying to make the web bend our way, and we're forcing functionality and design on something that was originally created as a text based communication tool.

Not only did Macromedia give something a name, in that same year they also presented a way to build RIAs with a set of new tools delivered to the developer community as part of the release of Flash MX in the shape of UI form components and ActionScript APIs that extended Flash in new ways that went well beyond "Skip Intro".

The next logical thing for Macromedia to do was to create a new developer-oriented method for creating Flash based applications to run in the Flash player, which in turn lead to the release in 2004 of Flex 1.0 - a presentation tier server and framework for enterprise level developers to create RIA front ends for their applications.

A Flex application is a combination of mark up language, framework, application server, and runtime:

  • The markup language, MXML, is tag based and is derived from XML. It allows the developer to create a Flash front end to an application with a markup language that is not dissimilar to DHTML in terms of layout and styling attributes. MXML allows for both liquid and precise layout of design elements. Styling can be done with a CSS stylesheet. ActionScript is used to program client side application logic.
  • The Flex presentation server compiles MXML into a Flash movie or SWF. The server also acts as a gateway for the Flash Player to communicate with Web Services and Remote Objects such as ColdFusion CFCs, Java and other objects that support Action Message Format (AMF). Flex applications are deployed as a WAR file to a J2EE server.
  • Flex applications are compiled into Flash movies and are displayed in the browser via the Flash Player. They can also be run as standalone applications on the desktop via Macromedia Central.

Platform Ubiquity
The advantage that the Flash platform has to offer is that it's almost everywhere these days. Not only in the browser, the Flash player can be found in mobile phones, handheld devices, game consols, set top boxes, in-dash car displays, ATMs, media players... the list goes on. Not only is the Flash player ubiquitous, it's robust and offers a powerful scripting language. You need only write once, but deploy almost anywhere - something that even Java was not able to attain.

Flex requires Flash Player 7, there's a version of that for Windows, Mac OS and Linux, you and your clients are most likely to have a more recent version of that installed on your computers.

Macromedia learnt a lot about how Flash based RIAs need to work and as a result the Flex framework provides solutions to a number of problems that AJAX has not yet solved today. To give you an example amongst the framework's features is a history manager that interacts with the browser history list, let's consider this scenario:

Gmail, perhaps one of the more well known AJAX based applications, in it's two years of release has yet to offer complete integration with Safari - it's unable to communicate with the browser history - if I forget after reading an email and hit back in my copy of Safari I get the great wait as Gmail has to start all over again, yet Flex manages to interact with that same back button out of the box.

I suspect that Mac OS is a low priority at Google as most if not all of their AJAX applications do not support Safari - the point here is that Flex applications will work on all computer browsers due to the Flash Player being cross browser and cross OS compatible.

Flex 1.5 can be downloaded from Adobe.com as a 60 trial, this will revert to a developer edition at the end of the trial period. The developer edition will serve content to 5 IP addresses, making it a reasonable way to build either a proof of concept or develop an application up to testing stage without having to purchase the server too early. Flex Builder 1.5 is available as a 60 day trial.

Writing a Flex application is done with either Adobe Flex Builder, which is bundled with Flex Server, or a text editor like Eclipse. Flex Builder 1.5 is based on Dreamweaver MX 2004, in addition to support for MXML it also has a MXML renderer to give developers and designers a WYSIWYG view of the MXML tags for layout purposes. Flex Builder is not a MXML compiler, that's what Flex server is all about.

I've been developing Flex applications for some time and have used Eclipse almost from day one. One of the reasons for that is that I'm a Mac user and Flex Builder is only available for Windows. Eclipse needs to make use of a XML plugin to get the most out of the MXML markup language.

A schema file for MXML is part of the Flex installation - I use a commercial Eclipse plugin oXygen XML Editor that's capable of interpreting the XSD schema file. This means that I get tag completion and insight while working on code, just as you would in Flex Builder. It's also possible to use the free Eclipse Web Tools Platform to edit MXML files.

The Eclipse advantage over Flex Builder is that it offers source control via native support for CVS and plugin support for Subversion, something essential in a team/enterprise environment. What Flex Builder offers that Eclipse doesn't is a WSIWYG view of your layout; something coming in Flex Builder 2 which is based on Eclipse and will also be available as an Eclipse plugin.

A Flex MXML page will have MXML tags that are used for either layout, visual components like form controls, data modelling and binding, charting, animation effects and services. The page would also contain ActionScript to add client side logic to the Flex application. Flex is currently being used at the Enterprise level; that's how it was originally priced and marketed. It's pricing is around USD $15,000 per CPU, the license include 5 copies of Flex Builder.

Applications built in Flex to date have been done with some kind of framework/design pattern - the most prevalent framework for Flex is Cairngorm, an open source framework specifically developed for Flex by iteration::two in Scotland.

Another framework that has been applied to Flex application development has been the Ariaware RIA Platform (ARP), similar to Cairngorm it was created for Flash RIA development but can be easily re-factored for Flex development.

Flex applications are bundled with the Flex server and deployed as a WAR to a J2EE server, Macromedia indicated that there was to be a .NET version of Flex when it was first announced but there's been no news of when that might be. The server compiles the application's MXML files to a SWF and serves that up to a client's browser. It's not possible to use those SWFs outside of the Flex server.

Wide Community
So what is Flex used for and who's using it? Flex is an enterprise product, it's strengths are the ability to easily build a robust rich user experiences for enterprise solutions. Applications like:

  • Configurators
  • Product selectors, shopping carts
  • Presenting large amounts of information graphically
  • Dashboards
  • Business process automation, large multipart forms
  • Highly visual applications, charting, image manipulation

SAP have licensed Flex and are using it to extend SAP NetWeaver allowing developers and organizations to build rich interfaces to SAP solutions in sorter amounts of time.

Who's using Flex? There are a number of Flex applications currently in development here in Australia, one of which when it launches later this year will be the largest Flex application ever.

Overseas, Flex is being used by:

  • BSkyB
  • Cisco Systems
  • Dow Jones
  • MasterCard
  • Mercedes-Benz
  • Kodak - Ofoto
  • Pfizer
  • Walt Disney

Having been personally involved with a number of large Flex projects I guess it could be said that my glasses are, like Bono, a little on the rosy side. Let's play the pessimist for a couple of minutes and have a look at the negatives.

Sticker shock would be a fair comment for the price of the Flex 1.5 server, and I'm sure that a number of Flex projects haven't managed to get off the ground because of that alone. The productivity gain from developing Flash applications with a markup language compared to building the UI by hand is enough to probably justify the price of the server on a large RIA.

Flex is currently limited to the browser, it's supported by Flash Player 7 and while the recent release of Flash Lite 2 for compatible mobile phones means a Flash 7 compatible player for mobiles, Flex applications are not currently supported. That doesn't mean that they never will, Adobe recently advertised the job "Senior Product Manager, Flex Mobile Development at Adobe", so I'd expect something to happen with Flex and mobiles soon enough.

The other thing is that you would use Flex to power something simple like a Flash feedback form when you could built it in a reasonable amount of time from scratch. Having said that there's exciting news about the cost of the soon to be released Flex 2.

The really big news that developers should be excited about is the pending release of Flex 2. The next version of Flex brings radical change in features, licensing, authoring environment and pricing. I personally believe that Flex 2 is going to bring about the biggest change in the way we build things for the web.

The big news about Flex 2 is that Flex 2 is free — it will free to develop, free to compile and free to deploy a Flex 2 application. How about that Mr AJAX.

To clarify my previous paragraph:

  • While the Flex Builder 2 IDE will retail for around USD $1000, you would be able to author your Flex 2 application in MXML and ActionScript with any text editor of your choice, the advantage of having Flex Builder 2 is greater insight into the tags as well as WYSIWYG layout.
  • With Flex 2 Adobe will release a Flex compiler as part of the free Flex Framework SDK that you'll be able to produce SWFs with that can be deployed anywhere you like, no licensing strings attached. Applications that you build with Flex 2 will not need a Flex server or J2EE server for deployment.
  • Applications built and compiled with the free compiler will be able to connect to web services and ColdFusion so that they can be data driven RIAs.
  • The new version of what was Flex presentation server will be renamed Flex Data Services. If you want to have access to remote objects like Java objects, implicit paging of large data sets, history management, collaboration and data synchronisation you'll need to purchase Flex Data Services.
  • Flex 2 will use a new version of ActionScript, version 3 which will introduce new language features.
  • Flex 2 applications will need to run in a new version of the Flash Player which is currently in public beta, Flash Player 9.

Flex 2 has been available for download to developers right from alpha from Adobe Labs, it's currently beta 2. Release of the final product is expected to be around June this year. By the amount of talk currently being generated about Flex 2 on the major Flex mailing list, FlexCoders, I'd suggest that you should download the beta of Flex 2 now and try it out for yourself, because it's going to become a popular RIA development tool once the final version is released.

If you're looking for more information on Flex there's a few places to visit online. There's only one Flex mailing list, FlexCoders, it's run by the creators of Cairngorm. Adobe have a Flex developer centre for tutorials, articles and code examples. To get more information on Flex 2 and to download the latest beta visit Adobe Labs.

Editor's Picks

Free Newsletters, In your Inbox