【转】为自定义Flex Component定义Style

原文：http://tonykong.blogbus.com/logs/32749610.html

一个问题折腾了我整整一天，要详细记载一下了 。

在制作自定义控件的时候虽能快速的以New -> MXML Component的方式快速完成预期目标，且自己编写的public property、method也能够方便地被容器访问和调用，但是在使用Flex Builder IDE使用component的时候却不能够为自己创建的可视component书写CSS Style，总感觉自己创建的component与官方提供的有差异，因此我就这个问题展开了研究。

Search Help，首先找到的信息是Meta标签是关键。即：

[Style(name="styleProperty", type="dataType", format="formatName", enumeration="option1,option2,option3,option4", inherit="no")]

 不过将此代码插入mxml的component会提示，必须为该标签定义Class类，不然无效。

继续Search Help，发现Example中的确是直接写AS Class 文件来创建component。其中要使用这样的方式为自己的component定义css style，还需：

1. Override the style Changed() method to detect changes to the property.
2. Override updateDisplayList() method to incorporate the style into the component display.
3. Define a static initializer to set the default value of the style property.

具体可参考Help中的《Example: Creating style properties 》一文。

对父类方法的重载大致如下：
// Override the styleChanged() method to detect changes in your new style.

override public function styleChanged(styleProp:String):void {
    super.styleChanged(styleProp);

    // Check to see if style changed. "styleProp" is null if all styles for this component have changed
        if (styleProp=="styleProperty"||styleProp == null){
            stylePropChanged = true;
            invalidateDisplayList();
        }
    }

// Override updateDisplayList() to update the component
// based on the style setting.
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    // Check to see if style changed.
    if(stylePropChanged==true){
        // Redraw gradient fill only if style changed.
        this.matteColor=getStyle("styleProperty");
        stylePropChanged=false;
    }
}

这里需要强调的有几点，就是这几点折腾了我整整一天，而且Help里都没提到，Google和Baidu也没有找到相关的讨论，因此不记下来下一次一定忘记：

1.   “styleProperty” ， 即css样式属性的名称务必以这样的方式书写，切莫使用“-”做单词连结，单词的连结可使用首字母大写的方式，切记切记。我看到为官方component 书写css样式的时候经常会遇到“background-color”、“vertical-align”、“border-style”等属性，就误以 为自己也需这样命名css样式属性，结果弄巧成拙。实质上，自己指定的 “styleProperty”会在使用时自动显示为 “style-property”，也就是说编译器能够理解将源代码中的css样式属性名称中的大写字母 翻译提示为“-p”，例如，“#FFFFFF”也会翻译提示为“#f-f-f-f-f-f”。
2. “ styleProp == null ”，虽说在方法“ styleChanged ”中，通过监视传入的“styleProp”可以感知 css样式属性是否有变动，不过也请注意HELP里的这句话 "styleProp" is null if all styles for this component have change。这很重要，因为如果得到“null”就认为没有任何属性改变的话，那就大大地错过了应用css属性更改的方法了，null在这里恰恰代表了多个css样式属性被修改。

另外，也请注意 enumeration="option1,option2,option3,option4"，这项值可以让IDE为component提供css编写的代码提示，大大方便使用者。

 这样，自己写的component也和官方的一样了，无论在属性式css、内联式css、引用式css都可以轻松制定component的样式。对此的研究也有待深入，欢迎对此有研究的朋友来与我讨论。