Adrian Pomilio - Flex Ajax Bridge and Legacy Applications


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Adrian Pomilio - Flex Ajax Bridge and Legacy Applications

  1. 1. Flex and Javascript Adrian Pomilio
  2. 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. 3. Formalities • Adrian Pomilio • Web developer for 11+ years. • Employed by Railinc • Blog: • 2+ years of Flex development
  4. 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. 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. 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. 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. 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. 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. 10. Getting Started • Copy the code to your HTTP server • Import the projects into Flex Builder • Open FlexAjaxBridge_1 project
  11. 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. 12. FlexAjaxBridge_2 • Creating a simple interaction that creates a basic label field. • Examine what is in the swf and in the html
  13. 13. FlexAjaxBridge_3 • Create a Flex DataGrid instance through Javascript interaction with the swf • Populate the Flex DataGrid with data from Javascript
  14. 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. 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. 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.