MXML

This article or chapter is incomplete and its contents need further attention. Some information may be missing or may be wrong, spelling and grammar may have to be improved, use your judgment!

This entry is part of the Flex tutorials

Introduction[edit | edit source]

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

Versions[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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

Files:

<?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 4 version[edit | edit source]

Files:

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)[edit | edit source]

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[edit | edit source]

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.