Adobe Flex 3 Help

Automatically generating Flex Ajax Bridge code

You use the Create Ajax Bridge feature to generate JavaScript code and an HTML wrapper file that let you more easily use a Flex application from JavaScript in an HTML page. This feature works in conjunction with the Flex Ajax Bridge JavaScript library, which lets you expose a Flex application to scripting in the web browser. The generated JavaScript code is very lightweight, as it is intended to expose the functionality that the Flex Ajax Bridge already provides. For more information about the Flex Ajax Bridge, see Using the Flex Ajax Bridge in the Adobe Flex 3 Developer Guide. The sample Ajax Bridge application referenced in this topic is available in an importable Flex Builder project at http://learn.adobe.com/wiki/display/Flex/Download+Projects.

The Create Ajax Bridge feature generates JavaScript proxy code that is specific to the Flex application APIs that you want to call from JavaScript. You can generate code for any MXML application or ActionScript class in a Flex Builder project.

For MXML application files, you can generate code for any or all of the following items in the MXML code:

  • List of inherited elements, which can expand nonrecursively
  • Public properties, including tags with id properties
  • Public constants
  • Public functions, including classes defined in line

For ActionScript classes, you can generate code for any or all of the following items:

  • List of inherited elements
  • Public properties; for each property, a get and set method is displayed
  • Public constants
  • Public methods

In a directory that you specify, the Create Ajax Bridge feature generates *.js and *.html files that correspond to the MXML applications and ActionScript classes that you select for generation; it places a copy of the Flex Ajax Bridge library (fabridge.js) in a subdirectory of the code generation directory. This feature also generates MXML helper files in the project's src directory; these files are used to complete the JavaScript code generation.

Generating Ajax Bridge code

  1. Right-click a project in the Flex Navigator and select Create Ajax Bridge.
  2. In the Create Ajax Bridge dialog box, select the MXML applications and ActionScript classes for which you want to generate JavaScript code. You can select the top-level checkbox to include the entire object, or you can select specific members.
  3. Specify the directory in which to generate proxy classes.
  4. Click OK to generate the code. The following example shows a .js file generated for an application that displays images:
*
 * You should keep your JavaScript code inside this file as light as possible, 
 * and keep the body of your Ajax application in separate *.js files. 
 *
 * Do make a backup of your changes before regenerating this file. (Ajax Bridge 
 * display a warning message.)
 *
 * For help in using this file, refer to the built-in documentation in the Ajax Bridge application. 
 * 
 */
 
 
/**
 * Class "DisplayShelfList"
 * Fully qualified class name: "DisplayShelfList"
 */
function DisplayShelfList(obj) {
    if (arguments.length > 0) {
        this.obj = arguments[0];
    } else {
        this.obj = FABridge["b_DisplayShelfList"].
            create("DisplayShelfList");
    }
}

// CLASS BODY
// Selected class properties and methods
DisplayShelfList.prototype = {

    // Fields form class "DisplayShelfList" (translated to getters/setters):

    // Methods form class "DisplayShelfList":
    
    getAngle : function() {
        return this.obj.getAngle();
    },
    
    setAngle : function(argNumber) {
        this.obj.setAngle(argNumber);
    },
    
    setCurrentPosition : function(argNumber) {
        this.obj.setCurrentPosition(argNumber);
    },
    
    setSelectedIndex : function(argNumber) {
        this.obj.setSelectedIndex(argNumber);
    },
    
    setPercentHeight : function(argNumber) {
        this.obj.setPercentHeight(argNumber);
    },
    
    setPercentWidth : function(argNumber) {
        this.obj.setPercentWidth(argNumber);
    },
    
    DisplayShelfList : function() {
        return this.obj.DisplayShelfList();
    },
    
    setFirst : function(argNumber) {
        this.obj.setFirst(argNumber);
    },
    
    setFormat : function(argString) {
        this.obj.setFormat(argString);
    },
    
    setLast : function(argNumber) {
        this.obj.setLast(argNumber);
    }
}


/**
 * Listen for the instantiation of the Flex application over the bridge.
 */
FABridge.addInitializationCallback("b_DisplayShelfList", DisplayShelfListReady);


/**
 * Hook here all of the code that must run as soon as the DisplayShelfList class
 * finishes its instantiation over the bridge.
 *
 * For basic tasks, such as running a Flex method on the click of a JavaScript
 * button, chances are that both Ajax and Flex have loaded before the 
 * user actually clicks the button.
 *
 * However, using DisplayShelfListReady() is the safest way, because it lets 
 * Ajax know that involved Flex classes are available for use.
 */
function DisplayShelfListReady() {

    // Initialize the root object. This represents the actual 
    // DisplayShelfListHelper.mxml Flex application.
    b_DisplayShelfList_root = FABridge["b_DisplayShelfList"].root();
    

    // YOUR CODE HERE
    // var DisplayShelfListObj = new DisplayShelfList();
    // Example:
    // var myVar = DisplayShelfListObj.getAngle ();
    // b_DisplayShelfList_root.addChild(DisplayShelfListObj);

}
  1. Edit the generated .js files. In the xxxReady() function of the generated .js files, add the code that must run as soon as the corresponding class finishes its instantiation over the Ajax Bridge. Depending on your application, default code may be generated in this method. The bold code in the following example shows custom initialization code for the sample image application:
...
function DisplayShelfListReady() {

    // Initialize the root object. This represents the actual 
    // DisplayShelfListHelper.mxml Flex application.
    b_DisplayShelfList_root = FABridge["b_DisplayShelfList"].root();
    

    // Create a new object.
    DisplayShelfListObj = new DisplayShelfList();
    // Make it as big as the application.
    DisplayShelfListObj.setPercentWidth(100);
    DisplayShelfListObj.setPercentHeight(100);
    //Set specific attributes.
     DisplayShelfListObj.setFirst(1);
     DisplayShelfListObj.setLast(49);
     DisplayShelfListObj.setFormat("./photos400/photo%02d.jpg");
     //Add the object to the DisplayList hierarchy.
     b_DisplayShelfList_root.addChild(DisplayShelfListObj.obj);
}
  1. Edit the generated .html files. In the part of the HTML pages that contains the text "Description text goes here," replace the text with the HTML code that you want to use to access the Flex application from the HTML page. For example, this code adds buttons to control the sample image application:
<h2>Test controls</h2>
<ul>
<li><input type="button" onclick="DisplayShelfListObj.setCurrentPosition(0)"
value="Go to first item"/>
</li>
<li><input type="button" onclick="DisplayShelfListObj.setCurrentPosition(3)"
value="Go to fourth item"/>
</li>
<li><input type="button" onclick="DisplayShelfListObj.setSelectedIndex(0)"
value="Go to first item (with animation)"/>
</li>
<li><input type="button" onclick="DisplayShelfListObj.setSelectedIndex(3)"
value="Go to fourth item (with animation)"/>
</li>
<li><input type="button" onclick="alert(DisplayShelfListObj.getAngle())"
value="Get photo angle"/>
</li>
<li><input type="button" onclick="DisplayShelfListObj.setAngle(15);"
value="Set photo angle to 15&deg;"/>
</li>
</ul>
  1. Open the HTML page in a web browser to run the application.