hello group.
using flex 1.5, i want to make a 3 state checkbox so i have extended a
button to do this.
on this button i have added a new property named : checkState.
please see the code below for my 2 files.
i know there is a better way (much more elegant) with the use of
get/set to make a custom property.
i just dont know how to use them getter-setter.
could you, PLEASE, take a look at my code and tell me how is this done
with get/set?
mxml file:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
xmlns:myComponents="myComponents.*" backgroundColor="#0066CC">
<mx:Panel width="50%" height="90%" verticalAlign="middle"
horizontalAlign="center">
<mx:Button label="check state" click="textA.text+=' ..state:
'+myBtn.checkState;" />
<mx:RadioButton label="semi" click="myBtn.checkState = 'semi';
myBtn.dispatchEvent({type:'stateUpdate'})" />
<mx:RadioButton label="true" click="myBtn.checkState = 'true';
myBtn.dispatchEvent({type:'stateUpdate'})" />
<mx:RadioButton label="false" click="myBtn.checkState = 'false';
myBtn.dispatchEvent({type:'stateUpdate'})" />
<mx:Spacer height="30" />
<myComponents:tri_state id="myBtn" checkState="true"
useHandCursor="true"/>
<myComponents:tri_state id="myBtn1" useHandCursor="true"/>
<myComponents:tri_state id="myBtn2" checkState="false"
useHandCursor="true"/>
<mx:TextArea width="80%" height="100%" backgroundColor="#CCCCCC"
id="textA" />
</mx:Panel>
</mx:Application>
The tri_state.as :
class myComponents.tri_state extends mx.controls.Button {
public var checkState:String;
[Embed(source="images/3state_true.png")]
public var state_true:String;
[Embed(source="images/3state_semi.png")]
public var state_semi:String;
[Embed(source="images/3state_false.png")]
public var state_false:String;
public function tri_state(checkState:String){
setStyle("horizontalGap",0);
setStyle("borderStyle","solid");
width = 12;
height = 12;
addEventListener("click", this);
addEventListener("initialize", this);
addEventListener("stateUpdate", this);
}
private function stateUpdate(event:Object):Void{
if (checkState == "true")icon = state_true;
else if (checkState == "semi")icon = state_semi;
else icon = state_false;
}
private function initialize(event: Object) : Void {
//mx.core.Application.alert(""+semi);
stateUpdate();
}
private function click(event: Object) : Void {
if(checkState == "false"){
icon = state_semi;
checkState = "semi";
}else if(checkState == "true"){
icon = state_false;
checkState = "false";
}else if(checkState=="semi"){
icon = state_true;
checkState = "true";
}
}
