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