Disabling keyboard navigation on the RadioButton control in Flex

The following example shows how you can disable keyboard navigation within a Flex RadioButton/RadioButtonGroup by extending the RadioButton class and overriding the protected keyDownHandler() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:RadioButtonGroup id="radioGroup1" />
    <mx:RadioButtonGroup id="radioGroup2" />

    <mx:Form>
        <mx:FormItem label="keyboard enabled:"
                direction="horizontal">
            <mx:RadioButton id="radioButton1"
                    label="Red"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton2"
                    label="Orange"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton3"
                    label="Yellow"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton4"
                    label="Green"
                    group="{radioGroup1}" />
            <mx:RadioButton id="radioButton5"
                    label="Blue"
                    group="{radioGroup1}" />
        </mx:FormItem>
        <mx:FormItem label="keyboard disabled:"
                direction="horizontal">
            <comps:MyRadioButton id="radioButton6"
                    label="Red"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton7"
                    label="Orange"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton8"
                    label="Yellow"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton9"
                    label="Green"
                    group="{radioGroup2}" />
            <comps:MyRadioButton id="radioButton0"
                    label="Blue"
                    group="{radioGroup2}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

comps/MyRadioButton.as

/**
 * http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/
 */
package comps {
    import flash.events.KeyboardEvent;
    import mx.controls.RadioButton;

    public class MyRadioButton extends RadioButton {
        public function MyRadioButton() {
            super();
        }

        override protected function keyDownHandler(event:KeyboardEvent):void {
            // ignore
        }
    }
}

View source is enabled in the following example.

You can also override the keyDownHandler() method using a custom MXML component, as seen in the following example:

comps/MyRadioButton2.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ -->
<mx:RadioButton xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            override protected function keyDownHandler(event:KeyboardEvent):void {
                // ignore
            }
        ]]>
    </mx:Script>

</mx:RadioButton>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/23/disabling-keyboard-navigation-on-the-radiobutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import comps.*;

            import mx.containers.FormItemDirection;
            import mx.containers.FormItem;
            import mx.containers.Form;
            import mx.controls.RadioButton;
            import mx.controls.RadioButtonGroup;

            private var radioGroup1:RadioButtonGroup;
            private var radioGroup2:RadioButtonGroup;

            private var radioButton1:RadioButton;
            private var radioButton2:RadioButton;
            private var radioButton3:RadioButton;
            private var radioButton4:RadioButton;
            private var radioButton5:RadioButton;

            private var radioButton6:MyRadioButton;
            private var radioButton7:MyRadioButton;
            private var radioButton8:MyRadioButton;
            private var radioButton9:MyRadioButton;
            private var radioButton0:MyRadioButton;

            private function init():void {
                radioGroup1 = new RadioButtonGroup();
                radioGroup2 = new RadioButtonGroup();

                // 1
                radioButton1 = new RadioButton();
                radioButton1.label = "Red";
                radioButton1.group = radioGroup1;
                // 2
                radioButton2 = new RadioButton();
                radioButton2.label = "Orange";
                radioButton2.group = radioGroup1;
                // 3
                radioButton3 = new RadioButton();
                radioButton3.label = "Yellow";
                radioButton3.group = radioGroup1;
                // 4
                radioButton4 = new RadioButton();
                radioButton4.label = "Green";
                radioButton4.group = radioGroup1;
                // 5
                radioButton5 = new RadioButton();
                radioButton5.label = "Blue";
                radioButton5.group = radioGroup1;

                // 6
                radioButton6 = new MyRadioButton();
                radioButton6.label = "Red";
                radioButton6.group = radioGroup2;
                // 7
                radioButton7 = new MyRadioButton();
                radioButton7.label = "Orange";
                radioButton7.group = radioGroup2;
                // 8
                radioButton8 = new MyRadioButton();
                radioButton8.label = "Yellow";
                radioButton8.group = radioGroup2;
                // 9
                radioButton9 = new MyRadioButton();
                radioButton9.label = "Green";
                radioButton9.group = radioGroup2;
                // 0
                radioButton0 = new MyRadioButton();
                radioButton0.label = "Blue";
                radioButton0.group = radioGroup2;

                var formItem1:FormItem = new FormItem();
                formItem1.label = "keyboard enabled:";
                formItem1.direction = FormItemDirection.HORIZONTAL;
                formItem1.addChild(radioButton1);
                formItem1.addChild(radioButton2);
                formItem1.addChild(radioButton3);
                formItem1.addChild(radioButton4);
                formItem1.addChild(radioButton5);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "keyboard disabled:";
                formItem2.direction = FormItemDirection.HORIZONTAL;
                formItem2.addChild(radioButton6);
                formItem2.addChild(radioButton7);
                formItem2.addChild(radioButton8);
                formItem2.addChild(radioButton9);
                formItem2.addChild(radioButton0);

                var form:Form = new Form();
                form.addChild(formItem1);
                form.addChild(formItem2);
                addChild(form);
            }
        ]]>
    </mx:Script>

</mx:Application>

Tagged as: keyDownHandler()