Flex and JavascriptAdrian 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 a s i n format ion 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.