A hands on session where you will learn how to work with the Flex Ajax Bridge and create Flex applications from the safety of JavaScript. " Why would I want to do this," you say. Well your boss just explained that you need to integrate Flex into a legacy application and the developers supporting the application only know JavaScript. Uh oh, well never fear this is where the Flex Ajax Bridge comes into play. Basic JavaScript knowledge is required and familiarity with Flex is recommended.

1. Flex and Javascript
Adrian Pomilio

2. 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.

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

4. 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

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

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

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

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

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

14. 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

15. 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

16. 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.