Conditional color change <s:SolidColor>

I am unable to get the DataGridItemRenderer to pass a color value to <s:SolidColor based on the开发者_如何学JAVA function containing an if statement based on the value of data.Bld_Type. Code below. I am vey new to Flex and not sure what the problem or if this is the right way of doing it. Any help would be appreciated. I have tried passing a hex number and color name. Neither work. Thanks.

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" 
  focusEnabled="true">

    <fx:Script>
        <![CDATA[
         import mx.events.FlexEvent;

        private var swatchCOL:uint;

        /** color function **/
        private function onLoad():void
        {
            if(data.Bld_Type == "Office")
                {
                swatchCOL="ee7970";
                //***swatchCOL="red";

                }    
            else if(data.Bld_Type == "Office/Warehouse")
                {
                swatchCOL="70b2ee";
                //***swatchCOL="blue";
                }
        }   
        ]]>
    </fx:Script>



    <s:Group left="10" right="10" top="10" bottom="10">
        <s:Rect width="25" height="25">
            <s:stroke>
                <s:SolidColorStroke color="green" weight="2"/>                        
            </s:stroke>
            <s:fill>
                <s:SolidColor color="swatchCOL"/>
            </s:fill>
        </s:Rect>
    </s:Group>



</s:MXDataGridItemRenderer>

Try to change the following:

[Bindable]
private var swatchCOL:uint;

And:

<s:fill>
    <s:SolidColor color="{swatchCOL}"/>
</s:fill>

And finally change color types:

if(data.Bld_Type == "Office")
                {
                swatchCOL=0xee7970;
                //***swatchCOL="red";

                }    
            else if(data.Bld_Type == "Office/Warehouse")
                {
                swatchCOL=0x70b2ee;
                //***swatchCOL="blue";
                }

Here's the easy way to do it:

override public function set data(value:Object):void {
    super.data = value;

    if(data.Bld_Type == "Office")
        swatchCOL.color = 0xee7970;
    else if(data.Bld_Type == "Office/Warehouse")
        swatchCOL.color = 0x70b2ee;
}

No binding required since the data setter gets called whenever the data changes for your item renderer. Also, you need to set the "color" member rather than the SolidColor object itself. And you can specify hex colors by prefacing the value with "0x".

Hope that helps.

Option a) Using (e.g. if colors are not dynamically generated):

<s:states>
    <s:State name="stateA" />
    <s:State name="stateB" />
</s:states>
<!-- somewhere else in your code -->
<s:Rect id="bgFill" top="0" right="0" left="0" bottom="0">
    <s:fill>
        <s:SolidColor color.stateA="#313131" color.stateB="#f4dede" />
    </s:fill>
</s:Rect>
<!-- somewhere else in your code -->
<fx:Script>
<![CDATA[
if(data.Bld_Type == "Office")
            {
            this.currentState = "stateA"
            //***swatchCOL="red";

            }    
        else if(data.Bld_Type == "Office/Warehouse")
            {
            this.currentState = "stateB"
            //***swatchCOL="blue";
            }
    ]]>
</fx:Script>

Option b) Using AS3:

var fillColor:SolidColor;
if(data.Bld_Type == "Office")
{
fillColor = new SolidColor(0xYOUR_HEX_COLOR);
bgFill.fill = fillColor;
}    
else if(data.Bld_Type == "Office/Warehouse")
{
fillColor = new SolidColor(0xYOUR_OTHER_HEX_COLOR);
bgFill.fill = fillColor;
}


<s:Group left="10" right="10" top="10" bottom="10">
    <s:Rect id="bgFill" width="25" height="25">
        <s:stroke>
            <s:SolidColorStroke color="green" weight="2"/>                        
        </s:stroke>
        <s:fill>
            <s:SolidColor color="#ffffff"/> <!-- #ffffff is an example of a default color -->
        </s:fill>
    </s:Rect>
</s:Group>