Flex 4 SkinClass

在Flex 4中，SkinClass指向的文件通常用一个使用s:skin标签（或者sparkskin）的MXML文件进行定义。通过skinclass来改变外观的spark组件通常也是skinclass引用的Host component。Flex 4 中新的改变外观架构可以在很大的程度上将组件和组件的外观设计分开，这样组件外观设计的代码通过改变小部分的代码就可以得到重用了。

 

一、设计SkinClass的三要素：

1、 HostComponentmetadata

SkinClass文件需要引用HostComponent对象，而HostComponent是指需要改变外观的组件。我们可以通过metadata标签来指定HostComponent。如：我们需要设置Button的外观，那么Button就是HostComponent。 

Code：

   <fx:Metadata>

         <![CDATA[

          [HostComponent("spark.components.Button")]

         ]]>

   </fx:Metadata>

 

2、 States

如果HostComponent中有SkinState（一般用metadata标签来声明），例如：

s: ButtonBase中包含了

      [SkinState("up")]

那么在相应的skinclass mxml文件中必须有如下相应的state：

 <s:states>

     <s:State name="up"/>

 

3、 Skinparts

HostComponent中的属性可以被定义为必须或者是可选的部分（skin parts），可选的属性一般通过metadata标签将其默认设置为false。如果s:ButtonBase中包含一下的属性：

 

[SkinPart(required="false")]

public var labelDisplay:TextBase;

那么，skin文件应该包含一下相应的声明：

 

<s:Label id="labelDisplay"/>

      

 

二、调用SkinClass的几种方法：

（skins.CustomApplicationSkin为Skinclass指向的mxml文件路径）

1、属性引用：

 

<s:Applicationname="Spark_Application_skinClass_test"

       xmlns:fx="http://ns.adobe.com/mxml/2009"

       xmlns:s="library://ns.adobe.com/flex/spark"

       xmlns:mx="library://ns.adobe.com/flex/halo"

        skinClass="skins.CustomApplicationSkin">

</s:Application>

2、CSS引入：

 

<fx:Style>

        @namespace s"library://ns.adobe.com/flex/spark";

        s|Application {

            skinClass:ClassReference("skins.CustomApplicationSkin");

        }

    </fx:Style>

3、AS代码指定，比较适合动态皮肤。

<fx:Script>

        <![CDATA[

            import skins.CustomApplicationSkin;

 

            protected functionbtn_click(evt:MouseEvent):void {

                setStyle("skinClass",CustomApplicationSkin);

            }

        ]]>

    </fx:Script>