Adobe flexes its muscle with Flex2

New version could merge applications and websites, says Chris Reynolds

Adobe hopes that Flex2 will revolutionise the way people interact with the web. At the moment, most people, including IT professionals, are inclined to think of a website as one thing and a software application as another. Flex2 has the potential to merge the two fields of endeavour, so that software applications are deployed from a web server and run inside a browser.

Unlike Macromedia before them, Adobe has recognised that if Flex is going to successfully compete with Ajax libraries and the forthcoming Microsoft XAML release, it needs to gain significant mind-share as soon as possible. As such, it comes in various flavours from the free version to fairly expensive (in NZ terms).

This is the third major iteration of Flex and so the technology is now well structured, reliable and fast. Also, Flex Builder2 is sensibly licensed per seat so that it is no longer a corporate toy.

The Flex2 documentation set is very extensive; it is split into seven volumes and much of it is in both HTML and PDF format. As PDF documents the information runs to over 3,000 pages, although the ‘Getting Started’ manual is only 240 pages and probably the only one worth printing out, sitting down and reading from cover to cover.

What is Flex?

First, what is the Flex technology? At its core, it is a rich set of library widgets that can be invoked with a mark-up language MXML (minimal XML) with events that can execute Actionscript commands. These can be compiled with a command-line compiler, to create a SWF file that can be downloaded and run in any browser (rather like HTML really).

The profound difference here is that you are not restricted to the puny HTML widget set and ActionScript is a real programmer’s language that runs the same on all browsers that have a Flash plugin. Furthermore, this part of the technology is free. You can download the SDK from the web, print out a few PDF files, fire up Notepad and you’re away.

Memorising 3,000 pages of documentation is beyond me, so I prefer a real IDE with context-sensitive help and keyword prompting. This is called Flex Builder2 and it is based on the Eclipse platform. It can be installed stand-alone or as part of an existing Eclipse installation. See Figure 1 for a view of Flex Builder2.

As with all modern development environments, 1280 x 1024 is really the working minimum screen size.

Note in the top right hand corner, the States panel. This allows you to design alternate views for effectively the same data in a different state. So for instance, the cart viewer shown could have a different view state once the order is placed.

There are three aspects to this technology that I find particularly impressive: its deployment reach, the integration of MXML with programming code and the variable binding.

When it comes to reach, in the usual conflict between richness of application and ease of deployment, Flex seems to stand alone in being an excellent development platform that provides more client richness than you normally need and more platform portability than you normally require.

There does still seem to be a gap down at the bottom-end of the market with no support yet on the Flash Lite engine for Flex2 applications, so if the target market is smart phones then Flex2 is probably not the right tool. The UI support libraries are also fairly chunky, varying between about 100kB and 800kB depending on the variety of UI widgets, so anyone wishing to deploy Flex2 applications over dial-up connections will need to put some effort into smart caching and shared libraries.

Extending MXML

The integration between MXML and ActionScript code is also very smooth, so it is easy for a developer to move between code and MXML without thinking too hard. For instance, you can extend the standard TextInput widget with this code:

Public class MyTextInput extends TextInput {

public function MyTextInput {

….constructor

}

}

and then refer to the widget in part of a screen layout as follows:

<mx:Form …>

….

<MyTextInput text=”my own textbox” />

</mx:Form>

This ability to move smoothly between MXML and ActionScript code is a real strength of Flex, but may prove a challenge while developers are coming up to speed with the language. In doing large scale development in Flex, it is considered best-practice to keep code files and MXML files distinct, for the convenience and sanity of web designers.

Unfortunately, the sample applications that ship with Flex2 are written by developers for developers and make no attempt at code separation. Therefore, anyone embarking on large scale Flex development would do well to read up on the Cairngorm framework that is provided free by Adobe.

Another area of elegance is the concept of binding. In many languages that support rapid application development, it is common to have bound and unbound widgets, where the bound widgets are tied to the current properties of a database record-set.

This is the main reason why developers can knock up little applications in VB, MS-Access and Delphi so quickly. As Flex can’t access a database directly from the browser, the concept of data-bound widgets would seem inappropriate.

However, almost any variable can be bound to almost any control. The example below causes the label on a button to be incremented each time it is clicked.

<mx:Script>

[Bindable]

var myCounter:Number=0;

</mx:Script>

<mx:Button label=”{myCounter}” onclick=”myCounter++” />

The magic is in the curly brackets, which tell the button’s label to watch the myCounter variable for changes. In the background, the compiler is doing all the addListener/removeListener logic that is so time-consuming and tedious in languages such as Java and C#. Because the syntax is so clean, it seems to be easier to conceive of cascading event scenarios that would otherwise be hard work and potentially unreliable.

Once you link this with the Flex concept of a model (that is, a structured bit of data) that can be a payload for data going up and down to the web server, we appear to have all the convenience and succinctness of bound controls without their constraints.

Flex2 is a dramatic improvement on Flex1.5, but this has the unfortunate side-effect that migration can be a somewhat painful experience. As ActionScript moves away from its early Javascript roots, towards a strongly typed Java-like language, it can cause some pain to early adopters.

CSS

To encourage the use of CSS, Adobe has included a sample application called the Style Explorer. This is an interactive application that allows the developer/designer to develop his or her own house style visually and generates the CSS to provide the desired effect.

In figure 2 below, the left-hand panel is for the user to try alternatives, the centre panel shows the visual effect and the right-hand panel has the CSS, for cutting and pasting into a style sheet.

Data services

This product is a large and sometimes complex product and nowhere is this more evident than when it comes to the data services offering.

The free version of Flex2 can GET and POST data to the web with the best of them, either through web services or REST-style URLs. However, this does come with the overhead of producing and parsing XML, which is designed for human readability rather than machine efficiency.

For a price, Flex Data Services offer both publish and subscribe protocols, as well as efficient binary encoding of large datasets.

Summary

Adobe Flex2 is a large and impressive product that could have a significant effect on web development in the next few years. If I was choosing a tool to emabrk upon large-scale development for broadband users on the web, this would be right at the top of my short-list.

Join the newsletter!

Error: Please check your email address.

Tags flex2Development IDadobe

More about Adobe SystemsEclipseMacromediaMicrosoft

Show Comments
[]