Introduction to Flex - Writing a simple application
(Page 4 of 5 )
Because MXML files are ordinary XML files, you have a wide choice of development environments. You can write MXML code in a simple text editor, a dedicated XML editor, or an integrated development environment (IDE) that supports text editing.
Macromedia has its own IDE for developing flex applications, Flex Builder. The Flex Builder IDE lets you write, edit, debug, and preview MXML and ActionScript files.
Note: MXML filenames must end in a lowercase .mxml file extension.
The following example shows a simple "Hello World" application that contains just an <mx:Application> tag and one child tag, the <mx:Label> tag. The <mx:Application> tag is always the root tag of a Flex application. The <mx:Label> tag represents a Label control, a very simple user interface component that displays text.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle="Hello
World Sample" marginTop="125"
marginBottom="5" marginLeft="5" marginRight="5" >
<mx:Label text="Hello World!"/>
<mx:Label text="Hello World!" color="#003366" fontSize="40"/>
</mx:Application>
The above sample MXML file tells the application to write two labels with the text "Hello World" in them. The second Label modifies the size of the text and its color. The first line of the above example specifies an optional declaration of the XML version. It is good practice to include encoding information that specifies how the MXML file is encoded. Many editors let you select from a range of file encoding options. On North American operating systems, ISO-8859-1 is the dominant encoding format, and most programs use that format by default. You can use the UTF-8 encoding format to ensure maximum platform compatibility. UTF-8 provides a unique number for every character in a file, and it is platform-, program-, and language-independent. If you specify an encoding format, it must match the file encoding you use. The above example uses UTF-8 encoding format.
To deploy the application, you copy the MXML file to a Web application directory. The first time a user requests the MXML file URL in a Web browser, the server compiles the MXML code into a SWF file. The server then sends the SWF file to the Web browser where it is rendered in Flash Player. Unless the MXML file changes, the SWF file is not recompiled on subsequent requests.
When the Flex compiler automatically generates the HTML file that contains this application, it uses the height and width properties of the <mx:Application> tag to determine height and width properties of the <object> and <embed> tags. The <object> and <embed> tags determine the size of the Flash drawing surface.
The following figure shows the "Hello World" application shown above rendered in a Web browser window:
In addition to being the root tag of a Flex application, the <mx:Application> tag represents an Application container. A container is a user-interface component that contains other components and has built-in layout rules for positioning its child components. By default, an Application container lays out its children vertically from top to bottom. You can nest other types of containers inside an Application container to position user-interface components according to other rules.
The properties of an MXML tag, such as the text, color, and fontSize are the properties of <mx:Label> tag, which let you declaratively configure the initial state of the component. You can use ActionScript code in an <mx:Script> tag to change the state of a component at runtime.
Now let's see another example with MXML and ActionScript combined together in a single file using <mx:Script> tag.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" pageTitle=
"Fahrenheit to Celsius converter" marginTop="125"
marginBottom="5" marginLeft="5" marginRight="5" >
<mx:Script>
function convert():Void {
celsius.text=frmt.format((fahrenheit.text-32)/1.8);
}
</mx:Script>
<mx:NumberFormatter id="frmt" precision="2"/>
<mx:Label text="Temperature in Fahrenheit:" fontSize="24" color="#003366" />
<mx:TextInput id="fahrenheit" width="200" fontSize="24" />
<mx:Button label="Convert" click="convert()" fontSize="24" />
<mx:Label text="Temperature in Celsius:" fontSize="24" />
<mx:Label id="celsius" width="250" fontSize="24" color="#003366" />
</mx:Application>
The above example converts Fahrenheit to Celsius with the Fahrenheit value entering in an input text box and by clicking the convert button. The convert button has a click event handler which call the ActionScript function convert() which was written in between <mx:Script> and </mx:Script> tags.
The following figure shows the converter application shown above rendered in a Web browser window:
In a similar way you can combine ActionScript and MXML to create some powerful Enterprise Rich Internet Applications.
Next: More Flex features >>
More Flash Articles
More By Adi Reddy Mora
/ 29 
