If the shortest distance between two points is a straight line, then the shortest distance between start and finish of a quick hack is “every relevant programming language.” Thus, not too long after hacking out some PHP, Python, XSLT, Bourne Shell script, Regular Expressions and Actionscript I completed a small Flex application that, given a swc, determines and visually represents the size of its library dependencies.

You can try it out here:
http://blogs.soph-ware.com/posted-content/files/SwfSizeDisplay/

A while ago, I ran across a post by Joe Berkovitz that talks about Flex’s undocumented SwfxPrinter tool. After looking at the screenshot of the application he mentioned, I immediately thought that a TreeMap would be an ideal way to present that information.

A little later, Josh Tynjala posted a GPL’d TreeMap implementation, which seemed like the perfect way to visualize the relative sizes of my Flex library dependencies. As the treemap implementation supports drilldown through categories, it even works quite well with larger swc’s.

So, with no further ado, here’s a screenshot of the end product:

The above screenshot shows the relative sizes of the different dependencies that are pulled in as a part of the Flex UndoRedo framework.

I ran into a few different problems in creating the above. First, the output that SwfxPrinter creates is not always well-formed :(. I created a sed script that looked for certain problems, such as duplicate attributes, attributes that should have had spaces between them, etc. Second, the size and offset information is generated as comments within the XML instead of nodes, so I had the sed script convert the comments into special nodes. And lastly, I ran into problems on Linux because, for some reason, incomplete XML is being returned to the Flash player, even though correctly processed by my shell and PHP scripts. I haven’t fully investigated, but am wondering if a second HTTP request is supposed to be made with the rest of the data, but I probably won’t investigate this until I’m really bored.

SrcView is enabled in the example, so you can right-click and view the source for the Flex example. Most of the work, however, is done in the backend. As I mentioned briefly, I just hacked it out in the quickest possible way. It basically looks like the following:

1. PHP Script accepts the file being uploaded and passes is to a Bourne shell script
2. The shell script extracts the library.swf file from the SWC
3. The shell script then runs SwfxPrinter on the swf file and postprocess it using sed
4. Relevant nodes are then extracted from the XML using a XSLT stylesheet
5. Based on included namespaces, a Python script then creates the tree-based XML from the flat XML
6. The PHP script then returns the output to the Flex client

About 170 lines of ActionScript later (for a total of about 320 lines of code) and we have a visualizer for SWC’s :).

Please let me know what you think!