Flex Gumbo中如何利用skinClass样式去掉DropDownList竖直方向分割线的例子

By Minidxer | August 16, 2009

接下来的例子演示了Flex Gumbo中如何利用skinClass样式，去掉DropDownList竖直方向分割线。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_DropDownList_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:DropDownList id="dropDownList"
  8.             prompt="Please select a thing..."
  9.             labelField="label"
  10.             skinClass="skins.CustomDropDownListSkin"
  11.             horizontalCenter="0"
  12.             top="20">
  13.         <s:dataProvider>
  14.             <s:ArrayList>
  15.                 <fx:Object label="One" />
  16.                 <fx:Object label="Two" />
  17.                 <fx:Object label="Three" />
  18.                 <fx:Object label="Four" />
  19.                 <fx:Object label="Five" />
  20.                 <fx:Object label="Six" />
  21.                 <fx:Object label="Seven" />
  22.                 <fx:Object label="Eight" />
  23.                 <fx:Object label="Nine" />
  24.             </s:ArrayList>
  25.         </s:dataProvider>
  26.     </s:DropDownList>
  27.  
  28. </s:Application>

下面是skins/CustomDropDownListSkin.mxml的代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Skin name="CustomDropDownListSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         alpha.disabled="0.5">
  6.     <!-- states -->
  7.     <s:states>
  8.         <s:State name="normal" />
  9.         <s:State name="open" />
  10.         <s:State name="disabled" />
  11.     </s:states>
  12.  
  13.     <!-- host component -->
  14.     <fx:Metadata>
  15.     <![CDATA[
  16.         [HostComponent("spark.components.DropDownList")]
  17.     ]]>
  18.     </fx:Metadata>
  19.  
  20.     <!--- The PopUpAnchor control that opens the drop-down list. -->
  21.     <s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
  22.             left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
  23.             popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
  24.         <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. -->
  25.         <s:Group id="dropDown" maxHeight="134" minHeight="22" >
  26.             <!-- drop shadow -->
  27.             <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5"
  28.                     angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
  29.  
  30.             <!-- border -->
  31.             <s:Rect left="0" right="0" top="0" bottom="0">
  32.                 <s:stroke>
  33.                     <s:SolidColorStroke color="0x686868" weight="1"/>
  34.                 </s:stroke>
  35.             </s:Rect>
  36.  
  37.             <!-- fill -->
  38.             <!--- Defines the appearance of drop-down list's background fill. -->
  39.             <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
  40.                 <s:fill>
  41.                     <!--- The color of the drop down's background fill. The default color is 0xFFFFFF. -->
  42.                     <s:SolidColor id="bgFill" color="0xFFFFFF" />
  43.                 </s:fill>
  44.             </s:Rect>
  45.  
  46.             <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
  47.                 <!--- The container for the data items in the drop-down list. -->
  48.                 <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
  49.                     <s:layout>
  50.                         <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
  51.                     </s:layout>
  52.                 </s:DataGroup>
  53.             </s:Scroller>
  54.         </s:Group>
  55.     </s:PopUpAnchor>
  56.  
  57.     <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. -->
  58.     <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
  59.             skinClass="skins.CustomDropDownListButtonSkin" />
  60.     <!--- The prompt area of the DropDownList. -->
  61.     <s:SimpleText id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
  62.             left="7" right="30" top="2" bottom="2" verticalCenter="1" />
  63.  
  64. </s:Skin>

下面是skins/CustomDropDownListButtonSkin.mxml的代码:

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

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll