Google Wave extensions (gadget) development with Adobe Flex

Recently I've developed a Google Wave extension (gadget) using Flex and in the following post I will try to help people that are thinking of doing the same, to save some time and headache by not repeating the pitfalls I've encountered.

1. If you are developing an Extension with Flex you are most likely will want to communicate with the wave framework. This is done using Javascript.

Google included an API to embed Flash objects in the wave but the API is non sufficient for the extension development. It does not let you pass the required parameters to the SWF. The workaround is using javascript (not Google Wave APIs) ones like you would do normal regular flex SWF in HTML. My suggestion is to look on the HTML wrapper files generated by Flex Builder and use the Javascript functions from there. For example to embed SWF file named "test.swf" you will have to do the following:


AC_FL_RunContent(
"src", "http://hosted.somewhere/test.swf",
"width", "350",
"height", "400",
"align", "middle",
"id", "flexId",
"quality", "high",
"bgcolor", "#869ca7",
"name", "flextId",
"allowScriptAccess","always",
"enablejs", "true",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);

Please note the "allowScriptAccess" directive. Using this you will be able to call javascript from Flex and Flex from javascript.

Next step is too allow javascript access from the HTML to SWF. You have to allow it in the Flex code by including the following code somewhere in the application initialization:

Security.allowDomain("*");

This is required since the SWF is being executed from a different domain its hosted on.
After following the above you will be able to use javascript and to embed the SWF object.

2. How do you call Flex from Javascript and Javascript from Flex ?

From Flex to Javascript:

Lets assume you have a function fooJs() defined in your Javascript in the HTML wrapper.
To call it from Flex you will have to:


if (ExternalInterface.available)
{
try {
ExternalInterface.call("fooJs", null);
}
catch(error:Error) {
}
}


The other way around, lets assume once again that you have a method called fooFlex() in your Flex code. To call it from Javascript you first have to register a callback to the method in your Flex application:


if (ExternalInterface.available) {
try {
ExternalInterface.addCallback("fooFlex", fooFlexImpl);
}
catch(error:Error) {
}
}

public function fooFlexImpl(params:String):void {
     // Actual Flex impl.
}


Then you can call it from javascript:


document['flexId'].fooFlex(someParam);


Ok, following this will save you at least few hours, I hope. Now you can use Google Wave API to pass status  and participants updates to your Flex application and do status updates from your Flex application.

If anything is unclear or you need additional info, do ask.