FLEX元标签_style

1.概述
       当你创建自定义组件的时候，有可能你想创建一个style属性定义样式。
       [Style]元标签格式如下
                     [Style(name="style_name"[,property="value",...])]
下面的表格描述了[Style]元数据标签的各种属性：

Option	Type	Description
name	String	(必填) 定义style的名称.
type	String	定义你写入的这个style属性的值类型。如果这个类型不是一个actionScript类型。如果是你自定义的类型，请使用类路径全名，比如： packageName.className.
arrayType	String	如果type是Array类型，则arrayType定义了其内的元素(Array elements)数据类型。如果是你自定义的类型，请使用类路径全名，比如： packageName.className.
format	String	定义这个属性的单位。比如，如果type为”Number”,则你可以定义format=”Length”,或者，如果你定义了type=”uint”, 你可以定义format=”Color”.
enumeration	String	为这个style的属性定义了它的值列表enumerated list.
inherit	String	定义这个属性是否可以继承.你可以输入yes and no. 这个属性指的是CSS继承, 而不是对象继承. 所有的子对象自动的继承对象的style属性。
states	String	对于皮肤属性，你可以用style来为组件的多个状态定义各种皮肤状态。比如:Slider.thumbSkin style 使用了下面的 [Style] 元数据标签: [Style(name="thumbSkin",, inherit="no", states="disabled, down, over, up")]。

下面的例子为 textSelectedColor 样式属性的定义:
       [Style(name="textSelectedColor",type="Number",format="Color",inherit="yes")]

下面的例子为 verticalAlign 样式属性的定义:
       [Style(name="verticalAlign", type="String", enumeration="bottom,middle,top", inherit="no")]

2.自定义样式举例
       比如你创建了一个组件StyledRectangle，使用了一个渐变的颜色，如下所示

       这个渐变色使用了两个颜色，你可以设置一个新的style属性称之为fillColors，fillColors style可以由两个颜色的数组构成。代码详见 StyledRectangle.as ，演示代码如下

