myFlexibleLife » RadioButtonGroup http://www.myflexiblelife.com A blog on Flex, ActionScript, RIAs and related open source technologies Thu, 27 Aug 2009 12:06:12 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Simplify radio button usage with a RadioButtonBox component http://www.myflexiblelife.com/2009/07/16/simplify-radio-button-usage-with-a-radiobuttonbox-component/ http://www.myflexiblelife.com/2009/07/16/simplify-radio-button-usage-with-a-radiobuttonbox-component/#comments Thu, 16 Jul 2009 09:56:32 +0000 Alessandro Ronchi http://www.myflexiblelife.com/?p=91 This post is about the tiny implementation of a RadioButtonBox component which simplifies the usage of radio buttons in Flex applications.

You can insert the RadioButtonBox component wherever you want in your application, add radio buttons within it and read the value property of the RadioButtonBox to know which value is selected.

Here follows an MXML usage example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:wg="com.webgriffe.components.*">
 
  <mx:Script>
  <![CDATA[
    import mx.controls.Alert;
  ]]>
  </mx:Script>
 
  <wg:RadioButtonBox id="group" direction="horizontal">
    <mx:RadioButton label="uno" />
    <mx:RadioButton label="due" />
    <mx:RadioButton label="tre" />
  </wg:RadioButtonBox>
 
  <mx:Button label="test" 
      click="Alert.show('Selected value: ' + group.value)" />
 
</mx:Application>

The source code of the RadioButtonBox is the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

package com.webgriffe.components
{
import flash.display.DisplayObject;
 
import mx.containers.Box;
import mx.controls.RadioButton;
import mx.controls.RadioButtonGroup;
 
public class RadioButtonBox extends Box
{
  // -------------------------------------------------------------------------
  //
  // Properties 
  //      
  // -------------------------------------------------------------------------
 
  private var _group:RadioButtonGroup;
 
  public function get value():Object
  {
    return _group.selectedValue;
  }
 
  // -------------------------------------------------------------------------
  //
  // Constructor 
  //      
  // -------------------------------------------------------------------------
 
  public function RadioButtonBox()
  {
    super();
 
    _group = new RadioButtonGroup();
  }
 
  // -------------------------------------------------------------------------
  //
  // Overridden Methods 
  //      
  // -------------------------------------------------------------------------
 
  override public function addChild(child:DisplayObject):DisplayObject
  {
    if (child is RadioButton)
    {
      RadioButton(child).group = _group;
    }
 
    return super.addChild(child);
  }
 
}
}

Enjoy!

]]> http://www.myflexiblelife.com/2009/07/16/simplify-radio-button-usage-with-a-radiobuttonbox-component/feed/ 0