在flex里让LinkButton变成一个开关按钮(转载)

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


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>