Overview
MXML is used in Flex to create the layout and place controls within your application.
Application tags
When you create a new project in Flex you will get a basic MXML application created for you that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:WindowedApplication> |
When you run this a blank window will appear but does nothing else. To change the appearance of the window you can set several properties of the WindowedApplication tag. Here is an example of setting the initial size of the window:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
</mx:WindowedApplication> |
If you click on some white space within the first part of the tag and press CTRL + Space a list of possible properties for the tag will be shown. To add components to the page we need to add MXML tags within the WindowedApplication tags. To define how the controls are laid out we need to use a container tag, a few examples are:
<mx:VBox>
<!-- Display objects get laid out vertically -->
</mx:VBox>
<mx:HBox>
<!-- Display objects get laid out horizontally -->
</mx:HBox>
<mx:Box verticalAlign="middle" horizontalAlign="center">
<!-- Display objects get aligned -->
</mx:Box> |
To add code to the application you need to add the <mx:Script> tag to the top off the application:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:VBox>
<!-- Display objects get laid out vertically -->
</mx:VBox>
</mx:WindowedApplication> |
All you need to type is the <mx:Script> tag and Flex will create the rest. To get code to execute when the application starts you need to create a public function within the script tags and call it from the applications creationComplete event:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200" creationComplete="init()">
<mx:Script>
<![CDATA[
public function init():void {
//init code goes here
}
]]>
</mx:Script>
<mx:VBox>
<!-- Display objects get laid out vertically -->
</mx:VBox>
</mx:WindowedApplication> |
In Flex Builder when you create a variable with a class that hasn’t been imported it will insert the import code at the top of the script.
Here is an example of a simple application that takes a text input from the user and displays a message on a click of a button:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var mText:String = '';
public function init():void {
//init code goes here
this.mText = 'Hello';
}
public function doMessage():void {
//This is run once the button is clicked
Alert.show(this.mText+" "+this.cTextInput.text,"Example Alert");
}
]]>
</mx:Script>
<mx:VBox width="100%">
<!-- Display objects get laid out vertically -->
<mx:Label text="Please enter your name:" width="100%" />
<mx:TextInput id="cTextInput" width="100%" height="30"/>
<mx:Box horizontalAlign="center" verticalAlign="middle" width="100%">
<mx:Button label="OK" click="doMessage()" height="30"/>
</mx:Box>
</mx:VBox>
</mx:WindowedApplication> |
Note the use of the object “this”, it references the application or class that you are in. This is a simple example of the use of the Alert class. You can modify the appearance of the Alert box using flags, and set the text on the buttons. Note that all functions that are to execute from an Event need to be public functions. A full list of MXML controls can be seen by typing “<mx:”.
|