Getting Selected Values of a Flex List of Checkboxes

This example will be a continuation of the post "Creating A Flex Spark List of Checkbox Bound To XML DataProvider".  If you have not read that tutorial and are not sure how to create a List of Checkboxes form XML, please see that tutorial first.

Now, we will need to do severals things to know the selected value of our list items:

• Add a "selected" attribute for each person in our XML dataprovider
• Update the checkbox in the itemrenderer so that it is selected only when the dataprovider's "selected" attribute is "true"
• Add a method to update the dataprovider for the itemrenderer
• Add a method to setup an EventListener to be notified of changes to the dataprovider
• Add a method to extract the current selected values from the dataprovider

So, first, we need to add the "selected" attribute to our dataprovider elements.  That is done quite simply as you can see below:

Next, we need to update the definition of the checkbox so that it shows a checkmark only when the dataprovider's "selected" attribute is true.  We'll also need to update the checkbox definition to call a method called onCheckboxChange when the checkbox sends a "change" event.  We can see that definition here:

In order for that selected attibute to update in the dataprovider when the user clicks it we need to add the onCheckboxChange method seen in the definition above.  This method will set the "selected" attribute to true when the checkbox is checked and false when the checkbox is not checked.  Simple, right?  You can see the method here:

protected function onCheckboxChange(changeEvent:Event):void{
  //When the checkbox changes update the data provider's "selected" attribute
  data.@selected = checkBox.selected ? "true" : "false";
}

Ok.  Now we are almost there.  Next, in our applicaton file, we need to create two methods. The first will be onCreationComplete, which will fire when the application has been created (note: this method is triggered by the application definition with the code creationComplete="onCreationComplete()").  This method will populate a variable called "personDataProvider" which is the dataProvider to our list.  Then we will add an EventListener to the personDataProvider that listens to CollectionChange events so we know when a user is selected or unselected.  The method is below:

protected function onCreationComplete():void{
  //Initialize the dataprovider
  personDataProvider = new XMLListCollection(namesXML.children());
  //Add a listener so we know when the dataprovider is updated
  personDataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, onListChange);
}

Finally, we simply need to create the final method which is called every time the personDataProvider is updated.  This method simply loops over all of the person elements in our list, finds which people are selected, and then adds their names to a text element.  See the code here:

protected function onListChange(changeEvent:Event):void{
  //Clear the selected person text since we'll be building it here
  selectedPersonText.text = "Selected People:";
  for each (var personXML:XML in personDataProvider) {
    //Add all selected person names to our text component
    if(personXML.@selected=="true"){
      //Add the person's name to the text component
      selectedPersonText.text += " " + personXML.@name
    }
  }
}

That's it!  We now have a way of finding out which people are selected in our checkbox list.  See the example below (you can see the source code by right clicking on the example application):

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