<?xml version="1.0"?>
<!-- skinstyle\MainRectWithFillStyles.mxml -->
<mx:Application xmlns:mx=""
    xmlns:MyComp="myComponents.*">

    <!-- 通过CSS selector设计style-->
    <mx:Style>
        StyledRectangle {fillColors: #FF00FF, #00FFFF}
    </mx:Style>

    <!-- 这里使用了默认的样式. -->
    <MyComp:StyledRectangle id="mySR1"/>

    <!-- 这里使用了默认的样式. -->
    <MyComp:StyledRectangle id="mySR2"/>

    <!-- 利用 setStyle() 方法改变默认的样式 -->
    <mx:Button label="Set gradient"
        click="mySR2.setStyle('fillColors', [0x000000, 0xFFFFFF]);"/>

    <!-- Set fillColors in MXML. -->
    <MyComp:StyledRectangle id="mySR3" fillColors="[0x00FF00, 0xFFFFFF]"/>
</mx:Application>

       本例中，对于组件StyledRectangle 的selector的默认值为 #FF00FF 和 #00FFFF。通过使用setStyle()，可以改变fillColor 的样式。最后一个组件说明可以通过使用MXML的tag标签设置style属性。

2.1 定义一个样式属性

(1) 在类的定义之前插入一个[Style]元标签
       插入一个[Style]元标签，定义一个MXML tag 样式属性。如果你没有使用[Style]标签，编译器将给出一个语法错误。
(2) 重载styleChanged() 方法，检测属性值的变化。详见
(3) 重载updateDisplayList()方法合并自定义组件样式的显示。详见
(4) 定义一个static 初始化函数，设置默认的样式属性值。详见.

下面定义了一个自定义组件StyledRectangle ，包含了自定义属性fillColors 和 alphas ，可以设置两种颜色的渐变和透明度。

package myComponents
{
    // skinstyle/myComponents/StyledRectangle.as
    import mx.core.UIComponent;
    import mx.styles.CSSStyleDeclaration;
    import mx.styles.StyleManager;
    import flash.display.GradientType;

    // 定义了两个样式属性
    [Style(name="fillColors",type="Array",format="Color",inherit="no")]
    [Style(name="alphas",type="Array",format="Number",inherit="no")]

    public class StyledRectangle extends UIComponent
    {
        // 定义一个静态变量.
        private static var classConstructed:Boolean = classConstruct();

        // 定义一个静态方法.
        private static function classConstruct():Boolean {
            if (!StyleManager.getStyleDeclaration("StyledRectangle"))
            {
                // 如果 StyledRectangle组件的CSS定义为空，则创建一个默认的,
                var myRectStyles:CSSStyleDeclaration = new CSSStyleDeclaration();
                myRectStyles.defaultFactory = function():void
                {
                    this.fillColors = [0xFF0000, 0x0000FF];
                    this.alphas = [0.5, 0.5];
                }
                StyleManager.setStyleDeclaration("StyledRectangle", myRectStyles, true);

            }
            return true;
        }

        // 构造器
        public function StyledRectangle() {
            super();
        }

        // 定义一个默认 100 x 100 pixels 大小.
        override protected function measure():void {
            super.measure();

            measuredWidth = measuredMinWidth = 100;
            measuredHeight = measuredMinHeight = 100;
        }

        // 定义一个标志，表示style属性的值改变了
        private var bStypePropChanged:Boolean = true;

        // 定义一个变量保存colors的值.
        private var fillColorsData:Array;

        // 定义了一个变量保存当前lapha值.
        private var alphasData:Array;

        // 定义变量用于额外的填充控制
        private var ratios:Array = [0x00, 0xFF];

        // 重载了 styleChanged()方法检测style的改变.
        override public function styleChanged(styleProp:String):void {
            super.styleChanged(styleProp);

            // 检测style是否改变.
            if (styleProp=="fillColors" || styleProp=="alphas") {
                bStypePropChanged=true;
                invalidateDisplayList();
                return;
            }
        }

        // 重载updateDisplayList() 方法更新组件
        override protected function updateDisplayList(unscaledWidth:Number,
                unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (bStypePropChanged==true)
            {
                // 如果style改变，则重新填充
                fillColorsData=getStyle("fillColors");
                alphasData=getStyle("alphas");

                graphics.beginGradientFill(GradientType.LINEAR,
                    fillColorsData, alphasData, ratios);
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

                bStypePropChanged=false;
            }
        }
    }
}

2.2 创建一个默认的style属性值
       当你为组件创建一个style属性时，必须决定如何设置默认值，这不象在构造函数内调用setStyle()那么简单，你必须考虑FLEX如何处理style，以及style的处理次序。
       当FLEX编译你的应用程序，在创建任何组件之前，FLEX首先检查 中的定义标签。因此，如果你在构造函数内调用setStyle()，则在处理 标签之后调用，意味着将在组件的每个实例化对象中都设置了style属性。这样的重载与中的声明将发生冲突。

       最简单的方式是通过一个静态函数给style属性设置默认值。静态函数一旦执行，FLEX首先创建一个组件的实例对象。因此，在定义一个style属性时，你可以在自定义组件类中使用classConstructed 变量和classConstruct()定义一个初始化静态函数。
       当FLEX创建一个StyledRectangle 组件时，调用classConstruct()方法。这个方法决定自定义组件使用 时，是否为style设置默认值。如果没有定义style，classConstruct()将创建一个，为style属性设置默认值。
       因此，如果你的应用程序忽略了标签，通过classConstruct()将自动创建一个默认的style定义。例如
                

       如果使用了标签，将创建默认的style定义，如下所示

    <mx:Style>
        StyledRectangle {fillColors: #FF00FF, #00FFFF}
    </mx:Style>
    <MyComp:StyledRectangle/>

3. 为皮肤定义一个style
       FLEX允许你使用style属性设置组件皮肤。自定义组件也可以设置皮肤。
       设置皮肤与设置style属性的原理是一样的，为皮肤设置一个style属性触发器以调用styleChanged()。styleChanged()检测皮肤的改变，在updateDisplayList() 中执行组件的更新。
       设置皮肤与设置style属性的不同之处在于如何描述[Style] 标签。当style属性为skin时，如下例所示
                [Style(name="downSkin", type="Class", inherit="no")]


参考文献
1.Example: Creating style properties .
2.Flex Style 元数据标签 .