LunaStudio.cn A Group of Passion Creators

FLEX 4 SKINNING–皮肤中的动态元件

SkinnableComponent中的[SKINPART]是用来描述皮肤的部件的.其中有俩参数,一个type,一个required
required为true表示这是个元件是必要元件.默认是FALSE
申明了type然后参数的类型是IFactory,说明这个类型就是一个动态元件了.
例如
[SkinPart(type="spark.components.Button")]
public var buttonFactory:IFactory;
然后这个工厂的定义被放置在了SKIN中,如
<fx:Declarations>
<fx:Component id="buttonFactory">
<s:Button />
</fx:Component>
</fx:Declarations>
从代码中可以看出来,工厂所以产生的实例被放在了一个与[SKINPART]对应的ID的Component中了.
举一反三,我们也可以在这里放入我们自定义的类.或者直接放一个复合的GROUP.例如
<fx:Component id="labelGroupFactory">
<s:Group>
<s:Image id="labelDisplay" />
</s:Group>
</fx:Component>

接下来就是使用它们了
动态元件在组件还存活着生命周期里需要开发者自己来维护它的产生和删除.主要用到方法
createDynamicPartInstance(partName:String):Object
和
removeDynamicPartInstance(partName:String, instance:Object):void

拿后边的那个复合GROUP来具例.
假设我们的需求是,我们的组件中有一个水平布局的GROUP,现在要放一些标签到其中.然后当我们点标签的时候再把该图片删除
首先我们的SKIN中定义
<fx:Component id="labelGroupFactory">
<s:Group>
<s:Label id="labelDisplay" click="{event.target.owner.dispatchEvent(new Event('removedMe'))}" />
</s:Group>
</fx:Component>

<s:Group id="container" width="100%" height="100%">
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:Group>

然后是我们的SkinnableComponent

[SkinPart]
public var labelGroupFactory:IFactory;
[SkinPart]
public var container:Group;
......
public function addLabel(label:String):void
{
var c:*=createDynamicPartInstance("labelGroupFactory");
c.labelDisplay.text=label;
c.addEventListener("removedMe",function(e){
removeDynamicPartInstance("labelGroupFactory",e.target);
container.removeElement(e.target);
})
container.addElement(c);
}

然后把SkinnableComponent组件放到主程序中,再随便找个按钮,在点击的时候调用一下addLabel方法做一下测试

总结:动态元件一般用在象类似角色装扮这种,某一个组件的内部元件会变化的情景中.

转贴请注明来自lunastudio.cn