Flex and Javascript
Adrian Pomilio

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

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.

Integrating with the ExternalInterface Class
You need to write corresponding ActionScript and JavaScript functions.
You use the ExternalInterface Class to communicate between Actionscript and Javascript by creating a one to one relationship between the ActionScript functions and the JavaScript functions.

What can ExternalInterface do?
Actionscript can call any javascript function
Javascript can call Actionscript functions
Receive and return a value from Javascript
Receive and return a value from Actionscript

ExternalInterface Details
Public Properties of Interest
available - used to check for availability of ExeternalInterface
marshalExceptions - used to pass Actionscript exceptions to Javascript and Javascript exceptions to Actionscript
Public Methods of Interest
addCallback - registers an Actionscript function as a callback from the container
call - calls a function and passes the arguments.

ExternalInterface 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.
Is not available in Adobe AIR (at this time)
Browser must support ActiveX or NPRuntime API

Flex Ajax Bridge
The Flex Ajax bridge is a small code library that you insert into your Flex application.
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.

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

Final Thoughts
Flex Ajax Bridge makes Flex component integration with legacy systems managable.
Flash isn’t the only solution.
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.
You want to get Flex in the door, don’t you?