Ajaxify Your Flex Application

Flash applications embedded in web page containers usually run in isolation, with the web pages little more than dumb containers. This article will demonstrate how to leverage the ActionScript external interface to enable bidirectional communication between the two. Pay close attention so that you can complete the quiz at the end and be in the running to win a free copy of Adobe CS4 Web Premium and Flex Builder 3 Pro.

The term Rich Internet Application is still one of the current buzzwords of web development. Various vendors have thrown their hat into the ring and provided their own flavor of RIA development; it fails to surprise us that Adobe's Flash Platform is one of the most interesting among those. The core element of the Flash Platform is obviously its virtual machine, also known as the Flash Player. The most common development technologies leveraging that runtime are Adobe's Flash Authoring Environment, Flex Builder, and the open source Flex SDK—both the latter comprising the Flex framework.

Flash and Flex are very cool technologies—particularly when you look outside the boundaries of the browser and think about running your Flash-based RIAs in AIR on the user's desktop. Yet the Flash platform is only one technology people nowadays use out there in the wonderful world of the Web, so, in this tutorial, we're going to look at some of the different ways a Flex-based application running in the Flash Player can communicate with the outside world.

Technical Requirements

A lot of the content we're covering here is valid for both Flash and Flex, because we're actually talking about the features and API of the Flash Player. All the examples in this tutorial use Flex 3, so you might want to start running either the open source Flex 3 SDK or Flex Builder 3.

From here on I'll use the term Flex application as a synonym for an .swf file-based application created with either Flash or Flex. It should be fairly simple for you to transfer the information provided here into using the Flash Authoring environment. If you wish to explore this further, you'd benefit from using Flash CS3 or CS4. From a Flash Player point of view, the example code should work fine in Flash Player versions 9 and 10.

In general, an .swf-based application in combination with the Flash Player is executed in an environment known as a "container application." Let's start by having a closer look at the most common environment for your Flex application: a web page container (sometimes called "HTML wrapper"). Besides using the common web page container environment, the Flash Player offers some other deployment options; I'll provide a few references for following these up towards the end of the tutorial.

The HTML Wrapper

Most readers will probably be familiar with the structure of a web page and the general concepts of embedding Flex applications in such an environment. However, it can become a bit tricky when you start trying to ensure that your Flex application works in every browser, and triggering an automated update of the user's Flash Player if necessary. Applications that have been created with Flash CS 3 and 4, and Flex 2 and 3 need to be executed in a Flash Player of at least version 9. (This is so your application can use the new virtual machine and properly support ActionScript 3, as well as a few other cool things).

The easiest way to start is to use an established template that already has code to properly embed a Flex application into your web page. A Flex Builder 3 project comes with an HTML template, providing a good starting point. The image below shows the folder structure of such a project. The folder html-template holds template files that are customized and populated with your project settings for the HTML environment on compilation of your Flex application; the resulting compiled files are located in the folder bin-debug. It’s important to understand that any changes made to files in bin-debug are overwritten when you recompile your project; therefore, changes should only be made to files in the html-template folder.

Keeping that in mind, I'd like to explain the most important parts of a HTML wrapper. Basically the HTML wrapper page uses a JavaScript library (AC_OETags.js, imported at the top of the page) to find out which version of the Flash Player is actually available on the browser client. It will then, depending on the results, either execute the Flex application or initiate a smart upgrade of the Flash Player. However, if the Flash Player has yet to be installed or the available Flash Player is older than version 6.0.65, the JavaScript library will then display alternative HTML content. Further down on the HTML page, you'll additionally find a <noscript> section with <object> and <embed> tags; this will be executed if JavaScript is unavailable, or disabled on a client.

Let’s take a closer look at the call to the AC_FL_RunContent function and the <object> tag that appears further down:

AC_FL_RunContent(
 "src", "FlexAndJS",
 "width", "100%",
 "height", "100%",
 "align", "middle",
 "id", "FlexAndJS",
 "quality", "high",
 "bgcolor", "#869ca7",
 "name", "FlexAndJS",
 "allowScriptAccess","sameDomain",
 "type", "application/x-shockwave-flash",
 "pluginspage", "http://www.adobe.com/go/getflashplayer"
);
...
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="FlexAndJS" width="100%" height="100%"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
 <param name="movie" value="FlexAndJS.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#869ca7" />
 <param name="allowScriptAccess" value="sameDomain" />
 <embed src="FlexAndJS.swf" quality="high" bgcolor="#869ca7"
     width="100%" height="100%" name="FlexAndJS" align="middle"
     play="true" loop="false" quality="high" allowScriptAccess="sameDomain"
     type="application/x-shockwave-flash"
     pluginspage="http://www.adobe.com/go/getflashplayer">
 </embed>
</object>

Passing Data into a Flex Application Using FlashVars

Let's return to the original topic of this tutorial. We wanted to make our Flex application communicate with the HTML wrapper. The easiest way to do so is to use an approach called FlashVars. FlashVars is a very similar concept to sending data as HTTP GET parameters from page to page; effectively we're passing key/value-pairs of data to the Flex application.

To do so, we need to add a FlashVars attribute to our two locations in the HTML. The value of the FlashVars attribute would be a URL-encoded list of parameter pairs, as in: name=kai&site=ventego-creative.co.nz&... and so on. Embedding this into the code example from above will achieve the following result:

AC_FL_RunContent(
 "src", "FlexAndJS",
 ...
 "FlashVars", "name=kai&site=ventego-creative.co.nz");
...
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="FlexAndJS" width="100%" height="100%"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
 <param name="movie" value="FlexAndJS.swf" />
 ...
 <param name="FlashVars" value="name=kai&site=ventego-creative.co.nz" />

 <embed src="FlexAndJS.swf" quality="high" bgcolor="#869ca7"
     ...
     FlashVars="name=kai&site=ventego-creative.co.nz">
 </embed>
</object>

FlashVars data can be easily used in the Flex application by referring to the parameters object in Application.application. For example, to retrieve the content of the variable site that has been passed in via FlashVars, you'd use a snippet similar to the example below in the ActionScript part of your Flex application:

public var theSite:String = Application.application.parameters.site;

Obviously this means of communication between the wrapper and the Flex application is quite inflexible (you're limited to serialized, flat data in key/value-pairs) and fails to provide a two-way communication. Still, FlashVars are quite often used when the application requires (non-critical) data to be passed in at start time.