刚开始做skinClass设计时往往会为一个小模块设计一个skinClass并把其用到的所有组件和逻辑都放进skinClass内,外部只要传入模块所需的数据和处理模块所抛出的事件就行。这样设计看似简单快速,使用起来也比较方便,skinClass似乎能完成所有的事了。
但是如果把这个skinClass去掉,那么这个小模块就只有一个白板了,因为所有的组件和逻辑都在skinClass中,再想想下次如果要做皮肤扩展,那就要重写一个庞大的skinClass了(其中的很多组件和逻辑代码都是重复的)。
其实组件和skinClass是可以分开设计的,先设计一个默认皮肤的小模块,让其能单独运行;再写skinClas将其HostComponent指定到要应用此皮肤的小模块,可以在skinClass的creationComplete事件处理中使用hostComponent.XXXid 得到小模块下的子组件,再用setStyle("skinClass", Class(XXX))对子组件进行skinClass的设置。
这样就可以把组件和skinClass分开了,也可以很方便地进行皮肤扩展。
下面来看一个例子:
程序结构如图
程序通过skin_test中的button来更换Box的main_skin,再在main_skin中对Box里的小组件进行a_skin的设置。
包skin_1,skin_2,skin_3就是三套皮肤。
skin_test.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"
xmlns:local="*">
<fx:Script>
<![CDATA[
import skin_1.main_skin;
import skin_2.main_skin;
import skin_3.main_skin;
protected function button1_clickHandler(event:MouseEvent):void{
box.setStyle("skinClass", Class(skin_1.main_skin));
}
protected function button2_clickHandler(event:MouseEvent):void{
box.setStyle("skinClass", Class(skin_2.main_skin));
}
]]>
</fx:Script>
<s:VGroup width="100" horizontalCenter="0" verticalCenter="0" horizontalAlign="center" gap="10">
<s:HGroup gap="21">
<s:Button label="skin1" click="button1_clickHandler(event)"/>
<s:Button label="skin2" click="button2_clickHandler(event)"/>
</s:HGroup>
<local:Box id="box" skinClass="skin_3.main_skin"/>
</s:VGroup>
</s:Application>
Box.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup left="10" right="10" top="10" bottom="10" gap="10">
<s:TextArea id="show" />
<s:TextArea id="input" />
</s:HGroup>
</s:SkinnableContainer>
skin_1.main_skin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="skin1_creationCompleteHandler(event)">
<fx:Metadata>
[HostComponent("Box")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function skin1_creationCompleteHandler(event:FlexEvent):void{
hostComponent.show.setStyle("skinClass", Class(a_skin));
hostComponent.input.setStyle("skinClass", Class(a_skin));
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#ff0000"/>
</s:fill>
</s:Rect>
<s:Group id="contentGroup"/>
</s:Skin>
skin_1.a_skin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[HostComponent("spark.components.TextArea")]
</fx:Metadata>
<s:states>
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<s:Rect width="100" height="100">
<s:fill>
<s:SolidColor color="#ffff00"/>
</s:fill>
</s:Rect>
</s:Skin>
skin_2和skin_3包里的main_skin.mxml和a_skin.mxml只是color不同罢了。
效果如下:
http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/skin_test.swf
来自http://flex4jiaocheng.com/blog/287