Flex 4中如何改变Halo TextArea背景颜色透明度的例子

来源：我要学flash网 | 作者：admin | 发表时间：2011-10-20 | 点击：835  次

接下来的例子演示了Flex 4中如何通过borderSkin样式，改变Halo TextArea背景颜色透明度。 在Flex 4中，backgroundAlpha样式不再有效，我们只能通过borderSkin样式设置自定义样式。

下面是main.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application name="TextArea_SparkSkin_backgroundAlpha_test" 
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/spark" 
        xmlns:mx="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/halo" 
        backgroundColor="red"> 
  
    <mx:TextArea id="textArea" 
            borderSkin="skins.CustomHaloTextAreaBorderSkin" 
            left="50" right="50" 
            top="50" bottom="50"> 
        <mx:htmlText><fx:String source="lorem.html" /></mx:htmlText> 
    </mx:TextArea> 
  
</s:Application> 

下面是skins/CustomHaloTextAreaBorderSkin.mxml的代码：

 

<?xml version="1.0" encoding="utf-8"?> 
<local:SparkSkinForHalo name="CustomHaloTextAreaBorderSkin" 
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/spark" 
        xmlns:local="mx.skins.spark.*" 
        implements="mx.core.IBorder"> 
  
    <fx:Script> 
        <![CDATA[ 
            import mx.core.EdgeMetrics; 
            import mx.core.IUIComponent; 
  
            /* 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 = ["bgFill"]; 
            override public function get contentItems():Array {return contentFill}; 
  
            /* Define the border items.*/ 
            static private const borderItem:Array = ["borderEntry1", "borderEntry2"]; 
            override protected function get borderItems():Array {return borderItem;} 
  
            static private const metrics:EdgeMetrics = new EdgeMetrics(2, 2, 2, 2); 
  
            public function get borderMetrics():EdgeMetrics { 
                return metrics; 
            } 
  
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
                super.updateDisplayList(unscaledWidth, unscaledHeight); 
  
                if (parent && (parent is IUIComponent) && !IUIComponent(parent).enabled) { 
                    alpha = 0.5; 
                } else { 
                    alpha = 1; 
                } 
            } 
        ]]> 
    </fx:Script> 
  
    <!-- border --> 
    <s:Rect left="0" right="0" top="0" bottom="0"> 
        <s:stroke> 
            <s:LinearGradientStroke rotation="90" weight="1"> 
                <s:GradientEntry id="borderEntry1" alpha="0.5525" /> 
                <s:GradientEntry id="borderEntry2" alpha="0.6375" /> 
            </s:LinearGradientStroke> 
        </s:stroke> 
    </s:Rect> 
  
    <!-- fill --> 
    <s:Rect id="background" left="1" right="1" top="1" bottom="1"> 
        <s:fill> 
            <s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0.4" /> 
        </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> 
  
</local:SparkSkinForHalo>