Flex Examples » getColorName() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing default line colors in a Flex LineChart control http://blog.flexexamples.com/2007/11/13/changing-default-line-colors-in-a-flex-linechart-control/ http://blog.flexexamples.com/2007/11/13/changing-default-line-colors-in-a-flex-linechart-control/#comments Tue, 13 Nov 2007 16:06:35 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/13/changing-default-line-colors-in-a-flex-linechart-control/ The following example shows how you can change the line colors in a LineChart in Flex by setting the lineStroke style in MXML or ActionScript, as seen in the following snippets:

MXML:

<mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close"> <mx:lineStroke> <mx:Stroke color="haloGreen" weight="2" alpha="0.6" /> </mx:lineStroke> </mx:LineSeries>

ActionScript:

<mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close" /> ... closeSeries.setStyle("lineStroke", new [...]]]> The following example shows how you can change the line colors in a LineChart in Flex by setting the lineStroke style in MXML or ActionScript, as seen in the following snippets:

MXML:

<mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close">
    <mx:lineStroke>
        <mx:Stroke color="haloGreen" weight="2" alpha="0.6" />
    </mx:lineStroke>
</mx:LineSeries>

ActionScript:

<mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close" />
...
closeSeries.setStyle("lineStroke", new Stroke(0xFF0000, 2, 0.4));

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/13/changing-default-line-colors-in-a-flex-linechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="0xFF0000" click="closeSeries.setStyle('lineStroke', new Stroke(0xFF0000, 2, 0.4));" />
        <mx:Button label="0xFF00FF" click="closeSeries.setStyle('lineStroke', new Stroke(0xFF00FF, 2, 1.0));" />
        <mx:Button label="haloSilver" click="closeSeries.setStyle('lineStroke', new Stroke(StyleManager.getColorName('haloSilver'), 2, 1.0));" />

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{lineChart}" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">

        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries id="closeSeries" yField="@close" form="curve" displayName="Close">
                <mx:lineStroke>
                    <mx:Stroke color="haloGreen" weight="2" alpha="0.6" />
                </mx:lineStroke>
            </mx:LineSeries>
            <mx:LineSeries yField="@open" form="curve" displayName="Open">
                <mx:lineStroke>
                    <mx:Stroke color="haloOrange" weight="2" alpha="0.6" />
                </mx:lineStroke>
            </mx:LineSeries>
        </mx:series>
    </mx:LineChart>

</mx:Application>

View source is enabled in the following example.

When setting a stroke in ActionScript, note that you must pass the stroke color as a numeric value (like 0xFF0000), not as a color name (like “red”):

closeSeries.setStyle("lineStroke", new Stroke(0xFF0000, 2, 0.4));

If you want to use a named color, you can use the static StyleManager.getColorName() method, as shown in the following snippet:

closeSeries.setStyle("lineStroke", new Stroke(StyleManager.getColorName("red"), 2, 1.0));
 
]]> http://blog.flexexamples.com/2007/11/13/changing-default-line-colors-in-a-flex-linechart-control/feed/ 6 Converting color names to numbers using the StyleManager class http://blog.flexexamples.com/2007/09/06/converting-color-names-to-numbers-using-the-stylemanager-class/ http://blog.flexexamples.com/2007/09/06/converting-color-names-to-numbers-using-the-stylemanager-class/#comments Fri, 07 Sep 2007 06:00:46 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/06/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() [...]]]> 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.

 
]]> http://blog.flexexamples.com/2007/09/06/converting-color-names-to-numbers-using-the-stylemanager-class/feed/ 1