Flex 4中如何设置Alert背景图片的例子

By Minidxer | November 5, 2009

接下来的例子演示了Flex 4中如何通过borderSkin样式，设置Alert背景图片。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Halo_Alert_borderSkin_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.     <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_clickHandler(evt:MouseEvent):void {
  21.                 var a:Alert = Alert.show("The quick brown fox jumps over the lazy dog", "Alert title");
  22.                 a.status = mx_internal::VERSION;
  23.             }
  24.         ]]>
  25.     </fx:Script>
  26.  
  27.     <mx:ApplicationControlBar width="100%" cornerRadius="0">
  28.         <s:Button id="btn"
  29.                 label="Launch Alert"
  30.                 click="btn_clickHandler(event);" />
  31.     </mx:ApplicationControlBar>
  32.  
  33. </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 = [];
  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.             if (controlBar && controlBar.includeInLayout) {
  30.                 _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
  31.             } else {
  32.                 _metrics.bottom = 1;
  33.             }
  34.             return _metrics;
  35.         }
  36.  
  37.         public function get backgroundImageBounds():Rectangle {
  38.             return null;
  39.         }
  40.  
  41.         public function set backgroundImageBounds(value:Rectangle):void {
  42.         }
  43.  
  44.         public function get hasBackgroundImage():Boolean {
  45.             return false;
  46.         }
  47.  
  48.         public function layoutBackgroundImage():void {
  49.         }
  50.  
  51.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  52.             var em:EdgeMetrics = borderMetrics;
  53.             if (em.bottom > 1) {
  54.                 cbbg.height = em.bottom - 1;
  55.                 cbdiv.bottom = cbbg.height;
  56.                 cbbg.visible = cbdiv.visible = true;
  57.             } else {
  58.                 cbbg.visible = cbdiv.visible = false;
  59.             }
  60.             super.updateDisplayList(unscaledWidth, unscaledHeight);
  61.         }
  62.  
  63.         private static var panels:Object = {};
  64.  
  65.         private static function isPanel(parent:Object):Boolean {
  66.             var s:String = getQualifiedClassName(parent);
  67.             if (panels[s] == 1) {
  68.                 return true;
  69.             }
  70.             if (panels[s] == 0) {
  71.                 return false;
  72.             }
  73.             if (s == "mx.containers::Panel") {
  74.                 panels[s] == 1;
  75.                 return true;
  76.             }
  77.             var x:XML = describeType(parent);
  78.             var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
  79.             if (xmllist.length() == 0) {
  80.                 panels[s] = 0;
  81.                 return false;
  82.             }
  83.             panels[s] = 1;
  84.             return true;
  85.         }
  86.         ]]>
  87.     </fx:Script>
  88.  
  89.     <!-- drop shadow -->
  90.     <s:Rect left="0" top="0" right="0" bottom="0">
  91.         <s:filters>
  92.             <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
  93.         </s:filters>
  94.         <s:fill>
  95.             <s:SolidColor color="0" />
  96.         </s:fill>
  97.     </s:Rect>
  98.  
  99.     <!-- layer 1: border -->
  100.     <s:Rect left="0" right="0" top="0" bottom="0">
  101.         <s:stroke>
  102.             <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
  103.         </s:stroke>
  104.     </s:Rect>
  105.  
  106.     <!-- layer 2: background fill -->
  107.     <s:Rect id="background" left="1" top="1" right="1" bottom="1" alpha="0.6">
  108.         <s:fill>
  109.             <s:BitmapFill source="@Embed('assets/pattern_158.gif')" />
  110.         </s:fill>
  111.     </s:Rect>
  112.  
  113.     <!-- layer 3: title bar fill -->
  114.     <s:Rect left="1" right="1" top="1" height="30">
  115.        <s:fill>
  116.             <s:LinearGradient rotation="90">
  117.                 <s:GradientEntry color="0xE2E2E2" />
  118.                 <s:GradientEntry color="0xD9D9D9" />
  119.             </s:LinearGradient>
  120.        </s:fill>
  121.     </s:Rect>
  122.  
  123.     <!-- layer 4: title bar highlight -->
  124.     <s:Rect left="1" right="1" top="1" height="30">
  125.        <s:stroke>
  126.             <s:LinearGradientStroke rotation="90" weight="1">
  127.                 <s:GradientEntry color="0xEAEAEA" />
  128.                 <s:GradientEntry color="0xD9D9D9" />
  129.             </s:LinearGradientStroke>
  130.        </s:stroke>
  131.     </s:Rect>
  132.     <s:Rect left="1" right="1" top="31" height="1">
  133.         <s:fill>
  134.             <s:SolidColor color="0xC0C0C0" />
  135.         </s:fill>
  136.     </s:Rect>
  137.  
  138.     <!-- layer 5: control bar background -->
  139.     <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20">
  140.         <s:fill>
  141.             <s:SolidColor color="0xE8E8E8" />
  142.         </s:fill>
  143.     </s:Rect>
  144.  
  145.     <!-- layer 6: control bar divider line -->
  146.     <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
  147.         <s:fill>
  148.             <s:SolidColor color="0xCDCDCD" />
  149.         </s:fill>
  150.     </s:Rect>
  151.  
  152. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll