Using the Flex-Ajax Bridge

The Flex-Ajax Bridge is a little javascript library bundled with the Flex SDK that allows you to use javascript to drive your Flex app. It can be really handy for debugging or experimentation when you use it with Firebug's console. For complete setup up instructions, see here. You do need to modify your Flex code to get the bridge to work. It's just a one-liner though.

To use it, first you get a reference to your flex app:

app = FABridge.flash.root()

To get a component by ID, you would do something like:

app.get('myDataGrid')

To find out the type of the component:

app.get('myDataGrid').typeName

You can call the methods of the component as you would in normal ActionScript. To access the component's properties though, you need to use the Java getter/setter convention:

app.get('myDataGrid').getSelectedItems()

This isn't so nice. Ideally, a seamless experience would allow you to write:

app.myDataGrid.selectedItems

I guess this is where the weakness of Javascript is coming through. There's no language support for properties(like those in ActionScript, C# Python, etc.) and also no way to do method interception(method_missing in ruby). But I digress.

To instantiate an object of a class in Flex-land, you'd do something like:

sprite = FABridge.flash.create("flash.display.Sprite");

This would call the default constructor. I am not sure how you'd call a constructor with arguments, probably just add on the arguments to create()?

A really cool and useful thing you can do is pass functions as event handlers to into Flex-land. Try this:

app.get('myButton').addEventListener('click', function(e){
    console.log('button clicked!');
});

Now go click that button...cool, heh?

Anyway...in conclusion, the Flex-Ajax Bridge is really nice...especially when combined with Firebug.