21 March 2010
MXML files are ordinary XML files, so 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. Flex supplies a dedicated IDE, Adobe Flash Builder 4, that you can use to develop your applications.
The first line of the MXML file is the XML declaration. This line has to be the first line in each MXML file.
The next line is
<s:Application> tag, which defines the Application container that is always the root tag of a Flex application. The
<s:Application> tag specifies namespaces to use to resolve ActionScript classes. It also specifies additional layout information.
<s:Panel> tag defines a Panel container that includes a title bar, a title, a status message, a border, and a content area for its children. Its
title property is set to
"My Application". The Panel container also specifies a layout pattern and additional layout information.
<s:Label> tag represents a Label control, a very simple user interface component that displays text. Its
text property is set to
fontSize properties of the
<s:Label> tag change the style of the font used. There are many ways to apply styles to components in Flex 4. For more information, see About styles in the Adobe Flex 4 documentation.
Note: You can compile your Flex application by using the command-line compiler mxmlc, or by using Flex Builder 4. For instructions on compiling your application with mxmlc, see the Coding with MXML and ActionScript.
<?xml version="1.0" encoding="utf-8"?> <!-- HelloWorld.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="160"> <s:Panel title="My Application" width="100%"> <s:layout> <s:VerticalLayout paddingTop="10" horizontalAlign="center"/> </s:layout> <s:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </s:Panel> </s:Application>