Adrian Pomilio - Flex Ajax Bridge and Legacy Applications
-
Upload
360conferences -
Category
Technology
-
view
2.038 -
download
0
description
Transcript of Adrian Pomilio - Flex Ajax Bridge and Legacy Applications
![Page 1: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/1.jpg)
Flex and JavascriptAdrian Pomilio
![Page 2: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/2.jpg)
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.
![Page 3: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/3.jpg)
Formalities
• Adrian Pomilio
• Web developer for 11+ years.
• Employed by Railinc
• Blog: http://www.uiandtherest.com
• 2+ years of Flex development
![Page 4: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/4.jpg)
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
![Page 5: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/5.jpg)
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.
![Page 6: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/6.jpg)
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.
![Page 7: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/7.jpg)
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.
![Page 8: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/8.jpg)
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.
![Page 9: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/9.jpg)
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.
![Page 10: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/10.jpg)
Getting Started
• Copy the code to your HTTP server
• Import the projects into Flex Builder
• Open FlexAjaxBridge_1 project
![Page 11: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/11.jpg)
FlexAjaxBridge_1
• Creating the bridge for the first time.
• Examining the files added by the bridge creation
• Setting up your run/debug settings
![Page 12: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/12.jpg)
FlexAjaxBridge_2
• Creating a simple interaction that creates a basic label field.
• Examine what is in the swf and in the html
![Page 13: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/13.jpg)
FlexAjaxBridge_3
• Create a Flex DataGrid instance through Javascript interaction with the swf
• Populate the Flex DataGrid with data from Javascript
![Page 14: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/14.jpg)
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
![Page 15: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/15.jpg)
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
![Page 16: Adrian Pomilio - Flex Ajax Bridge and Legacy Applications](https://reader034.fdocuments.in/reader034/viewer/2022052619/5553b7f7b4c905d9448b4e30/html5/thumbnails/16.jpg)
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.