Flex RadioButton and RadioButtonGroup

The example code below (Radio.mxml) demonstrates the use of the Flex tags mx:RadioButton and mx:RadioButtonGroup.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                width="500" height="300">

  <mx:Script>
  <![CDATA[
  /**
   * To compile solely this Flex application from the command line, use
   *    mxmlc -strict=true Radio.mxml
   *
   * This application demonstrates use of RabioButtonGroup and RadioButton.
   */

  import flash.events.MouseEvent;
  import mx.controls.Alert;
  import mx.events.ItemClickEvent;

  /**
   * Set color group label according to button clicked.
   *
   * @param aButtonClicked Event associated with radio button group click.
   */
  private function setColorGroupLabel(aButtonClicked:ItemClickEvent):void
  {
    colorLabel.text = aButtonClicked.currentTarget.selectedValue;
  }

  /**
   * Set movie genre label text based on user-selected radio button.
   *
   * @param aMouseEvent Event associated with Radio Button click.
   */
  private function setMovieGenreLabel(aMouseEvent:MouseEvent):void
  {
    movieGenreLabel.text = aMouseEvent.currentTarget.value;
  }
  ]]>
  </mx:Script>

  <mx:HBox id="mainBox">
    <mx:VBox id="colorBox">
      <mx:RadioButtonGroup id="buttonColorGroup"
                           itemClick="setColorGroupLabel(event);" />
      <mx:RadioButton groupName="buttonColorGroup"
                      label="Red"
           value="red" />
      <mx:RadioButton groupName="buttonColorGroup"
                      label="Blue"
        value="blue" />
      <mx:RadioButton groupName="buttonColorGroup"
                      label="Green"
               value="green"
        selected="true" />
      <mx:RadioButton groupName="buttonColorGroup"
                      label="Yellow"
          value="yellow" />
      <mx:Label id="colorLabel" />
    </mx:VBox>
    <mx:VBox id="movieGenreBox">
      <mx:RadioButton groupName="buttonMovieGenreGroup"
                      label="Action" value="Action"
        click="setMovieGenreLabel(event);" />
      <mx:RadioButton groupName="buttonMovieGenreGroup"
                      label="Comedy" value="Comedy"
        click="setMovieGenreLabel(event);"
        selected="true" />
      <mx:RadioButton groupName="buttonMovieGenreGroup"
                      label="Drama" value="Drama"
        click="setMovieGenreLabel(event);" />
      <mx:RadioButton groupName="buttonMovieGenreGroup"
                      label="Horror" value="Horror"
        click="setMovieGenreLabel(event);" />
      <mx:Label id="movieGenreLabel" />
    </mx:VBox>
  </mx:HBox>

</mx:Application>

The above code demonstrates two groups of radio buttons that lead to something like shown in this image (click on the image to enlarge it).



The first set of buttons (related to colors) uses a mx:RadioButtonGroup tag and the second set of buttons (related to movie genres) does not use a radio button group. Interestingly, the radio button group (or lack thereof) does not impact the appearance of the radio buttons and does not seem to impact the mutual exclusivity of each radio button. Whether or not a radio button group is specified, only one individual radio button can be selected with a particular groupName attribute.

So why would one bother using a mx:RadioGroupButton? The main reason seems to be that explicitly specifying a radio button group with the mx:RadioButtonGroup tag (rather than simply ensuring that each individual radio button has the same groupName attribute) allows a single handler to be applied to the entire group at once rather than being applied to each individual radio button.

The bullets related to color can have their event handler associated with their explicitly identified radio group because the associated mx:RadioButtonGroup tag's itemClick attribute (its event of the same name) is set to a method that will respond appropriately for any radio button clicked on that belongs to that same group. On the other hand, the second group of bullets does not have an explicit radio group name, so a click event must be associated with each individual bullet rather than being associated with the whole group.

The essence of all this is that while a mx:RadioGroupButton is not required to group radio buttons together (the groupName attribute on each radio button being the same will automatically do this), it is helpful to explicitly identify the radio button group with the RadioGroupButton so that event handling, validation, and so forth can be handled singly for the entire group rather than on a per button basis.