MXML

<pageby nominor="false" comments="false"/>

This entry is part of the Flex tutorials

Introduction

MXML is an XML-based user interface markup language that together with ActionScript allows to develop Flash applications. MXML is considered a proprietary standard due to its tight integration with Adobe technologies, in particular Flash.

One can use the 'free Adobe Flex developer kit to compile MXML + ActionScript code into Flash. Flex (i.e. the combination of MXML and Actionscript) did become a fairly popular technology for developping rich internet applications (e.g. educational multimedia). Flex/mxml seems to gain popularity since it's a sort of "semi-thick client" technology and for once Adobe takes a much better political approach. Both the compiler and the documentation is open and free.

MXML allows to define

• layout structure
• some behaviors
• presentation of information

There is no official schema for MXML, but some people did create schemas. In particular, check out Ali Mansuroglu's flex3.xsd or Matthias Georgi's Relax/rnc version.

Introductory example

Firstly, install the Flex SDK.

A Flex program is a text file that contains a combination of xml elements and optionally actionscript instructions. Here, we just focus on the MXML part.

A basic mxml document would look something like this:

File myFirstApplication.mxml :

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="160" >
    <mx:Panel 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        title="My First Application" >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

Make sure to respect XML Syntax (e.g. closing tags).

Put the text above in a text file. Save the text file as "myFirstApplication.mxml". See the "editing software" section in the Flex article if you plan to use an editor with Flex support. But for starters you can use any text editor, preferable an editor with XML support.

Assuming the Flex SDK is properly installed, in the terminal, type:

mxmlc myFirstApplication.mxml

Information appears on the screen and about half a second later, if all is well, you get informed that a file "myFirstApplication.swf" has been produced. Open this file in a flash player or in a web browser.

SWF files generated by Flex require Flash Player 9 or above.

Software

There exist several solutions for writing mxml code:

• Use the Adobe Flex Builder (commercial, but free for education)
• Use a Relax schema, e.g. Gnu Emacs with flex3.rnc and also its ActionScript mode to write classes.
• Use an XSD schema with a XSD-supporting XML editor plus an ECMA/ActionSript supporting editor.
• Use the specialized free open source Flashdevelop ActionScript/Flex editor.

See also the Adobe Flex article

Links

At Adobe

• Flex Developer Center has a lot of information. Not always obvious to find the best entry point for beginners, but have a look at these (if the links didn't move ...):
  • Coding with MXML and ActionScript
  • Building components in MXML
  • Flex Programming Elements (A manual chapter).

• flex.org (an Adobe blog) aggregates Flex news from a number of sites. It includes MXML-related stuff.

• Component explorer Displays both a live component a matching MXML code] (Very useful !)

MXML Schemas

Adobe doesn't seem to provide any sort of schema that would allow you to use an XML editor. But there are some initiatives.

• Flex 1.5/2 (old) mxml2.xsd from Falkensweb. I made a local copy
• flex3.xsd made by Ali Mansuroglu. I made a local copy
• Matthias Georgi in order to support development on Emacs created a Relax NG Schema for Adobe Flex 3 (flex3.rnc download) and that is based on Ali's XSD.

Others

• MXML (Wikipedia. Still a stub, i.e. not very useful as of Aug. 2008)

• An overview of MXML: The Flex markup language by C. Coenraets, Adobe (2004). Outdated, but still useful !