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

By Minidxer | October 4, 2009

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

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="TextArea_SparkSkin_backgroundAlpha_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo"
  6.         backgroundColor="red">
  7.  
  8.     <mx:TextArea id="textArea"
  9.             borderSkin="skins.CustomHaloTextAreaBorderSkin"
  10.             left="50" right="50"
  11.             top="50" bottom="50">
  12.         <mx:htmlText><fx:String source="lorem.html" /></mx:htmlText>
  13.     </mx:TextArea>
  14.  
  15. </s:Application>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <local:SparkSkinForHalo name="CustomHaloTextAreaBorderSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:local="mx.skins.spark.*"
  6.         implements="mx.core.IBorder">
  7.  
  8.     <fx:Script>
  9.         <![CDATA[
  10.             import mx.core.EdgeMetrics;
  11.             import mx.core.IUIComponent;
  12.  
  13.             /* Define the skin elements that should not be colorized. */
  14.             static private const exclusions:Array = ["background"];
  15.             override public function get colorizeExclusions():Array {return exclusions;}
  16.  
  17.             /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  18.             static private const contentFill:Array = ["bgFill"];
  19.             override public function get contentItems():Array {return contentFill};
  20.  
  21.             /* Define the border items.*/
  22.             static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
  23.             override protected function get borderItems():Array {return borderItem;}
  24.  
  25.             static private const metrics:EdgeMetrics = new EdgeMetrics(2, 2, 2, 2);
  26.  
  27.             public function get borderMetrics():EdgeMetrics {
  28.                 return metrics;
  29.             }
  30.  
  31.             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  32.                 super.updateDisplayList(unscaledWidth, unscaledHeight);
  33.  
  34.                 if (parent && (parent is IUIComponent) && !IUIComponent(parent).enabled) {
  35.                     alpha = 0.5;
  36.                 } else {
  37.                     alpha = 1;
  38.                 }
  39.             }
  40.         ]]>
  41.     </fx:Script>
  42.  
  43.     <!-- border -->
  44.     <s:Rect left="0" right="0" top="0" bottom="0">
  45.         <s:stroke>
  46.             <s:LinearGradientStroke rotation="90" weight="1">
  47.                 <s:GradientEntry id="borderEntry1" alpha="0.5525" />
  48.                 <s:GradientEntry id="borderEntry2" alpha="0.6375" />
  49.             </s:LinearGradientStroke>
  50.         </s:stroke>
  51.     </s:Rect>
  52.  
  53.     <!-- fill -->
  54.     <s:Rect id="background" left="1" right="1" top="1" bottom="1">
  55.         <s:fill>
  56.             <s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0.4" />
  57.         </s:fill>
  58.     </s:Rect>
  59.  
  60.     <!-- shadow -->
  61.     <s:Rect left="1" top="1" right="1" height="1">
  62.         <s:fill>
  63.             <s:SolidColor color="0x000000" alpha="0.12" />
  64.         </s:fill>
  65.     </s:Rect>
  66.  
  67. </local:SparkSkinForHalo>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, TextArea | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll