Spark DataGroup of RadioButtons from XML

There was a request, after my checkbox cookbook, to have a similar list where only one checkbox was selectable at a time. I didn’t think it was a good idea to write the logic to have only one selectable checkbox when the RadioButton and RadioButtonGroup provide that functonality out of the box. So, without further ado, here is an example of a DataGroup of RadioButtons.

The first thing you need to have is data to populate the data provider. For this example, we’ll reuse the XML from the checkbox cookbook:

<fx:XML format="e4x" id="namesXML">
  <people>
    <person name="Leon"/>
    <person name="Mathilda"/>
    <person name="Stansfield"/>
    <person name="Benny"/>
  </people>
</fx:XML>

In our declarations section, we’ll also need to define a RadioButtonGroup so that we can eventually make all of our RadioButton components be part of that. The definition of a RadioButtonGroup is simple:

 <s:RadioButtonGroup id="myButtonGroup"/>

It’s important that we give the RadioButtonGroup an ‘id” since we’ll be using that later to make our RadioButtons part of the “myButtonGroup” group.

The rest of this example is rather self contained in a single DataGroup definition.  Inside our datagroup we’ll need to define a few things:

1. A RadioButton ItemRenderer that makes itself part of our RadioButtonGroup from above
2. A Vertical Layout so that the ItemRenderers are laid out similar to a List.
3. The dataProvider which is set as an XMLListCollection constructed from our “namesXML” from above.

Here is the implementation of all of those points:

<s:DataGroup width="100%" height="100%" x="200">
  <s:itemRenderer>
    <fx:Component>
      <s:ItemRenderer>
        <s:RadioButton label="{data.@name}"
            group="{outerDocument.myButtonGroup}"/>
      </s:ItemRenderer>
    </fx:Component>
  </s:itemRenderer>
  <s:layout>
    <s:VerticalLayout verticalAlign="middle"/>
  </s:layout>
  <s:dataProvider>
    <s:XMLListCollection source="{namesXML.children()}"/>
  </s:dataProvider>
</s:DataGroup>

As you can see, we achieved all of the points we set out to accomplish. Let’s look at the most important part though: The RadioButton ItemRenderer.

We see that we set the label of each RadioButton to data.@name. This simply means that for each XML node which is assigned to this ItemRenderer, we want to display the name attribute from that XML.

We also, see that we set the group of each RadioButton to the myButtonGroup which is found in the ‘outerDocument’. outerDocument simply means that we are attempting to access a variable that is not in the ItemRenderer Component definition, but in the outer surrounding document (geeze, the name makes sense, huh?).

And, that’s it. Now we have a fully functional DataGroup that is constructed out of single select RadioButtons!

Below you can see a running example and full source (right click -> View Source):