Extend Flex Spark Button to contain a clickable Checkbox

Question

I'm using a Sparkskin for a Button to put a checkbox on the button.

Currently the button is receiving the mouse click and the checkbox is not selectable.

I want a user to be able to select/deselect the checkbox.

Do I need to set something or override a function in the Sparkskin for that to happen?

Answer 1

First, create your custom button extending spark Button. Set mouseChildren property to true (after super() call). Override mouseEventHandler method, which handles all mouse events of the button. Check for the target of event and don't call for super.mouseEventHandler if target is your checkbox in case you don't want your button to be clicked when checking the checkbox.

 public class MyButton extends Button {
        [SkinPart]
        public var checkBox:CheckBox;

        public function MyButton() {
            super();
            mouseChildren = true;
        }

        override protected function mouseEventHandler(event:Event):void {
            if (event.target != checkBox)
                super.mouseEventHandler(event);
            }
        }
 }