GWT calling Flex and Flex calling GWT

Can GWT and Flex speak together?

Yes,  Flex can communicate with GWT client side very well, as they both can speak the same language (JavaScript).

How?

It is very easy, GWT can call Flex methods through native functions, and Flex can call GWT methods through external interface

Hello World example (as usual) ,

GWT calling Flex Methods:

1. Initialize Flex application (Flexy):
In “creationComplete” event add this line of code

ExternalInterface.addCallback( “sayHello”, sayHello);

“sayHello” is the java script function to call from outside flex.

sayHello is the flex function to call when someone call sayHello from outside .

2.  Create sayHello Flex function :

Function void sayHello(hello:String):void {
Alert.show(hello);
}
then compile and add Flexy.swf file in the public folder of GWT project.

3. Add SWF file to GWT Panel:

Create new panel inside your application to hold the swf file “Flexy.swf”,

Panel  swfHolder = new Panel();
swfHolder.setWidth(400);
swfHolder.setHeight(400);
swfHolder.setHtml(
"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'"+
"id='flexy' width='100%' height='100%'"+
"codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>"+
"<param name='movie' value=' Flexy.swf' />"+
"<param name='quality' value='high' />"+
"<param name='bgcolor' value='#ffffff' />"+
"<param name='allowScriptAccess' value='sameDomain' />"+
"<embed src=' Flexy.swf' quality='high' bgcolor='#ffffff'"+
"width='100%' height='100%' name='flexy' align='middle'"+
"play='true'"+
"loop='false'"+
"quality='high'"+
"allowScriptAccess='sameDomain'"+
"type='application/x-shockwave-flash'"+
"pluginspage='http://www.adobe.com/go/getflashplayer'>"+
"</embed>"+
"</object>");
4.  GWT call Flex Methods:

In your main java file add a new native method

Private native void helloFlex(String  hello)/*-{
function getFlexApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return $wnd[appName];
} else {
return $doc[appName];
}
};
getFlexApp('Flexy').sayHello(hello);
}-*/;
Now you can call helloFlex(“hello World”) from GWT client code and it will call the flex function and show the message box inside Flex.

Flex calling GWT functions:
1. Create GWT function:

Private void helloGwt(String hello)
{
MessageBox.alert(hello);
}
2. Publish the method so Flex can call it:

The problem is that GWT converts the java code to java script so all the function names will change
We can override this by creating definition method,

Private native void defHelloGwt(Panel holderPanel)/*-{
$wnd.sayHello = function(hello){
holderPanel.@{your package name}.{class name}::helloGwt(Ljava/lang/String;)(hello);
};
}-*/;
Now we can call sayHello from flex.
3. Flex call GWT method :

From flex app we can use

ExternalInterface.call(“sayHello”,”hello world”);
And a message box in GWT will show with text “hello World” .