Can’t afford Flex Builder? Build your own!

Well, almost. You can get some easy auto-completion, syntax highlighting and simple error checking of MXML scripts with a nifty bit of XSD integration with Eclipse, using an XML Schema doc from an open source project, imaginatively titled XSD4MXML.

The XSD format is the typical extension for XML Schema, a document defining a set of rules to which an XML document must conform. Eclipse can utilise a Schema document then, in combination with some of the baked in plugins – namely Web Tools and the standard XML editor – to offer these benefits.

The XSD4MXML document outlines what properties any given tag can express – at the most basic level for example, an Application tag can have a layout attribute or a frameRate attribute, an HTTPService tag has a url attribute – but it references every attribute, includes inheritance, for all properties, events, methods etc. This document weighs in at 1.2mb, it’s almost 28,000 lines of code.

Combine that with the error checking the standard XML editor offers and the auto-completion when an XSD format is provided and very quickly you’ve got some useful functionality.

So it goes:

  1. Get the latest version of Web Tools. A fresh Eclipse build should come with it, otherwise follow the instructions here. NB: I’m using Europa, the update process is a little different for the new Ganymede release – also, don’t try and get the latest Web Tools version if you haven’t got Ganymede.
     
  2. Grab the latest version of the XSD4MXML doc.
     
  3. Open the Preferences panel in Eclipse, go to Web and XML > XML Catalog and select ‘User Specified Entries’.
     
  4. Click ‘Add…’ and browse to your local copy of XSD4MXML, the namespace should fill automatically when you’ve found it, click OK.
     
  5. Go to General > Editors > File Associations and add the *.mxml type. Under ‘Associated editors’ add the XML editor.
     
  6. Still in the preferences, go to Content Types, open the Text type and select XML, again add *.mxml.
     
  7. Create a new project and MXML file, add the XML header, an mx:Application tag and namespace:
     
  8. <?xml version=”1.0″ encoding=”UTF-8″?>
    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

    </mx:Application>

  9. Within the Application tag, hit Ctrl+Space for the Content Assist menu and you should see a full list of MXML tags and you’re done.
     

You can use the Ctrl+Space shortcut for auto-complete on all tags, properties, events, etc. The XML editor should highlight syntax and do a little error checking itself.

Roll down the window and let the wind blow back your hair.