一个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 构建模板组件>