Wednesday, September 29, 2010

Using the RadioButton component: Part 1

In this tutorial we will learn how to use the RadioButton component.

RadioButton components are used mostly in forms, when user has to choose one option out of multiple options. If we simply create 4 radio buttons without specifying a group, they will all act like checkboxes.

However, if we put all radio buttons into one group with the same name, it will be only possible to have 1 radio button out of them all selected. The group name can be set through the component inspector.

Here is an example:


Now, see what happens if we create two groups with two radio buttons each:


To see if a radio button is checked, use the selected property.

Here is an example of using radio buttons when asking the user how is he willing to pay (used in online shops):


What I did is set a group for all the radio buttons, and give them names from q1 to q4. Then I created a button (disabled on start) that doesn't call any actions, but changes its label when a payment method is selected.

q1.addEventListener(MouseEvent.CLICK, setPicture);
q2.addEventListener(MouseEvent.CLICK, setPicture);
q3.addEventListener(MouseEvent.CLICK, setPicture);
q4.addEventListener(MouseEvent.CLICK, setPicture);

function setPicture(evt:MouseEvent):void{
 payBtn.enabled=true
 payBtn.label="Pay with " + evt.target.value
 }

Now that we understand how the structure works and know how to work with the component through Component inspector, we will learn how to use the advantages of RadioButtons with AS3 in the next tutorial.

Thanks for reading.

Related:

Using RadioButton component: Part 2
Using RadioButton component: Part 3

1 comment:

Sarang said...

Thanks
Easy to understand.

Post a Comment