• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    dgassnerFlexAjax360Flex.ppt dgassnerFlexAjax360Flex.ppt Presentation Transcript

    • Exploring the Flex AJAX Bridge David Gassner Bardo Technical Services Seattle, WA
    • What is the Flex AJAX Bridge?
      • New technology included with:
        • LiveCycle Data Services 2.5 (formerly known as Flex Data Services)
          • http://www.adobe.com/products/ livecycle/dataservices/
        • Flex Builder 3.0 Public Beta
          • http://labs.adobe.com/technologies/ flex/flexbuilder3/
    • What is it for?
      • The Flex AJAX Bridge enables communication between browser-hosted JavaScript and Flex 2 applications
      • The browser's JavaScript code can control objects, call methods and set properties in the Flex application
      • Data objects can be passed between the 2 runtime environments
    • What's in the Bridge?
      • The Flex AJAX Bridge consists of two (2) complimentary code libraries:
        • FABridge.js – a browser-side JavaScript function library
        • FABridge.as – an ActionScript 3 class for inclusion in a Flex 2 application
      • To find it in LCDS:
          • C:lcds esourcesFABridge*
      • To find it in Flex Builder 3 public beta*:
          • C:Program FilesAdobeFlex Builder 3 sdksmoxieframeworksjavascriptfabridge
      * Windows default standalone installation
    • What do I need?
      • Flex 2 SDK included in LCDS, OR Moxie SDK included with Flex Builder 3
      • Flash Player 9
      • A supported browser:
        • Microsoft Internet Explorer, Mozilla Firefox, or Opera with JavaScript enabled
      • And, of course:
      • The Flex AJAX Bridge files
        • FABridge.as and FABridge.js
    • What do I do?
      • Here are the programming steps:
        • Incorporate the Bridge into your Flex application
        • Compile the Flex application
        • Include the JavaScript library into the HTML page
        • Incorporate the Flex application into the HTML page
        • Get a reference to the Flex application from JavaScript
        • Call methods and set properties on Flex objects from JavaScript
    • Incorporate the Bridge into Flex with MXML
      • Add the FABridge.as file to your Flex project
      • Instantiate the bridge object with an MXML declaration:
        • <fab:FABridge xmlns:fab=&quot;bridge.*&quot; />
      • Note : The Bridge object does not need a unique id when instantiated with MXML
    • Incorporate the Bridge into Flex with ActionScript
      • package {
      • import flash.display.MovieClip;
      • import bridge.FABridge;
      • public class EmptySwf extends MovieClip {
      • private var externalBridge:FABridge;
      • public function EmptySwf() {
      • super();
      • externalBridge = new FABridge();
      • externalBridge.rootObject = this;
      • }
      • }
      • }
    • Compile the Flex application
      • The Flex application is compiled into a .swf file as usual
    • Include the Browser JavaScript library
      • Include the Bridge JavaScript library in your HTML page with standard <script> syntax:
        • <script src=&quot;bridge/FABridge.js&quot; ></script>
    • Incorporate the compiled Flex application into the HTML page
      • To add the Bridge using JavaScript code, set a flashvars variable of 'bridgeName' as part of the SWF nesting code:
      • <script language='javascript' charset='utf-8'>
      • document.write(&quot;<object id='flexApp' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0' height='400' width='400'>&quot;);
      • document.write(&quot; <param name='flashvars' value='bridgeName=example'/> &quot;);
      • document.write(&quot;<param name='src' value='EmptySwf.swf'/>&quot;);
      • document.write(&quot;<embed name='flexApp' pluginspage='http://www.macromedia.com/go/getflashplayer' src='EmptySwf.swf' height='400' width='400' flashvars='bridgeName=example' />&quot;);
      • document.write(&quot;</object>&quot;);
      • </script>
    • Get a reference to the Flex application in JavaScript
      • To get a reference to the Flex application:
      • var flexApp = FABridge.example.root();
      • Where 'example' is the value of the bridgeName variable passed in FlashVars to the .swf file
    • Controlling the Flex application
      • Anything Flex can do, JavaScript can do too!
      • var flexApp = FABridge.example.root();
      • var spr = FABridge.example.create(&quot;flash.display.Sprite&quot;);
      • var g = spr.getGraphics();
      • g.beginFill(0xFF0000);
      • g.lineStyle(2,2);
      • g.drawRect(-100,-100,200,200);
      • g.endFill();
      • flexApp.addChild(spr);
      • spr.setX(300);
      • spr.setY(300);
    • Getting references to Flex objects
      • Use the Flex object's id and prepend 'get' notation to get a reference to the object:
      • Flex code:
        • <mx:Button id=&quot;button&quot; label=&quot;Listen to me from JavaScript&quot; />
      • JavaScript code:
        • var flexApp = FABridge.example.root();
        • var flexButton = flexApp.getButton();
    • Getting and setting Flex object properties
      • Flex Code:
      • <mx:CheckBox x=&quot;49&quot; y=&quot;34&quot;
      • label=&quot;Checkbox&quot; id=&quot;check&quot;
      • selected=&quot;true&quot;/>
      • JavaScript code to toggle the current state of the CheckBox:
        • var flexApp = FABridge.example.root();
        • var currentCheckValue = flexApp.getCheck().getSelected();
        • flexApp.getCheck().setSelected( ! currentCheckValue )
    • Calling Flex functions
      • Flex Code:
      • public function testFunc( val1:String=&quot;default&quot;):void
      • {
      • Alert.show(val1, &quot;called remotely&quot;);
      • }
      • JavaScript code to call a Flex custom function:
        • var flexApp = FABridge.example.root();
        • flexApp.testFunc( &quot;Hello, Actionscript World! Love, JavaScript…&quot; );
    • Creating JavaScript event listeners
      • Create a listener function in JavaScript that reacts to Flex events:
        • var callback = function() {
        • alert(&quot;Hello to Javascript from Flex!&quot;);
        • }
        • flexApp.getButton().addEventListener( &quot;click&quot;, callback);
      • When the user clicks the Flex button, the JavaScript function executes
    • Using AJAX Data Services
      • AJAX Data Services integrates the Flex AJAX Bridge with LiveCycle Data Services' Data Management Service
      • AJAX-style applications share data concurrently with Flex applications through LiveCycle Data Services
    • Multiple Clients, One Server LiveCycle Data Services Database Flex Spry Dojo
    • Any AJAX Framework can be used
      • The HTML document incorporates an invisible Flex application
      • The Flex application communicates with LCDS and controls the AJAX environment
      • The Inventory sample application demonstrates integration of:
        • LiveCycle Data Services with live data
        • Flex Application with DataService client
        • Adobe's Spry framework client
        • Dojo framework client (http://dojotoolkit.org/)
    • Demo: The Inventory Application
    • Get the Inventory Application
      • The Inventory sample application is described in the LCDS documentation, but not included in the installation of the server
      • Download the Inventory application and other demonstration files from:
        • http://www.bardotech.com/resources/360flex
    • Thanks!
      • David Gassner
      • Bardo Technical Services
      • Adobe Certified Training, Seattle, WA
      • http://www.bardotech.com
      • [email_address]