扩展LinkButtonSkin类，让LinkButton变成一个开关按钮

其实flex里面的LinkButton有个toggle属性，把它设为true, 这个LinkButton就是一个开关按钮的。问题比较麻烦的是不仅要让这个LinkButton的行为，还要让它具有LinkButton的外观。比如这个LinkButton的selected=true时，它的外观应当像选中状态，比如显示一个蓝色矩形。反之，它的外观就像未选中状态，比如只显示文字。

怎样改变LinkButton的外观呢？请看如下的代码：

Views/SkinView/Skin/ToggleLinkButtonSkin.as

ToggleLinkButtonSkin类扩展了LinkButtonSkin类，在里面增加了几种状态。

 

Views/SkinView/Skin/ToggleLinkButtonSkin.as

/**
 * 创建日期：2013-04-27
 * 用途： 扩展LinkButtonSkin类，让LinkButton变成一个开关按钮
 */
package Views.SkinView.Skin
{
 import mx.skins.halo.LinkButtonSkin;
 
 public class ToggleLinkButtonSkin extends LinkButtonSkin 
 {
  public function ToggleLinkButtonSkin() 
  {
   super();
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void 
  {
   super.updateDisplayList(w, h);
   
   var cornerRadius:Number = getStyle("cornerRadius");
   var rollOverColor:uint = getStyle("rollOverColor");
   var selectionColor:uint = getStyle("selectionColor");
   
   graphics.clear();
   
   switch (name) 
   {
    case "upSkin":
     // 画一个不可见矩形，作为用户的点击区域
     drawRoundRect(0, 0, w, h, cornerRadius,0, 0);
     break;
    //增加了selectedUpSkin和selectedOverSkin两种状态，实际上和原来的overSkin一样 
    case "selectedUpSkin":
    case "selectedOverSkin":
    case "overSkin":
     drawRoundRect(0, 0, w, h, cornerRadius,rollOverColor, 1);
     break;
    //增加了selectedDownSkin状态，实际上和原来的downSkin是一样的外观
    case "selectedDownSkin":
    case "downSkin":
     drawRoundRect(0, 0, w, h, cornerRadius,selectionColor, 1);
     break;
    //增加了selectedDisabledSkin状态，实际上和原来的disabledSkin一样
    case "selectedDisabledSkin":
    case "disabledSkin":
     // Draw invisible shape so we have a hit area.
     drawRoundRect(0, 0, w, h, cornerRadius,0, 0);
     break;
   }
  }
 }
}

如何使用ToggleLinkButtonSkin呢？ 下面一小段代码：

<s:HGroup width="100%" height="30" verticalAlign="middle" horizontalAlign="right" paddingRight="10">
    <mx:LinkButton id="all" icon="@Embed(source='Views/SkinView/Image/collect.png')"         skin="Views.SkinView.Skin.ToggleLinkButtonSkin" label="资产总数({vModel.allData.RowCount})" click="all_clickHandler(event)"/>
    <mx:LinkButton id="usee" icon="@Embed(source='Views/SkinView/Image/entity.png')"  skin="Views.SkinView.Skin.ToggleLinkButtonSkin" label="实体机({vModel.entityData.RowCount})" click="usee_clickHandler(event)"/>
    <mx:LinkButton id="nouse" icon="@Embed(source='Views/SkinView/Image/virtual.png')"  skin="Views.SkinView.Skin.ToggleLinkButtonSkin" label="虚拟机({vModel.virtualData.RowCount})" click="nouse_clickHandler(event)"/>
</s:HGroup> 

鼠标单击事件中：

//资产总数
   protected function all_clickHandler(event:MouseEvent):void
   {
    vModel.vDataTable = vModel.allData;
    this.all.selected = true;
    this.usee.selected = false;
    this.nouse.selected = false;
   }

   //实体机
   protected function usee_clickHandler(event:MouseEvent):void
   {
    vModel.vDataTable = vModel.entityData;
    this.all.selected = false;
    this.usee.selected = true;
    this.nouse.selected = false;
   }

   //虚拟机
   protected function nouse_clickHandler(event:MouseEvent):void
   {
    vModel.vDataTable = vModel.virtualData;
    this.all.selected = false;
    this.usee.selected = false;
    this.nouse.selected = true;
   }