Flex and Javascript
Adrian Pomilio

Summary
• This is a hands on code
walk through for integrating
Flex and Javascript. Focus
will be on the Flex Ajax
Bridge (FABridge), as well
as information about
ExternalInterface.

Formalities
• Adrian Pomilio
• Web developer for 11+ years.
• Employed by Railinc
• Blog: http://www.uiandtherest.com
• 2+ years of Flex development

Setup Information
• You will need the following:
• Flex Builder
• An HTTP server (local or remote)
• The code (found on your USB drive)
• Flash Player Debugger (ver 9x or 10x)
• Firefox with Firebug plugin

Why use Javascript?
• Javascript is the language of the web browser.
• Not all in this world is Flash.
• Legacy web application integration.
• Services and 3rd party APIs.
• Most development teams have Javascript knowledge.

Ways for Flex and Javascript to Talk
• ExternalInterface class – allows for the ability to call
Javascript from ActionScript.
• FA Bridge (Flex Ajax Bridge) – code library inserted
into an app, component, or empty swf to expose it to
Javascript.

ExternalInterface class
• Limitations
• Requires the developer to write a library of code in both
JavaScript and ActionScript.
• Can only pass primitive types, arrays, and simple
objects.
• User defined classes with associated properties and
methods are not allowed.

Integrating with the ExternalInterface Class
• You need to write corresponding ActionScript and JavaScript
functions.
• You use the ExternalInterface Class to communication to map the
ActionScript functions to the JavaScript functions.

Flex Ajax Bridge
• When to use FABridge
• You want a Flex component/widget in an Ajax based application.
• Your development team has stronger Javascript knowledge compared to
ActionScript.
• You need to get around certain ‘features’ of the Flash Player.

Getting Started
• Copy the code to your HTTP server
• Import the projects into Flex Builder
• Open FlexAjaxBridge_1 project

FlexAjaxBridge_1
• Creating the bridge for the first time.
• Examining the files added by the bridge
creation
• Setting up your run/debug settings

FlexAjaxBridge_2
• Creating a simple interaction that creates a
basic label field.
• Examine what is in the swf and in the html

FlexAjaxBridge_3
• Create a Flex DataGrid instance through
Javascript interaction with the swf
• Populate the Flex DataGrid with data from
Javascript

FlexAjaxBridge_4
• Create a Flex DataGrid instance
• Populate the Flex DataGrid
• Add an event listener to the DataGrid with
Javascript
• Item click action sends data back to
Javascript

FlexAjaxBridge_5
• Examine how Javascript can handle the
dreaded ‘non 200 status code’ service
response
• How to use Javascript to work around
‘pure’ REST service responses

Conclusion
• Flex Ajax Bridge makes Flex component integration
with legacy systems a breeze.
• Flash isn’t the only solution.
• You want to get Flex in the door, don’t you?
• Javascript is the language of the web browser, why fight it.
• Knowing how to use Javascript and Flex together is a
powerful client side problem solver.