技术开发 频道

设计松耦合的Flex组件

【IT168技术分析】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=&#34;1.0&#34; encoding=&#34;utf-8&#34;?>
<mx:VBox xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;>
<mx:DataGrid id=&#34;myDG&#34; >
<mx:columns>
<mx:DataGridColumn headerText=&#34;Posts&#34; dataField=&#34;title&#34; />
<mx:DataGridColumn headerText=&#34;Date&#34; dataField=&#34;pubDate&#34; width=&#34;100&#34; />
</mx:columns>
</mx:DataGrid>

</mx:VBox>

    根标签是一个简单的VBox组件并且其中声明了xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;。一旦创建了外部模块,主程序就可以像下面一样调用这个MXML组件:

<?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?>
<mx:Application xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;absolute&#34; xmlns:cust=&#34;comp.*&#34; >
<mx:Panel title=&#34;Comtaste&#39;s Blog Reader&#34;>
<cust: custDataGrid width=&#34;80%&#34; />

</mx:Panel>

</mx:Application>

    主程序添加了一个新的XML命名空间并使用一个包名来表示在一个文件夹中定义的所有组件:

<mx:Application xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;absolute&#34; xmlns:cust=&#34;comp.*&#34; >
“cust”命名空间指向”comp”文件夹中的MXML组件,实际上如果是非常好的实践所有的组件都应当被保存在一个子目录下。

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


<cust: custDataGrid width=&#34;80%&#34; />
注意MXML标签的名字对应着这个组件的文件名。

0
相关文章