Similar to my earlier post, “Trimming strings using the Flex StringUtil class’s trim() method“, the StringUtil class has another rediculously handy method, trimArrayElements().

Essentially, this method allows you to trim leading and [...]]]> The following example shows how you can remove leading and trailing spaces from an Array using the Flex StringUtil class’s trimArrayElements() method.

Similar to my earlier post, “Trimming strings using the Flex StringUtil class’s trim() method“, the StringUtil class has another rediculously handy method, trimArrayElements().

Essentially, this method allows you to trim leading and trailing whitespace from every element an array with one single method call, rather than having to resort to awkward loops and variable reassignments. The only real “gotcha” is that this method expects a string as a parameter and return value instead of an Array object.

Sayeth the docs:

public static function trimArrayElements(value:String, delimiter:String):String {...}
Removes all whitespace characters from the beginning and end of each element in an Array, where the Array is stored as a String.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trimarrayelements-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.utils.StringUtil;

            private function init():void {
                var arrayStr:String = arrayToList(arr);
                arrayStr = StringUtil.trimArrayElements(arrayStr, ",");
                list2.dataProvider = listToArray(arrayStr);
            }

            private function listToArray(value:String, delimiter:String = ","):Array {
                return value.split(delimiter);
            }

            private function arrayToList(value:Array, delimiter:String = ","):String {
                return value.join(delimiter);
            }

            private function addSingleQuotes(item:Object):String {
                return "\'" + item.toString() + "\'";
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:String>       The </mx:String>
        <mx:String> quick    </mx:String>
        <mx:String>
            brown

        </mx:String>
        <mx:String>    fox                </mx:String>
    </mx:Array>

    <mx:List id="list1"
            dataProvider="{arr}"
            variableRowHeight="true"
            labelFunction="addSingleQuotes" />

    <mx:List id="list2"
            variableRowHeight="true"
            labelFunction="addSingleQuotes" />

</mx:Application>

View source is enabled in the following example.

 

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() [...]]]> 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.