dgassnerFlexAjax360F lex

Exploring the Flex AJAX Bridge: 

Exploring the Flex AJAX Bridge David Gassner Bardo Technical Services Seattle, WA

What is the Flex AJAX Bridge?: 

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?: 

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?: 

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\resources\FABridge* To find it in Flex Builder 3 public beta*: C:\Program Files\Adobe\Flex Builder 3\ sdks\moxie\frameworks\javascript\fabridge * Windows default standalone installation

What do I need?: 

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?: 

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 Flexwith MXML: 

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="bridge.*" /> Note: The Bridge object does not need a unique id when instantiated with MXML

Incorporate the Bridge into Flex with ActionScript: 

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: 

Compile the Flex application The Flex application is compiled into a .swf file as usual

Include the Browser JavaScript library: 

Include the Browser JavaScript library Include the Bridge JavaScript library in your HTML page with standard <script> syntax: <script src="bridge/FABridge.js" ></script>

Incorporate the compiled Flex application into the HTML page: 

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("<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'>"); document.write("<param name='flashvars' value='bridgeName=example'/>"); document.write("<param name='src' value='EmptySwf.swf'/>"); document.write("<embed name='flexApp' pluginspage='http://www.macromedia.com/go/getflashplayer' src='EmptySwf.swf' height='400' width='400' flashvars='bridgeName=example'/>"); document.write("</object>"); </script>

Get a reference to the Flex application in JavaScript: 

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: 

Controlling the Flex application Anything Flex can do, JavaScript can do too! var flexApp = FABridge.example.root(); var spr = FABridge.example.create("flash.display.Sprite"); 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

Getting references to Flex objects: 

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="button" label="Listen to me from JavaScript" /> JavaScript code: var flexApp = FABridge.example.root(); var flexButton = flexApp.getButton();

Getting and setting Flex object properties: 

Getting and setting Flex object properties Flex Code: <mx:CheckBox x="49" y="34" label="Checkbox" id="check" selected="true"/> 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: 

Calling Flex functions Flex Code: public function testFunc( val1:String="default"):void { Alert.show(val1, "called remotely"); } JavaScript code to call a Flex custom function: var flexApp = FABridge.example.root(); flexApp.testFunc( "Hello, Actionscript World! Love, JavaScript…" );

Creating JavaScript event listeners: 

Creating JavaScript event listeners Create a listener function in JavaScript that reacts to Flex events: var callback = function() { alert("Hello to Javascript from Flex!"); } flexApp.getButton().addEventListener( "click", callback); When the user clicks the Flex button, the JavaScript function executes

Using AJAX Data Services: 

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: 

Multiple Clients, One Server LiveCycle Data Services Database

Any AJAX Framework can be used: 

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: 

Demo: The Inventory Application

Get 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!: 

Thanks! David Gassner Bardo Technical Services Adobe Certified Training, Seattle, WA http://www.bardotech.com david@bardotech.com