Creating rich Web service clients with Flash and Flex

Of all the various browser accessories that enrich the Web browsing experience, surely the most powerful is the nearly ubiquitous Flash player. This browser plug-in first got serious attention as Macromedia Flash 1.0 in 1996 and major enhancements have been made at frequent intervals, with the current version being version 9. Macromedia merged with Adobe in late 2005 so the full name of the current plug-in is Adobe Flash Player 9.

The Flash player executes SWF (for ShockWave Flash) files which can be created by a variety of authoring techniques. SWF files contain graphic, layout and logic information, but applications can also load data and programs from networks or local file systems. Spectacular effects are achieved with little effort by the programmer.

Being restricted to the browser plug-in environment limits the possible applications for a rich Internet application (RIA). Recognizing this, Adobe is working on a stand alone desktop application environment called the Adobe Integrated Runtime or AIR, previously code-named Apollo.

The Flex language

Adobe Flex provides for XML formatted definition of Flash Player user interfaces in files with the .MXML file type. Control over component layout uses concepts such as "grid" layouts that will be familiar to Java programmers. Reasonable defaults are defined that let you get started with something that works and refine the layout later.

MXML files, which can be created by any text editor or a specialized IDE are processed by the Flex compiler into SWF files which can be executed by the Flash player. A free compiler is provided in the Flex Software Development Kit (SDK) along with plenty of samples which showcase Flash interface capabilities.

In contrast with the Flex 1.0 release, licensing terms for the Flex 2.0 SDK remove all requirements for using a Macromedia server to serve SWF files. Naturally, Adobe would love to sell you the Flex Builder IDE, but you can experiment freely and show off your Flash creations without spending any money.

It is anticipated that the Flex SDK will shortly be released as open-source under Mozilla Public License. This is a commercial use friendly license reflecting Adobe's desire to create vibrant Flex developer community. The first open-source release will be named Flex 3, currently in beta testing and anticipating release in the fall.

Scripting Flex applications

Handling user events, logic and data in Flash Player is accomplished with ActionScript, a scripting style language based on the ECMA-262 international standard which is also the base for JavaScript. Although nominally a "scripting" language, ActionScript packaged into a Flash application is compiled into a bytecode which is executed by a virtual machine, just like Java and .NET. ActionScript functions can communicate with JavaScript programs hosted in the same Web page.

The latest version, ActionScript 3.0, released in June 2006 with Flex 2 and Flash Player 9, was a major rewrite with vastly increased capabilities. ActionScript 3.0 implements the ECMAScript for XML (E4X) standard ECMA-357 for processing XML as a built in datatype, thus facillitating Ajax style dynamic data fetching and dealing with Web services.

ActionScript 3 uses compilation to a new bytecode scheme, which is incompatible with all previous versions, so the current Flash Player plug-in actually contains 2 virtual machines to work with previous scripts as well as the latest. For higher performance, ActionScript 3 uses "just in time" (JIT) compilation of bytecodes to cpu-specific machine codes.

A simple Flex example

Now lets look at a simple Flex script for a Flash application. A script must be a complete XML document with a mx:Application tag as the root element. In this example, all of the interface components are contained inside a plain "mx:Panel" tag. Note that the mx:Button tag specifies a "click" attribute that has the value "news.send()" which defines the event handler called when the button is clicked. ActionScript follows the W3C DOM level 3 event naming convention so the event is "click" rather than "onclick".

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" >

 <mx:Panel id="holder"  width="500" height="500" >
  <mx:Label id="title" fontSize="14" fontStyle="bold" 
        text="Click for current news" />
  <mx:Button id="reload" label="Reload" width="200" 
        click="news.send()" />
  <mx:TextArea id = "mainTxt" width="100%" height="400" >   
     <mx:htmlText> <![CDATA[Ready]]></mx:htmlText>
  </mx:TextArea>   
 </mx:Panel>
 
 <mx:HTTPService id="news" method="GET" 
       url="http://www.wbrogdenx.com/news.html" 
       resultFormat="text"
       result="newsResultHandler(event);"
       fault="newsFaultHandler(event);"  />
       
 <mx:Script>
   <![CDATA[
     import mx.rpc.events.FaultEvent;
     import mx.rpc.events.ResultEvent;
     public function newsResultHandler( event:ResultEvent) : void
     { mainTxt.htmlText = event.result as String ; 
     }
     
     public function newsFaultHandler( event:FaultEvent ) : void 
     { mainTxt.text = event.fault.message ;
     }
   ]]>
 </mx:Script>
 
</mx:Application>

The mx:HTTPService tag sets up the code to send a request to the specified URL and defines how the returned data is to be treated, in this case as plain text. If the ResultFormat was "e4x" the result would be XML. The process of actually sending a request and getting a result only occurs when the implied send() method is invoked by a mouse click on the mx:Button. This process terminates with either a call to the normal result handling method or the fault handling method. Flex provides other types of remote service access, I chose this example because it is the simplest to explain.

The ActionScript functions are contained inside the mx:Script tag pair, using CDATA so that special characters such as < can be used without disturbing the XML parsing. You can also import external ActionScript files.

Flex applications may be precompiled as SWF files and served to Flash Player directly or dynamically compiled and assembled by specialized servers. Creating a rich Internet application by embedding Flash Player in HTML is not all that simple. As with so many other browser incompatibilities, there are differences between Microsoft IE and browsers such as Netscape. Browser security settings may interfere with the operation of JavaScript and ActionScript.

The RIA competition

As discussed in my previous article, Sun's JavaFX scripting language is intended to bring the highly flexible and customizable "Swing" component library into the RIA arena. JavaFX has a much larger library of Java functions to draw on when necessary, but Flex excels at spectacular user interface effects.

In April of this year, Microsoft introduced a browser plug-in, "Silverlight" clearly intended to compete with the Flash Player. Silverlight player 1.0 is currently available for Windows and Mac browsers. Since Microsoft can ensure that new computers have Silverlight installed and updated automatically it will eventually become widely distributed.

Resources

The starting point for downloading the Flex 2 SDK.

Track the progress of the open-source Flex 3 beta release and related Adobe projects.

This Wikipedia article is an excellent summary of the development of ActionScript.