Your SlideShare is downloading. ×
0
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
...
Formalities
•   Adrian Pomilio

•   Web developer for 11+ years.

•   Employed by Railinc

•   Blog: http://www.uiandthere...
Setup Information
•   You will need the following:

    •   Flex Builder

    •   An HTTP server (local or remote)

    • ...
Why use Javascript?
•   Javascript is the language of the web browser.

•   Not all in this world is Flash.

•   Legacy we...
Ways for Flex and Javascript to Talk
•   ExternalInterface class – allows for the ability to call
    Javascript from Acti...
ExternalInterface class

•   Limitations
    •   Requires the developer to write a library of code in both
        JavaScr...
Integrating with the ExternalInterface Class

•   You need to write corresponding ActionScript and JavaScript
    function...
Flex Ajax Bridge
•   When to use FABridge

    •   You want a Flex component/widget in an Ajax based application.

    •  ...
Getting Started

• Copy the code to your HTTP server
• Import the projects into Flex Builder
• Open FlexAjaxBridge_1 proje...
FlexAjaxBridge_1


• Creating the bridge for the first time.
• Examining the files added by the bridge
  creation
• Setting ...
FlexAjaxBridge_2


• Creating a simple interaction that creates a
  basic label field.
• Examine what is in the swf and in ...
FlexAjaxBridge_3


• Create a Flex DataGrid instance through
  Javascript interaction with the swf
• Populate the Flex Dat...
FlexAjaxBridge_4

• Create a Flex DataGrid instance
• Populate the Flex DataGrid
• Add an event listener to the DataGrid w...
FlexAjaxBridge_5


• Examine how Javascript can handle the
  dreaded ‘non 200 status code’ service
  response
• How to use...
Conclusion
•   Flex Ajax Bridge makes Flex component integration
    with legacy systems a breeze.

•   Flash isn’t the on...
Upcoming SlideShare
Loading in...5
×

Adrian Pomilio - Flex Ajax Bridge and Legacy Applications

2,051

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,051
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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: http://www.uiandtherest.com • 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×