You use two languages to write applications in Flex: MXML and ActionScript. MXML is an XML markup language that you use to lay out user interface components. You also use MXML to declaratively define nonvisual aspects of an application, such as access to data sources on the server and data bindings between user interface components and data sources on the server.
Like HTML, MXML provides tags that define user interfaces. MXML will seem very familiar if you have worked with HTML. However, MXML is more structured than HTML, and it provides a much richer tag set. For example, MXML includes tags for visual components such as data grids, trees, tab navigators, accordions, and menus, as well as nonvisual components that provide web service connections, data binding, and animation effects. You can also extend MXML with custom components that you reference as MXML tags.
One of the biggest differences between MXML and HTML is that MXML-defined applications are compiled into SWF files and rendered by Adobe® Flash® Player or Adobe® AIR™, which provides a richer and more dynamic user interface than page-based HTML applications.
You can write an MXML application in a single file or in multiple files. MXML also supports custom components written in MXML and ActionScript files.
Using Spark and MX component sets
Flex defines two sets of components: MX and Spark. The MX component set was included in previous releases of Flex, and is defined in the mx.* packages. The Spark component set is new for Flex 4 and is defined in the spark.* packages. The Spark components use a new architecture for skinning and have other advantages over the MX components.
The MX and Spark component sets contain many of the same components. For example, both component sets defines a Button control, TextInput control, and List control. However, while you can use MX components to perform most of the same actions that you can perform by using the Spark components, Adobe recommends that you use the Spark components when possible.
Writing a simple application in MXML
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. Flex supplies a dedicated IDE, called Adobe® Flash™ Builder™, that you can use to develop your applications.
The following example shows a simple “Hello World” application that contains just an <s:Application> tag and three child tags, the <s:Panel> tag and the <s:Label> tags, plus a <s:layout> tag. The <s:Application> tag defines the Application container that is always the root tag of an application. The <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. The <s:Label> tag represents a Label control, a very simple user interface component that displays text.
<?xml version="1.0"?> <!-- mxml\HellowWorld.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:layout> <s:VerticalLayout/> </s:layout> <s:Panel title="My Application"> <s:Label text="Hello World" fontWeight="bold" fontSize="24"/> </s:Panel> </s:Application>
Save this code to a file named hello.mxml. MXML filenames must end in a lowercase .mxml file extension.
About XML encoding
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"?>
About the <s:Application> tag
In addition to being the root tag of an application, the <s:Application> tag represents a Spark Application container. A container is a user-interface component that contains other component sets, and uses layout rules for positioning its child components. By default, the Spark Application container lets that you set the position of its children. In the previous example, you set the layout of the container to VerticalLayout so that the Application container automatically lays out its children in a vertical column.
You can nest other types of containers inside an Application container, such as the Panel container shown above, to position user interface components according to other rules. For more information, see Visual components.
In an XML document, tags are associated with a namespace. XML namespaces let you refer to more than one set of XML tags in the same XML document. The xmlns property in an MXML tag specifies an XML namespace.
In Flex, you typically define three namespaces:
In general, you include the Spark and MX component namespaces so that you can use any components from those sets. Where possible, use the Spark components. However, not all MX components have Spark counterparts, so the components in the MX namespace are also sometimes necessary.
You can define additional namespaces for your custom component libraries. For more information on namespaces, see Using XML namespaces.
About MXML tag properties
The properties of an MXML tag, such as the text, fontWeight, and fontSize properties of the <s:Label> tag, let you declaratively configure the initial state of the component. You can use ActionScript code in an <fx:Script> tag to change the state of a component at run time. For more information, see Using ActionScript.
Compiling MXML to SWF Files
If you are using Flash Builder, you compile and run the compiled SWF file from within Flash Builder. After your application executes correctly, you deploy it by copying it to a directory on your web server or application server.
You can deploy your application as a compiled SWF file, as a SWF file included in an AIR application or, if you have Adobe LiveCycle Data Services ES, you can deploy your application as a set of MXML and AS files.
End users of the application do not typically reference the SWF file directly in an HTTP request. Instead, you embed the application SWF file in an HTML page. The HTML page then uses a script to load the SWF file. Collectively, the HTML page and the script are known as the wrapper.
When the SWF file is embedded in the HTML page, users then access the deployed SWF file by making an HTTP request to the HTML page, in the form:
For more information on wrappers, see Creating a wrapper.
Flex also provides a command-line MXML compiler, mxmlc, that lets you compile MXML files. You can use mxmlc to compile hello.mxml from a command line, as the following example shows:
cd flex_install_dir/bin mxmlc --show-actionscript-warnings=true --strict=true c:/app_dir/hello.mxml
In this example, flex_install_dir is the Flex installation directory, and app_dir is the directory containing hello.mxml. The resultant SWF file, hello.swf, is written to the same directory as hello.mxml.
For more information about mxmlc, see Flex compilers.
The relationship of MXML tags to ActionScript classes
Adobe implemented Flex as an ActionScript class library. That class library contains components (containers and controls), manager classes, data-service classes, and classes for all other features. You develop applications by using the MXML and ActionScript languages with the class library.
MXML tags correspond to ActionScript classes or properties of classes. Flex parses MXML tags and compiles a SWF file that contains the corresponding ActionScript objects. For example, Flex provides the ActionScript Button class that defines the Flex Button control. In MXML, you create a Button control by using the following MXML statement:
When you declare a control using an MXML tag, you create an instance of that class. This MXML statement creates a Button object, and initializes the label property of the Button object to the string "Submit".
An MXML tag that corresponds to an ActionScript class uses the same naming conventions as the ActionScript class. Class names begin with an uppercase letter, and uppercase letters separate the words in class names. Every MXML tag attribute corresponds to a property of the ActionScript object, a style applied to the object, or an event listener for the object. For a complete description of the Flex class library and MXML tag syntax, see the ActionScript 3.0 Reference for the Adobe Flash Platform.
Understanding the structure of an application built with Flex
You can write an MXML application in a single file or in multiple files. You typically define a main file that contains the <s:Application> tag. From within your main file, you can then reference additional files written in MXML, ActionScript, or a combination of the two languages.
A common coding practice is to divide your Flex application into functional units, or modules, where each module performs a discrete task. In Flex, you can divide your application into separate MXML files and ActionScript files, where each file corresponds to a different module. By dividing your application into modules, you provide many benefits, including the following: