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 with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

3 Responses to Disabling keyboard navigation on the RadioButton control in Flex

  1. majordan says:

    When would a lack keyboard support in a form element ever be a desirable?

  2. peterd says:

    majordan,

    I honestly don’t know, but I’m sure somebody out there will have one eventually. I just thought it was a semi-interesting example of extending a class and creating a custom component.

    Peter

  3. denis says:

    Hi!
    You write really useful articles, I thought you could help me with my problem :)
    Do you have some ideas how to enable tab navigation inside the RadioButtonGroup?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree