MXML Language Overview

MXML is an XML-based, declarative user-interface definition language. Business logic can be defined as ActionScript within <mx:Script> elements.

MXML and ActionScript are the languages of Flex. MXML files have the .mxml file extension.

So what does MXML stand for? Adobe gives no official meaning for the acronym, though it is likely the name comes from the MX suffix given to Macromedia Studio products released in 2002 and 2004. MXML was introduced in 2004 by Macromedia (before the company's acquisition by Adobe).

MXML Elements

MXML elements correspond to an ActionScript class or property... MXML elements can represent a property or a component...

Consider the following example where we create a Canvas element and set a DropShadowFilter as a filter.

   <mx:Canvas width="100" height="100">
      <mx:filters>
         <mx:DropShadowFilter angle="0" quality="3" />
      </mx:filters>
   </mx:Canvas>

The <mx:Canvas> element defines an instance of the Canvas component.
The <mx:filters> element specifies that we are going to set the filters property of the Canvas.
The <mx:DropShadowFilter> element defines a filter instance, which is added to the Canvas filters property collection (because it is inside the <mx:filters> element.

The package of a component is determined by the preceeding namespace.

Setting Component Properties

In MXML, a component property uses the same naming conventions as the corresponding ActionScript property. A property name begins with a lowercase letter, and capital letters separate words in the property names.

You can set most component properties as tag attributes, in the form:

   <mx:Label width="50" height="25" text="Hello World"/>

You can set all component properties as child tags, in the form:

   <mx:Label>
       <mx:width>50</mx:width>
       <mx:height>25</mx:height>
       <mx:text>Hello World</mx:text>
   </mx:Label>

Child tags are often used when setting the value of a property to a complex Object. (Though it is possible to specify a complex Object as the value of tag attribute.)

In the following example, child tags are used to set the data provider of a ComboBox control of an ArrayCollection object:

   <mx:ComboBox> 
       <mx:dataProvider>
           <mx:ArrayCollection>
               <mx:String>AK</mx:String>
               <mx:String>AL</mx:String>
               <mx:String>AR</mx:String>
           </mx:ArrayCollection>
       <mx:dataProvider>
   </mx:ComboBox>

One restriction on setting properties that use child tags is that the namespace prefix of a child tag must match the namespace prefix of the component tag.

{} Property Values

TODO...

Namespaces

MXML Namespaces...

MXML Files

MXML filenames must adhere to the following naming conventions:

Filenames must be valid ActionScript identifiers, which means they must start with a letter or underscore character (_), and they can only contain letters, numbers, and underscore characters after that.
Filenames must not be the same as ActionScript class names, component id values, or the word application. Do not use filenames that match the names of MXML tags that are in the mx namespace.
Filenames must end with a lowercase .mxml file extension.