Quietly Scheming

One of the questions that comes up a lot when we’re talking about Flex with web developers is ‘how does this relate to AJAX?’ Flex is a platform for building Rich Internet Applications, and Ajax is a suite of technologies people are using more and more to build RIAs – so we must be competitors, right?

(Side note: When I get asked this, I always imagine a 10 year old boy throwing a cat and a chicken into a cardboard box, eyes wide at the thought of the carnage expected to follow).

My answer is always the same: Flex and Ajax are old friends. Both technologies have their strengths, and both have their appropriate uses in the web development world. HTML and Ajax are great for text heavy What the heck is Flex? Find out more here. content — Flex and Flash are perfect for rich interaction and media. While AJAX has the benefit of being only an incremental delta from the traditional HTML world – you can build an HTML based site with just a little bit of AJAX — Flex, and the Flash platform, has a much easier development model – I can build a rich complicated application in Flex in a fraction of the time I can with AJAX and DHTML (ok, admittedly I’m not the best case study since I’m one of the people who built Flex; but don’t take my word for it, try them both and decide for yourself).

Smart developers take the time to equip themselves with as many different tools as they can, and great web apps use the right technology for the task at hand. The best sites, in my opinion, use the right tool for each individual part of the project. It’s motherhood and apple pie (something we on the Flex team affectionately refer to as ‘MotherPie’) to say that a good developer should be technology agnostic.

(Another Side note: this is the point where that 10 year old eagerly peers over the edge of the box, only to find the cat lovingly grooming the chicken’s feathers. And the chicken is purring. Frustrated, he pokes the chicken with a stick.)

Now A couple of weeks ago I was discussing this exact topic with Jeremy Chone, the product manager for flex. In the course of debating how and when a developer should decide whether or not to choose Flex or HTML for a particular project, Jeremy asked me whether it was possible to use AJAX to script a flex application or component. And the answer is yes, it’s possible. But it could be easier. And that’s how the FABridge was born.

Now, allow me to answer the questions you didn’t know you had.

First thing’s First…how do I get it?

Down the the Flex Ajax Bridge from Adobe Labs.

What is it?

The Flex AJAX Bridge is a small, unobtrusive library of code that you can insert into a flex application, a flex component, a flash movie, or even an empty SWF file to expose it to scripting via the browser. Once you’ve inserted the bridge, pretty much anything you can do from Actionscript, you can do from Javascript.

For example, instead of setting the value of a slider in actionscript, like this:

slider.value = 25

By adding the bridge to your application, you could set it from javascript, like this:

flashApp.slider().setValue(25);

Why should I use it?

To humbly borrow a page from the Ruby on Rails community, the FABridge is built with the “don’t repeat yourself” principle in mind. Rather than having to define new, simplified APIs to expose a graph of actionscript objects to javascript, the FABridge makes your actionscript classes available to javascript without any additional coding.

The Flash Client has the ability natively, through the ExternalInterface API, to call javascript from actionscript and actionscript from javascript, and vice versa. But External Interface has some limitations:

• External Interface requires you, the developer, to write a library of extra code in both actionscript and javascript, to expose the functionality of your flex application to javascript, and vice versa.
• External Interface also limits what you can pass across the gap – primitive types, arrays, and simple objects are legal, but user defined classes, with associated properties and methods, are off limits. You’re limited in what you can do.
• External Interface enables you to define an interface so your javascript can call your actionscript, but you still have to write that actionscript. – the FABridge essentially lets you write javascript instead of actionscript.

The FABridge was built as an extension to ExternalInterface to help solve these limitations.

Enough Talk, let me see it in Action!

I’ve posted a few demo pages where you can try out the FABridge. These demos require that you have the Flash Player 8.5 Beta 1 plugin installed; you can download it from Adobe labs if you don’t have it yet.

(It’s also worth mentioning here that this is pre-alpha software, so don’t be surprised by any…oddities. See below for more.)

(OK, one more caveat: These demos are being hosted off of a personal hosted site, so the swfs seem to be coming down a little bit slow at the moment. Be patient).

The first link will take you to a page that contains a small, simple do-nothing flex application, and a set of HTML form elements on the left hand side. The upper text area is a javascript ‘sandbox’ … type any javascript into the text area, click the execute button, and the javascript runs. From here, you can try out writing script against the flex application on the right. To see some examples of FABridge javascript in action, click on one of the radio buttons below the sandbox area.

Scripting a Flex Application from Javascript

The second link will take you to a very similar page that also contains a javascript sandbox for testing out FABridge code. But instead of embedding a flex application, this page embeds a tiny, empty swf, containing nothing but the bridging code. With this SWF, you can access all the functionality of the Flash player from javscript.

Scripting as empty SWF as a canvas from Javascript

Lastly, beyond the sandbox files, I’ve posted a very simple ‘real world’ example that uses Ruby on Rails to remotely script the contents of both the HTML in the page and an embedded Flex component to display a typical drill-down pattern. You can try the vanilla HTML version here:

DHTML drilldown with ruby on rails

And the FABridge/Flex enhanced version here:

Flex drilldown with FABridge and ruby on rails.

OK, that’s cool. How do I get my hands on it?

The pre-alpha version of the FABridge has been posted for download and use to adobe labs at:

http://labs.macromedia.com/wiki/index.php/Flex_Framework:FABridge

It includes the core bridge source files, the two sandbox demos, and a readme with a little bit more information about how to write javascript against the Flex Ajax Bridge. We’re releasing the code for the bridge under the open source MIT license, so feel free to download the source, poke it a couple of times with a stick, use it in your own projects, etc.

Are there limitations?

Sure there are limitations…it’s pre-alpha skunkworks software, after all. But why focus on the negative? This is a time for rejoicing! Some of the current limitations are outlined in the readme file…you can read about them there, if you your the dark and brooding type. One thing worth pointing out is that the bridge has currently only been tested on IE 6 and Firefox 1 and 1.5 on windows. There’ve been reports it works fine on various macintosh browsers. That said, there’s no reason it shouldn’t work, aside from taking the time to work out the kinks.

How does this relate to…

There are a couple of great open source initiatives out there focused around opening up the capabilities of the flash player to the broader Ajax community. Over the past week or two I’ve been sharing the code with Paul Colton, who runs the open source AFLAX project, and talking about ways to get the code integrated into future versions of that library. Brad Neuberg of the dojo open source project got a peek at the code a day or two ago and gave us some great feedback on the project. The goal is to get this ability to tightly integrate Flex and Ajax together into your hands; we don’t really care what form it takes in the long run.

OK, Got it. Now what?

Go download the bridge, and start getting your hands dirty with it. This is early software at this point, so make sure to let us know what you think, and wether or not this is something you’re using or considering in a web project.

Ely.

P.S. one last question. You kinda petered out with the whole Cat and Chicken thing…?

Yeah, I know. Cut me some slack, I’ve been up a lot of late nights recently. Let’s see, um..the chicken got a lucrative job managing a local chain of auto parts discount stores, which allowed the cat to stay home and raise the children. Happy?