IFBIN - Great Software By Example

We have been working on a toolset for editing/generating Flex MXML called REX. REX is a generator/parser for MXML. The purpose of REX is to make human editing of MXML much easier.

Lets face it XML is not the best human readable format. Machines love it, but we humans cannot visualize the hierarchy that we are editing easily and the tag formatting quickly becomes an undue burden. Worse still XML can be arranged in many different base layouts yet still maintain the same parsed meaning. This variability makes it an imperfect format for human editing, yet a wonderful data interchange format. Although there are a wide range of XML editors available, they still lack the power that plain text provides. Rex provides an ASCII text format that is easy to read allowing the generation of MXML in a round trip fashion.

REX started out of the need format MXML documents in a standardized manner for Flex By Example. Ideally we would receive MXML projects, run them through REX and the MXML would be perfectly consistent across every Flex By Example MXML document. With that completed, I explored creating a generation format that used a simple ASCII format similar to Re-Structured Text in Python. In my initial tests, it looked feasible to create a file format that would be easy for humans to edit yet could be processed into MXML and back. Below is an example of REX and its MXML equivalent.

REX Example:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xml
   .version = "1.0"
   .encoding = "utf-8"

mx:Application
   .width="100%"
   .height="100%"

   : This is a comment

   mx:Hbox
      .width = "100%"
      .height = "100%"

      mx:Button
         .label = "Hello Rex 1"
         .width = "200"
         .height = "40"

      mx:Button
         .label = "Hello Rex 2"
         .width = "200"
         .height = "40"


Example MXML:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<?xml version="1.0" encoding="utf-8"?>

<mx:Application width="100%" height="100%" >

   <!-- This is a comment -->

   <mx:Hbox width="100%" height="100%" >

      <mx:Button label="Hello Rex 1" width="200" height="40" />

      <mx:Button label="Hello Rex 2" width="200" height="40" />

   </mx:Hbox>

</mx:Application>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

TABS have Meaning in REX!!!

In REX, tabs have meaning and shape the hierarchy of the document. A single tab implies that a name is a child element or an attribute. If you preface the indented name with a '.' it becomes an attribute and without it is an element. This is easy to get used to and the lack of tags makes readability and errors very easy to see.

Comments in REX are created by using ':' or '::' for a line or block comment anywhere within a REX document. Just preface any line with : and it will be a comment, or preface a block with :: and the block will be commented. No more editing comments in multiple locations or searching for the end of a comment block.

REX also assists with CDATA blocks and inline style sheets. Simply add a CDATA as a block and the entire block will be within a CDATA tag.

What is interesting with REX is that ActionScript no longer looks out of place in an MXML document. With REX, you can have AS methods inline and the script blocks do not look out of place at all.

REX is not for everyone, it is strict and is designed for professional use. I wrote it to solve a host of problems with XML editing in general. We also found that REX was excellent for MXML generation. We used REX to generate MXML examples for Flex By Example providing base examples covering the base MXML tags in Flex 1.5.

REX will ship with full source in Flex By Example. We are also looking at creating an Eclipse perspective that uses the REX format.

More to come,

Ted ;)