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):

Creating A Flex Spark List of Checkbox Bound To XML DataProvider

For the sake of the cookbook recipe, I will assume you already have the data you are working with in XML format from whatever backend solution you choose.  The simple XML I will be using is:

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

Displaying all of the people in this list with checkboxes next to their names involves three parts.

1. Creating an ItemRenderer Component which contains a Checkbox which will display the person's name in "namesXML" as the CheckBox label.
2. Defining the new ItemRenderer to be the default ItemRenderer of our s:List component.
3. Defining dataProvider of an s:List component to be the "namesXML" data shown above. 

  First we need to define out ItemRenderer as a new MXML Item Renderer called "CheckBoxItemRenderer".  The source of the file will be:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   autoDrawBackground="true">

<s:CheckBox label="{data.@name}"/>

</s:ItemRenderer>

Notice, that the only component defined within our new MXML ItemRenderer is a s:CheckBox.  The label of this checkbox is bound to the @name attribute of an object called data.  The data Object is autopopulated by the ItemRenderer class and reflects a single node of the dataprovider which is feeding the list of which the ItemRenderer is a part.  Simply, there will be a new instance of the  "CheckBoxItemRenderer" for each node in the "namesXML" and the label of the checkbox will be set to the person's name.

Lastly, we need to define our list which will define it's itemRenderer as "CheckBoxItemRenderer" and it's dataProvider as "namesXML".  Since "namesXML" is XML instead of an XMLListCollection which is required to set a dataProvider, we will need to convert the XML to an XMLListCollection.  The MXML defining the list is:

<s:List itemRenderer="CheckBoxItemRenderer"
    dataProvider="{new XMLListCollection(namesXML.children())}"/>

With that definition, you will now have a list of checkboxes with a person's name next to each checkbox.  The list of names is bound to the "namesXML" and can be updated with updates to the namesXML object feeding the dataProvider.

  Live demo and source code (right click) HERE.