接下来的例子演示了Flex Gumbo中如何通过自定义Skin和alpha属性，创建透明填充色TextArea。

接下来的例子演示了Flex Gumbo中如何通过自定义Skin和alpha属性，创建透明填充色TextArea。

 

下面是main.mxml：<?xml version="1.0" encoding="utf-8"?> 

<s:Application 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="textArea" 

            contentBackgroundColor="red" 

            skinClass="skins.CustomTextAreaSkin" 

            horizontalCenter="0" 

            verticalCenter="0"> 

        <s:text>The quick brown fox jumps over the lazy dog.</s:text> 

    </s:TextArea> 

  

</s:Application>

 

 

下面是skins/CustomTextAreaSkin.mxml的代码：<?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" 

        minWidth="36" minHeight="36" 

        alpha.disabled="0.5"> 

    <s:states> 

        <s:State name="normal"/> 

        <s:State name="disabled"/> 

    </s:states> 

  

    <fx:Metadata> 

    <![CDATA[ 

        [HostComponent("spark.components.TextArea")] 

    ]]> 

    </fx:Metadata> 

  

    <fx:Script> 

        /* 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 = ["bgFill"]; 

  

        override public function get contentItems():Array {return contentFill}; 

    </fx:Script> 

  

    <!-- border --> 

    <s:Rect left="0" right="0" top="0" bottom="0"> 

        <s:stroke> 

            <s:SolidColorStroke color="0x686868" 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> 

        <!--- Defines the background fill color. --> 

            <s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0.5" /> 

        </s:fill> 

    </s:Rect> 

  

    <!-- shadow --> 

    <s:Rect 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"> 

        <s:RichEditableText id="textView" 

                  heightInLines="10" 

                  paddingLeft="4" paddingTop="4" 

                  paddingRight="4" paddingBottom="4"/> 

    </s:Scroller> 

  

</s:SparkSkin>