Mike Potter

July 25, 2006

Ajax, JSON, PHP, and Flex together to build a Flash-y Ajax site

In honor of the O'Reilly Open Source conference that I and other Adobe people at attending, I'm happy to show an example of building out a site that combines Ajax, JSON, PHP, and Flex into one application, with 90% of this being done with open source software (the only piece that is not open source, but is free (in terms of cost), is the Flex SDK). I've created a site that tries to mimics the experience of Google Finance, a great site that combines Ajax, and Flash together to provide a great user experience.

This tutorial, available online in PDF format with complete source code in this .zip file, shows how to take data from your Feedburner feed, and create an Ajax application that displays the dates and hits of your feed. It will then take that information and populate a graph that we've created with Flex and the Adobe Flex Charting components, using the Flex / Ajax bridge from Ely Greenfield and the JSON ActionScript library from Mike Chambers, Christian Cantrell, Daniel Dura, and Darron Schall.

A working example of this is available on our wickeddemo.com website. (Note that because of load, that example will load data from a static XML file, rather than PHP.)

If you have any questions about this example, please post there here in this blog.

Here is what I've learned in using the Spry Ajax framework and Flex together:

1. I found it easiest to modify the HTML that gets output by Flex Builder, rather than to reference the built swf file in my own HTML file that I create. If you do that, be sure to modify index.template.html in the html-template/ folder of your Flex project, rather than the .html files in the bin/ directory of your Flex project. The HTML files in bin/ get overwritten when you save and re-build your Flex application, and if you modify those, rather than index.template.html, you'll lose your changes to index.template.html.
   

2. I started building out the Flex graph using JavaScript and the Flex / Ajax bridge. I don't recommend that. Build out your entire Flex component in Flex Builder, then simply write functions to pass data to it from HTML. I think that's easier than trying to build Flex components using JavaScript.

3. Similarly, write functions that closely couple your Flex application to your HTML page. For instance, you'll notice that in my MXML file, I call the chartClicked JS function using:
   if( ExternalInterface.available )
   ExternalInterface.call("chartClicked",clickEvent.hitData.item);

   I could have attached an observer to the lineChart instead, using the Flex / Ajax bridge, but I find it easier to get the data items and debug the application in Flex Builder, rather than trying to do that in JavaScript on the HTML page.

4. The ActionScript 3 JSON library doesn't like new lines or carriage returns in the JSON data. You need to strip those out before sending data from JS to ActionScript over the Flex / Ajax bridge.
   
   

5. I don't know of any other technologies that I could use in this tutorial to get a higher click through on MXNA. Well, maybe Web 2.0. :)
   

technorati tags:flex, ajax, php, web2.0, json, adobe, flash

Blogged with Flock

• ≪ Kevin Lynch talks about Apollo, FlashLite, Microsoft and more
• Home
• Adobe Forums Changing ≫