Setting a gradient background fill on a Halo TextArea control in Flex 4

In a previous example, “Setting the background fill color on a Halo TextArea control in Flex 4”, we saw how you could set the background fill color on the Halo TextArea control (with default Spark skin) in Flex 4 by setting the contentBackgroundColor style.

The following example shows how you can create a linear gradient background on a Halo/MX TextArea control in Flex 4 by creating a custom border skin with a LinearGradient fill and setting the borderSkin style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-halo-textarea-control-in-flex-4/ -->
<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.CustomBorderSkin"
            verticalScrollPolicy="on"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom border skin, skins/CustomBorderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-halo-textarea-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomBorderSkin"
        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="red" />
                <s:GradientEntry color="purple" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
</local:SparkSkinForHalo>

[HaloSparkSkins]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.