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

By Peter deHaan On October 24, 2009 · 5 Comments

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 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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-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 with: • • • • • • • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

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

  1. Anonymous says:
    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

    Reply
    • Peter deHaan says:
      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

      Reply
      • Anonymous says:
        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

      • Peter deHaan says:
        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

  2. Anonymous says:
    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

    Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree