Saturday 28 March 2009

Flex for Thick Gits #2 -MXML is not a Roman Date!

Right it is Saturday, there is no rugby worth the watching so what better way to spend the time - lets talk about MXML.

MXML is what you right FLEX apps in. (At this point i should mention that an AIR app is just a FLEX app that runs outside the browser using a runtime .. ok?) it is just ordinary common or garden XML that describes the application, once you have written the MXML you compile it and you have your FLEX application.

If you use FLEX BUILDER it takes a lot of the pain out of the "painting" of the application and I urge you to download it and try it, it will make your transistion into a FLEX developer so much easier that writing the MXML first hand.

OK lets look at some MXML



(Click Image to make bigger)

Since MXML is XML the first line of any application has to be
<?xml version="1.0"?>

This defines it as XML, you will note that it does not have a closing </xml> tag, this is fine so don't worry about it.

Next we have
<!-- DominoYesMayBe Is A Love God -->

This is a comment, you may want to make yours more meaningful, however if you feel you must extol my god like appearance to the world please feel free to do so ;-)

Next we have
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

This is the start of your MXML, everything to do with your application will happen between this opening tag and the corresponding closing tag </mx:Application>

Next we have
<mx:VBox>

This is the opening tag of a visual component called a vBox, it has to have a corresponding end tag of </mx:VBox> which you will see several lines further on.

Then there is
<mx:TextInput id="myText" text="Calypso Duck Snot" />

A TextInput is the visual equivalent of an HTML <input type='text'> input field. Note I have given it an ID of myText and some default text of "Capypso Duck Snot". Those eagled eyed folk will notice there is no closing tag for this item. Well the / before the > closes the tag so that you don't need a </mx:TextInput>

Also you will not that the vBox tags enclose the TextInput tag this means that visually the TextInput will be inside the vBox.

Both the vBox and the TextInput are neatly enclosed in the <mx:Application> tags. Thus placing them inside your application - This is as it should be for this is the Tao of XML :-)

OK.. in the next post we will create another little application and have a look at variables!

Disqus for Domi-No-Yes-Maybe