Flex的背景和技术特点(3)

1.3  MXML

MXML是一种基于XML的标记语言，在Flex技术中，MXML用于设计用户界面，实现丰富的Flex表现层。从作用上说，MXML和HTML的功能是基本一致的，都是设计用户界面，但是MXML提供了较HTML更为丰富的界面组件，并且在开发上更为结构化，条理更加清晰。

MXML的编写同样类似于HTML，它通过标签来定义和描述组件。按照学习编程的惯例，下面请看一个用MXML编写的Hello World示例。

示例1.1  Hello World

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Flex MXML Test" x="10" y="10" fontSize="12">
<mx:Label text="Hello World. 世界，你好！" fontWeight="normal" fontSize="24" fontFamily="Times New Roman" fontStyle="italic" alpha="1.0"/>
</mx:Panel>
</mx:Application>

通过示例1.1的代码可以看到，虽然MXML是类似于HTML的格式，但是Panel、Label等开发组件表达了一个GUI开发平台才具备的特征。MXML是基于XML语言的，可读性很强，由标签(Tag)、标签中的属性(Attribute)及属性值(Attribute Value)等元素组成。

那么，如何才能运行起这个Hello World呢？

第一，用一个普通的文本编辑器，如记事本、EditPlus等，编写并保存上述代码，需要注意的是文件扩展名要保存为小写的mxml，如 test.mxml，我们暂且把它保存在C盘的user文件夹下。

第二，使用Flex 3 SDK的命令行进行编译，Flex的编译工具在SDK的bin文件夹下，如Flex 3 SDK解压缩到C盘根目录，那么在命令行执行(本书所有代码示例部分都默认使用C:\user作为代码文件夹)：

cd c:\flex_sdk_3\bin
mxmlc c:\user\test.mxml

可以看到在user文件夹下生成了test.swf文件。

第三，用浏览器或Flash Player打开这个swf文件，就看到了这个Hello World的运行效果，如图1.2所示。

图1.2  Hello World运行效果

结合图1.2我们来分析一下这个程序的代码。

<mx:Application>是MXML的根元素，是MXML所有组件的容器。在这个标签中，我们要声明mxml的命名空间。

<mx:Panel>是个面板组件，是GUI程序开发的常见组件，其功能是个组件容器。我们把它的标题设置成了“Flex MXML Test”，并对位置尺寸进行了设定。

<mx:Label>同样是GUI程序开发必不可少的组件之一，常用于文字容器，在图1.2中，这个Label的内容就是“Hello World. 世界，你好！”这个字符串，并将其嵌套在一个<mx:Panel>中。在这个程序里，<mx:Panel>是<mx:Label>的容器。

这就是一个标准的MXML的大致写法。需要特别注意的一点是，在第一行的<?xml version=“1.0”?>中有时候需要进行指定的编码，我们用文本编辑工具处理的时候要保存成对应的编码，如为了方便处理中文和国际化，我们可以把第一行改写成<?xml version=“1.0” encoding=“utf-8”?>，并将代码保存为UTF-8格式。