Dynamically Create RadioButtons In Flex

Flex provides the RadioButtonGroup and RadioButton components which can be used to display radio buttons and restrict the selection to only one of the radio buttons. The Flex 2.0 Developer's Guide provides instructions on how to use the RadioButtonGroup and RadioButton controls. However, developers may want to dynamically create the RadioButtons based on information stored in a database or XML file.

This tutorial describes how to create multiple radio buttons using data pulled from a database. The database table stores the information used for the RadioButton component's value and label attributes. Thus, if I update the database table, the Flex application will display the new number of RadioButton components each having the correct information for the value and label attributes. You can view a demo application here: /flex/radiobtncontroltest/bin/RadioBtnControlTest.html (right click on the demo to view the MXML source).

Here are the references I used:

1. Pages 251-255 (chapter 9) in Flex 2.0 Developer's Guide for information on RadioButtonGroup and RadioButton
2. http://livedocs.macromedia.com/flex/2/langref/mx/controls/RadioButton.html for the RadioButton API
3. http://livedocs.macromedia.com/flex/2/langref/mx/controls/RadioButtonGroup.html for the RadioButtonGroup API
4. Chapter 26 in Flex 2.0 Developer's Guide for information on how to dynamically repeat a control
5. /blog/index.cfm/2006/11/16/Dynamically-Create-CheckBoxes-Their-Labels-And-Their-Select-Values-In-Flex for a related tutorial on dynamically displaying CheckBoxes

The application gets the data into the Flex application by calling a ColdFusion Component function when the application is first loaded. The CFC function returns a query, which is converted into an ArrayCollection (see function handleGetAllAudienceResult in the source code). Each object in the ArrayCollection has a data and name field. The ArrayCollection is the DataProvider for the Repeater component.

To create the radio button, we use three components: RadioButtonGroup, Repeater, and RadioButton. The code below shows how the example application was built:

I first create a RadioButtonGroup control so that each RadioButton is associated with the same group and therefore the user can only select one of the RadioButtons. Also, by using the RadioButtonGroup, I can establish one function that will be called when any of the RadioButtons in the group is clicked. Flex will send to this function the RadioButton object that was clicked. See function handleAudienceClick in the source code for the function that is called when a user clicks on one of the RadioButtons.

Next I create a Repeater component. The dataProvider for this Repeater is bound to the ArrayCollection (audienceAryCol) that I created when the application first loads (see function handleGetAllAudienceResult in the source code).

Inside the Repeater component I specify that a RadioButton should be created for each object stored in the audienceAryCol. When Flex creates each RadioButton, it will pull the value stored in the current object's data field and use that for the value attribute. Flex will also pull the value stored in the current object's name field and use that for the label attribute.

Thus, if I change the data stored in the database table, the next time a user loads this application they will see the changes in the RadioButtons. Therefore I don't need to manually change the Flex application to change the radio button group. This would be especially useful if I was using this radio button group in more than one Flex program.