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.
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"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >
<mx:Panel title="My Application" marginTop="10" marginBottom="10"
marginLeft="10" marginRight="10" >
<mx:Label text="Hello World!" color="#6601D7" fontSize="24" />
</mx:Panel>
</mx:Application>
The first line of the document 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 following example shows an XML declaration tag that specifies the UTF-8 encoding format:
<?xml version="1.0" encoding="utf-8"?>
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 autogenerates 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 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. For more information, see Using Flex Components in Developing Flex Applications.
The properties of an MXML tag, such as the text, color, and fontSize properties of the <mx:Label> tag, 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. For more information, see Working with ActionScript in Flex in Developing Flex Applications.
Version 1.5
Send me an e-mail when comments are added to this page | Comment Report
Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000016.htm