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

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

 

<?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>

 

 

<?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>