About MXML

关于MXML

You use two languages to write Flex applications: 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.

你可以用两种方式去编写Flex应用：MXML和ActionScript。MXML是一种用来设计编写用户接口组件的XML标记语言。你也可以用MXML去定义一个应用的非可视部分，比如访问服务器数据源和用户接口组件和服务器数据的绑定。

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.

就像HTML一样，MXML用标签来定义用户接口。如果你用过HTML那么再看MXML会感到很熟悉。不过，MXML比HTML更加结构化，规范化，它提供了很多“富标签集”。例如，MXML包含了定义可视化组件的标签，如data grids, trees, tab navigators, accordions, and menus，在非可视化组件方面，包含了web service connections, data binding, and animation effects。你也可以通过继承MXML组件定义自己的组件标签。

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.

MXML与HTML的最大不同之处就是，MXML编写的应用将被编译成SWF文件，并运行在Adobe® Flash® Player or Adobe® AIR™上面，它提供了比基于页面的HTML应用更丰富的表现。

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.

你可以将一个MXML应用用一个文件或多个文件编写。MXML同样支持用MXML或ActionScript编写的自定义组件。

Writing a simple application

一个简单的应用

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® Flex® Builder™, that you can use to develop your applications.

由于MXML就是一个普通的XML，因此，你有多种开发方式可以选用。你可以在一个简单的文本编辑器里编写MXML代码，或一个专用的XML文件编辑器，或者用一个IDE进行开发。Flex提供了一个专用的Flex开发IDE：Adobe® Flex® Builder™，你可以用它来开发Flex应用。

The following example shows a simple "Hello World" application that contains just an <mx:Application> tag and two child tags, the <mx:Panel> tag and the <mx:Label> tag. The <mx:Application> tag defines the Application container that is always the root tag of a Flex application. The <mx: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 <mx:Label> tag represents a Label control, a very simple user interface component that displays text.

下面是一个非常简单的"Hello World"应用。这个应用只包含了一个<mx:Application>标签和两个子标签：<mx:Panel>和<mx:Label>。<mx:Application>标签用来定义一个应用容器，它一定是一个Flex应用的根标签。<mx:Panel>标签定义了一个版面容器，它里面可以包含一个标题栏，标题，状态栏，边框以及一个内容区域。<mx:Label>标签定义了一个标签控件，用来显示文本信息。

<?xml version="1.0"?>
<!-- mxml\HellowWorld.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

About XML encoding

关于XML编码

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.

上面代码的第一行声明了XML的版本信息。指定MXML文件的编码方式是一个很好的习惯。许多编辑器可以选择不同的编码方式。如果是北美的操作系统，一般是ISO-8859-1编码。你可以用UTF-8编码方式来获得最大限度的平台兼容性。UTF-8编码方式为每个字符提供了独一无二的编码，并且它是与平台、语言无关的。

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文件声明了UTF-8编码方式的例子：

<?xml version="1.0" encoding="utf-8"?>

 About the <mx:Application> tag

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, such as the Panel container shown above, to position user interface components according to other rules.

关于<mx:Application>标签

除了作为Flex应用的根标签外，<mx:Application>标签实际上指定了一个应用容器。所谓“容器”，就是一个用户接口组件，它可以包含其他子组件，并且用一定的规则去安排这些子组件的位置。默认情况下，一个应用容器的将它上面的组件垂直排列，即从上到下。你可以嵌入其他类型的容器，比如上面例子中的面板容器，并可以通过指定排列规则来排列这些组件。

About MXML tag properties

关于MXML标签的属性

The properties of an MXML tag, such as thetext , fontWeight , 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 run time.

MXML标签的属性，如text,fontWeight,以及<mx:Label>标签的fontSize属性，可以让你直接去配置组件的初始状态。你可以在运行时通过<mx:Script>标签，用ActionScript代码去改变一个组件的状态。

The relationship of MXML tags to ActionScript classes

MXML标签与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.

Adobe 将Flex封装为一个ActionScript class库。这个类库包含了组件（容器和控制器），管理类，数据服务类以及实现其他特性的类。你通过MXML和ActionScript类库去开发应用程序。

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:

MXML标签实际上相当于ActionScript类或类中的属性。Flex将MXML标签解析并编译成一个SWF文件，这个文件包含了与之对应的ActionScript对象。例如，Flex提供了ActionScript Button类来定义Flex Button控制器。在MXML中，你可以通过下面的MXML语句来创建一个Button：

<mx:Button label="Submit"/>

When you declare a control using an MXML tag, you create an instance object of that class. This MXML statement creates a Button object, and initializes the label property of the Button object to the string "Submit".
当你用MXML标签创建一个控制组件时，实际上是创建了一个这个组件的对象。这个MXML语句创建了一个Button对象，并将它的label属性初始化为"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.

一个MXML标签就相当于一个与之名称相同的ActionScript类。类目以一个大写字母开头，大写字母用以区分不同的单词。每一个MXML标签的属性相当于ActionScript类的属性，如一个样式属性或一个事件监听器。

Understanding a Flex application structure

理解一个Flex应用的架构

You can write an MXML application in a single file or in multiple files. You typically define a main file that contains the <mx:Application> tag. From within your main file, you can then reference additional files written in MXML, ActionScript, or a combination of the two languages.

你可以在一个或多个文件中编写MXML应用。一般会定义一个主文件，里面包含了<mx:Application>标签。在这个主文件里，可以应用其他MXML文件、ActionScript或两者的结合。

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:

一般情况下，一个Flex应用要将不同的功能放到不同的模块中。在Flex中，你可以将你的应用分为MXML文件和ActionScript文件，并且每一个文件都实现了不同的功能。将应用模块化，有以下好处：

Ease of development 

利于团队开发

Different developers or development groups can develop and debug modules independently of each other.

不同的开发人员或不同的开发小组可以进行单独的开发或调试。

Reusability 

重用性好

You can reuse modules in different applications so that you do not have to duplicate your work.
你可以在不同的应用中重用这些模块，避免了重复开发。

Maintainability 

可维护行好

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.

在Flex中，一个模块就是用MXML或ActionScript实现的一个自定义组件。这些自定义组件可以引用其他组件。Flex中没有组件之间相互引用的限制。你可以按需定义你应用程序中的组件。