Creating a group of radio buttons

How to

Create a group of radio buttons in your application.

Solution

Construct the radio button variables in the root of your class

private var rbg1:RadioButtonGroup;
private var rbg2:RadioButtonGroup;
private var rb1:RadioButton = new RadioButton();
private var rb2:RadioButton = new RadioButton();
private var rb3:RadioButton = new RadioButton();
private var rb4:RadioButton = new RadioButton();
private var rb5:RadioButton = new RadioButton();
private var rb6:RadioButton = new RadioButton();
// Placing these at the class root allows other 
// application elements to reference them.

Initialize your radio buttons' attributes

// Location and size.
rb1.setPosition(100, 100) 
rb1.width = 300;
// Option name
rb1.label = "Meal option 1";
// Group name
rb1.groupname = "rbg1_meals";
// Add to stage
addChild( rb1 );

rb2.setPosition(rb1.x, rb1.y + 70);
rb2.width = 300;
rb2.label = "Meal option 2";
rb2.groupname = "rbg1_meals";
addChild( rb2 );
			
rb3.setPosition(rb1.x, rb2.y + 70);
rb3.width = 300;
rb3.label = "Meal option 3";
rb3.groupname = "rbg1_meals";
addChild( rb3 );

rb4.setPosition(450, 100)
rb4.width = 300;
rb4.label = "Drink option A";
rb4.groupname = "rbg1_drinks";
addChild( rb4 );
			
rb5.setPosition(450, rb4.y + 70)
rb5.width = 300;
rb5.label = "Drink option B";
rb5.groupname = "rbg1_drinks";
addChild( rb5 );
			
rb6.setPosition(450, rb5.y + 70)
rb6.width = 300;
rb6.label = "Drink option C";
rb6.groupname = "rbg1_drinks";
addChild( rb6 );

// Get the group.
rbg1 = RadioButtonGroup.getGroup("rbg1_meals");
// Set up listener for change event.
rbg1.addEventListener(Event.CHANGE, rbg1Change);
// OPTIONAL: Use this for defaults.
rb2.selected = true;
			
rbg2 = RadioButtonGroup.getGroup("rbg1_drinks");
rbg2.addEventListener(Event.CHANGE, rbg2Change);

Create the function that is called by the click event for your radio button group

private function rbg1Change( e:Event ):void{
	//.selection grabs currently selected button. 
	//.label selects that button's name.
	trace(rbg1.selection.label+" selected in group 1");		
}

private function rbg2Change( e:Event ):void{
	trace(rbg2.selection.label + " selected in group 2");	
}

Build requirements

You must include the following classes in your project:

import qnx.fuse.ui.buttons.RadioButton;
import qnx.fuse.ui.buttons.RadioButtonGroup;
import flash.events.Event;

Discussion

When you create a radio button, you declare the RadioButton and RadioButtonGroup variables and then set their attributes. To add a button to a group, specify that button's groupname attribute. To add functionality, add an Event.CHANGE listener function to perform any actions that are defined in the function when another radio button is clicked. You can access the currently selected radio button anywhere in the class by using the RadioButtonGroup.selection property.

comments powered by Disqus