Setting the background fill color on a Halo TextArea control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Halo_TextArea_SparkSkin_background_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:TextArea id="ta"
            text="{Capabilities.serverString}"
            borderSkin="skins.TextAreaBorderSkin"
            verticalScrollPolicy="on"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<local:SparkSkinForHalo name="TextAreaBorderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*"
        implements="mx.core.IRectangularBorder">
 
    <fx:Script>
        <![CDATA[
            import mx.core.EdgeMetrics;
            import mx.core.IUIComponent;
            import mx.graphics.RectangularDropShadow;
 
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["background"];
            override public function get colorizeExclusions():Array {return exclusions;}
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [];
            override public function get contentItems():Array {return contentFill};
 
            /* Define the border item. */
            static private const borderItem:Array = ["borderStroke"];
            override protected function get borderItems():Array {return borderItem;}
            override protected function get defaultBorderItemColor():uint {return getStyle("borderColor");}
            override protected function get defaultBorderAlpha():Number {return getStyle("borderAlpha");}
 
            static private const metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);
 
            [Bindable]
            public var cornerRadius:Number = 0;
 
            private var dropShadow:RectangularDropShadow;
 
            public function get borderMetrics():EdgeMetrics {
                if (getStyle("borderVisible") == false ||
                    getStyle("borderStyle") == "none") {
                    return EdgeMetrics.EMPTY
                }
                return metrics;
            }
 
            public function get backgroundImageBounds():Rectangle {
                return null;
            }
 
            public function set backgroundImageBounds(value:Rectangle):void {
            }
 
            public function get hasBackgroundImage():Boolean {
                return false;
            }
 
            public function layoutBackgroundImage():void {
            }
 
            override protected function initializationComplete():void {
                useBaseColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                // Force a redraw to clear any existing shadow, and to force a redraw of the
                // border/background.
                redrawRequested = true;
 
                if (getStyle("borderVisible") == false || getStyle("borderStyle") == "none") {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                } else {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                }
 
                border.radiusX = cornerRadius;
                background.radiusX = cornerRadius;
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
 
                if (parent && parent is IUIComponent && !IUIComponent(parent).enabled) {
                    alpha = 0.5;
                } else {
                    alpha = 1;
                }
 
                // Draw drop shadow, if needed
                if (getStyle("dropShadowVisible") == false || width == 0 || height == 0) {
                    return;
                }
 
                // Create a RectangularDropShadow object, set its properties,
                // and draw the shadow
                if (!dropShadow) {
                    dropShadow = new RectangularDropShadow();
                }
 
                dropShadow.distance = 5;
                dropShadow.angle = 90;
                dropShadow.color = 0;
                dropShadow.alpha = 0.8;
                dropShadow.blurX = 20;
                dropShadow.blurY = 20;
 
                // Clear out any pending line style
                graphics.lineStyle();
                dropShadow.drawShadow(graphics, 0, 0, width, height);
            }
 
            private function getDropShadowAngle(distance:Number, direction:String):Number
            {
                if (direction == "left") {
                    return distance >= 0 ? 135 : 225;
                } else if (direction == "right") {
                    return distance >= 0 ? 45 : 315;
                } else { // direction == "center"
                    return distance >= 0 ? 90 : 270;
                }
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="0" id="border">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" />
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1" radiusX="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="haloGreen" />
                <s:GradientEntry color="haloSilver" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
</local:SparkSkinForHalo>

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_TextArea_skin_background_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set TextArea background gradient"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.graphics.GradientEntry;
            import mx.graphics.LinearGradient;
            import mx.utils.ObjectUtil;
            import spark.skins.spark.TextAreaSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                var grad1:GradientEntry = new GradientEntry(0xFF0000);
                var grad2:GradientEntry = new GradientEntry(0xFF00FF);
 
                var linearGrad:LinearGradient = new LinearGradient();
                linearGrad.entries = [grad1, grad2];
                linearGrad.rotation = 90;
 
                TextAreaSkin(ta.skin).background.fill = linearGrad;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            text="The quick brown fox jumps over the lazy dog"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>