Saturday, December 22, 2007

The MXML format

MXML is an XML based language used to layout the various components in your Flex project. MXML coupled with ActionScript usually constitutes an entire Flex project.

Once you create a New Project in FlexBuilder, and choose to create a new application, the following code is what you start with :


<?xml version="1.0" encoding="utf-8"?>
<mx:application mx="http://www.adobe.com/2006/mxml">

</mx:application>


As you can see, the first line indicates that the XML syntax is to be strictly followed. Then, the Application is created, and all other UI components are to be placed within the Application tag.

Lets have our first, "Hello World" Program,


<?xml version="1.0" encoding="utf-8"?>
<mx:application mx="http://www.adobe.com/2006/mxml">

<mx:script>
<![CDATA[
import mx.controls.Alert;

private function sayHello():void{
Alert.show("Hello World");
}
]]>
</mx:script>

<mx:button label="Say Hello" click="sayHello();" />
</mx:application>


The above program, creates a simple application, with a single button. On clicking the button, you get a "Hello World" alert box shown.
The click event handler for the button is the sayHello() function. Much of the code is self-explanative if you know object oriented and event-handling concepts, along with some simple javascript.

No comments: