用MXML开发Flex应用

关于MXML

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

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

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

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

一个简单的应用

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

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

Xml代码

<?xml version="1.0"?>
<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>

xml" style="DISPLAY: none" name="code"><?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>

关于XML编码

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

如果你指定了一种编码方式，则它必须符合你这个文件的编码。下面是一个为一个XML文件声明了UTF-8编码方式的例子：

Xml代码

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

xml" style="DISPLAY: none" name="code"><?xml version="1.0" encoding="utf-8"?>

关于<mx:Application>标签

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

关于MXML标签的属性

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

MXML标签与ActionScript classes的关系

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

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

Xml代码

<mx:Button label="Submit"/>

xml" style="DISPLAY: none" name="code"><mx:Button label="Submit"/>

当你用MXML标签创建一个控制组件时，实际上是创建了一个这个组件的对象。这个MXML语句创建了一个Button对象，并将它的label属性初始化为"Submit"。

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

理解一个Flex应用的架构

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

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

利于团队开发

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

重用性好
你可以在不同的应用中重用这些模块，避免了重复开发。

可维护行好

你可以更快更好的调试程序的错误。

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