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 皮肤文件：ide

  
  
  
  

   
   
   
   
<?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>