Detecting when a RadioButton has been clicked in a RadioButtonGroup in Flex

The following example shows how you can detect when a RadioButton has been clicked in a FlexRadioButtonGroup by listening for the itemClick event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function radioGroup_itemClick(evt:ItemClickEvent):void {
                var now:String = new Date().toTimeString();
                lbl.text = evt.label + " (" + now + ")";
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="lbl" fontWeight="bold" />
    </mx:ApplicationControlBar>

    <mx:RadioButtonGroup id="radioGroup"
            itemClick="radioGroup_itemClick(event);" />

    <mx:VBox>
        <mx:RadioButton id="radioButton1"
                label="Red"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton2"
                label="Orange"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton3"
                label="Yellow"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton4"
                label="Green"
                group="{radioGroup}" />
        <mx:RadioButton id="radioButton5"
                label="Blue"
                group="{radioGroup}" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

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/21/detecting-when-a-radiobutton-has-been-clicked-in-a-radiobuttongroup-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.VBox;
            import mx.containers.ApplicationControlBar;
            import mx.controls.Label;
            import mx.controls.RadioButton;
            import mx.controls.RadioButtonGroup;
            import mx.events.ItemClickEvent;

            private var lbl:Label;
            private var radioGroup:RadioButtonGroup;
            private var radioButton1:RadioButton;
            private var radioButton2:RadioButton;
            private var radioButton3:RadioButton;
            private var radioButton4:RadioButton;
            private var radioButton5:RadioButton;

            private function init():void {
                lbl = new Label();
                lbl.setStyle("fontWeight", "bold");

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(lbl);
                Application.application.addChildAt(appControlBar, 0);

                radioGroup = new RadioButtonGroup();
                radioGroup.addEventListener(ItemClickEvent.ITEM_CLICK,
                            radioGroup_itemClick);

                radioButton1 = new RadioButton();
                radioButton1.label = "Red";
                radioButton1.group = radioGroup;

                radioButton2 = new RadioButton();
                radioButton2.label = "Orange";
                radioButton2.group = radioGroup;

                radioButton3 = new RadioButton();
                radioButton3.label = "Yellow";
                radioButton3.group = radioGroup;

                radioButton4 = new RadioButton();
                radioButton4.label = "Green";
                radioButton4.group = radioGroup;

                radioButton5 = new RadioButton();
                radioButton5.label = "Blue";
                radioButton5.group = radioGroup;

                var vBox:VBox = new VBox();
                vBox.addChild(radioButton1);
                vBox.addChild(radioButton2);
                vBox.addChild(radioButton3);
                vBox.addChild(radioButton4);
                vBox.addChild(radioButton5);
                addChild(vBox);
            }

            private function radioGroup_itemClick(evt:ItemClickEvent):void {
                var now:String = new Date().toTimeString();
                lbl.text = evt.label + " (" + now + ")";
            }
        ]]>
    </mx:Script>

</mx:Application>

For an example of detecting when a RadioButton selection has changed using the RadioButton control’s change event or the RadioButtonGroup’s change event, see “Determining when the selected radio button has changed”.

2 thoughts on “Detecting when a RadioButton has been clicked in a RadioButtonGroup in Flex

  1. Just a random thought (especially considering that we try to opt for mxml when we can at the shop I’m at), but while this may be redundant, would it not be a good readable option to add “this.” to the last line of the init function? You know… make sure programmers who come on board later know who the parent is…

  2. This doesn’t work for spark

    RadioButtonGroup

    . Even though the compiler tells me I have to put the

    RadioButtonGroup

    tag in

    fx:Declaration

    s, no events get fired. I ended up having to put listeners on all the

    RadioButton

    s, but this doesn’t seem right even though it works.

    What am I doing wrong? Could you create a new example for spark please?

Comments are closed.