explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

FABridge – Flex/AJAX Bridge

6 Comments

I just downloaded the FABridge code from Adobe Labs. Being that it is still in Beta, there isn’t much documentation, and what little documentation there is, is very hard to follow. So I figured I would give a little walk-through of my experiences with FABridge.

When I first tinkering with FABridge (from hereinafter referred to as FAB) I found it rather difficult to get any response for both swf-to-js and js-to-swf communication. It seemed nothing was working correctly. So I decided to consult the documentation and look around on the forum. There again I found little help in either resource. In addition to not being able to find much help in regards to general use of FAB, there were no references at all using FAB with swfObject. Ok, well enough complaining and let me show you how I did it. Keep in mind, this is just a very basic introduction for those trying to get started using FAB.

First things first. I decided to implement the MXML part first. Pretty simple stuff and the same as the documentation:

<fab:FABridge id=”fab” xmlns:fab=”bridge.*” />

Next I tackled the javaScript part of it. First we need our import statements:

<script src=”js/swfobject.js”></script>
<script src=”js/FABridge.js”></script>

Then in my main block of javaScript, I put a few things in here. One is a var to store a reference to the Flex application:

var flexApp;

Then I used an HTML button to initialize the FAB:

function initBridge (){
flexApp = FABridge.flash.root();
}

Now there was a bit of confusion when I started reading the docs/forums to figure out the initialization of the FAB. There were some indications that instead of using the word flash in the above function, you were supposed to use the name of your application.swf such as FABridge.myApp.root(); In fact there were several postings that had done this very thing.  How they did this successfully I do not know.  But this is not the case in my example.  The swf object in my HTML file is named FABTest.swf, but I still just use flash in the initialization.

Well the initialization part is out of the way. So now we can start getting the swf and js to start talking to one another. First I tried something simple like having javaScript tell an item in Flex to do something. I decided I would have a function set up in Flex to pop open an Alert box and show text that was passed as parameters. This is triggered via an HTML button:

in the javaScript:

function doSwfFunc (){
flexApp.js2swfFunc(‘text set from js’);
}

in ActionScript:

public function js2swfFunc (message:String):void {
Alert.show(message);
}

And it works just fine. Next I decided to try two different means of communicating to js via a Flex interaction. The first is done indirectly. I have a button inside Flex with no click event handler. Inside the js, I have it listen to the click event and assign a handler within js:

javaScript:

var btn = flexApp.getBtn();
btn.addEventListener(‘click’, onClick);function onClick (event){
alert(‘flex button clicked’);
}

And then I did it directly via actionScript via ExternaInterface. I was unable to find a proper channel to go through within FAB. This was due to the poor documentation or my poor eyesight. If and when I find an even more direct means of using FAB to allow the swf to call js functions within the swf, I will post the update:

actionScript:

private function onClick ():void {
ExternalInterface.call(‘alert’, [‘called by using ExternalInterface.call’]);
}

I have also uploaded the source for the project here. I hope this helps you folks that are just learning about FAB.

Advertisements

6 thoughts on “FABridge – Flex/AJAX Bridge

  1. Thanks a lot.
    Very clear, very helpful.

    Good luck !

  2. This is very nice and informative post. I have bookmarked your site in order to find out your post in the future.

  3. Hi,
    Must FAB is sounding very good to me and will sound good to all after going through the presentation you made and this blog definatly. Supporting to your complaint about insufficint help about FAB , I must say you yourself resolved this complaint for me and many people like me. Thanks Thanks a lot

  4. I ran into some issues using swfobject 2.0 with FABridge. I was able to resolve them, though, and I’ve summarized things in a blog post:

    http://blog.innerfence.com/2008/06/05/using-fabridge-and-swfobject-together/

  5. Hey Ryan. Thank you for posting that. That is a great find and will come in handy.

  6. Works nicely, though you need to remove the need to ObjectUtil in order for the bridge to work. (trying to get ObjectUtil in will result in too many classes copied)

    Unfortunately, the FAbridge isn’t immune to string problems inherent to ExternalInterface.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s