Flex-Ajax Bridge (FABridge) within GWT
JacH...@gmail.com
toolkit? I am looking to develop a site in both Flex/Flash and Ajax
but would like to use the FABridge to enable communication between
actionscript and javascript. As of now, GWT does not allow me to use
the FABridge supplied by Adobe. Or does it? If anyone has any
suggestions please write me or reply to this post.
Here is a url to the FABridge description:
http://labs.adobe.com/wiki/index.php/Flex_Framework:FABridge
Here is a url to an application using the FABridge:
http://flexapps.macromedia.com/flex2beta3/fabridge/samples/FABridgeSample.html
www.gtraffic.info
JacH...@gmail.com wrote:
>As of now, GWT does not allow me to use
> the FABridge supplied by Adobe. Or does it? If anyone has any
> suggestions please write me or reply to this post.
>
I don't see why not. You could in theory call the javascript for the
bridge using JNSI.
Not sure where you see GWT coming into the picture here. Why not write
your app in Flex.
Al.
JacH...@gmail.com
I am trying to design a whole site using Ajax and Flex. The main
application will use Flex but the header, footer, menus, and modules
will be using AJAX. I am more familiar with JAVA than javascript so I
am hoping to use GWT for AJAX. I would like to incorporate the
FABridge into GWT like the Widget Library was able to do with
scriptaculous. If there is someone willing to guide me through this
process, please reply to this post.
www.gtraffic.info
class MyFlexControllerImpl {
public static native MyFlexController create()/*-{
return FABridge.flash.root();
}-*/;
public static native int getMaxPrice(MyFlexController ctrl)/*-{
var maxPrice = ctrl.maxPriceSlider().value();
return maxPrice;
}-*/;
}
// --------------
public class MyFlexController extends JavaScriptObject
{
protected MyFlexController (int opaque)
{
super(opaque);
}
public static MyFlexController create()
{
return FlexControllerImpl.create();
}
public int getMaxPrice()/*-{
return FlexControllerImpl.getMaxPrice(this);
}-*/;
}
// ----------------
// In your main app
public void testController()
{
MyFlexController ctrl = MyFlexController.create();
int maxPrice = ctrl.getMaxPrice();
// Do something cool with maxPrice
}
Al.
www.gtraffic.info
public class MyFlexController extends JavaScriptObject
{
protected MyFlexController (int opaque)
{
super(opaque);
}
public static MyFlexController create()
{
return MyFlexControllerImpl.create();
}
public int getMaxPrice()/*-{
return MyFlexControllerImpl.getMaxPrice(this);
}-*/;
}
www.gtraffic.info
javascript object.
class MyFlexControllerImpl {
public static native MyFlexController create()/*-{
return $wnd.FABridge.flash.root();
JacH...@gmail.com
Where should I place the MyFlexControllerImpl class and should I remove
all the comments from you code?
JacH...@gmail.com
or to remove the need for the FABridge.as and FABridge.js files. If it
is meant to make it compatible, then where should these to files be
included and would the public html need to mention them.
Sorry for my lack of knowledge on the subject. I am relatively new to
all this. Your assistance is greatly appreciated.
I believe the solution to this problem would make flex and gwt a great
team in developing RIA's. I really want to research both Flex and Ajax,
and such a solution would allow me to learn both at the same time in
the same environment (Eclipse).
JacH...@gmail.com
_____________________MyFlexController.java __________________________
import com.google.gwt.core.client.JavaScriptObject;
public class MyFlexController extends JavaScriptObject{
protected MyFlexController (int opaque) {
super(opaque);
}
public static MyFlexController create(){
return MyFlexControllerImpl.create();
}
public int getMaxPrice(){
return MyFlexControllerImpl.getMaxPrice(this);
};
}
_____________________MyFlexControllerImpl.java
__________________________
package com.scratchco.client;
class MyFlexControllerImpl {
public static native MyFlexController create()/*-{
return $wnd.FABridge.flash.root();
}-*/;
public static native int getMaxPrice(MyFlexController ctrl)/*-{
var maxPrice = ctrl.maxPriceSlider().value();
return maxPrice;
}-*/;
}
_____________________HomePage.java__________________________
public class HomePage implements EntryPoint {
Label label = new Label();
public void onModuleLoad() {
label.setText("You should not see this Text");
testController(); // change label to 0
RootPanel.get().add(label);
}
public void testController(){
MyFlexController ctrl = MyFlexController.create();
int maxPrice = ctrl.getMaxPrice();
label.setText("" + maxPrice);
}
}
_____________________HomePage.html __________________________
[...]
<script language="javascript" src="js/FABridge.js" ></script>
[...]
but when I compile it it gives me an error of "'$wnd.FABridge.flash' is
null or not an Object". Any help would be great.
www.gtraffic.info
Not sure what is going on here. I will need to try this out in a sample
app.
The bundled app that comes with FABridge doesn't seem to do things this
way but this guy
http://www.webmonkey.com/webmonkey/06/18/index4a.html?tw=multimedia
uses the same approach that is mentioned on the wiki page. i.e.
function displayMessage() {
var flexApp = FABridge.flash.root();
var message = flexApp.hwLabel().text();
alert(message);
}
although I couldn't get his examples to run (something to do with
missing timer object).
Al.
JacH...@gmail.com
bridge works. Let me know if you make any advancements on the subject.
JacH...@gmail.com
still do not know where to begin with GWT. Which one of the files
(that you showed earlier) is responsible for hard coding the java
script. And what is the purpose of all the comments throughout the
code?
Al, Thank you for all your help thus far. I am starting to grasp the
big picture and still believe this will enhance gwt.
www.gtraffic.info
JSNI. The documentation can explain it better than I ever could
So what we are attempting to do here is to wrap the FABridge in GWT
java. The 'impl' create function will return an instance of the
FABridge javascript object which will get assigned as our instance of
MyFlexController. The wrapper can then use 'this' to call functions
directly from that object.
I think the problem is something to do with the 'flash' bit of the
FABridge.flash.root(). This is a unique name of the FABridge instance
which gets pulled in using some javascript magic.
I will try it out in a test harness.
AL.
www.gtraffic.info
The 'flash' bit of the line:
FABridge.flash.root().
from the wiki examples is a reference to the instance name setup in the
html script element which embeds the Flex component. I.e. for the
bundled example it is
FABridge.example.root().
I am looking at using an HTML widget as a holder for the Flex component
rather then stick it straight into the app html. That way you can embed
it straight into a GWT layout.
I have got event handlers triggering code in the GWT side working
(slider updating GWT label for example). Looks good but the UI is a bit
rough and ready plus I think I can make the controller component more
generic. WIll post a link to zip file when I get time tomorrow night.
Al.
JacH...@gmail.com
_______________________________________________________________
To script multiple Flash movies on the same page, give them unique
bridge names through the flashVars mechanism. Use the bridge name to
access them from the bridge, and to register for initialization
callbacks:
<object ...>
<param name='flashvars' value='bridgeName=shoppingPanel'/>
<param name='src' value='app.swf'/>
<embed ... flashvars='bridgeName=shoppingPanel'/>
</object>
function initMaxPrice(maxPrice){
var initCallback = function(){
var flexApp = FABridge.shoppingPanel.root();
flexApp.maxPriceSlider.setValue(maxPrice);}
FABridge.addInitializationCallback("shoppingPanel",initCallback);
}
_____________________________________________________________
Which I was unable to incorporate into the code I have so far. If
you're able to wrap the .swf file, do you think it will be possible to
perform scriptaculous effects on the html widget that holds it? If so,
it would allow coders to create flash advertisements that fly across
the screen or gradually overtake the screen until the user minimizes
the advertisement.
One solution to having multiple interactive .swf files may be to have
gwt assign and initialize a unique bridgename per flash file, similar
to the following code in the documentation:
<param name='flashvars' value='bridgeName=shoppingPanel'/>
[...]
FABridge.addInitializationCallback("shoppingPanel",initCallback);
Then we could refer to the object whenever we wanted to manipulate a
particular flash file.
Al, I appreciate how much you are contributing to this solution. I am
trying my best to follow along so I can eventually contribute.
www.gtraffic.info
> you're able to wrap the .swf file, do you think it will be possible to
> perform scriptaculous effects on the html widget that holds it? If so,
> it would allow coders to create flash advertisements that fly across
> the screen or gradually overtake the screen until the user minimizes
> the advertisement.
Yes, but I can think of nothing worse than a flying advert that scoots
about the screen getting bigger and bigger, haha.
>
> One solution to having multiple interactive .swf files may be to have
> gwt assign and initialize a unique bridgename per flash file, similar
> to the following code in the documentation:
>
Yeah I am looking at this just now. The plan is to create a widget that
holds your flex component. You give it a name and a path to the swf
file.
> Al, I appreciate how much you are contributing to this solution. I am
> trying my best to follow along so I can eventually contribute.
It is an interesting problem which lies within the domain of my
experience so far with wrapping javascript controls (timeline,
yui-ext). If I get something that works well I might stick it up onto
Google Code as an open source project.
Al.
JacH...@gmail.com
>about the screen getting bigger and bigger, haha.
haha, you are right. How about a flash shopping cart which can expand
over existing html:)
www.gtraffic.info
talking to each other through the FABridge. This is far from finished
but is does demonstrate the basic concepts.
Download the zip file from here.
http://ccgi.arutherford.plus.com/blog/files/flex_v1.zip
If you examine the source code you will see that I have tried to
enclose the embedding of the swf component within the 'FlexWidget'
by writing the holder html straight into the main html view. The
controller object is then supposed to pick up the embedded object in
the JNSI code. This doesn't work. I am looking into why not.
For now I have hard coded the html embedding 'includes' into the
main html page of the application.
I never got round to tarting the UI up as I got bogged down in trying
to automate the embedded of the swf file and connecting it to the
controller object. I though I would publish this as first cut for
anyone interested to look at anyway.
Al
www.gtraffic.info
compiled another version of this and it was broken again so I am
starting to suspect what I am doing in the code is wrong.
http://ccgi.arutherford.plus.com/website/flexdemo/www/com.netthreads.test.FlexTest/
Can anyone verify that this javascript:
public static native FlexController create(String name) /*-{
return $wnd.FABridge[name].root();
}-*/;
Where the name passed in is 'example' is the same as this:
public static native FlexController create(String name) /*-{
return $wnd.FABridge.example.root();
}-*/;
I think this is is correct.
Al.
frank
Ashutosh
apps can be developed using both superlative technologies.
Waiting desperately for integeration of Flex with GWT.
Can anyone point me to other efforts in this direction.
Hail GWT !
Ashutosh
On Jan 19, 4:06 am, "www.gtraffic.info"
<alistair.rutherf...@googlemail.com> wrote:
> This version of the demo works in Firefox and Opera 9 but not IE. I
> compiled another version of this and it was broken again so I am
> starting to suspect what I am doing in the code is wrong.
>
> http://ccgi.arutherford.plus.com/website/flexdemo/www/com.netthreads....
www.gtraffic.info
complete soon. When that happens I will get back to the Flex stuff.
What occurred to me is that since it is possible to create flex
widgets using javascript then it's a hop skip and a jump away to not
only control flex widgets through the FABridge but skin the flex
wigets in GWT. Now _that_ would be cool. All you need is an empty swf
(with the FABridge support switched on) to act as a canvas. Quite a
bit of work though.
Al
www.gtraffic.info
$wnd.FABridge.example.root();
is the same as
$wnd.FABridge[name].root(); where name is 'example'.
Anyway, I am _sure_ this is now working in Firefox here...
http://ccgi.arutherford.plus.com/website/flexdemo/www/com.netthreads.test.FlexTest/
I have had to insert a delay after the page is created/app starts in
order to allow some time before the Flex controller widget attempts to
connect to the bridge object.
I have redesigned the widget to embed the appropriate markup for the
flex control. It works for firefox/mozilla/opera9 but of course fails
under IE.
I think it's the IE markup. When I add it to an enclosing div it goes
from this:
to this:
<object id='flexApp' classid='clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0' height='400'
width='400'>
<param name='flashvars' value='bridgeName=example'/>
<param name='src' value='dist/samples/app.swf'/>
</object>
To this:
<DIV id=example><OBJECT id=flexApp codeBase=http://
download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,5,0,0 height=400 width=400
classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx"
VALUE="5080"><PARAM NAME="_cy" VALUE="5080"><PARAM NAME="FlashVars"
VALUE=""><PARAM NAME="Movie" VALUE="dist/samples/app.swf"><PARAM
NAME="Src" VALUE="dist/samples/app.swf"><PARAM NAME="WMode"
VALUE="Window"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop"
VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign"
VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base"
VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale"
VALUE="ShowAll"><PARAM NAME="DeviceFont" VALUE="0"><PARAM
NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM
NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM
NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile"
VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM
NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking"
VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"></OBJECT></
DIV>
I assume this some functionality of the IE browser.
you can get the latest source from here:
http://ccgi.arutherford.plus.com/blog/files/flex.zip
Al