通过mx.skins.ProgrammaticSkin,实现自定义组件（实现自定义组件的重复使用）

mx.skins.ProgrammaticSkin该类是外观元素的基类，它们通过编程方式来绘制自身。

下面通过实现自定义ToolTip来讲解这个类。

ToolTipBorderSkin ，这个方法就是实现自身的绘制.

package skins
{
 import flash.display.Graphics;
 import flash.geom.Point;
 
 import mx.skins.ProgrammaticSkin;
 import flash.filters.BitmapFilter;
 import flash.filters.BitmapFilterQuality;
 import flash.filters.DropShadowFilter;

 public class ToolTipBorderSkin extends ProgrammaticSkin
 {
  public function ToolTipBorderSkin()
  {
   super();
  }
  
   override protected function updateDisplayList(unscaledWidth:Number,
       unscaledHeight:Number):void{
        trace("w=" + unscaledWidth);
        trace("h=" + unscaledHeight);
        var g:Graphics = graphics;
        g.clear();
        //g.lineStyle(0,0xFF0000);
        g.beginFill(0xFF0000,0.5);
        //g.drawRect(0,0,unscaledWidth,unscaledHeight);
        g.drawRoundRect(0,0,unscaledWidth,unscaledHeight,15,10);
        g.endFill();
        var _w:Number = unscaledWidth;
        var _h:Number = unscaledHeight;
        var point1:Point = new Point(_w/3,_h);
        var point2:Point = new Point(2*_w/3,_h);
        var point3:Point = new Point(0,2*_h);
        g.beginFill(0xFF0000,0.5);
        g.moveTo(point1.x,point1.y);
        g.lineTo(point3.x,point3.y);
        g.lineTo(point2.x,point2.y);
        g.endFill();
        
        this.filters = [getDropShadowFilter()];
       }
      
       //添加阴影
       private function getDropShadowFilter():BitmapFilter{
    var color:Number = 0x000000;
             var angle:Number = 45;
             var alpha:Number = 0.8;
             var blurX:Number = 8;
             var blurY:Number = 8;
             var distance:Number = 15;
             var strength:Number = 0.65;
             var inner:Boolean = false;
             var knockout:Boolean = false;
             var quality:Number = BitmapFilterQuality.HIGH;

   
       return new DropShadowFilter(distance,
              angle,
              color,
              alpha,
              blurX,
              blurY,
              strength,
              quality);
   }
 }
}

 

 

我们在下面的自定义样式里可以调用上面的方法。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 
  <mx:Style>
   
   ToolTip
   { 
    borderStyle:inset;
    color:#FFFFFF;
    borderSkin: ClassReference("skins.ToolTipBorderSkin");
   }
  </mx:Style>
 
  <mx:Script>
   <![CDATA[
    import mx.events.ToolTipEvent;
    import mx.managers.ToolTipManager;
    
    private function  initApp():void{
     b5.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, moveToolTip);
    }
    private function moveToolTip(event:ToolTipEvent):void{
     trace(event);
     event.toolTip.x = b5.x + 5;
     event.toolTip.y = b5.y -35;
    }
    
   ]]>
  </mx:Script>
    <mx:Button id="b5" width="30" toolTip="this is good!" height="20" x="226" y="167"/>
  
</mx:Application>