FLEX皮肤实例5_静态skinpart举例

转载：http://www.cnblogs.com/spoony/archive/2010/11/08/flex4-skinning-part04-notecard-demo.html
1.概述
      上一篇文章《FLEX皮肤实例4_skinpart》

      本章描述了如何自定义一个组件“留言板”，并使用skin part。留言板效果如下


2.定义组件NoteCard
2.1 必须继承父类SkinableComponent
      留言板NoteCard, 继承skinnableComponent父类。

2.2 定义二个状态
      留言板具有二个状态：normal和disabled

2.3 定义skin part
      留言条由文本标签和圆形按钮组成，因此这里对其进行分别定义为labelDisplay和closeButton, 类型分别为TextBase和Button.
      labelDisplay必须在skin文件中有对应id的标签。
      closeButton为可选的。

      [SkinPart(required="true")]
     public var labelDisplay:TextBase;
 
     [SkinPart(required="true")]
     public var closeButton:Button;

2.4 定义变量
      变量_text保存留言板中的内容。

private var _text:String;
public function get text():String{
    return _text;
}

public function set text(value:String):void{
    if(_text == value)
        return;
    _text = value;

    //修改皮肤中显示的值
    if(labelDisplay)
        labelDisplay.text = value;
}

2.5 重载skin part的行为
       由于skin可以在运行时加载或者卸载，因此需要对相应skin part属性进行动态设置。Flex框架会将skin中声明的skin part与component中的相关属性结合起来，并通过skinning生命周期中相应的方法进行通知。
　　这里的NoteCard类用到的相关方法主要有getCurrentSkinState(), partAdded(), partRemoved()这三个。这三个方法都在SkinnableComponent中有定义，因此只需要在子类中进行覆写。

getCurrentSkinState()方法是返回要要加载skin的component的state名称。比如这里的NoteCard类有disabled, enabled,
实现代码如下：

override protected function getCurrentSkinState():String{
    if(!enabled)
        return "disabled";

        return "normal";
}

partAdded()方法会在skin part添加的时候被调用，因此在这个方法中，我们可以添加这个skin part的相关处理逻辑，比如事件监听等
实现代码如下：

override protected function partAdded(partName:String, instance:Object):void{
    super.partAdded(partName, instance);

    if(instance == labelDisplay)
        labelDisplay.text = _text;

    if(instance == closeButton)
        closeButton.addEventListener(MouseEvent.CLICK, closeButton_clickHandler);
}

partRemoved()方法会在skin part移除的时候被调用，因此在这个方法中，我们可以将添加在这个skin part的相关处理逻辑进行移除，比如事件监听等。
实现代码如下：

override protected function partRemoved(partName:String, instance:Object):void{
    super.partRemoved(partName, instance);

    if(instance == closeButton)
        closeButton.removeEventListener(MouseEvent.CLICK, closeButton_clickHandler);
}

closeButton_clickHandler事件主要是将先前添加的留言条进行移除
代码如下

protected function closeButton_clickHandler(event:MouseEvent) : void{
      event.stopPropagation();
      IVisualElementContainer(parent).removeElement(this);
}

下面给来NoteCard完整代码

import flash.events.MouseEvent;

    import mx.core.IVisualElementContainer;

    import spark.components.Button;
    import spark.components.supportClasses.SkinnableComponent;
    import spark.components.supportClasses.TextBase;

    [SkinState("normal")]
    [SkinState("disabled")]
    public class NoteCard extends SkinnableComponent
    {
        public function NoteCard()
        {
            super();
        }

        [SkinPart(required="true")]
        public var labelDisplay:TextBase;

        [SkinPart(required="false")]
        public var closeButton:Button;

        private var _text:String;

        public function get text():String
        {
            return _text;
        }

        public function set text(value:String):void
        {
            if (_text == value)
                return;

            _text = value;

            if (labelDisplay)
                labelDisplay.text = value;
        }

        override public function set enabled(value:Boolean) : void
        {
            if (enabled != value)
                invalidateSkinState();

            super.enabled = value;
        }

        override protected function getCurrentSkinState() : String
        {
            if (!enabled)
                return "disabled";

            return "normal"
        }

        override protected function partAdded(partName:String, instance:Object) : void
        {
            super.partAdded(partName, instance);

            if (instance == labelDisplay)
                labelDisplay.text = _text;

            if (instance == closeButton)
                closeButton.addEventListener(MouseEvent.CLICK, closeButton_clickHandler);
        }

        override protected function partRemoved(partName:String, instance:Object) : void
        {
            super.partRemoved(partName, instance);

            if (instance == closeButton)
                closeButton.removeEventListener(MouseEvent.CLICK, closeButton_clickHandler);
        }

        protected function closeButton_clickHandler(event:MouseEvent) : void
        {
            event.stopPropagation();

            IVisualElementContainer(parent).removeElement(this);
        }

    }

3.定义组件NoteCard的皮肤
3.1 定义NoteCard皮肤
NoteCardSkin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx=""
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("note.NoteCard")]
    </fx:Metadata>
    <!-- states -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
    <!-- -->
    <s:Rect width="300" height="200">
        <s:stroke>
            <s:SolidColorStroke color="0xAA8E5E" weight="4"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient>
                <s:GradientEntry color="0x60c2fe"/>
                <s:GradientEntry color="0x70b2ee"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Label id="labelDisplay" left="10" top="10" width="280" height="180" color="0xFFF3E9" lineBreak="toFit" fontSize="18" fontFamily="Chalkboard"/>
    <s:Button id="closeButton" skinClass="note.NoteCardCloseButtonSkin" top="5" right="5"/>
</s:Skin>

closeButton也使用了一个自定义皮肤,NoteCardCloseButtonSkin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx=""
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="up" />
    </s:states>

    <s:Ellipse width="16" height="16">
        <s:stroke>
            <s:SolidColorStroke color="0x131313" weight="1" />
        </s:stroke>
        <s:fill>
            <s:LinearGradient>
                <s:GradientEntry color="0xAA8E5E" color.over="0x9A7E4E" color.down="0x7A5E2E" />
                <s:GradientEntry color="0xCCBBAA" color.over="0xBCAB9A" color.down="0x9C8B7A"/>
            </s:LinearGradient>
        </s:fill>
    </s:Ellipse>

    <s:Label text="X" horizontalCenter="0" verticalCenter="0" />

</s:Skin>

4.程序演示

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx=""
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:note="note.*"
               minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

    <note:NoteCard id="card" x="20" y="10" skinClass="note.NodeCardSkin" text="我是中国人"/>
</s:Application>

效果如下