关于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"?>
- <!-- 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" 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" 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中没有组件之间相互引用的限制。你可以按需定义你应用程序中的组件。