Flex Ajax Bridge the Missing Link

Here is how to implement a simple Flex applicaiton using the Flex Ajax Bridge. 

* All instructions are written using Flex Builder.

* Another thing to keep in mind is that you must deploy your files to an HTTP server for the FABridge to work (ie. Apache, Tomcat, Jetty, etc..).

The first step is to create a new Flex project in Flex Builder.

Next you will right click on your project and select 'Create Ajax Bridge.'

Flex Builder will add a few things to your project.  One thing is a 'bridge' directory that contains the 'FABridge.as' file.  The other items added to your project are example files and a crucial JavaScript file.  These items are added under a directory named 'AjaxBridge'.

Open you main application file in Builder.

You will need to add a namspace to your Application tag as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="bridge.*"
    backgroundColor="#FFCC66">
 

Now you will need to add the FABridge component so you can communicate between Flex and JavaScript. 

<ns1:FABridge bridgeName="b_FABridge"/>

For this example create the MXML file as follows and save:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="bridge.*"
    backgroundColor="#FFCC66">
    <ns1:FABridge bridgeName="b_FABridge"/>
    <mx:DataGrid  id="dgPeople">
        </mx:DataGrid>      
</mx:Application>

Now on to the HTML and JavaScript:

First add the following script tag to your html, be sure that it is pointed to the js file that was created when you were in Flex Builder or to the location you moved the js file to.  This js file provides the handles to communicate between JavaScript and Flex. 

<script src="js/FABridge.js" type="text/javascript"></script>

Now we need to create some JavaScript to communicate with our Flex application.

Add the following script to your html file to check and see if our Flex application has loaded.  If it has loaded we want to create a reference object for the Flex application:

<script>

var flexApp; // variable to hold our flex app reference
var initCallback = function(){
    flexApp = FABridge.b_FABridge.root();
   
    return;
}
// register the callback to our Flex app.
FABridge.addInitializationCallback("b_FABridge", initCallback);

</script>

You will notice that 'b_FABridge' is bolded above.  That is because it is the name of the Flex Ajax Bridge that we are using.  To set this up on your Flex app you need to do the following:

Make sure it is the same value as the value of the 'bridgeName' attribute in your Flex application.

You will also need to set it in your html page in the bolded areas below:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="FABridge" width="100%" height="420"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="flashvars" value="bridgeName=b_FABridge"/>
            <param name="movie" value="FABridge.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#FFCC66" />
            <param name="allowScriptAccess" value="sameDomain" />
            <embed src="FABridge-debug/FABridge.swf" quality="high" bgcolor="#FFCC66"
                width="100%" height="420" name="FABridge" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer"
                flashvars="bridgeName=b_FABridge">
            </embed>
    </object>

If you are also using JavaScript to include you .SWF file then you will need to add the following to your JavaScript:

AC_FL_RunContent(
            "src", "FABRidge-debug/FABridge",
            "flashvars","bridgeName=b_FABridge",
            "width", "100%",
            "height", "420",
            "align", "middle",
            "id", "FABridge",
            "quality", "high",
            "bgcolor", "#FFCC66",
            "name", "FABridge",
            "allowScriptAccess","sameDomain",
            "type", "application/x-shockwave-flash",
            "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );

With that all set up you are now ready to talk to your Flex application with JavaScript.

Add the following JavaScript to your HTML file:

function addPeople(){
    var _personArray = new Array();
            for(var i=0; i<25; i++){
                var person = {
                    fname: "A - "+[i],
                    lname: "Pomilio",
                    title: "Flex Guy"};
            _personArray[i]=person;
            }
    flexApp.getDgPeople().setDataProvider(_personArray);
    flexApp.getDgPeople().addEventListener("itemClick",dgPeopleCallback);
    flexApp.getDgPeople();
}

// call back to set up the event for the datagrid


var dgPeopleCallback = function(event){
    // get the object that fired the event
    var dgEvents = event.getTarget();
    // make the changes to the html
    document.getElementById('fnameLbl').innerHTML=dgEvents.getSelectedItem().title;
    return;
}

The first function 'addPeople' creates an array of JavaScript Objects.  It then passes the array to the DataGrid in your Flex applicaition.  Here is the script that calls the DataGrid:

The DataGrid in the component has an id of 'dgPeople', to get a handle on this item you need to 'get' the element.  So a reference to the DataGrid is written this way in JavaScript 'getDgPeople().'  Very much like you would right a method, keep in mind the capitalization right after the word 'get' as well as the parenthases following the id. 

flexApp.getDgPeople().setDataProvider(_personArray);

The above line calls your Flex app (flexApp), then gets the DataGrid (getDgPeople()), and finally sets the Data Provider of the DataGrid (setDataProvider()).  We just happen to be setting the data provider to the value of the '_personArray.'

In this next line we are setting up an event listener on the data grid from javascript.  This follows the same principles as setting the data provider.

flexApp.getDgPeople().addEventListener("itemClick",dgPeopleCallback);

All we are doing here is adding and event listener to the data grid that will listen for an 'itemClick' on the data grid and then call the JavaScript function 'dgPeopleCallback.'

I have created a zip file that contains all the needed files to try this out.  This is just a basic example of communicating back and forth between Flex and JavaScript, so if you have any questions or comments please let me know.