Flex Gumbo中如何创建渐变背景颜色NumericStepper的例子

By Minidxer | August 24, 2009

接下来的Flex Gumbo中如何利用LinearGradient对象和skinClass样式，创建渐变背景颜色NumericStepper。



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_NumericStepper_skinClass_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.  
  7.     <s:NumericStepper id="numericStepper"
  8.             skinClass="skins.CustomNumericStepperSkin"
  9.             horizontalCenter="0"
  10.             verticalCenter="0" />
  11.  
  12. </s:Application>

下面是Skin类Skins/CustomNumericStepperSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomNumericStepperSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         minHeight="24"
  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.NumericStepper")]
  15.         ]]>
  16.     </fx:Metadata>
  17.  
  18.     <fx:Script>
  19.         /* Define the skin elements that should not be colorized.
  20.            For numeric stepper, the skin itself is colorized but the individual parts are not. */
  21.         static private const exclusions:Array = ["textInput", "decrementButton", "incrementButton"];
  22.  
  23.         override public function get colorizeExclusions():Array {return exclusions;}
  24.     </fx:Script>
  25.  
  26.     <s:Button id="incrementButton" right="0" top="0" height="50%"
  27.               skinClass="spark.skins.default.SpinnerIncrButtonSkin" />
  28.     <s:Button id="decrementButton" right="0" bottom="0" height="50%"
  29.               skinClass="spark.skins.default.SpinnerDecrButtonSkin" />
  30.  
  31.     <s:TextInput id="textInput" left="0" top="0" right="18" bottom="0"
  32.             skinClass="skins.CustomNumericStepperTextInputSkin" />
  33.  
  34. </s:SparkSkin>

还需要自定义的CustomNumericStepperTextInputSkin.mxml

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

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll