This is the second in a series of posts making up a general tutorial on Adobe Flex. In this post I describe MXML, the scripting language used to create the UI in Flex.
What is MXML?
MXML is a tag based declarative language similar to XML and HTML. Using MXML tags, you can define Flex UI controls, such as <mx:Button>, <mx:ComboBox>, and <mx:DataGrid>. You can also use MXML to define non-UI Flex components, such as <mx:HTTPService> to retrieve and send data, <mx:NumberFormatter> to format data, and <mx:XML>, <mx:ArrayCollection>, and <mx:XMLListCollection> to create data elements.
Flex makes use of “properties” and “style properties” to set attributes of components. In some cases the distinction between properties and style properties is somewhat unclear, but in general properties relate to non-visual component attributes, and style properties are used to control the visual appearance of Flex UI components.
In MXML properties and style properties are set the same way within the opening MXML tag in the format PROPERTY_NAME=”PROPERTY_VALUE”. As we will see in the section on ActionScript, properties are set in ActionScript using “dot” notation common to many object oriented programming languages (myObj.propName = propVal;), but style properties are controlled using the StyleManager setStyle(”propName”, propVal) and getStyle(”propName”) methods.
Many times MXML tags are defined with only an opening tag:
<mx:Label text="Enter your name:" fontSize="10"/>
In other instances opening and closing MXML tags are used to contain other tags within them.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox width="400" height="300">
<mx:Button id="myBtn" label="Click Me"/>
</mx:VBox>
</mx:Application>
Starting with the top-level <mx:Application>, all the nested MXML tags in a Flex application make up what is known as the “display list“, a hierarchical set of “objects” making up the visual display of your application. When you define an MXML tag, the component it represents is automatically added to your application’s display list. Later we will see how adding components using ActionScript requires specifically adding the component to the display list using addChild().
Two types of properties deserve special mention, event properties and effect properties.
Events – some properties are used to specify a function that is called when something “significant” happens to a Flex visual or non-visual, system component. Here are some event properties that can be set for the <mx:Button> control:
click – the button was clicked
hide – the “visible” property of the button was set to false
mouseOver – user moved the mouse over the button
<mx:Button label="Click Me" click="myClickListener(event);"
hide="hideFunc(event);"/>
As we will see later, in ActionScript event listeners are specified with the addEventHandler().
Effects – effect properties specify an effect object that should be used when some significant event occurs. Here are some examples:
<mx:VBox hideEffect="{myFadeObj}" resizeEffect="{myResizeObj}"
showEffect="{myFadeObj}"/>
The id property is very important in Flex. If you wish to refer to a Flex component property when setting a property in another Flex component, the referenced component should have an id property set.
<mx:CheckBox id="chbx" label="Ready to Go" selected="true"/>
<mx:Button label="Click to Go" enabled="{chbx.selected}"
click="goNow(event)"/>
Note: even if you wish to refer to a Flex component within that component’s tag, you still need an id. The following code will not give the desired result, setting the height of a VBox equal to the width:
<mx:VBox width="100" height="{width}" backgroundColor="0xFFFFFF"/>
Using the “this” keyword (used in many object oriented languages to refer to the “current object”) will not work, because “this” refers to either the root application tag or to the custom component root tag:
<mx:VBox width="100" height="{this.width}" backgroundColor="0xFFFFFF"/>
The above tag and the one before it without the “this” keyword will set the VBox height to the width of the application, not to the width of the VBox.
Here is how to achieve the desired result:
<mx:VBox id="myVB" width="100" height="{myVB.width}"
backgroundColor="0xFFFFFF"/>
It is possible to code ActionScript within property values in MXML, though it is best to only do this if the ActionScript will be short. Here is an example of how to perhaps not use ActionScript in an MXML tag:
<mx:Label fontSize="20"
text="Your average percentage based score, graded on a curve:"/>
<mx:Label fontSize="20" text="{(score1+score2+score3/3)/300 * .4376}"/>
In this case it might be better to bind the Label text to a variable defined in ActionScript.
Tags: general tutorials MXML