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

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.