Flex 4中如何创建边角圆滑Alert的例子

By Minidxer | October 16, 2009

接下来的例子演示了Flex 4中如何通过自定义Skin和radiusX，radiusY属性，创建边角圆滑Alert。（Flex 3以及早期版本是cornerRadius属性）

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Alert_SparkSkin_cornerRadius_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:mx="library://ns.adobe.com/flex/halo"
  5.         xmlns:s="library://ns.adobe.com/flex/spark">
  6.  
  7.     <fx:Style>
  8.         @namespace mx "library://ns.adobe.com/flex/halo";
  9.  
  10.         mx|Alert {
  11.             borderSkin: ClassReference("skins.CustomAlertSkin");
  12.         }
  13.     </fx:Style>
  14.  
  15.     <fx:Script>
  16.         <![CDATA[
  17.             import mx.controls.Alert;
  18.         ]]>
  19.     </fx:Script>
  20.  
  21.     <s:Button id="btn"
  22.             label="show Alert"
  23.             click="Alert.show('The quick brown fox jumps over the lazy dog.', 'Alert title');"
  24.             horizontalCenter="0"
  25.             verticalCenter="0" />
  26.  
  27. </s:Application>

下面是skins/CustomAlertSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomAlertSkin"
  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 {return exclusions;}
  16.  
  17.         /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  18.         static private const contentFill:Array = ["bgFill"];
  19.         override public function get contentItems():Array {return contentFill};
  20.  
  21.         private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
  22.         public function get borderMetrics():EdgeMetrics {
  23.             var hasPanelParent:Boolean = isPanel(parent);
  24.             var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;
  25.  
  26.             if (controlBar && controlBar.includeInLayout) {
  27.                 _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
  28.             } else {
  29.                 _metrics.bottom = 1;
  30.             }
  31.             return _metrics;
  32.         }
  33.  
  34.         public function get backgroundImageBounds():Rectangle {
  35.             return null;
  36.         }
  37.  
  38.         public function set backgroundImageBounds(value:Rectangle):void {
  39.         }
  40.  
  41.         public function get hasBackgroundImage():Boolean {
  42.             return false;
  43.         }
  44.  
  45.         public function layoutBackgroundImage():void {
  46.         }
  47.  
  48.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  49.             var em:EdgeMetrics = borderMetrics;
  50.  
  51.             if (em.bottom > 1) {
  52.                 cbbg.height = em.bottom - 1;
  53.                 cbdiv.bottom = cbbg.height;
  54.                 cbbg.visible = cbdiv.visible = true;
  55.             } else {
  56.                 cbbg.visible = cbdiv.visible = false;
  57.             }
  58.             super.updateDisplayList(unscaledWidth, unscaledHeight);
  59.         }
  60.  
  61.         private static var panels:Object = {};
  62.  
  63.         private static function isPanel(parent:Object):Boolean {
  64.             var s:String = getQualifiedClassName(parent);
  65.             if (panels[s] == 1) {
  66.                 return true;
  67.             }
  68.             if (panels[s] == 0) {
  69.                 return false;
  70.             }
  71.             if (s == "mx.containers::Panel") {
  72.                 panels[s] == 1;
  73.                 return true;
  74.             }
  75.  
  76.             var x:XML = describeType(parent);
  77.             var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
  78.             if (xmllist.length() == 0) {
  79.                 panels[s] = 0;
  80.                 return false;
  81.             }
  82.             panels[s] = 1;
  83.             return true;
  84.         }
  85.         ]]>
  86.     </fx:Script>
  87.  
  88.     <fx:Declarations>
  89.         <fx:Number id="rad">10</fx:Number>
  90.     </fx:Declarations>
  91.  
  92.     <!-- drop shadow -->
  93.     <s:Rect left="0" top="0" right="0" bottom="0" radiusX="{rad}" radiusY="{rad}">
  94.         <s:filters>
  95.             <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
  96.         </s:filters>
  97.         <s:fill>
  98.             <s:SolidColor color="0" />
  99.         </s:fill>
  100.     </s:Rect>
  101.  
  102.     <!-- layer 1: border -->
  103.     <s:Rect left="0" right="0" top="0" bottom="0" radiusX="{rad}" radiusY="{rad}">
  104.         <s:stroke>
  105.             <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
  106.         </s:stroke>
  107.     </s:Rect>
  108.  
  109.     <!-- layer 2: background fill -->
  110.     <s:Rect id="background" left="1" top="1" right="1" bottom="1" radiusX="{rad}" radiusY="{rad}">
  111.         <s:fill>
  112.             <s:SolidColor color="0xFFFFFF" id="bgFill" />
  113.         </s:fill>
  114.     </s:Rect>
  115.  
  116.     <!-- layer 5: control bar background -->
  117.     <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20" radiusX="{rad}" radiusY="{rad}">
  118.         <s:fill>
  119.             <s:SolidColor color="0xE8E8E8" />
  120.         </s:fill>
  121.     </s:Rect>
  122.  
  123.     <!-- layer 6: control bar divider line -->
  124.     <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
  125.         <s:fill>
  126.             <s:SolidColor color="0xCDCDCD" />
  127.         </s:fill>
  128.     </s:Rect>
  129.  
  130. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll