Flex 4中Spark组件利用Skin Class外观设计(7)


　　刚开始做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

skin_1.main_skin.mxml


skin_1.a_skin.mxml


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