Flex Disabled Checkbox toolTip

Question

I need to be able to show a toolTip on disabled checkboxes. A solution I've seen here on stackoverflow and other places is to just wrap the checkbox in a Group and give the Group the toollTip. This works, but I'm trying to do this generically.

I want to be able to set a property on a custom Checkbox component and at that point wrap the Chexbox in a Group that has the toolTip set.

My problem is, I can't figure out how to add the Checkbox to a Group component at run time in the Checkbox ActionScript code. I've tried adding a showDisabledToolTip property to the Checkbox Class and when that is set do something like this:

var parent = this.parent;
    var gp:Group = new Group();
    gp.toolTip = this.toolTip;
    gp.addElement(this);
    if(parent is Group) {
        parent.addElement(gp);
    } else {
        parent.addChild(gp);
    }

My main problem at that point is this.parent is null. Besides that though, I don't even know if this will really work.

Help is appreciated. Thanks!

michaPau · Answer 1 · 2013-03-01T14:58:23.667

i came up with the solution to extend the CheckBox class and create a new CheckBoxSkin with 2 new SkinStates inside (disabledWithTooltip and disabledWithTooltipSelected)

The extended Checkbox class adds a new disabledWithTooltip property and overrides the getCurrentSkinState method and the mouseEventHandler from ButtonBase

Custom CheckBox class


package components
{

    import flash.events.Event;
    import flash.events.MouseEvent;

    import mx.events.FlexEvent;

    import spark.components.CheckBox;

    [SkinState (disabledWithToolTip)]
    [SkinState (disabledWithToolTipSelected)]

    public class CustomCheckBox extends CheckBox
    {
        private var _disabledKeepToolTip:Boolean = false;

        public function CustomCheckBox()
        {
            super();
            this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete, false, 0, true);
        }

        protected function onCreationComplete(ev:FlexEvent):void {
            //_storedState = this.currentState;
        }


        protected override function getCurrentSkinState():String {
            if(!_disabledKeepToolTip)
                return super.getCurrentSkinState();
            else {
                if(!selected)
                    return "disabledWithToolTip";
                else 
                    return "disabledWithToolTipSelected";
            }
        }

        protected override function mouseEventHandler(event:Event):void {
            var skinState:String = getCurrentSkinState();

            if(skinState != "disabledWithToolTip" && skinState != "disabledWithToolTipSelected") {
                super.mouseEventHandler(event);
            }
        }
        [Bindable]
        [Inspectable(category="General", enumeration="true,false", defaultValue="true")]
        public function get disabledKeepToolTip():Boolean {
            return _disabledKeepToolTip;
        }

        public function set disabledKeepToolTip(value:Boolean):void {

            _disabledKeepToolTip = value;

            this.invalidateSkinState();
        }

    }
}

Create a new Skin based on (spark) CheckBoxSkin and change the hostcomponent in the metadata

[HostComponent("components.CustomCheckBox")]

and add two new skinStates

<s:State name="disabledWithToolTip" stateGroups="disabledStates" />
<s:State name="disabledWithToolTipSelected" stateGroups="disabledStates, selectedStates" />

Usage e.g.

<s:HGroup>
    <components:CustomCheckBox id="custom_chk" label="KeepTooltipCheckbox" skinClass="skins.CustomCheckBoxSkin" toolTip="See this tooltip"/>
    <s:CheckBox id="enable_chk" label="enable/disable" change="{custom_chk.disabledKeepToolTip = enable_chk.selected}"/>
</s:HGroup>

You have to adapt your own package structure if it's different...

Flex Disabled Checkbox toolTip

1 Answers1