Flex 4中如何去除ComboBox竖直方向分割符的例子

By Minidxer | November 7, 2009

接下来的例子演示了Flex 4中如何通过skin样式自定义皮肤，去除ComboBox竖直方向分割符。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Halo_ComboBox_skin_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.     <mx:ComboBox id="comboBox"
  8.             dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
  9.             skin="skins.CustomComboBoxSkin"
  10.             horizontalCenter="0" verticalCenter="-60" />
  11.  
  12. </s:Application>

下面为skins/CustomComboBoxSkin.mxml的代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <local:SparkSkinForHalo name="CustomComboBoxSkin"
  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.         minWidth="21" minHeight="21"
  7.         alpha.disabled="0.5">
  8.     <!-- states -->
  9.     <local:states>
  10.         <s:State name="up" />
  11.         <s:State name="over" />
  12.         <s:State name="down" />
  13.         <s:State name="disabled" />
  14.     </local:states>
  15.  
  16.     <fx:Script>
  17.         /* Define the skin elements that should not be colorized.
  18.            For button, the graphics are colorized but the arrow is not. */
  19.         static private const exclusions:Array = ["arrow"];
  20.         override public function get colorizeExclusions():Array {
  21.             return exclusions;
  22.         }
  23.  
  24.         /* Define the symbol fill items that should be colored by the "symbolColor" style. */
  25.         static private const symbols:Array = ["arrowFill1", "arrowFill2"];
  26.         override public function get symbolItems():Array {
  27.             return symbols
  28.         }
  29.  
  30.         /* Define the border items.*/
  31.         static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
  32.         override protected function get borderItems():Array {
  33.             return borderItem;
  34.         }
  35.     </fx:Script>
  36.  
  37.     <!-- layer 1: shadow -->
  38.     <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
  39.         <s:fill>
  40.             <s:LinearGradient rotation="90">
  41.                 <s:GradientEntry color="0x000000" 
  42.                         color.down="0xFFFFFF"
  43.                         alpha="0.01"
  44.                         alpha.down="0" />
  45.                 <s:GradientEntry color="0x000000" 
  46.                         color.down="0xFFFFFF" 
  47.                         alpha="0.07"
  48.                         alpha.down="0.5" />
  49.             </s:LinearGradient>
  50.         </s:fill>
  51.     </s:Rect>
  52.  
  53.     <!-- layer 2: fill -->
  54.     <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
  55.         <s:fill>
  56.             <s:LinearGradient rotation="90">
  57.                 <s:GradientEntry color="0xFFFFFF" 
  58.                         color.over="0xBBBDBD" 
  59.                         color.down="0xAAAAAA" 
  60.                         alpha="0.85" />
  61.                 <s:GradientEntry color="0xD8D8D8" 
  62.                         color.over="0x9FA0A1" 
  63.                         color.down="0x929496" 
  64.                         alpha="0.85" />
  65.             </s:LinearGradient>
  66.         </s:fill>
  67.     </s:Rect>
  68.  
  69.     <!-- layer 3: fill lowlight -->
  70.     <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
  71.         <s:fill>
  72.             <s:LinearGradient rotation="90">
  73.                 <s:GradientEntry color="0x000000" alpha="0.0099" />
  74.                 <s:GradientEntry color="0x000000" alpha="0.0627" />
  75.             </s:LinearGradient>
  76.         </s:fill>
  77.     </s:Rect>
  78.  
  79.     <!-- layer 4: fill highlight -->
  80.     <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
  81.         <s:fill>
  82.             <s:SolidColor color="0xFFFFFF" 
  83.                     alpha="0.33" 
  84.                     alpha.over="0.22" 
  85.                     alpha.down="0.12" />
  86.         </s:fill>
  87.     </s:Rect>
  88.  
  89.     <!-- layer 5: highlight stroke (all states except down) -->
  90.     <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
  91.         <s:stroke>
  92.             <s:LinearGradientStroke rotation="90" weight="1">
  93.                 <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
  94.                 <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
  95.             </s:LinearGradientStroke>
  96.         </s:stroke>
  97.     </s:Rect>
  98.  
  99.     <!-- layer 6: highlight stroke (down state only) -->
  100.     <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
  101.         <s:fill>
  102.             <s:SolidColor color="0x000000" alpha="0.07" />
  103.         </s:fill>
  104.     </s:Rect>
  105.     <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
  106.         <s:fill>
  107.             <s:SolidColor color="0x000000" alpha="0.07" />
  108.         </s:fill>
  109.     </s:Rect>
  110.     <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
  111.         <s:fill>
  112.             <s:SolidColor color="0x000000" alpha="0.25" />
  113.         </s:fill>
  114.     </s:Rect>
  115.     <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
  116.         <s:fill>
  117.             <s:SolidColor color="0x000000" alpha="0.09" />
  118.         </s:fill>
  119.     </s:Rect>
  120.  
  121.     <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
  122.     <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
  123.         <s:stroke>
  124.             <s:LinearGradientStroke rotation="90" weight="1">
  125.                 <s:GradientEntry id="borderEntry1" 
  126.                         alpha="0.5625"
  127.                         alpha.down="0.6375" />
  128.                 <s:GradientEntry id="borderEntry2" 
  129.                         alpha="0.75" 
  130.                         alpha.down="0.85" />
  131.             </s:LinearGradientStroke>
  132.         </s:stroke>
  133.     </s:Rect>
  134.  
  135.     <!-- layer 8: arrow -->
  136.     <s:Path right="6" verticalCenter="0" id="arrow"
  137.           data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">
  138.         <s:fill>
  139.             <s:RadialGradient rotation="90" focalPointRatio="1">
  140.                 <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
  141.                 <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
  142.             </s:RadialGradient>
  143.         </s:fill>
  144.     </s:Path>
  145.  
  146. </local:SparkSkinForHalo>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll