Flex Ajax Bridge: Flickr Roulette
While prepping to put the FABridge library up on labs for the community to start using, I put together a slightly more ‘real world’ demo that shows the bridge in action. My goal here is to hit as many buzzwords as I can think of. At last count I had:
Ajax
Flex
Flash
flickr
SOA
Mashup? (kind of a stretch)
rails
prototype
script.aculo.us
Did I miss any there?
caveats
I’ve run the demo on Firefox 1.5 and IE 6 on windows. It should work fine on other typical browsers, but I haven’t tried it out. There’s some CSS problems between Firefox and IE, that I don’t have the patience to figure out. I usually program in Flex so I don’t have to (grin!)
There appears to be an odd interaction going on between the current flex beta and my hosting setup. For some people, the flex application is hanging during initialization. If this happens to you, try refreshing the page. (If you can’t see the flex app when the page loads, that probably means it loaded fine).
Enough caveats, let’s get on to the demo. What I’m going to show is a combination HTML/Ajax/Flex page talking to a Ruby/Rails back end. Since all web-tech demos are now legally required to be flickr API based demos, the page is built around the ability to search flickr for tags and view individual images and details. The idea was to take the functionality of this boring, vanilla, non-ajax-or-flex standard HTML page here:
traditional HTML flickr page
And see how we could spice it up using a combination of ajax and flex, linked via the FABridge.
Now I’d really like to talk through the flow of the page before I link to the demo, but if I do that you’re just going to scroll right to the bottom anyway. So go check out the demo, then come back here to read through how it works.
Ajax/Flex based flickr page (Flex 2 Beta 3)
The source is also available for download here:
Source files
Be forewarned, the code for this is ugly. Not because it couldn’t be done cleanly, but rather because I don’t have time to clean it up.
OK, now that we’ve had some fun, here’s how it works.
1. Page initialization
When the page is first loaded, the only thing the user sees is a simple HTML form to choose a flickr search tag. But down at the bottom of the page there’s a hidden flex ‘carousel’ component quietly biding its time. Behind the scenes, the HTML page is sending some javascript across the FABridge to initialize the component. Now keep in mind that the component we’re using knows nothing about javascript, the bridge, flickr, etc. It’s a straight flex component that was written for use in flex apps. it’s completely unaware that we’re actually scripting it from javascript.
2. Choose a tag
OK, so the user fills in the HTML form, and clicks the search button, But instead of doing a normal submit, the form uses an Ajax request to post the data in the bakgorund rather than submitting the entire page. The Ajax request hits a rails back end which forwards the request on to flickr and parses the response. Meanwhile, back on the client, the page has used some script.aculo.us effects to fade in an animated spinner to show the user the page is busy. Once the rails app has the urls in hands, it generates a response containing a javascript data structure with the urls and image ids. At the same time, it generates a fragment of javascript that uses the FABridge to pass the data structure in to the flex carousel component. This response goes back to the client who eval()’s it. The spinner is faded out again, and we’re ready to go.
3. Display the thumbnails.
Now the flex component has a list of urls to display. It loads the thumbnails one at a time, and then does what flash does best. You can click on an image, spin the arousel, drag it around etc. This component is doing a couple of things that can’t be done in DHTML.
The drawing API procedurally renders the spokes of the carousel;
The player’s matrix based display list is used to shear the images for the 3D effect.
The new bitmap filter library generates the subtle soft drop shadows on the individual thumbnails.
And again , even if it was possible to build this component in DHTML, I personally wouldn’t want to do it. Having worked in javascript and Actionscript 1 in the past, It would have taken me many times longer to build this functionality in those environments.
But I digress.
4. select an image.
The user selects an image from the carousel. At this point the component generates an event to indiciate the selection has changed. Now again, this component knows nothing about flickr, or javascript, or how it’s being used (In fact, this component doesn’t even know that it’s showing images or urls…but more on that in a future post). All it knows is someome might want to know that the selection has changed. So it generates an event.
Now let’s jump back to that javscript initialization code. When the page first loaded, we ran some JS that configured out flex component. One of the things it did was to regsiter a javascript callback handler for the ‘changing’ event of the carousel component. So when the user clicks an event, it bubbles all the way out to javascript, which gets passed an event object with a reference to the id of the image selected. The javascript callback once again throws up a wait animation using script.aculo.us, and submits a request off to the server for the image details.
5. wrapping it all up
The rest is straightforward Ajax/DHTML. The server fetches the photo details, and generates a few fragments of HTML to display them. These are sent back in the response along with some simple javascript informing the page where to insert the fragments. The HTML of the page is modified, and the process is complete.
6. Review
OK, so in summary, we’ve got: HTML => Ajax => Rails => Flickr API => javascript => flex => javascript event handler => Ajax => Rails => Flickr API => javascript => HTML. not bad.
Now that you know how it all fits together, take another look And play a round of Flickr Roulette: search for some tags, then grab the wheel on the left, and ‘throw’ it to the right with the mouse.