MXML

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

Demos:

• Adobe Flex 3 Component Explorer
• Tour de Flex (web version)
• Tour de Flex is a desktop (AIR) installation “for exploring Flex 4 capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more”.

See also: the Adobe Flex article

Versions

There don't seem to be official schemas for MXML, but some people did create schemas. In particular, check out Ali Mansuroglu's flex3.xsd or Matthias Georgi's Relax/rnc version.

• Flex Version 2: dead
• Flex Version 3: aka MXML 2006, requires Flash 9
• Flex Version 4: aka MXML 2009, requires Flash 10

An 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.

Flex 3 version

A basic Flex 3 / mxml 2006 document would look something like this:

Files:

• myFirstApplicationFlex3.mxml
• myFirstApplicationFlex3.swf

<?xml version="1.0" encoding="utf-8"?>
<!-- Introductory Flex 3 example, DKS, TECFA, University of Geneva, nov 2010) --> 
 <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>

Below is a screen capture of the "application":

Flex myFirstApplicationFlex3.mxml

Flex 4 version

Files:

• myFirstApplicationFlex4.mxml
• myFirstApplicationFlex3.swf

A similar program in Flex 4 would uses more namespaces:

• Flex 4: "http://ns.adobe.com/mxml/2009", typically non-visual stuff
• Spark: "library://ns.adobe.com/flex/spark", the new Flex 4 components
• Flex 3: "library://ns.adobe.com/flex/mx", the old Flex 3 components (not really used in the example below)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	       xmlns:s="library://ns.adobe.com/flex/spark" 
	       xmlns:mx="library://ns.adobe.com/flex/mx" 
	       minWidth="200" minHeight="100" width="200" height="100">

  <s:Panel x="28" y="26" 
	   width="200" height="100"
	   title="My First Application">
    <s:Label text="Hello World !"
	     width="150" height="46" 
	     x="21" y="10" verticalAlign="middle" 
	     textAlign="center" fontWeight="bold" fontSize="24"/>
  </s:Panel>
  
</s:Application>

Editing and compiling (both versions)

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

Put the code above in text files. Save the text file as "myFirstApplication.mxml" or similar. 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 3, require Flash Player 9 or above, files generated by Flex 4 require Flash Player 10.

As of nov 2010, this will not show in my Ubuntu in Firefox 3.6.12 and Shockwave Flash 10.1 r102 ... don't know why.

Software

There exist several solutions for writing mxml code:

• Use the Adobe Flash Builder (formerly called Flex Builder). This is a commercial tool, but it is 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.

Links

See also the Adobe Flex article

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 ...):

• flex.org An Adobe page that includes Flex resources (as of nov 2011 the best bet) and news from other places

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

• Developing applications in MXML (part of the Adobe Flex 4 manual

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)
• User Interface Markup Languages at xul.fr shortly compares various XML-based User Interface Language languages like MXML, XAML (Microsoft) or XUL (Mozilla).
• Which Interface for a Web Application? is a similar short comparison at scriptol.com.