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.
