Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Adrian Pomilio - Flex Ajax Bridge and Legacy Applications

•
•

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 of 16
Download to read offline
Flex and Javascript Adrian 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 as information 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.

More Related Content

Adrian Pomilio - Flex Ajax Bridge and Legacy Applications

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