Flex3学习轨迹：检查颜色名称是否合法

开发人员设置组件颜色的时候，为了便捷可能直接输入颜色的英文名称还代替16位编码。例如输入“red”;"green"等。本例是如果输入“Reds”的时候就提示非法。

使用StyleManager类中isColorName()来用于检测给定的字符串是否是有效的颜色名称；getColorName()用于返回对应的颜色名的数字的RGB的值。

使用StringUtil类中的trim方法来取出文本框输入的空白。使用setStyle()方法来设置颜色框Box的背景色backgroundColor的属性值，然后设置errorString属性为空。

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" >
    <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;
            import mx.utils.StringUtil;
            private function button_click(evt:MouseEvent):void 
            {
                // 移除文本前后空白
                var str:String = StringUtil.trim(textInput.text);
                var isColor:Boolean = StyleManager.isColorName(str);
                // 如果颜色名有效，那么设置背景色和转换颜色值；否则设置有关提示
                if(isColor)
                {
                    box.setStyle("backgroundColor",str);
                    textInput.errorString = "";
                    var colorInt:uint = StyleManager.getColorName(str);
                    lbl.text = "#" + toHex(colorInt);
                }
                else
                {
                    box.setStyle("backgroundColor",StyleManager.NOT_A_COLOR);
                    textInput.errorString = "非法的颜色名称";
                    lbl.text = "非法的颜色名称";
                }
            }
            private function toHex(item:Object):String 
            {
                var hex:String = Number(item).toString(16);
                return ("00000" + hex.toUpperCase()).substr(-6);
            }
        ]]>
    </mx:Script>
    <mx:Panel title="实现检查颜色名字是否合法" width="320" height="200" 
        horizontalAlign="center">
        <mx:ApplicationControlBar dock="true" width="100%">
            <mx:Label text="颜色名:"/>
            <mx:TextInput id="textInput" />
            <mx:Button label="测试" click="button_click(event);" />
        </mx:ApplicationControlBar>
        <mx:Spacer height="30" />
        <mx:HBox>
            <mx:Box id="box" width="{lbl.height}" height="{lbl.height}" />
            <mx:Label id="lbl" selectable="true" fontSize="32" />
        </mx:HBox>
    </mx:Panel>
</mx:Application>