Flex 4中如何创建去除下拉阴影效果Alert的例子

By Minidxer | November 6, 2009

接下来的例子演示了Flex 4中如何通过borderSkin样式，去掉Alert的下拉阴影效果。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Halo_Alert_borderSkin_test2"
  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.     <fx:Style>
  8.         @namespace s "library://ns.adobe.com/flex/spark";
  9.         @namespace mx "library://ns.adobe.com/flex/halo";
  10.  
  11.         mx|Alert {
  12.             borderSkin: ClassReference("skins.CustomPanelBorderSkin");
  13.         }
  14.     </fx:Style>
  15.  
  16.     <fx:Script>
  17.         <![CDATA[
  18.             import mx.controls.Alert;
  19.  
  20.             protected function btn_click(evt:MouseEvent):void {
  21.                 Alert.show("The quick brown fox jumps over the lazy dog.", "Alert title");
  22.             }
  23.         ]]>
  24.     </fx:Script>
  25.  
  26.     <mx:ApplicationControlBar width="100%" cornerRadius="0">
  27.         <s:Button id="btn"
  28.                 label="Show Alert"
  29.                 click="btn_click(event);" />
  30.     </mx:ApplicationControlBar>
  31.  
  32. </s:Application>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomPanelBorderSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         implements="mx.core.IRectangularBorder">
  6.  
  7.     <fx:Script>
  8.         <![CDATA[
  9.             import mx.core.EdgeMetrics;
  10.             import mx.core.IUIComponent;
  11.  
  12.             /* Define the skin elements that should not be colorized.
  13.                For panel, border and title backround are skinned, but the content area and title text are not. */
  14.             static private const exclusions:Array = ["background"];
  15.             override public function get colorizeExclusions():Array {
  16.                 return exclusions;
  17.             }
  18.  
  19.             /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  20.             static private const contentFill:Array = ["bgFill"];
  21.             override public function get contentItems():Array {
  22.                 return contentFill
  23.             }
  24.  
  25.             private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
  26.             public function get borderMetrics():EdgeMetrics {
  27.                 var hasPanelParent:Boolean = isPanel(parent);
  28.                 var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;
  29.  
  30.                 if (controlBar && controlBar.includeInLayout) {
  31.                     _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
  32.                 } else {
  33.                     _metrics.bottom = 1;
  34.                 }
  35.                 return _metrics;
  36.             }
  37.  
  38.             public function get backgroundImageBounds():Rectangle {
  39.                 return null;
  40.             }
  41.  
  42.             public function set backgroundImageBounds(value:Rectangle):void {
  43.             }
  44.  
  45.             public function get hasBackgroundImage():Boolean {
  46.                 return false;
  47.             }
  48.  
  49.             public function layoutBackgroundImage():void {
  50.             }
  51.  
  52.             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  53.                 var em:EdgeMetrics = borderMetrics;
  54.                 if (em.bottom > 1) {
  55.                     cbbg.height = em.bottom - 1;
  56.                     cbdiv.bottom = cbbg.height;
  57.                     cbbg.visible = cbdiv.visible = true;
  58.                 } else {
  59.                     cbbg.visible = cbdiv.visible = false;
  60.                 }
  61.                 super.updateDisplayList(unscaledWidth, unscaledHeight);
  62.             }
  63.  
  64.             private static var panels:Object = {};
  65.  
  66.             private static function isPanel(parent:Object):Boolean {
  67.                 var s:String = getQualifiedClassName(parent);
  68.                 if (panels[s] == 1) {
  69.                     return true;
  70.                 }
  71.                 if (panels[s] == 0) {
  72.                     return false;
  73.                 }
  74.                 if (s == "mx.containers::Panel") {
  75.                     panels[s] == 1;
  76.                     return true;
  77.                 }
  78.                 var x:XML = describeType(parent);
  79.                 var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
  80.                 if (xmllist.length() == 0) {
  81.                     panels[s] = 0;
  82.                     return false;
  83.                 }
  84.                 panels[s] = 1;
  85.                 return true;
  86.             }
  87.         ]]>
  88.     </fx:Script>
  89.  
  90.     <!-- layer 1: border -->
  91.     <s:Rect left="0" right="0" top="0" bottom="0">
  92.         <s:stroke>
  93.             <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
  94.         </s:stroke>
  95.     </s:Rect>
  96.  
  97.     <!-- layer 2: background fill -->
  98.     <s:Rect id="background" left="1" top="1" right="1" bottom="1">
  99.         <s:fill>
  100.             <s:SolidColor color="0xFFFFFF" id="bgFill" />
  101.         </s:fill>
  102.     </s:Rect>
  103.  
  104.     <!-- layer 3: title bar fill -->
  105.     <s:Rect left="1" right="1" top="1" height="30">
  106.        <s:fill>
  107.             <s:LinearGradient rotation="90">
  108.                 <s:GradientEntry color="0xE2E2E2" />
  109.                 <s:GradientEntry color="0xD9D9D9" />
  110.             </s:LinearGradient>
  111.        </s:fill>
  112.     </s:Rect>
  113.  
  114.     <!-- layer 4: title bar highlight -->
  115.     <s:Rect left="1" right="1" top="1" height="30">
  116.        <s:stroke>
  117.             <s:LinearGradientStroke rotation="90" weight="1">
  118.                 <s:GradientEntry color="0xEAEAEA" />
  119.                 <s:GradientEntry color="0xD9D9D9" />
  120.             </s:LinearGradientStroke>
  121.        </s:stroke>
  122.     </s:Rect>
  123.     <s:Rect left="1" right="1" top="31" height="1">
  124.         <s:fill>
  125.             <s:SolidColor color="0xC0C0C0" />
  126.         </s:fill>
  127.     </s:Rect>
  128.  
  129.     <!-- layer 5: control bar background -->
  130.     <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20">
  131.         <s:fill>
  132.             <s:SolidColor color="0xE8E8E8" />
  133.         </s:fill>
  134.     </s:Rect>
  135.  
  136.     <!-- layer 6: control bar divider line -->
  137.     <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
  138.         <s:fill>
  139.             <s:SolidColor color="0xCDCDCD" />
  140.         </s:fill>
  141.     </s:Rect>
  142.  
  143. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Alert, Gumbo | 1 Comment » | Tags: ,

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

One comment | Add One

  1. kim chen - 11/11/2009 at 5:58 pm

    这个事有点深奥了，还一下子没有看懂http://www.woodenboxhome.com
    有时间要好好学习了

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll