flex 學習筆記 alert皮膚

 

<?xml version="1.0" encoding="utf-8"?>
 <s:Application name="Alert_SparkSkin_cornerRadius_test"
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:mx="library://ns.adobe.com/flex/halo"
         xmlns:s="library://ns.adobe.com/flex/spark">

     <fx:Style>
         @namespace mx "library://ns.adobe.com/flex/halo";

         mx|Alert {
             borderSkin: Cla***eference("skins.CustomAlertSkin");
         }
     </fx:Style>

     <fx:Script>
         <![CDATA[
             import mx.controls.Alert;
         ]]>
     </fx:Script>

     <s:Button id="btn"
             label="show Alert"
             click="Alert.show('The quick brown fox jumps over the lazy dog.', 'Alert title');"
             horizontalCenter="0"
             verticalCenter="0" />

 </s:Application>

2 皮膚文件：

<?xml version="1.0" encoding="utf-8"?>
 <s:SparkSkin name="CustomAlertSkin"
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         implements="mx.core.IRectangularBorder">

     <fx:Script>
         <![CDATA[
         import mx.core.EdgeMetrics;
         import mx.core.IUIComponent;

         /* Define the skin elements that should not be colorized.
            For panel, border and title backround are skinned, but the content area and title text are not. */
         static private const exclusions:Array = ["background"];
         override public function get colorizeExclusions():Array {return exclusions;}

         /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
         static private const contentFill:Array = ["bgFill"];
         override public function get contentItems():Array {return contentFill};

         private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
         public function get borderMetrics():EdgeMetrics {
             var hasPanelParent:Boolean = isPanel(parent);
             var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;

             if (controlBar && controlBar.includeInLayout) {
                 _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
             } else {
                 _metrics.bottom = 1;
             }
             return _metrics;
         }

         public function get backgroundImageBounds():Rectangle {
             return null;
         }

         public function set backgroundImageBounds(value:Rectangle):void {
         }

         public function get hasBackgroundImage():Boolean {
             return false;
         }

         public function layoutBackgroundImage():void {
         }

         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
             var em:EdgeMetrics = borderMetrics;

             if (em.bottom > 1) {
                 cbbg.height = em.bottom - 1;
                 cbdiv.bottom = cbbg.height;
                 cbbg.visible = cbdiv.visible = true;
             } else {
                 cbbg.visible = cbdiv.visible = false;
             }
             super.updateDisplayList(unscaledWidth, unscaledHeight);
         }

         private static var panels:Object = {};

         private static function isPanel(parent:Object):Boolean {
             var s:String = getQualifiedClassName(parent);
             if (panels[s] == 1) {
                 return true;
             }
             if (panels[s] == 0) {
                 return false;
             }
             if (s == "mx.containers::Panel") {
                 panels[s] == 1;
                 return true;
             }

             var x:XML = describeType(parent);
             var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
             if (xmllist.length() == 0) {
                 panels[s] = 0;
                 return false;
             }
             panels[s] = 1;
             return true;
         }
         ]]>
     </fx:Script>

     <fx:Declarations>
         <fx:Number id="rad">10</fx:Number>
     </fx:Declarations>

     <!-- drop shadow -->
     <s:Rect left="0" top="0" right="0" bottom="0" radiusX="{rad}" radiusY="{rad}">
         <s:filters>
             <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
         </s:filters>
         <s:fill>
             <s:SolidColor color="0" />
         </s:fill>
     </s:Rect>

     <!-- layer 1: border -->
     <s:Rect left="0" right="0" top="0" bottom="0" radiusX="{rad}" radiusY="{rad}">
         <s:stroke>
             <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
         </s:stroke>
     </s:Rect>

     <!-- layer 2: background fill -->
     <s:Rect id="background" left="1" top="1" right="1" bottom="1" radiusX="{rad}" radiusY="{rad}">
         <s:fill>
             <s:SolidColor color="0xFFFFFF" id="bgFill" />
         </s:fill>
     </s:Rect>

     <!-- layer 5: control bar background -->
     <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20" radiusX="{rad}" radiusY="{rad}">
         <s:fill>
             <s:SolidColor color="0xE8E8E8" />
         </s:fill>
     </s:Rect>

     <!-- layer 6: control bar divider line -->
     <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
         <s:fill>
             <s:SolidColor color="0xCDCDCD" />
         </s:fill>
     </s:Rect>

 </s:SparkSkin>