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
You can write an MXML application in a single file or in multiple
files. MXML also supports custom components written in MXML and
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
Writing a simple application in MXML
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.
The executing SWF file for the previous example is shown below:
Save this code to a file named hello.mxml. MXML filenames must
end in a lowercase .mxml file extension.
About XML encoding
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
<?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:
namespace for top-level ActionScript elements, such as Object and
Array, and for tags built into the MXML compiler, such as <fx:Script>.
xmlns:mx="library://ns.adobe.com/flex/mx" The namespace
for the MX component set.
xmlns:s="library://ns.adobe.com/flex/spark" The namespace
for the Spark component set.
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.
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:
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:
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
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
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.
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:
Ease of development
Different developers or development groups can develop and
debug modules independently of each other.
You can reuse modules in different applications so that you
do not have to duplicate your work.
You can isolate and debug errors faster than if your application is
developed in a single file.
In Flex, a module corresponds
to a custom component implemented either in MXML or in ActionScript.
These custom components can reference other custom components. There
is no restriction on the level of nesting of component references
in Flex. You define your components as required by your application.
can also use sub-applications rather than modules to develop applications that
are not monolithic.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.