Feed Flex with your HTML

Flash is still used for all the nice things an artist may want. A web developer must try to manage a progressive enhancement all the work he has to do. This implies that the semantic HTML comes first and the design arrives at the end., then add the JavaScript. Always test your page without JS, without CSS and without both of them.

What to do with a Flash movie? Couldn’t we do the same? HTML then Flash. I did that on the PhotoViewer you may find in the Flex2 SDK samples directory and it’s easy. The PhotoViewer is using a XML file to build the gallery.

<?xml version="1.0" ?>
<galleries>
 <gallery id="">
  <description></description>
  <photo>
   <description></description>
   <name></name>
   <source></source>
  </photo>
  <!-- more -->
 </gallery>
</galleries>

From my point of view, it’s like if a photo carousel module was doing a XHR call to get the picture, we have the HTML already, let’s (re)use it:

<div id="galleries">
 <div class="gallery" id="">
  <h2></h2>
  <div class="photo">
   <h3></h3>
   <img src="" alt="" />
  </div>
  <!-- more -->
 </div>
</div>

Instead of having the PhotoViewer doing another HTTP call to get the XML file above, the idea is to build a JSON object from the HTML and passing it to the Flash movie. The goal of that manipulation is to have a better referencement of our slideshow (SEO rules), an usable version for people without JavaScript (I bet you’re already using JavaScript to include the Flash movie in your page).

The next exemple will use jQuery for it’s readability (a native code is easy too but is more consequent) to extract the data out of the HTML:

var data = [];
jQuery("#galleries .gallery").each(function() {
 gal = {
  id: this.id,
  description: $("h2").get(0).value,
  photo: []
 };
 $(".photo").each(function() {
  var img = $("img", this).get(0);

  gal.photo.push({
   name: $("h3", this).get(0).value,
   source: img.getAttribute("src"),
   description: img.getAttribute("alt")
  })
 });
 data.push(gal);
 this.parentNode.removeChild(this)
});

Using json2.js (courtesy of Master of us Douglas Crockford), this data array can be given to the Flash Movie via the flashvars parameter.

var flashvars = "json="
 + encodeURIComponent(
  JSON.stringifiy(data)
 );

Now, let’s dive into the ActionScript 3 (Flex) source code to see how to use this, JSON comes with as3 corelib.

// PhotoViewer.mxml
var json:String = Application.application.parameters.json;

// samples.photoviewer.JSONPhotoService
var data:Array = JSON.decode(json);
var temp:ArrayCollection = new ArrayCollection();

for(var i:int=0; i<data.length; i++) {
 temp.addItem(new Gallery(data[i]));
}
galleries = temp;

And what is absolutely brilliant about that is the fact that the XML interface for values, arrays, etc… is the same that the object generated by the ActionScript JSON decoder. You can reuse your existing code that is reading the XML file. Email me to get the PhotoViewer that is using the JSON code, the end user license doesn’t authorize me to publish it here unfortunately.

The benefits of that approach I can see are many:

Maintenance, always painful and annoying, the only file you have to modify here is the HTML gallery;
SEO, no more invisible pages from the search engine robots point of view, every informations is be available for them;
Reusability, maybe putting the most of the informations out of the Flash movie will improve the reusability of it for sure.

And the biggest one, is that you can replace the Flash movie by a JavaScript only module if you want. I don’t like those big blinky modules that offer most a the time a painful user experience.

Yoan Blanc’s weblog

About

Misc