An MXML viewer for Flex projects
MXML is the XML-based markup language of Adobe Flex, now Apache Flex, used to declare user interfaces for Flash and AIR applications. Many of those applications are still in maintenance or being migrated, and their .mxml files are often compressed onto a few long lines by build tools or old editors. This MXML viewer shows the component hierarchy as a tree and formats the markup so you can read it without installing a Flex SDK or IDE.
Anatomy of an MXML file
A Flex 4 application typically declares three namespaces on its root:
fx(http://ns.adobe.com/mxml/2009) for language tags such as<fx:Script>,<fx:Declarations>and<fx:Style>.s(library://ns.adobe.com/flex/spark) for Spark components like<s:Button>and<s:VerticalLayout>.mx(library://ns.adobe.com/flex/mx) for the older MX (Halo) components.
ActionScript code lives inside <fx:Script>, almost always wrapped in a CDATA section so that < and && in the code do not break the XML.
Example
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"><fx:Script><![CDATA[ private function greet():void { label1.text = "Hi"; } ]]></fx:Script><s:layout><s:VerticalLayout gap="10"/></s:layout><s:Button label="Greet" click="greet()"/><s:Label id="label1"/></s:Application>Formatted with 2 spaces:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[ private function greet():void { label1.text = "Hi"; } ]]></fx:Script>
<s:layout>
<s:VerticalLayout gap="10"/>
</s:layout>
<s:Button label="Greet" click="greet()"/>
<s:Label id="label1"/>
</s:Application>The script block is kept exactly as written; the formatter does not touch code inside CDATA.
Reading the component tree
In the Tree tab, the root s:Application lists its namespace declarations and attributes first (prefixed with @, such as @minWidth), followed by child components under their full prefixed names. Event handlers like @click and ids like @id are attributes, so you can quickly see which components are wired to code. The script appears as a plain text value under fx:Script.
This makes the tree useful for migration work: you can list the components a screen uses, spot MX components that still need replacing, and find id values referenced from ActionScript.
Errors in MXML
MXML must be well-formed XML. The usual culprits are ActionScript outside a CDATA block (a < comparison ends up parsed as a tag) and a raw & in text. The status bar gives the line and column. Checks specific to Flex, such as unknown component names or type errors, need the Flex compiler.
Related tools
For general XML files, the XML viewer offers the same tree with Minify. If you are moving a Flex UI to .NET, the XAML beautifier formats the target markup, and the XML parser lets you change the attribute prefix in the tree.