Integrating Flex with Ajax applications

Traditional Ajax development is still the most important way to implement a rich Internet application (RIA). However, the popularity of Adobe®flex can not be neglected. This article describes Adobe Flex Ajax Bridge (FABridge), a code base that allows you to integrate Ajax and Flex content in a relaxed and consistent way. After reading this article, you will be able to take advantage of the rich functionality gained through Flash resources.

Building Ajax applications has proven to be a consistent way to provide excellent applications. However, the popularity of Adobe Flex cannot be overlooked. As we strive to achieve the best user experience, we often face a difficult task: integrating the Flash-based resources embedded in Ajax applications. This article discusses how to use FABridge to integrate Flash content with existing Ajax content, FABridge is a code base developed by Adobe to handle this particular task.

As an AJAX developer, it's a special moment. We are always on the frontline, ready to cater to our users and make them the best first impressions of the applications we build. As WEB standards evolve and more and more vendors decide to enforce these standards, our work becomes more and more relaxed, allowing us to focus on the user experience. Further advances in JavaScript frameworks such as Ext JS, jquery, and Prototype also make it very rare to worry about whether code can work across a platform that requires support, so there is more time to innovate.

While there are indeed more tools, technologies, and resources that we can use today, the development approach that drives flash development is changing. For many studios, the development process will involve a user interface (UI) group that enables the design of applications that are built on the server side. Using the existing JavaScript framework, we are moving toward client application development. However, the presence of the Flex platform-the free Open-source framework for generating Flash applications-will further introduce us to the arena of application development. This kind of innovation brings us the benefit of the client, but must ensure that its integration with the current architecture is fully and carefully handled.

Before introducing code samples that show how to use Ajax and flex resources, you must understand the necessary tools and techniques:

I used the Ext JS JavaScript Coussen as the Ajax sample in this article, so I need to download the. zip file containing the libraries and supporting documents.

Next, get the Adobe Flex 3 SDK with debugging capabilities and the Adobe Flash Player 9 free copy (if you haven't yet).

While this article does not require it, you need to at least look at the beta version of Adobe Flex Builder 3, an Eclipse based IDE that allows you to quickly Flex application development in addition to advanced debugging and analysis (see Resources).

Finally, it is helpful to understand the work knowledge of PHP.

Integration issues

If you expect to replace all Ajax content with Flex resources, your task will be simpler. However, this is an unlikely and often impractical approach, since traditional AJAX features are often required to be preserved. Fortunately, you can leverage the benefits of both environments to build rich, integrated applications.

There are a number of simple ways to pass data from the Flash container (html/javascript code) to your ActionScript code, including using query strings and <param> tags. However, this method is limited to passing data into the container. A more powerful technique is to use the Externalinterface class, an application programming interface (API) that is used to broker the communication between ActionScript and the JavaScript language. The example in Listing 1 best illustrates the use of Externalinterface:

Listing 1. Externalinterface sample

// ActionScript code
function exposed():String
{
　 return "Hello, JavaScript!";
}
ExternalInterface.addCallback( "getActionScript", exposed );
// HTML/JavaScript code
<script language="JavaScript">
var result = flashObject.getActionScript();
</script>
<object id="flashObject" ...>
　 <embed name="flashObject" ... />
</object>

Listing 1 shows how to register the ActionScript function using the Externalinterface class so that JavaScript code can call the function. You can do this by defining the ActionScript function first, and then using the Addcallback () method to expose the function to JavaScript to execute. At the HTML end, you simply get the handle to the Flash container and call the function, which is named using the first parameter of the Addcallback () method. While this demo is primarily about exposing functions to JavaScript code, you can use the call () method of the Externalinterface class in another way.

The Externalinterface class can be very powerful, but there are great drawbacks to implementing this class. To use Externalinterface, you must be able to write code to implement ActionScript and JavaScript environments. This not only requires additional skills, but also doubles the amount of work required. In this case, it may be difficult to maintain code and two very robust skill sets.

To address the development restrictions for Flash external APIs, Adobe released the FABridge. The Fabridge included with the Flex SDK is a small library for exposing Flash content to script browser scripts, and it can work on most major browser platforms. With FABridge, it is virtually no longer necessary to directly implement the piping code required for the Flash external API. In addition, the skills needed to implement bridging are no longer robust. As a JavaScript developer, you only need to be able to understand which ActionScript properties and methods are available. Let's start with some examples that demonstrate the FABridge feature.