Flex应用程序可能有复杂的结构但它们通常都是由多个MXML,Actionscript 以及CSS文件组成。
在单个文件里编写整个程序不是一个最佳实践。那样会使代码难以维护和重用,而且程序没有被架构成逻辑上的各个部分。
Flex允许开发者将一个工程分成外部的模块,创建分离的MXML文件并且单独维护它们。将Flex程序分离成各个逻辑模块有很多好处。它允许开发小组独立地开发和调试单个模块,模块中的错误和功能可以被独立出来。这使得代码变得容易维护,也提高了代码在多个应用程序间的重用性。
每个MXML文件是一个MXML组件,但是只有主MXML程序可以加载外部组件。事实上一个应用程序中只能有一个 Application 标签,其它所有都是MXML组件。
为了设计一个MXML组件,需要创建一个MXML文件。这个文件的根标签不是Application而是一个组件标签(比如VBox,Panel,Canvas,Button,DataGrid等等),而且根标签中需要声明命名空间http://www.adobe.com/2006/mxml 。
下面的代码展示了一个简单的叫做custDataGrid.mxml 的MXML组件,它由一个用来存储数据的DataGrid组成。
<mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml">
<mx:DataGrid id="myDG" >
<mx:columns>
<mx:DataGridColumn headerText="Posts" dataField="title" />
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="100" />
</mx:columns>
</mx:DataGrid>
</mx:VBox>
根标签是一个简单的VBox组件并且其中声明了xmlns:mx="http://www.adobe.com/2006/mxml"。一旦创建了外部模块,主程序就可以像下面一样调用这个MXML组件:
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:cust="comp.*" >
<mx:Panel title="Comtaste's Blog Reader">
<cust: custDataGrid width="80%" />
</mx:Panel>
</mx:Application>
主程序添加了一个新的XML命名空间并使用一个包名来表示在一个文件夹中定义的所有组件:
程序代码
“cust”命名空间指向”comp”文件夹中的MXML组件,实际上如果是最佳实践所有的组件都应当被保存在一个子目录下。
使用组件和使用其它MXML标签一样,唯一不同的是不再使用”mx”前缀而是使用自定义前缀:
注意MXML标签的名字对应着这个组件的文件名。