A new version of FABridge is out

… quite some time now actually (from last Tuesday). In case you don’t know already, the Flex-AJAX Bridge (or the much shorter name FABridge) is a library that allows developers integrate Flex applications with JavaScript code. It is a way to access and use Flex components directly from JavaScript code, without duplicating functionality. It allows accessing objects and functions in the target flash movie on the page, and even registering JavaScript functions as event listeners for flash events.

Getting started …

To make a Flex app available for JavaScript integration via the FABridge you will have to place the FABridge.as file in your project and add a component tag in the application, like this:

<bridge:FABridge bridgeName="flash" id="flash" />

Next make sure you give all of the visual components that you want to access from JavaScript an unique ID (this is something you should do all the time though).

Let’s make it clear, and use an example: we want to have for this demo a Flex component which displays a ‘Hello world’ text and a button which refreshes it. On the JavaScript side we’ll simply have a text box where you can type the message you want displayed in the Flash movie. Also, to showcase event handling, when the refresh button is clicked, a JS alert box will pop up. This is how the end page will look like this:

FABridge sample preview

First step – building the Flex component. It’s quite easy actually:

  1. To create a simple application just like this fire up your text editor of choice (yeah, you heard me right, no need for Flex Builder here) and paste the following code in:
    <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="220" height="220">
    
    <bridge:FABridge bridgeName="flash" id="flash" />
    
    <mx:Label x="10" y="25" text="Hello world!" width="157" height="26"
    fontSize="12" fontFamily="Arial" id="myLabel"/>
    
    <mx:Button x="59.5" y="80" label="Refresh" id="myButton"
    click="myLabel.text='Hello world reloaded!'"/>
    
    </mx:Application>
  2. Now save the new file – let’s say helloworld.mxml.
  3. Now copy the FABridge.as file from the src folder within the zip you’ve downloaded from here into a folder called bridge on the same level as your mxml file.
  4. Now open a command prompt and browse to the location of your project. Once there call the mxml compiler – mxmlc.exe. You can find it in the bin folder of your Flex SDK installation.
  5. At this point you should have a swf file named helloworld.swf in the same folder as your mxml application.

Step 2 – write the HTML page – it’s just as easy:

  1. Fire up that preferred editor again. Punch in the HTML to create the text box and to load the swf file.
  2. To enable the web page to interact with the embedded Flex application you will have to add an import for the FABridge.js:
    <script src="javascript/FABridge.js"></script>
  3. To pass the text in the input text box to the flash movie we need to write a JavaScript function – relax, it’s easy, two rows are enough:
    function setText()
    {
       var flexApp = FABridge.flash.root();
       flexApp.getMyLabel().setText(jsMessage.value);
    }
  4. Now add the function call to the blur event of the text box and it’s done. Once you type and tab out of the text box, the message will appear inside the Flash movie, just like this:
    Messages from JavaScript
  5. For the last touch, let’s register a JavaScript function as an event handler for when the flash button is pressed – this will take some more code, about 4 lines 🙂
    function initListener()
    {
       var initCallback = function()
    {
       var flexApp = FABridge.flash.root();
       flexApp.getMyButton().addEventListener("click",textChanged);
    }
       FABridge.addInitializationCallback("flash",initCallback);
    }function textChanged(event)
    {
       alert("The text has been reset from Flash");
    }
  6. The textChanged function contains the code which gets executed when the button is pressed. You can do whatever you want in this function. The first function should be called by the body’s onload event and will register an event handler on the Flex button – when clicked, trigger the JS function.

With this simple example, you can see how the FABridge makes Flash – JavaScript communication easier. With just a few lines of code you can control a Flex component without going through the ExternalInterface hassle. You can download the sample application created in this example here.

Now that you know what FABridge does, next post will be about the changes in the latest version. Until then, have fun mixing Flex and AJAX!

Advertisements

8 thoughts on “A new version of FABridge is out

  1. What did you mean by this sentence

    —————————–
    Now open a command prompt and browse to the location of your project. Once there call the mxml compiler – mxmlc.exe. You can find it in the bin folder of your Flex SDK installation.
    —————————-

    I created a folder “new” in the destop and did all the things just like the way you guided. But can not understand this step. Can you please explain a bit more…

  2. Hello, I don’t get it work, neither this sample and the adobe oficial sample runing on the adobe server… all throws me a javascript error saying “FABridge.flash is null or not an object”… you know this?
    If you have the answer please send me an email.
    Thanks.

  3. Hi,

    I am also getting the same javascript error saying “FABridge.flash is null or not an object” .Did anyone of you get to figure out what is causing this????

    Thanks,

  4. Hi kos,
    When you get this error it means that the JavaScript component could not communicate with the Flash. This can happen because of several reasons:
    1. The Flash movie hasn’t loaded yet. To solve this make sure you attach an event listener on the Flash load complete, and only then start calling into the Flash player. There is a sample on how to do this in the manual.
    2. You did not specify the bridge name for the flash movie, both in the HTML page, as FlashVar and inside the Flash movie, as id and name on the bridge creation instance.
    3. The exported name of the flash differs between JavaScript and Flash. More specifically the name specified in the FlashVars and the one you are using in JavaScript are not the same.
    4. You have an older version of the Flash Player installed. You should update to Flash Player 9 to take full advantage of the FABridge and Flex.

    If this doesn’t help solve the problem, post a reply and attach the code that is causing the problems and I will take a look into it.

    • Hey Will,

      Unfortunately I can’t find those files … I still have some backups to go through, but I’m afraid it might be lost for good. Sorry about that

  5. Hi Niraj,

    As I’ve mentioned before, I can’t find those files anymore – they wer hosted somewhere and my local backup didn’t have them.. The documentation for the FABridge should pretty much cover what was in there though.

    Cheers.

Comments are closed.