Monday, February 4, 2008

AWX and AJAX

I've seen a lot of interest lately in using AWX within an AJAX application. The preferred way is to use the AWXBridge API. This is based on Adobe's FABridge technology, and relies on a set of patterns to "bridge" the JavaScript and ActionScript world. Check out this example to see it in action. Here is a quick primer:
A JavaScript root object is created to refer to an embedded Flex application - the FABridge property, in this case 'example', is a reference to the DIV id where the Flex application SWF will reside.
var flexApp = FABridge.example.root();
Any ActionScript object with an empty constructor can be created from JavaScript using its full name:
var chart = FABridge.example.create("mx.charts.ColumnChart");
An AS object public property can be retrieved from JS using a getter function, where the name of the function is based on the property name prefixed with "get" and the first letter of the property is uppercased:
flexApp.getSlider().getValue();
An AS object public property can be modified from JS using a setter function, where the name of the function is based on the property name prefixed with "set" and the first letter of the property is uppercased:
var currentCheckValue = flexApp.getCheck().getSelected();
flexApp.getCheck().setSelected( ! currentCheckValue );
An AS object public function can be accessed directly.
var flexApp = FABridge.example.root();
flexApp.testFunc( "Hello, Actionscript World! Love, Javascript..." );
So, armed with a that tidbit of knowledge, to bridge AJAX and AWX, please refer to the ASDoc to get a list objects, properties and functions that you can call. A bit more of an insight, the awxbridge.swf file that is downloaded into the div element contains a set of public helper functions to create a set of AWX classes. You can find the list of functions here and a how some of them are used here.

No comments: