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

In a previous example, “Setting a gradient background fill on a Halo TextArea control in Flex 4″, we saw how you could 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.

The following example shows how you can create a linear gradient background on a Spark TextArea control in Flex 4 by modifying the background fill in the TextArea control’s skin to a LinearGradient.

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

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

View source is enabled in the following example.

You can also set the background fill to a gradient using a custom TextArea skin and then set the skinClass style, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<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:TextArea id="ta"
            text="{Capabilities.serverString}"
            skinClass="skins.CustomTextAreaSkin"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark TextArea skin, skins/CustomTextAreaSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<s:SparkSkin name="CustomTextAreaSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5"
        blendMode="normal">
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.TextArea")]
        ]]>
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            private var paddingChanged:Boolean;
 
            /* Define the skin elements that should not be colorized.
            For text area, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["background", "scroller"];
 
            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
            };
 
            override protected function commitProperties():void {
                super.commitProperties();
 
                if (paddingChanged) {
                    updatePadding();
                    paddingChanged = false;
                }
            }
 
            override protected function initializationComplete():void {
                useBaseColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    shadow.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
                } else {
                    border.visible = false;
                    shadow.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function updatePadding():void {
                if (!textDisplay) {
                    return;
                }
 
                // Push padding styles into the textDisplay
                var padding:Number;
 
                padding = getStyle("paddingLeft");
                if (textDisplay.getStyle("paddingLeft") != padding) {
                    textDisplay.setStyle("paddingLeft", padding);
                }
 
                padding = getStyle("paddingTop");
                if (textDisplay.getStyle("paddingTop") != padding) {
                    textDisplay.setStyle("paddingTop", padding);
                }
 
                padding = getStyle("paddingRight");
                if (textDisplay.getStyle("paddingRight") != padding) {
                    textDisplay.setStyle("paddingRight", padding);
                }
 
                padding = getStyle("paddingBottom");
                if (textDisplay.getStyle("paddingBottom") != padding) {
                    textDisplay.setStyle("paddingBottom", padding);
                }
            }
 
            override public function styleChanged(styleProp:String):void {
                super.styleChanged(styleProp);
 
                if (!styleProp || styleProp.indexOf("padding") == 0) {
                    paddingChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            override public function get focusSkinExclusions():Array {
                return [ textDisplay ]
            };
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect id="border"
            left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the appearance of the TextArea component's background. -->
    <s:Rect id="background"
            left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="purple" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect id="shadow"
            left="1" top="1" right="1" height="1">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
 
    <!--- Defines the scroller used to scroll the RichEditableText. -->
    <s:Scroller id="scroller"
            left="0" top="0" right="0" bottom="0"
            minViewportInset="1"
            measuredSizeIncludesScrollBars="false">
        <s:RichEditableText id="textDisplay"
                widthInChars="15" heightInLines="10" />
    </s:Scroller>
 
</s:SparkSkin>

You can also set the skinClass style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|TextArea {
            skinClass: ClassReference("skins.CustomTextAreaSkin");
        }
    </fx:Style>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ -->
<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 skins.CustomTextAreaSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                ta.setStyle("skinClass", CustomTextAreaSkin);
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            text="{Capabilities.serverString}"
            verticalScrollPolicy="on"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

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.

Tagged as: background, entries, fill, GradientEntry, Gumbo, lineargradient, rotation, skin, skinClass, TextAreaSkin

{ 5 comments… read them below or add one }

1 Anonymous December 13, 2009 at 9:18 am

Hello Peter,

In context of this post I have a question.
I’d like to use gradient colors on the “Label” background.
The problem is: as far as I can see the ‘Label’ does NOT have either skin or clear reference in its actionscript file to the background property.
So, the question is: can I control the properties of ‘Label’s background besideds the simple color and alpha?

Thanks,
Igor Borodin

2 Peter deHaan December 13, 2009 at 10:36 am

@Igor Borodin,

Correct, the Spark Label does not have a skin, and you can only modify the simple background color or background alpha.
If you wanted to create a gradient background fill, I imagine the easiest way may be to wrap the Spark Label in a BorderContainer component and set the complex background fill on the container.

Peter

3 Anonymous December 13, 2009 at 12:30 pm: Thank you, Peter.
I’ll follow your advice.

And one more question, although this one probably can’t be answered with certainty.
Flex team keeps modifying Video Player. Can it be assumed that the core properties, methods, and events of this component now have been finalized?
Igor
4 Peter deHaan December 13, 2009 at 11:13 pm: @Igor,

Correct, we did switch the Flex 4 Video components from the FLVPlayback architecture to the newer OSMF architecture (see “Open Source Media Framework (OSMF” for more information).

I think it’s pretty safe to say that the API is pretty much finalized for Flex 4.0 at this point (assuming you’re grabbing the latest nightly builds, I’m not sure how recent the older Beta 2 milestone drop was/is).

Peter

5 Anonymous December 14, 2009 at 8:26 am

@Peter
Oh, the VideoPlayer’s API has changed significantly since the Beta 2: VideoElement, totalTime, playheadUpdate – to name just a few – have been replaced/changed (hopefully for the better :).
Igor

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

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

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

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising