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

By Minidxer | July 29, 2009

接下来的例子演示了Flex中如何去掉ComboBox竖直方向分割符。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ -->
  3. <Application name="ComboBox_skin_test"
  4.         xmlns="http://www.adobe.com/2006/mxml"
  5.         backgroundColor="white">
  6.  
  7.     <ComboBox id="comboBox"
  8.             dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
  9.             skin="CustomComboBoxSkin" />
  10.  
  11. </Application>

下面是CustomComboBoxSkin.as：

  1. package {
  2.     import flash.display.GradientType;
  3.     import flash.display.Graphics;
  4.  
  5.     import mx.skins.halo.ComboBoxArrowSkin;
  6.     import mx.skins.halo.HaloColors;
  7.     import mx.styles.StyleManager;
  8.     import mx.utils.ColorUtil;
  9.  
  10.     public class CustomComboBoxSkin extends ComboBoxArrowSkin {
  11.         private static var cache:Object = {};
  12.  
  13.         public function CustomComboBoxSkin() {
  14.             super();
  15.         }
  16.  
  17.         private static function calcDerivedStyles(themeColor:uint, borderColor:uint, fillColor0:uint, fillColor1:uint):Object {
  18.             var key:String = HaloColors.getCacheKey(themeColor, borderColor, fillColor0, fillColor1);
  19.             if (!cache[key]) {
  20.                 var o:Object = cache[key] = {};
  21.                 HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1);
  22.             }
  23.             return cache[key];
  24.         }
  25.  
  26.         override protected function updateDisplayList(w:Number, h:Number):void {
  27.             super.updateDisplayList(w, h);
  28.  
  29.             var arrowColor:uint = getStyle("iconColor");
  30.             var borderColor:uint = getStyle("borderColor");
  31.             var cornerRadius:Number = getStyle("cornerRadius");
  32.             var dropdownBorderColor:Number = getStyle("dropdownBorderColor");
  33.             var fillAlphas:Array = getStyle("fillAlphas");
  34.             var fillColors:Array = getStyle("fillColors");
  35.             StyleManager.getColorNames(fillColors);
  36.             var highlightAlphas:Array = getStyle("highlightAlphas");
  37.             var themeColor:uint = getStyle("themeColor");
  38.  
  39.             // The dropdownBorderColor is currently only used
  40.             // when displaying an error state.
  41.             if (!isNaN(dropdownBorderColor)) {
  42.                 borderColor = dropdownBorderColor;
  43.             }
  44.  
  45.             var derStyles:Object = calcDerivedStyles(themeColor, borderColor, fillColors[0], fillColors[1]);
  46.             var borderColorDrk1:Number = ColorUtil.adjustBrightness2(borderColor, -50);
  47.             var themeColorDrk1:Number = ColorUtil.adjustBrightness2(themeColor, -25);
  48.             var cornerRadius1:Number = Math.max(cornerRadius - 1, 0);
  49.             var cr:Object = { tl: 0, tr: cornerRadius, bl: 0, br: cornerRadius };
  50.             var cr1:Object = { tl: 0, tr: cornerRadius1, bl: 0, br: cornerRadius1 };
  51.             var arrowOnly:Boolean = true;
  52.  
  53.             // If our name doesn't include "editable", we are drawing the non-edit
  54.             // skin which spans the entire control
  55.             if (name.indexOf("editable") < 0) {
  56.                 arrowOnly = false;
  57.                 cr.tl = cr.bl = cornerRadius;
  58.                 cr1.tl = cr1.bl = cornerRadius1;
  59.             }
  60.  
  61.             var g:Graphics = graphics;
  62.             g.clear();
  63.  
  64.             // Draw the border and fill.
  65.             switch (name) {
  66.                 case "upSkin":
  67.                 case "editableUpSkin": {
  68.                        var upFillColors:Array = [ fillColors[0], fillColors[1] ];
  69.                        var upFillAlphas:Array = [ fillAlphas[0], fillAlphas[1] ];
  70.  
  71.                     // border
  72.                     drawRoundRect(0, 0, w, h, cr,
  73.                         [ borderColor, borderColorDrk1 ], 1,
  74.                         verticalGradientMatrix(0, 0, w, h),
  75.                         GradientType.LINEAR, null,
  76.                         { x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
  77.  
  78.                     // button fill
  79.                     drawRoundRect(1, 1, w - 2, h - 2, cr1,
  80.                         upFillColors, upFillAlphas,
  81.                         verticalGradientMatrix(1, 1, w - 2, h - 2));
  82.  
  83.                     // top highlight
  84.                     drawRoundRect(1, 1, w - 2, (h - 2) / 2,
  85.                         { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
  86.                         [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
  87.                         verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
  88.  
  89.                     break;
  90.                 }
  91.  
  92.                 case "overSkin":
  93.                 case "editableOverSkin": {
  94.                     var overFillColors:Array;
  95.                     if (fillColors.length > 2) {
  96.                         overFillColors = [ fillColors[2], fillColors[3] ];
  97.                     } else {
  98.                         overFillColors = [ fillColors[0], fillColors[1] ];
  99.                     }
  100.  
  101.                     var overFillAlphas:Array;
  102.                     if (fillAlphas.length > 2) {
  103.                         overFillAlphas = [ fillAlphas[2], fillAlphas[3] ];
  104.                       } else {
  105.                         overFillAlphas = [ fillAlphas[0], fillAlphas[1] ];
  106.                       }
  107.  
  108.                     // border
  109.                     drawRoundRect(0, 0, w, h, cr,
  110.                         [ themeColor, themeColorDrk1 ], 1,
  111.                         verticalGradientMatrix(0, 0, w, h),
  112.                         GradientType.LINEAR, null,
  113.                         { x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
  114.  
  115.                     // button fill
  116.                     drawRoundRect(1, 1, w - 2, h - 2, cr1,
  117.                         overFillColors, overFillAlphas,
  118.                         verticalGradientMatrix(1, 1, w - 2, h - 2));
  119.  
  120.                     // top highlight
  121.                     drawRoundRect(1, 1, w - 2, (h - 2) / 2,
  122.                         { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
  123.                         [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
  124.                         verticalGradientMatrix(0, 0, w - 2, (h - 2) / 2));
  125.  
  126.                     break;
  127.                 }
  128.  
  129.                 case "downSkin":
  130.                 case "editableDownSkin": {
  131.                     // border
  132.                     drawRoundRect(0, 0, w, h, cr,
  133.                         [ themeColor, themeColorDrk1 ], 1,
  134.                         verticalGradientMatrix(0, 0, w, h));
  135.  
  136.                     // button fill
  137.                     drawRoundRect(1, 1, w - 2, h - 2, cr1,
  138.                         [ derStyles.fillColorPress1, derStyles.fillColorPress2 ], 1,
  139.                         verticalGradientMatrix(1, 1, w - 2, h - 2));
  140.  
  141.                     // top highlight
  142.                     drawRoundRect(1, 1, w - 2, (h - 2) / 2,
  143.                         { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
  144.                         [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
  145.                         verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
  146.  
  147.                     break;
  148.                 }
  149.  
  150.                 case "disabledSkin":
  151.                 case "editableDisabledSkin": {
  152.                        var disFillColors:Array = [ fillColors[0], fillColors[1] ];
  153.                     var disFillAlphas:Array = [ Math.max(0, fillAlphas[0] - 0.15), Math.max(0, fillAlphas[1] - 0.15) ];
  154.  
  155.                     // border
  156.                     drawRoundRect(0, 0, w, h, cr,
  157.                         [ borderColor, borderColorDrk1 ], 0.5,
  158.                         verticalGradientMatrix(0, 0, w, h ),
  159.                         GradientType.LINEAR, null,
  160.                         { x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
  161.  
  162.                     // button fill
  163.                     drawRoundRect(1, 1, w - 2, h - 2, cr1,
  164.                         disFillColors, disFillAlphas,
  165.                         verticalGradientMatrix(0, 0, w - 2, h - 2));
  166.  
  167.                     arrowColor = getStyle("disabledIconColor");
  168.                     break;
  169.                 }
  170.             }
  171.  
  172.             // Draw the triangle.
  173.             g.beginFill(arrowColor);
  174.             g.moveTo(w - 11.5, h / 2 + 3);
  175.             g.lineTo(w - 15, h / 2 - 2);
  176.             g.lineTo(w - 8, h / 2 - 2);
  177.             g.lineTo(w - 11.5, h / 2 + 3);
  178.             g.endFill();
  179.         }
  180.     }
  181. }
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ComboBox | No Comments » | Tags: ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll