Flex Gumbo中如何创建透明填充色TextArea的例子

By Minidxer | September 23, 2009

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

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.         xmlns:s="library://ns.adobe.com/flex/spark"
  4.         xmlns:mx="library://ns.adobe.com/flex/halo">
  5.  
  6.     <s:TextArea id="textArea"
  7.             contentBackgroundColor="red"
  8.             skinClass="skins.CustomTextAreaSkin"
  9.             horizontalCenter="0"
  10.             verticalCenter="0">
  11.         <s:text>The quick brown fox jumps over the lazy dog.</s:text>
  12.     </s:TextArea>
  13.  
  14. </s:Application>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomTextAreaSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         minWidth="36" minHeight="36"
  6.         alpha.disabled="0.5">
  7.     <s:states>
  8.         <s:State name="normal"/>
  9.         <s:State name="disabled"/>
  10.     </s:states>
  11.  
  12.     <fx:Metadata>
  13.     <![CDATA[
  14.         [HostComponent("spark.components.TextArea")]
  15.     ]]>
  16.     </fx:Metadata>
  17.  
  18.     <fx:Script>
  19.         /* Define the skin elements that should not be colorized.
  20.            For text area, the skin itself is colorized but the individual parts are not. */
  21.         static private const exclusions:Array = ["background", "scroller"];
  22.  
  23.         override public function get colorizeExclusions():Array {return exclusions;}
  24.  
  25.         /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  26.         static private const contentFill:Array = ["bgFill"];
  27.  
  28.         override public function get contentItems():Array {return contentFill};
  29.     </fx:Script>
  30.  
  31.     <!-- border -->
  32.     <s:Rect left="0" right="0" top="0" bottom="0">
  33.         <s:stroke>
  34.             <s:SolidColorStroke color="0x686868" weight="1"/>
  35.         </s:stroke>
  36.     </s:Rect>
  37.  
  38.     <!-- fill -->
  39.     <!--- Defines the appearance of the TextArea component's background. -->
  40.     <s:Rect id="background" left="1" right="1" top="1" bottom="1">
  41.         <s:fill>
  42.         <!--- Defines the background fill color. -->
  43.             <s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0.5" />
  44.         </s:fill>
  45.     </s:Rect>
  46.  
  47.     <!-- shadow -->
  48.     <s:Rect left="1" top="1" right="1" height="1">
  49.         <s:fill>
  50.             <s:SolidColor color="0x000000" alpha="0.12" />
  51.         </s:fill>
  52.     </s:Rect>
  53.  
  54.     <!--- Defines the scroller used to scroll the RichEditableText. -->
  55.     <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0">
  56.         <s:RichEditableText id="textView"
  57.                   heightInLines="10"
  58.                   paddingLeft="4" paddingTop="4"
  59.                   paddingRight="4" paddingBottom="4"/>
  60.     </s:Scroller>
  61.  
  62. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll