MXML

The educational technology and digital learning wiki
Jump to navigation Jump to search

<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.org (an Adobe blog) aggregates Flex news from a number of sites. It includes MXML-related stuff.
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.

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