Converting color names to numbers using the StyleManager class

The following examples show how you can convert color names (such as “red”, “haloSilver”, “#FFFFFF”, and “0xFFFF00″) into numeric values, using the StyleManager class’s static getColorName() method and getColorNames() method.

Full code after the jump.

The following example shows how you can convert a single color name into an integer using the static StyleManager.getColorName() method:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/06/converting-color-names-to-numbers-using-the-stylemanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;

            private function toHex(item:Object):String {
                var hex:String = Number(item).toString(16);
                return ("00000" + hex.toUpperCase()).substr(-6);
            }

            private function button_click():void {
                var colorInt:uint = StyleManager.getColorName(textInput.text);
                if (colorInt == StyleManager.NOT_A_COLOR) {
                    swatch.setStyle("backgroundColor", StyleManager.NOT_A_COLOR);
                    lbl.text = "NOT A COLOR";
                } else {
                    swatch.setStyle("backgroundColor", colorInt);
                    lbl.text = "#" + toHex(colorInt);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Color name:" />
        <mx:TextInput id="textInput" />
        <mx:Button id="button"
                label="Submit"
                click="button_click()" />
    </mx:ApplicationControlBar>

    <mx:HBox>
        <mx:Box id="swatch"
                width="{lbl.height}"
                height="{lbl.height}" />

        <mx:Label id="lbl"
                selectable="true"
                fontFamily="_typewriter"
                fontSize="64" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

The following example takes a comma separated list of color names and converts them into color values using the static StyleManager.getColorName() method within a data grid column’s label function:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/06/converting-color-names-to-numbers-using-the-stylemanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.styles.StyleManager;
            import mx.utils.StringUtil;

            private const DELIM:String = ",";

            private function toHex(item:Object):String {
                var hex:String = Number(item).toString(16);
                return ("00000" + hex.toUpperCase()).substr(-6);
            }

            private function button_click():void {
                var colorStr:String = StringUtil.trimArrayElements(textInput.text, DELIM);
                dataGrid.dataProvider = colorStr.split(DELIM);
            }

            private function nameFunc(item:Object, column:DataGridColumn):String {
                return item.toString();
            }

            private function colorFunc(item:Object, column:DataGridColumn):String {
                var colorInt:uint = StyleManager.getColorName(item);
                if (colorInt == StyleManager.NOT_A_COLOR) {
                    return "NOT A COLOR";
                } else {
                    return "#" + toHex(colorInt);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Color names:" />
        <mx:TextInput id="textInput" />
        <mx:Button id="button"
                label="Submit"
                click="button_click()" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid" rowHeight="22">
        <mx:columns>
            <mx:DataGridColumn labelFunction="nameFunc"
                    headerText="Color name:" />
            <mx:DataGridColumn labelFunction="colorFunc"
                    headerText="Color value:" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Finally, the following example shows how you can convert an entire array of color names to integers at once using the static StyleManager.getColorNames() method:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/06/converting-color-names-to-numbers-using-the-stylemanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.styles.StyleManager;
            import mx.utils.StringUtil;

            private const DELIM:String = ",";

            private function toHex(item:Object):String {
                var hex:String = Number(item).toString(16);
                return ("00000" + hex.toUpperCase()).substr(-6);
            }

            private function button_click():void {
                var colorStr:String = StringUtil.trimArrayElements(textInput.text, DELIM);
                var colorArr:Array = colorStr.split(DELIM);
                StyleManager.getColorNames(colorArr);

                dataGrid.dataProvider = colorArr;
            }

            private function nameFunc(item:Object, column:DataGridColumn):String {
                return item.toString();
            }

            private function colorFunc(item:Object, column:DataGridColumn):String {
                if (isNaN(Number(item))) {
                    return "NOT A COLOR";
                } else {
                    return "#" + toHex(item);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Color names:" />
        <mx:TextInput id="textInput" />
        <mx:Button id="button"
                label="Submit"
                click="button_click()" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid" rowHeight="22">
        <mx:columns>
            <mx:DataGridColumn labelFunction="nameFunc"
                    headerText="Color value (int):"
                    width="140" />
            <mx:DataGridColumn labelFunction="colorFunc"
                    headerText="Color value (hex):"
                    width="140" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.