Flash, XSLT, and show-hide controls

A recent project I worked on involved creating a flash-based display of related information with a more usable interface. Previously the content was displayed in tables with javascript and css divs. There are both advantages and disadvantages to using the javascript method. Advances with ajax and css have greatly improved functionality since the time of the initial implementation of using showhides to present the learning content. When presented with the request, I came up with the following sketch in my instructional design idea book.

As I've previously blogged about re-usability, the first step I took was consideration of how this display object could created for that purpose. I settled on a pretty simple XML structure. This structure is not at all content dependent.

 Foo for you
 foo.jpg
 all you wanted to know about foo

One of disadvantages of displaying content in flash is how to allow users to print that information. The javascript/css showhide didn't have this limitation because a simple function could reveal all the CSS divs when printed. In order to overcome this limitation I turned to Extensible Stylesheet Language Transformations (XSLT) since my content was already written in XML. I know I could have approach this problem on the server side, but this client will be switching application servers and it didn't make sense.

XSLT is an XML-based language used for the transformation of XML documents into other XML or "human-readable" documents (more info at wikipedia entry). XSL files are included at the top of an XML file and allow all newer browsers to render the XML in HTML/XHTML format. All major browsers support XSLT, see list here. Knowledge of XPath is required to traverse the XML structure and output the content desired.

Useful tutorials

• w3 school tutorial on XSLT
• w3 school tutorial on XPath

Since I already load the XML into the flash project at runtime, I had the path to the XML file available to place on a button on the flash stage.

 public function initApp():void
 {

 var thisXML:String = Application.application.parameters.thisXML;

  var loader:URLLoader = new URLLoader(new URLRequest(thisXML));
  loader.addEventListener(Event.COMPLETE, loadNewXML);

 }

 public function loadNewXML(event:Event):void
        {
     
         loadedXML = new XML(event.target.data);
      
        }

In this post I am not going to go into details about the actual actionscript code which generates this swf and instead focus on the XSL commands used to generate the HTML appear content from the button. You can see an example of the project below. To quickly replace the actual content used in this project, I grabbed some state flag images off google and text descriptions from wikipedia..

The actual XSL file is relatively simple and easy to read. I'm basically looping thru the XML nodes with an xsl:for-each select="data/node" tag. Then within the for-each block, I output the title, the image, and text associated with that node. For the text based output I used the xsl:value-of tag. For the image, I used the xsl:variable tag so I could embedded the variable within an img src tag.

N.B. the html and body tag had to be removed to post on blogger. Also the node "title" had to be renamed nodeTitle.

Samples XSLT of States


    
    
      

    
       

     
       
    
    

    

    

In conclusion

So XSLT was extremely useful to generate a printable/human readable rendering of the XML that was used in the flash generated display object. The SWF is re-usable and only needs a different XML file to be used on another web page with different content.