XMLObjectOutput is a really cool tool for debugging when you are writing Flex Apps. It is somewhat similar to CFDump and displays the structure of any Object in Flex.

The XMLObjectOutput class is used to convert XML Objects to simple Object types. This is useful for easy access to values and attributes of the XML Object by using property names versus using firstChild, nextNode, etc. to access the data. This Class also traces Arrays and Objects in a clear representation of the structure. XMLObjectOutput can be found in the install for Flex in the \Flex\extras\XMLObjectOutput\ directory. You will find two files (XMLObjectOutput.as and XMLObjectOutput.html). XMLObjectOutput.html provides documentation on the usage and methods of the XMLObjectOutput actionscipt class. In order to use this class for debugging you need to have the Flash Debug Player installed. Instructions for installing the debug player can be found here. The XMLObjectOuput.as file needs to be placed in the same directory as your *.mxml and *.as files or in the {web-app}\flex\WEB-INF\flex\user_classes\ directory.

XMLObjectOutput can be used for development similar to CFDump. The class can be used either in an mxml document or an .as file. The output gets written to the {windows user home directory}\flashlog.txt. In my example using Windows XP it gets written to C:\Documents and Settings\bpurcell\flashlog.txt. Each time the Flash player is loaded the flashlog.txt file is cleared and output gets appended while it is running.

For this example I will use the XMLObjectOutput to debug the Flex BlogReader in the samples application that ships with Flex. Open the /blogreader/blogreader.mxml file and locate the following section of code

function feedResponse(response) {
            if (response.rss==null)
                feed=new RDFFeed(response);
            else
                feed=new RSSFeed(response);
        }

First copy the XMLObjectOuput.as class to \samples\WEB-INF\flex\user_classes\. Next, add the following code right above the if statement

   //debugging
   var myDebugger:XMLObjectOutput = new XMLObjectOutput() ;
   myDebugger.traceObject(response, 'Dump of Feed Data');

Open the blogreader.mxml in a browser running the debug player. You will see something like the following in flashlog.txt. You can use a tool like wintail to follow the flashlog.txt file.

Dump of Feed Data  [object Object]
 |-- RDF [object]
       |-- xmlns [object]
       |-- xmlns:admin [object]
       |-- xmlns:sy [object]
       |-- xmlns:dc [object]
       |-- xmlns:rdf [object]
       |-- item [array]
             |-- [0] [object]
                   |-- rdf:about [object]
                   |-- date [object]
                   |-- creator [object]
                   |-- subject: null
                   |-- description [object]
                   |-- link [object]
                   |-- title [object]
                   ..............

Notice that this outputs the structure of the object returned in the response. Using this tool we can easily identify the notation needed to reference something within the object. Also the XMLObjectOutput does not recursively call itself to dump the object tree you will need to use dot notation to dump objects further down the tree.

For example we can see from the dump that we could use response.RDF.item[0] to dump the first item in the array. Now modify the code to look like the code below.

   //debugging
   var myDebugger:XMLObjectOutput = new XMLObjectOutput() ;
   myDebugger.traceObject(response.RDF.item[0], 'Dump of Feed Data');

Refresh the browser, and review the flashlog.txt. Notice that only the first item in the array was dumped.

Dump of Feed Data  [object Object]
 |-- rdf:about [object]
 |-- date [object]
 |-- creator [object]
 |-- subject: null
 |-- description [object]
 |-- link [object]
 |-- title [object]

To output the title of the first object in the array use the following notation "response.RDF.item[0].title".

See how easy it is to use XMLObjectOutput to display the structure of objects and debug your applications?

This works great when you're needing to inspect objects within <mx:script> tags but how do you inspect an object within a mxml tag? For example, if I have a <mx:Model id=x> with some data in it, how would I use the XMLObjectOutput class to inspect the contents of x?

You could create a function called dumpX

function dumpX() { var myDebugger:XMLObjectOutput = new XMLObjectOutput() ; myDebugger.traceObject(x, 'Dump of x'); }

Then just add a button and handle the click event by calling dumpX()