Dreamer的FLEX教程翻译：设计松耦合的Flex组件

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组成。

 程序代码

<?xml version="1.0" encoding="utf-8"?>
<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组件：

 程序代码

<?xml version="1.0" encoding="utf-8"?>
<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命名空间并使用一个包名来表示在一个文件夹中定义的所有组件：

 程序代码

<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:cust="comp.*" >

“cust”命名空间指向”comp”文件夹中的MXML组件，实际上如果是最佳实践所有的组件都应当被保存在一个子目录下。

使用组件和使用其它MXML标签一样，唯一不同的是不再使用”mx”前缀而是使用自定义前缀：

 程序代码

<cust: custDataGrid width="80%" />

注意MXML标签的名字对应着这个组件的文件名。