使用MXML

使用MXML

MXML是我们可以用来为我们的Adobe Flex程序布局用户界面。我们也可以用MXML来定义程序的不可见部分，例如到服务器端的数据源的访问以及用户界面组件与服务器端数据源的数据绑定。这个主题介绍了MXML，并且描述了MXML与程序标准的联系。

使用MXML
我们使用两种语言来编写Flex程序：MXML与ActionScript。MXML是我们可以用来布局用户界面组件的XML标识语言。我们也可以使用MXML来定义一个程序的不可见部分，例如：到服务器数据源的访问以及用户界面组件和服务器数据源的数据绑定。
与HTML类似，MXML提供了标签来定义用户界面。如果我们曾使用HTML来进行工作，MXML看起来就非常熟悉。然而，MXML比HTML更为结构化，并且他提供了一个更为丰富的标签集合。例如，MXML包含了可视组件标签，例如数据网格，树，标签浏览，菜单等，并且包括提供网络服务连接，数据绑定和动画效果等非可视组件。我们同时可以使用自定义的组件来扩展MXML，并且这些组件可以作为MXML标签来进行引用。
MXML与HTML之间最大的不同就在于MXML定义的程序将会被编译成为SWF文件，并且使用Flash播放器来运行，从而提供比基于页面的HTML程序更为丰富与动态的用户界面。
我们可以在单一的文件或是多个文件中编写MXML程序。MXML同时支持在MXML和ActionScript文件中编写的自定义组件。

编写一个简单的程序
因为MXML是普通的XML文件，所以我们在开发环境上有很广的选择。我们可以在简单的文本编辑器，XML编辑器，或者是支持文本编辑的集成开发环境(IDE)中来编写MXML代码。Adobe提供了一个专业的名为Flex Builder的IDE，我们可以用来开发我们的程序。
下面的例子显示了一个简单的“Hello World”程序，这个程序仅包含一个<mx:Application>标签与两个子标签，<mx:Panel>和<mx:Lable>。<mx:Application>标签总是一个程序的根标签。<mx:Panel>标签定义了一个可以包含标题栏，标题，状态信息，边框，内容区域作为其子节点的面板容器。<mx:Label>标签代表一个标签控件，一个用来显示文本的简单用户界面组件。
<?xml version="1.0" encoding="utf-8"?>
<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>
将这段代码存为hello.mxml文件。MXML文件名必须以mxml作为扩展名。然后我们就可以编译并且运行生成的SWF文件。
下图显示了浏览器窗口运行的“Hello World”程序的运行结果：

 

关于XML编码
文档的第一行指明了一个可选的XML版本的声明。包含指明MXML是如何编码的编码信息是一个很好的习惯。许多文本编辑器可以让我们选择文件编码。在北美的操作系统中，ISO-8859-1是主流的编码格式，并且许多程序在默认情况下使用这种编码格式。我们可以使用UTF-8编码格式来保证最大的平台兼容性。UTF-8为文件中的每一个字符提供一个唯一的数目，并且他是与平台，程序和语言无关的。如果我们指定了编码格式，他必须与我们所用的文件编码相匹配。下面的例子显示了指明了UTF8编码的XML声明：
<?xml version="1.0" encoding="utf-8"?>
关于<mx:Application>标签
除了作为Flex程序的根标签，<mx:Application>标签代表了一个程序容器。一个容器就是一个包含其他组件，并且具有内建的子组件布局规则的用户界面组件。在默认情况下，一个程序容器从上到下布局其子组件。我们可以在一个程序容器中嵌入其他的容器类型，例如在上面所示的面板容器。

关于MXML标签属性
MXML标签的属性，如<mx:Label>标签的text,color,fontSize属性，可以让我们定义一个组件的初始状态。我们可以在<mx:Script>标签中使用Application来在运行时改变组件状态。
MXML标签与ActionScript类的关系
Adobe将Flex作为一个ActionScript类库来实现。这个类库包含组件(容器与控件),管理器类，数据服务类，以及其他特性的类。我们使用MXML与ActionScript语言配合类库来开发我们的程序。
MXML标签对应于ActionScript类或是类的属性。Flex分析MXML标签，并且编译成为一个包含相应的ActionScript对象的SWF文件。例如，Flex提供了ActionScript按钮类来定义Flex按钮控件。在MXML中，我们使用下面的MXML语句来创建一个按钮控件：
<mx:Button label="Submit" />
当我们使用MXML标签定义一个控件，我们创建了这个类的一个实例对象。这条MXML语句创建了一个Button对象，并且将按钮对象的label属性初始化为字符串Submit。
对应于一个ActionScript类的MXML标签与ActionScript类使用相同的命名约定。类名以一个大写字母开头，在类名中以大写字母分隔单词。每一个MXML标签都对应于ActionScript类的一个属性，适合这个对象的一种风格，或者是这个对象的一个事件监听器。
在Flex Builder中使用MXML
Flex Builder包含一个针对于Adobe Flex程序开发的代码编辑器。当我们使用MXML工作时，Flex Builder代码编辑器通过提示帮助我们完成代码完成，语法错误检查，格式化代码以增强可读性，从而帮助我们简化我们的代码编辑任务。

MXML与标准的关系
MXML使用标准，在这一部分我们描述MXML与下列标准的关系：
XML
事件模型
Web服务
Java
HTTP
图像
CSS

XML标准
我们在XML文档中编写Flex程序。XML文档使用标签来定义结构化信息以及他们之间的关系。在MXML中，<mx:Application>定义了一个程序的根标签。我们在<mx:Application>标签的子标签中定义程序的其他部分。MXML标签的例子包括容器标签，例如<mx:VBox>，他定义了用户界面的矩形区域，控件标签，如<mx:TextInput>，定义了通常的用户界面控件。

事件模型标准
Flex事件模型是文档对象模型(DOM) 3 事件的一个子集，他是W3C的一个工作草案。DOM 3定义一个事件系统，这个系统允许事件监听器的平台中立与语言中立注册，通过一个树结构来描述事件流，并且为每一个事件提供了基本的脉络信息。MXML提供了标签属性允许我们指定Application代码来处理事件。例如，在下面的例子中click事件监听器发送了一个网络服务请求：
mx:Button click="mywebservice.myOperation.send()"/>

Web服务标准
Flex提供了MXML标签来与在网络服务描述语言文档(WSDL)中定义了接口的网络服务进行交互，这个文件可以作为URL得到。WSDL是一个网络服务理解的消息描述的标准格式，对应于这些消息的响应的格式，网络服务支持的协议，以及消息发送到哪里。
Flex程序支持网络服务请求，结果作为简单对象访问协议(SOAP)消息的格式，并且使用HTTP进行传输。SOAP提供了我们可以用来在网络服务客户端(例如，Flex程序)之间转换结构化与类型信息的基于XML格式的定义。

Java标准
Flex提供了MXML标签用来与服务器端Java对象进行交互，包括普通的老Java对象，JavaBean，以及EJB。

HTTP标准
Flex提供了MXML标签用来发送标准的HTTP GET或是POST请求，并且使用HTTP响应返回的数据进行工作。

图像标准
Flex提供了MXML标签用来在程序中使用JPEG,GIF，PNG格式的图像。Flex同时提供了标签用来在程序中导入SWF文件与SVG文件。

CSS标准
MXML风格是由W3C的CSS标准来定义和使用的。CSS提供了一种机制可以用来定义文本格式以及我们希望在Flex组件上实现的可视效果。