Adobe Flex 3 Help

Integrating with the Flex Ajax Bridge

To use the FABridge library in your own Flex and Ajax applications, you can use the Create Ajax Bridge feature in Adobe® Flex® Builder™ or complete the following manual steps:

  1. Add the src folder to the ActionScript classpath of your Flex application.
  2. If you are compiling from the command line, add the src folder to your application by specifying the --actionscript-classpath compiler option.
  3. Add the following tag to your application file:
    <mx:Application �?�>
        <fab:FABridge xmlns:fab="bridge.*" />
    ...
    
    

Use the following code to access your application instance from JavaScript:

function useBridge()

 {
 var flexApp = FABridge.flash.root();
 }

To get the value of a property, call it like a function, as the following example shows:

function getMaxPrice() 
 {
 var flexApp = FABridge.flash.root();
 var appWidth = flexApp.getWidth();
 var maxPrice = flexApp.getMaxPriceSlider().getValue();
 }

To set the value of a property from JavaScript, call the setPropertyName() function, as the following example shows:

function setMaxPrice(newMaxPrice) 
 {
 var flexApp = FABridge.flash.root();
 flexApp.getMaxPriceSlider().setValue(newMaxPrice);
 }

You call object methods directly, just as you would from ActionScript, as the following example shows:

function setMaxPrice(newMaxPrice) 
 {
 var flexApp = FABridge.flash.root();
 flexApp.getShoppingCart().addItem("Antique Figurine", 12.99);
 }

You also pass functions, such as event handlers, from JavaScript to ActionScript, as the following example shows:

function listenToMaxPrice() 
 {
 var flexApp = FABridge.flash.root();
 var maxPriceCallback = function(event)
 {
 document.maxPrice = event.getNewValue();
 document.loadFilteredProducts(document.minPrice, document.maxPrice);
 }
 flexApp.getMaxPriceSlider().addEventListener("change", maxPriceCallback);
 }

To run initialization code on a Flex file, you must wait for it to download and initialize first. Register a callback to be invoked when the movie is initialized, as the following example shows:

function initMaxPrice(maxPrice)
 {
 var initCallback = function()
 {
 var flexApp = FABridge.flash.root();
 flexApp.getMaxPriceSlider().setValue(maxPrice);
 }
 FABridge.addInitializationCallback("flash",initCallback);
 } 

To script multiple applications on the same page, give them unique bridge names through the flashvars mechanism. Use the bridge name to access them from the bridge, and to register for initialization callbacks, as the following example shows:

<object ...>
 <param name='flashvars' value='bridgeName=shoppingPanel'/>
 <param name='src' value='app.swf'/>
 <embed ... flashvars='bridgeName=shoppingPanel'/>
 </object>
function initMaxPrice(maxPrice)
 {
 var initCallback = function()
 {
 var flexApp = FABridge.shoppingPanel.root();
 flexApp.getMaxPriceSlider().setValue(maxPrice);
 }
 FABridge.addInitializationCallback("shoppingPanel",initCallback);
 }

Automatic memory management

The FABridge provides automatic memory management that uses a reference counting mechanism for all objects that are passed across the bridge. Objects created from the JavaScript side are kept in memory unless the memory is manually released. Events and other ActionScript-initiated objects are destroyed as soon as the corresponding JavaScript function that handles them directly completes its execution. You manually call the addRef() method for an object to have it remain available, or call the release() method to decrease its reference counter.

If you must break the function call chain by using the setTimeout() function in JavaScript, (for example to act on an event later on, as the following example shows), you must ensure that the event will still exist. Because the FABridge implements a reference counting mechanism to save memory, events thrown from ActionScript exist only for the duration of the dispatch function.

var flexApp = FABridge.flash.root();
flexApp.getMaxPriceSlider().addEventListener("change", maxPriceCallback );
function maxPriceCallback(event) {
//when the doSomethingLater function is hit, the event is no longer
     //available;
//to make it work you would have to call
//FABridge.addRef(event);
//then, when you're done with it, call FABridge.release(event);
setTimeout(function() {doSomethingLater(event);},10);
}

Manually destroying objects

You can manually destroy a specific object that has been passed across the bridge, regardless of its reference count by invoking the releaseNamedASObject(myObject) method from JavaScript. This invalidates the object over the bridge and any future calls to it or one of its methods will throw an error.

Handling exceptions

Exceptions that take place in the ActionScript of the bridge as a direct consequence of some JavaScript action are now thrown over the bridge into JavaScript. The mechanism works as follows:

  • When an exception is raised in the ActionScript section, it is caught in a try-catch block, serialized, and passed to JavaScript.
  • When the JavaScript part receives an answer from ActionScript, it checks for the exception serialization and, if found, throws a JavaScript error with the message received from ActionScript.

Note: To catch and use the exception information, you must surround the code that calls into ActionScript with a try-catch block. You can handle the error in the catch(e) block.

Limitations of the Flex Ajax Bridge

The FABridge library has been tested on Mozilla Firefox 2 (Windows and Linux), Microsoft Internet Explorer 6, Opera 9, and Apple Safari 2.0.4.

Exceptions thrown across the bridge into JavaScript depend on the user having installed Flash Debug Player to display the entire error description. Otherwise, only the error ID is thrown.

For performance reasons, when an anonymous object is sent from ActionScript to JavaScript, the bridge assumes it contains only primitives, arrays, and other anonymous objects, and no strongly typed objects or methods. Instances or methods sent as part of an anonymous object are not bridged correctly.