Your SlideShare is downloading. ×
dgassnerFlexAjax360Flex.ppt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

dgassnerFlexAjax360Flex.ppt

624

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
624
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Exploring the Flex AJAX Bridge David Gassner Bardo Technical Services Seattle, WA
  • 2. 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/
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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;
    • }
    • }
    • }
  • 9. Compile the Flex application
    • The Flex application is compiled into a .swf file as usual
  • 10. 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>
  • 11. 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>
  • 12. 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
  • 13. 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);
    SimpleSample.html
  • 14. 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();
  • 15. 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 )
  • 16. 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; );
  • 17. 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
  • 18. 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
  • 19. Multiple Clients, One Server LiveCycle Data Services Database Flex Spry Dojo
  • 20. 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/)
  • 21. Demo: The Inventory Application
  • 22. 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
  • 23. Thanks!
    • David Gassner
    • Bardo Technical Services
    • Adobe Certified Training, Seattle, WA
    • http://www.bardotech.com
    • [email_address]

×