在flex里让LinkButton变成一个开关按钮

来自孤鸿的文章
http://chengyun.iteye.com/blog/239404



2008-09-08
在flex里让LinkButton变成一个开关按钮

来自：http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/


其实flex里面的LinkButton有个toggle属性，把它设为true, 这个LinkButton就是一个开关按钮的。问题比较麻烦的是不仅要让这个LinkButton的行为，还要让它具有LinkButton的外观。比如这个LinkButton的selected=true时，它的外观应当像选中状态，比如显示一个蓝色矩形。反之，它的外观就像未选中状态，比如只显示文字。这是用户所期望的。
怎样改变LinkButton的外观呢？请看如下的代码：

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

Java代码
/**
* http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/
*/ 
package { 
    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呢？

main.mxml:

Java代码
<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/ --> 
<mx:Application name="LinkButton_toggle_test" 
        xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 
 
    <mx:ApplicationControlBar dock="true"> 
        <mx:Form styleName="plain"> 
            <mx:FormItem label="toggle:"> 
                <mx:CheckBox id="toggleCheckBox" /> 
            </mx:FormItem> 
            <mx:FormItem label="selected:"> 
                <mx:CheckBox id="selectedCheckBox" 
                        selected="{linkButton.selected}" /> 
            </mx:FormItem> 
        </mx:Form> 
    </mx:ApplicationControlBar> 
 
    <mx:LinkButton id="linkButton" 
            label="LinkButton" 
            toggle="{toggleCheckBox.selected}" 
            selected="{selectedCheckBox.selected}" 
            skin="skins.ToggleLinkButtonSkin" 
/> 
 
</mx:Application>