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

[align=center][flash=200,200]http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/skin_test.swf[/flash][/align]

　　刚开始做skinClass设计时往往会为一个小模块设计一个skinClass并把其用到的所有组件和逻辑都放进skinClass内，外部只要传入模块所需的数据和处理模块所抛出的事件就行。这样设计看似简单快速，使用起来也比较方便，skinClass似乎能完成所有的事了。

　　但是如果把这个skinClass去掉，那么这个小模块就只有一个白板了，因为所有的组件和逻辑都在skinClass中，再想想下次如果要做皮肤扩展，那就要重写一个庞大的skinClass了（其中的很多组件和逻辑代码都是重复的）。

　　其实组件和skinClass是可以分开设计的，先设计一个默认皮肤的小模块，让其能单独运行；再写skinClas将其HostComponent指定到要应用此皮肤的小模块，可以在skinClass的creationComplete事件处理中使用hostComponent.XXXid 得到小模块下的子组件，再用setStyle("skinClass", Class(XXX))对子组件进行skinClass的设置。

　　这样就可以把组件和skinClass分开了，也可以很方便地进行皮肤扩展。



下面来看一个例子：
[img]http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/diagrams/-1.png[/img]
程序结构如图

程序通过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不同罢了。
效果如下：
[url]http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/skin_test.swf[/url]

来自http://flex4jiaocheng.com/blog/287