Flex 三態復選框

在周末擠出了一點時間，寫了一個三態復選框的組件，單獨使用沒有價值，不過集成到樹之中可以很好的實現三態樹，今天上午便把三態樹組件也完成了，Flex自定義組件基本無所不能，此組件基於最新的Flex4.6（也支持Apache Flex4.10，我目前已經全面升級到4.10，為了和以后保持一致），廢話不表，呆毛如下：

1.首先創建一個類TriStateCheckBox，繼承至CheckBox，為了實現復選框的三種狀態，我需要設置三個公開的靜態常量來表示，用0，1，2來分別表示Unchecked,Checked和Indeterminate三種狀態：

public class TriStateCheckBox extends CheckBox
{
    public static const Unchecked:int = 0;
    public static const Checked:int = 1;
    public static const Indeterminate:int = 2;
        
    public function TriStateCheckBox()
    {
        super();
    }
}

2.為組件自定義一個checkState屬性，用來標識復選框的三種狀態，這里需要注意的是當狀態處於Checked和Indeterminate時，我們認為復選框的selected=true，因此還需要重寫復選框的selected屬性，實現兩者之間的協調統一：

private var _checkState:int;
[Bindable(event="change")]
[Inspectable(category="General", defaultValue="0")]
public function get checkState():int
{
    return _checkState;
}
public function set checkState(value:int):void
{
    if(value == _checkState)
        return;
            
    _checkState = value;
    if(_checkState==Indeterminate || _checkState==Checked)
    {
        _selected = true;
    }
    else
    {
        _selected = false;
    }
    dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));
    invalidateSkinState();
}
        
private var _selected:Boolean;
[Bindable]
[Inspectable(category="General", defaultValue="false")]
override public function get selected():Boolean
{
    return _selected;
}
override public function set selected(value:Boolean):void
{
    if(value == selected && checkState!=Indeterminate)
    {
        return;
    }
    _selected = value;
    _checkState = _selected?Checked:Unchecked;
    dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));
    invalidateSkinState();
}

3.現在來考慮復選框的外觀，我們新建一個皮膚，主機組件設為上面建立的TriStateCheckBox，然后我們就能看到CheckBox的外觀代碼，大概分成了兩個組，一種是沒有勾選的狀態：up,over,down,disabled，一種是已勾選狀態：upAndSelected,overAndSelected,downAndSelected,disabledAndSelected，用來呈現兩種狀態，現在我就需要再額外增加一種狀態的呈現，所以加入四種狀態即可：upAndIndeterminated,overAndIndeterminated,downAndIndeterminated,disabledAndIndeterminated:

<s:states>
    <s:State name="up" />
    <s:State name="over" stateGroups="overStates" />
    <s:State name="down" stateGroups="downStates" />
    <s:State name="disabled" stateGroups="disabledStates" />
    <s:State name="upAndSelected" stateGroups="selectedStates" />
    <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
    <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
    <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
    <s:State name="upAndIndeterminated" stateGroups="indeterminatedStates" />
    <s:State name="overAndIndeterminated" stateGroups="overStates, indeterminatedStates" />
    <s:State name="downAndIndeterminated" stateGroups="downStates, indeterminatedStates" />
    <s:State name="disabledAndIndeterminated" stateGroups="disabledStates, indeterminatedStates" />
</s:states>

4.好了，我現在要重寫組件的狀態切換邏輯，以便使組件根據三種狀態來切換對應的state:

override protected function getCurrentSkinState():String
{
    var state:String = super.getCurrentSkinState();
    if(checkState==Indeterminate)
    {
        switch(state)
        {
            case "up":
            case "upAndSelected":
            {
                state = "upAndIndeterminated";
                break;
            }
            case "over":
            case "overAndSelected":
            {
                state = "overAndIndeterminated";
                break;
            }
            case "down":
            case "downAndSelected":
            {
                state = "downAndIndeterminated";
                break;
            }
            case "disabled":
            case "disabledAndSelected":
            {
                state = "disabledAndIndeterminated";
                break;
            }
        }
    }
    return state;
}

5.最后，只需要在外觀代碼中加入我想要的第三種狀態的外觀即可，我個人還是比較喜歡實心方塊的外觀，因此我打算直接繪制一個Rect填充,此處是可以自行定義的，比如你喜歡畫個空心園來表示第三狀態，或者畫個灰色的勾，都是可以的，思想沒有邊界，Flex的強大只有懂的人才能體會：

<s:Rect left="2" top="2" right="2" bottom="2" includeIn="indeterminatedStates">
    <s:fill>
        <s:SolidColor id="indeterminatedMarkFill" color="0" alpha="0.8" />
    </s:fill>
</s:Rect>