3.1 MXML语法
通常情况下,Flex程序由以下三种文件组成:
l 以 mxml为后缀的程序文件
l 以 as 为后缀的 ActionScript 文件
l 以css 为后缀的样式表文件
MXML文件就好比大脑,as文件和css文件是他的手和脚,主程序MXML文件将项目中的所有文件组合在一起,形成一个有机的整体。
本章简要说明MXML的语法,并结合实力分析MXML文件的内容结构。
在上一章的实例中,创建了一个简单的Flex程序,主程序文件是一个“mxml”为后缀名的文件,这个文件所采用的便是我们这里要讲的MXML语言。
MXML语言,是专门用于Flex程序中,描述界面表现的一种XML标记语言。我们可以用它来管理程序的整体布局,控制组建的央视和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等等。
3.1.1 命名规范
类似网页中实用的HTML语言,MXML提供了一系列的标签供用户使用,到哪MXML的语法更严格的多,他提供的内置标签也更丰富。
MXML区分大小写,且文件名和变量标识名都区分大小写。字母大小写错误是编程中常见的错误,隐蔽性较高,有时很难排错。在编写代码时,应采用合理的命名规范,避免出现这类错误。
在Flex程序中,每个MXML文件必须以小写的“mxml”作为后缀,文件名要遵循ActionScript中变量的命名规则。因为在程序中,所有的MXML文件名可以直接被ActionScript当作一种用户定的数据类型来使用。因此,MXML文件名不能和ActionScript类文件同名,否则就会造成类型冲突。在ActionScript中,变量名必须以字母或下划线开始,且只能包含字母、数字和下划线。
需要注意的是,MXML文件不能名为“application” ,“application”是住程序文件所采用的默认标记,不可以在被使用。也不能和程序中任意组件的id值同名。
例如,下面是HelloWorld.mxml文件的源代码:
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Button id="btn" x="51" y="107" label="Click me" click="trace('这是点击后的文字')"/>
4 <mx:Label id="tip_txt" x="182" y="109" text="这是点击前的文字" fontSize="12" width="136"/>
5 </mx:Application>
尝试作如下修改:
<mx:Label id="HelloWorld" x="182" y="109" text="这是点击前的文字" fontSize="12" width="136"/>
再次编译,将无法通过编译,得到如下错误信息:identifier and class may not have the same name,意思是说组件的唯一标识名“id”不可以和对象重名。
还有一点说明:程序不可以使用“mx”作为目录名。“mx”是Flex Framework的官方组件库的命名空间,受到Flex编译器的保护。假如在程序目录中创建了名为“mx”的目录,这个目录中存放的MXML文件和ActionScript类文件都将无法使用,会被编译器忽略。
为了避免文件名冲突,同时也为了增强程序的可读性,文件和变量一般采用有意义的单词、名词简写或字符组合来命名。下面介绍一些习惯用法:
(1) 用类型的简写作后缀,比如:LoginPanel表示登陆面板;SendBtn表示发送按钮;UserTxt表示文本组件。
(2) 使用下划线组合单词,比如:User_Name、User_Email表示用户的信息;Move_Speed表示速度。
(3) 常量全部使用大写,比如:PI表示圆周率;CLICK_EVENT表示点击事件名。
不管时使用哪种方式,目的都是为了提高程序的代码质量,这对开发和日后的维护都很有帮助。
3.1.2 MXML文件结构
一个MXML文件由哪些元素构成?我们已经知道MXML文件其实是一个标准的mxl文件,因此可以参考XML语法来分析MXML文件的内容。
这里仍然以上一章实例的代码为例:
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Button id="btn" x="51" y="107" label="Click me" click="trace('这是点击后的文字')"/>
4 <mx:Label id="tip_txt" x="182" y="109" text="这是点击前的文字" fontSize="12" width="136"/>
5 </mx:Application>
在MXL文件中,需要在第一行声明XML文件采用的语法版本号和文件采用的编码格式。从上面的代码中可以看到这两个属性:version和encoding,其中encoding编码格式这个属性是可选的。选定的编码格式必须符合文件采用的编码格式,默认为utf-8格式。在中文操作系统中,一般都使用utf-8这个编码格式,他兼容采用双字节编码的语言(包括中文、韩文、日文等)和其他常见的西方语言,而且跨平台,是使用最广发的编码格式。另外也可以使用简体中文专用编码gb2312.
mx:Application标签是一个特殊的标签。在每个Flex项目中,可能有多个MXML文件,但作为程序入口的运行文件只有一个,主文件的标示是根节点为mx:Application,一个程序中只能出现一个mx:Application节点。
在根节点中,还看到了一个属性:xmlns:mx=http://www.adobe.com/2006/mxml,表示将mx定义为MXL的命名空间。xmlns标签专门用来定义XML的命名空间,XML命名空间可以用来定义一套独立的XML标签,并且为这些标签制定特殊的解析方式。比如XML中默认的标签格式为:<Button>node</Button>,这里的Button节点被作为一个普通的文本节点,没有什么特殊的意义。定义命名空间后,在节点上就爱上空间前缀:<mx:Button></mx:Button>,这时候mx:Button 就代表mx空间下的Button对象。
mx命名空间对应的路径是“http://www.adobe.com/2006/mxml”,Flex的配置文件中将这个路径定义为一个全局资源标识符,并对应了一个MXL文件。在这个文件中,列出了mx命令空间下的所有标签。在Flex Builder2的安装路径下,进入Flex SDK2\frameworks目录中,找到flex-config.xml 文件并使用记事本或其他编辑工具打开,找到下面的内容:
1 <namespaces>
2 <!—Specify a URI to associate with a manifest of components for use as MXML-->
3 <!—elements.
4 <namespace>
5 <uri>http://www.adobe.com/2006/mxml</uri>
6 <manifest>mxml-manifest.xml</manifest>
7 </namespace>
8 </namespaces>
从上面的配置中发现,http://www.adobe.com/2006/mxml 这个URI和mxml-manifest.xml文件对应。下面打开同目录下的mxml-manifest.xml 文件,里面列出了MXML中的所有标签和与标签相关的类文件路径。
1 <?xml version="1.0"?>
2 <componentPackage>
3 <component id="Accordion" class="mx.containers.Accordion"/>
4 <component id="AddChildAction" class="mx.effects.AddChildAction"/>
5 <component id="AnimateProperty" class="mx.effects.AnimateProperty"/>
6 <component id="Application" class="mx.core.Application"/>
7 <component id="ApplicationControlBar" class="mx.containers.ApplicationControlBar"/>
8 <component id="ArrayCollection" class="mx.collections.ArrayCollection"/>
9 <component id="Blur" class="mx.effects.Blur"/>
10 ..
11 .
12 <component id="SecureHTTPChannel" class="mx.messaging.channels.SecureHTTPChannel"/>
13 <component id="SecureRTMPChannel" class="mx.messaging.channels.SecureRTMPChannel"/>
14 </componentPackage>
在这份列表中,节点的id代表标签名,class表示类文件的路径。比如mx:Application标签,也就是对应了mx.core.Application类。
在开发中,当程序中有很多的MXML文件和AS文件时,为了方便调用,我们可以将功能类似的文件放在一个文件夹中,定义一个命名空间,这样会节省很多时间。在自定义命名空间时,为了方便,一般直接指定命名空间包括的标签路径。比如:
xmlns:myComp="components.*"
因为使用了通配符“*”,components目录下的所有MXML文件和ActionScript类文件(不包括目录和目录中的文件)都被包括在myComp命名空间下。假如components中有一个LoginPanelmxml文件,则在程序中调用者个文件时,代码如下:
<myComp:LoginPanel></myComp:LoginPanel>
myComp下的标签被自动指向components中的文件。
当标签数量较多且分布在不同文件夹时,可以模仿Flex配置文件的做法,使用XML文件来描述标签的路径。在后面的内容中,我们会经常看到命名空间的使用。
Application标签中还有一个属性layout,这个属性定义了Application节点下元素的布局方式。由于Application是根节点,因此他的布局方式决定了程序的总体布局方式。“absolute”表示决定定位,所有子元素将按照各自的x、y坐标来定位。
Application节点中有两个子节点,分别是mx:Button和mx:Label节点,代表了两个组件,节点中的属性定义了组件初始化后的一些状态,比如坐标、标示名、文字等等。