This is the second session in the flex tutorial series. In “Flex 101: Knowing Flex” we just get to know Flex a bit closely. In this session we will focus on MXML basics, which is the key to any Flex application development.

As you already know, MXML is a kind of XML markup language, which only used in Flex especially for layout user interface components.

MXML vs. HTML

Though for a new bi it may be hard to grasp, but honestly MXML isn’t so different than HTML. Just like HTML, MXML provides tags that define user interfaces. But MXML provides a much richer tag set, such as-data grids, data binding, trees, tab navigators, accordions, menus, animation effects etc. Not only that you will be even able to extend MXML with custom components (MXML + ActionScript) that you reference as MXML tags. The biggest difference between HTML and MXML is the outcome, the MXML defined applications are compiled into SWF (Flash file) files and rendered by Flash Player which you got to admit much more rich and dynamic than HTML.

MXML coding

You are a developer or not, you should know by now, every markup language follow their own coding standard, MXML isn’t different at all. Since it is a variant of XML markup language, you will find a lot of similarities. So let’s start with a simple MXML file and explaining the parts of it.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Label text=”Hello World!” fontWeight=”bold” fontSize=”24″ />

</mx:Application>

This is an example of simple MXML file, to display “Hello World”. Note that the first line of the MXML file specifies an optional declaration of the XML version.

<?xml version=”1.0″ encoding=”utf-8″?>

Advertisement

It is always good practice to include encoding information that specifies how the MXML file is encoded. You can use the UTF-8 encoding format to ensure maximum platform compatibility. UTF-8 provides a unique number for every character in a file, and it is platform-, program-, and language-independent. If you specify an encoding format, it must match the file encoding you use. On the second line, the <mx:Application> tag represents an Application container. A container is a user-interface component that contains all other components and has built-in layout rules for positioning its child components. By default, an Application container lays out its children vertically from top to bottom. But off course you have the ability to lay them as you wish by using CSS, which we will discuss at later session of Flex lessons.

Naming conventions

Just like any other scripting/markup language MXML file have naming conventions. An MXML file must adhere to the following naming conventions:-

1. The MXML file name must start with a letter or underscore character (_), and they can only contain letters and numbers and underscore characters after that.
2. The MXML file name must not be the same as ActionScript class names, component
   id

   values, or the word application. In addition you must avoid using filenames that match the names of MXML tags that are in the mx namespace.

3. The MXML file should end with a lowercase character and extension should be .mxml

You can set most component properties as tag attributes, in the form (just like above example):

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

You can also 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>

Adding CSS to a MXML file

Just like in HTML, you can inline a style sheet in your code, point to an external style sheet, or define a style as an attribute of a specific element. For example I saved a CSS style sheet (external) name style.css with the following code:

.title {

font-family: Courier New, Arial;

font-size: 18;

}

TextArea {

backgroundColor: #EEF5EE;

}

Now I can declare the external style sheet using the

tag, and apply different styles to specific controls.

<?xml version=”1.0″ encoding=”utf-8″?>

< mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Style source=”style.css”/>

<mx:Label styleName=”title” text=”This is CSS test”/>

<mx:TextArea text=”In this test we added external style sheet style.css to style our MXML application”/>

</mx:Application>

Remember “<mx: style source=” should point to either absolute or relative path to your style sheet. That should be enough to give you an overview of MXML.

Suggested references:

Adobe Flex Builder 2 (sponsored), ActionScript and MXML language reference, Flex developer Center, Flex.org