If you’re here because you’ve just heard about MXML for the first time and have NO clue what it is, you should start by reading Wikipedia’s MXML article.
Here’s an example of a default MXML file, which we’ll examine below:
<?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”
xmlns:mx=”library://ns.adobe.com/flex/mx”
minWidth=”955” minHeight=”600“>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
</s:Application>
Doctype Declaration
<?xml version=”1.0″ encoding=”utf-8″?>
The first line is required for all XML documents. It’s not unique to MXML and is essentially telling any parsers that read this file what to expect. You can basically take it for granted and not have to worry about it as long as you’re creating and working with MXML files within Flash Builder. If you’re using another editor, just make sure that you’re saving your files using utf-8 or you’ll run into nasty compilation problems.
<?xml version=”1.0″ encoding=”utf-8″?>
Root Node
<s:Application minWidth="955" minHeight="600">
...
</s:Application>
There can only be 1 root node of any MXML document, and all other nodes must be contained by the root node. You can’t have 2 top level nodes in an MXML file, just like you can’t have 2 public classes in a single ActionScript class file. Also, the root node is normally a DisplayObjectContainer so you can place DisplayObjects within it. You could potentially create non-visual classes/components in MXML, but MXML’s strengths are laying out UI elements and rigging up event handling, so you would probably be better off using ActionScript in that case.
Namespace Declarations
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:bd="com.bdement.*"
Namespace declarations are equivalent to import statements in ActionScript, but they are a special attribute that must be present in the root node. The default namespace is http://ns.adobe.com/mxml/2009, which is required to make MXML “work,” regardless of whether you’re using the Flex Framework or not. xmlns:fx means “use a namespace called ‘fx,’” which lets you write tags that begin with <fx: and gives you access to all of the classes within that namespace. You can also import any package as a namespace by specifying it like the 2nd example.
The actual namespace (fx or mtvn, in the above lines) is arbitrary. For example, in the 2nd line I used “bd” as my namespace, but I could name it anything. Namespaces aren’t globally defined, so you can change them from class to class, although as a best practice you should name them consistently throughout your project.
Nodes
MXML gives you access to all of the public attributes exposed by a class. They’re set by declaring a value for them in MXML, like this:
<s:Application width="955" height="600">var myApp:Application = new Application();myApp.width = 955;myApp.height = 600;Dynamic Attributes
</fx:Declarations>
<s:Label text=”{labelText}“/>
<fx:Script>
<![CDATA[
[Bindable(event="labelChanged")]
private var labelText:String = "My Label";
]]>
</fx:Script>
<s:Label text="{labelText}"/>
[Bindable] metadata tag means that the next property is available for data binding. Data binding is a handy, but often misused feature in MXML. For complete information on data binding, read Adobe’s Bindable Metatag Documentation.[Bindable] tag, always, 100% of the time, include a unique event name. If you don’t, your performance when using data binding will get really bad, really fast.Event Handlers
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
trace("Clicked!");
}
]]>
</fx:Script>
<s:Button id="button1" click="button1_clickHandler(event)"/>
<s:Button click="trace(event.type)"/>