Flex 三态复选框

在周末挤出了一点时间，写了一个三态复选框的组件，单独使用没有价值，不过集成到树之中可以很好的实现三态树，今天上午便把三态树组件也完成了，Flex自定义组件基本无所不能，此组件基于最新的Flex4.6（也支持Apache Flex4.10，我目前已经全面升级到4.10，为了和以后保持一致），废话不表，呆毛如下：

1.首先创建一个类TriStateCheckBox，继承至CheckBox，为了实现复选框的三种状态，我需要设置三个公开的静态常量来表示，用0，1，2来分别表示Unchecked,Checked和Indeterminate三种状态：

 1 public class TriStateCheckBox extends CheckBox

 2 {

 3     public static const Unchecked:int = 0;

 4     public static const Checked:int = 1;

 5     public static const Indeterminate:int = 2;

 6         

 7     public function TriStateCheckBox()

 8     {

 9         super();

10     }

11 }

2.为组件自定义一个checkState属性，用来标识复选框的三种状态，这里需要注意的是当状态处于Checked和Indeterminate时，我们认为复选框的selected=true，因此还需要重写复选框的selected属性，实现两者之间的协调统一：

 1 private var _checkState:int;

 2 [Bindable(event="change")]

 3 [Inspectable(category="General", defaultValue="0")]

 4 public function get checkState():int

 5 {

 6     return _checkState;

 7 }

 8 public function set checkState(value:int):void

 9 {

10     if(value == _checkState)

11         return;

12             

13     _checkState = value;

14     if(_checkState==Indeterminate || _checkState==Checked)

15     {

16         _selected = true;

17     }

18     else

19     {

20         _selected = false;

21     }

22     dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));

23     invalidateSkinState();

24 }

25         

26 private var _selected:Boolean;

27 [Bindable]

28 [Inspectable(category="General", defaultValue="false")]

29 override public function get selected():Boolean

30 {

31     return _selected;

32 }

33 override public function set selected(value:Boolean):void

34 {

35     if(value == selected && checkState!=Indeterminate)

36     {

37         return;

38     }

39     _selected = value;

40     _checkState = _selected?Checked:Unchecked;

41     dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));

42     invalidateSkinState();

43 }

3.现在来考虑复选框的外观，我们新建一个皮肤，主机组件设为上面建立的TriStateCheckBox，然后我们就能看到CheckBox的外观代码，大概分成了两个组，一种是没有勾选的状态：up,over,down,disabled，一种是已勾选状态：upAndSelected,overAndSelected,downAndSelected,disabledAndSelected，用来呈现两种状态，现在我就需要再额外增加一种状态的呈现，所以加入四种状态即可：upAndIndeterminated,overAndIndeterminated,downAndIndeterminated,disabledAndIndeterminated:

 1 <s:states>

 2     <s:State name="up" />

 3     <s:State name="over" stateGroups="overStates" />

 4     <s:State name="down" stateGroups="downStates" />

 5     <s:State name="disabled" stateGroups="disabledStates" />

 6     <s:State name="upAndSelected" stateGroups="selectedStates" />

 7     <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />

 8     <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />

 9     <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />

10     <s:State name="upAndIndeterminated" stateGroups="indeterminatedStates" />

11     <s:State name="overAndIndeterminated" stateGroups="overStates, indeterminatedStates" />

12     <s:State name="downAndIndeterminated" stateGroups="downStates, indeterminatedStates" />

13     <s:State name="disabledAndIndeterminated" stateGroups="disabledStates, indeterminatedStates" />

14 </s:states>

4.好了，我现在要重写组件的状态切换逻辑，以便使组件根据三种状态来切换对应的state:

 1 override protected function getCurrentSkinState():String

 2 {

 3     var state:String = super.getCurrentSkinState();

 4     if(checkState==Indeterminate)

 5     {

 6         switch(state)

 7         {

 8             case "up":

 9             case "upAndSelected":

10             {

11                 state = "upAndIndeterminated";

12                 break;

13             }

14             case "over":

15             case "overAndSelected":

16             {

17                 state = "overAndIndeterminated";

18                 break;

19             }

20             case "down":

21             case "downAndSelected":

22             {

23                 state = "downAndIndeterminated";

24                 break;

25             }

26             case "disabled":

27             case "disabledAndSelected":

28             {

29                 state = "disabledAndIndeterminated";

30                 break;

31             }

32         }

33     }

34     return state;

35 }

5.最后，只需要在外观代码中加入我想要的第三种状态的外观即可，我个人还是比较喜欢实心方块的外观，因此我打算直接绘制一个Rect填充,此处是可以自行定义的，比如你喜欢画个空心园来表示第三状态，或者画个灰色的勾，都是可以的，思想没有边界，Flex的强大只有懂的人才能体会：

1 <s:Rect left="2" top="2" right="2" bottom="2" includeIn="indeterminatedStates">

2     <s:fill>

3         <s:SolidColor id="indeterminatedMarkFill" color="0" alpha="0.8" />

4     </s:fill>

5 </s:Rect>