Flex组件：模板组件

一个RIA系统的界面通常都保持某种外观风格。

比如所有界面都有标题栏、正文区域、控制按钮区域。

这些区域的大小和位置是固定的，也就是说主体布局保持一致。

因此在切换不同界面的时候，视觉上不会有很大的跳跃感。

?

为了达到上述不同界面主体布局保持一致的目的，通常我们会想到把一致的布局抽出来，形成“模板”，

然后在制作不同界面的时候，应用这个模板，在其上添加局部的组件。

?

其实，我们平常使用的“容器”组件就是宽泛意义上的“模板组件”。

只是我们不这么称谓它而已。

下面我们尝试为某假定项目制作“模板组件”。

?

>>需求定义

某项目界面由主界面和若干子界面构成。

主界面中包含上部的菜单领域下部的子界面领域。

子界面领域将根据选择的菜单项目来切换不同的子界面。

不同的子界面的布局完全一致：最上部是界面名称，中部是正文领域，下部是控制按钮领域。

为使得不同子界面拥有完全一致的布局，要求各个子界面使用“模板组件”，实例化模板组件后，在其中部的正文领域添加自己的控件。

?

>>实现方式

首先制作“模板组件”。

我们用MXML方式自定义该组件，让其继承自Panel。当然继承自Module也是一样的。

?

>>源代码

（1）模板组件：DataEntryTemplate.mxml

?????????? 注意代码中的元数据标签 DefaultProperty("customChildren")的作用

?

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
??? xmlns:s="library://ns.adobe.com/flex/spark"
??? xmlns:mx="library://ns.adobe.com/flex/mx" width="278" height="245"
??? creationComplete="init()">

?<fx:Metadata>
??[DefaultProperty("customChildren")]
?</fx:Metadata>
?
?<fx:Script>
??<![CDATA[
???import mx.core.UIComponent;
???
???[ArrayElementType("mx.core.UIComponent")]
???public var customChildren:Array;

???protected function init():void
???{
????if(customChildren)
????{
?????for(var i:int=0;i<customChildren.length; i++)
?????{
??????var child:UIComponent=UIComponent(customChildren[i]);
??????addChild(child);
?????}
????}
???}

??]]>
?</fx:Script>
?<mx:ControlBar>
??<s:Button label="test" />
?</mx:ControlBar>
</mx:Panel>

?

（2）.模板测试程序：Text.mxml

???????????我们在模板组件中插入一个按钮

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
????? xmlns:s="library://ns.adobe.com/flex/spark"
????? xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
?????? xmlns:components="components.*">
?<fx:Script>
??<![CDATA[
??]]>
?</fx:Script>
?<components:DataEntryTemplate x="68" y="66">
??<s:Button x="115" y="129" label="按钮"/>
?</components:DataEntryTemplate>
</s:Application>

?

>>结果

使用FlashBuilder的设计模式试图对Test.mxml中的模板组件内部添加组件的时候，你会发现根本看不到添加的组件，也就无从进行布局（大小、位置的调整等）。

不过程序运行确是正常的，在模板组件中添加的按钮能够正常表示出来。

如果使用了模板组件反而造成自定义布局的不变，那么使用利弊就要自己考量了。

?

>>遗留的问题

上述结果中描述的问题需要解决

?

=============================================

参考资料：

《Adobe Flex3 高级编程》中

第十七章<自定义MXML组件>的<17.3 构建模板组件>