1 Reply Latest reply on Oct 13, 2009 1:10 PM by SiHoop

    Connecting a Radio Button with an ArrayCollection

    SiHoop Level 1

      The following file from Adobe shows how to populate a ComboBox with an ArrayCollection then to access related data from the ArrayCollection when an item is selected. It works just fine! The second file is my attempt to do something similar with radio buttons. I generate a series of buttons, then, when a button is selected, I want to be able to access the related infocrmation from the ArrayCollection. I cannot get it to work and I'm wondering whether there is a way it can be done. If not, is there some other component I can use to display the content, select with a clicak, then produce related information from the ArrayCollection?

      Thanks!

       

      First file:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
          <mx:Script>
              <![CDATA[
                  import mx.controls.RadioButton;
                  import mx.collections.ArrayCollection;      
      private function init():void{
            for(var i:int=0;i<cards.length-1;i++){
              var s:RadioButton=new RadioButton
              s.label=cards[i].label
              s.y+=30
             
              panel.addChild(s)
              s.addEventListener(MouseEvent.CLICK, closeHandler)
          }
      }
                  public var cards:ArrayCollection = new ArrayCollection(
                      [ {label:"Visa", data:1},
                        {label:"MasterCard", data:2},
                        {label:"American Express", data:3} ]);
             
                  private function closeHandler(event:Event):void {
                     // myData.text = "Data: " +  RadioButton(event.target).selectedItem.data;
                      myData.text = "Data: " +  RadioButton(event.target);
                  }    
              ]]>
          </mx:Script>

       

          <mx:Panel  id="panel" title="ComboBox Control Example"
              height="75%" width="75%" layout="horizontal"
              paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

       


              <mx:VBox width="250">
                  <mx:Text  width="200" color="blue" text="Select a type of credit card."/>
                  <mx:Label id="myData" text="Data:"/>
              </mx:VBox>       

       

          </mx:Panel>   
      </mx:Application>

       

      Second file:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
          <mx:Script>
              <![CDATA[
                  import mx.controls.RadioButton;
                  import mx.collections.ArrayCollection;      
      private function init():void{
            for(var i:int=0;i<cards.length-1;i++){
              var s:RadioButton=new RadioButton
              s.label=cards[i].label
              s.y+=30
             
              panel.addChild(s)
              s.addEventListener(MouseEvent.CLICK, closeHandler)
          }
      }
                  public var cards:ArrayCollection = new ArrayCollection(
                      [ {label:"Visa", data:1},
                        {label:"MasterCard", data:2},
                        {label:"American Express", data:3} ]);
             
                  private function closeHandler(event:Event):void {
                     // myData.text = "Data: " +  RadioButton(event.target).selectedItem.data;
                      myData.text = "Data: " +  RadioButton(event.target);
                  }    
              ]]>
          </mx:Script>

       

          <mx:Panel  id="panel" title="ComboBox Control Example"
              height="75%" width="75%" layout="horizontal"
              paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

       


              <mx:VBox width="250">
                  <mx:Text  width="200" color="blue" text="Select a type of credit card."/>
                  <mx:Label id="myData" text="Data:"/>
              </mx:VBox>       

       

          </mx:Panel>   
      </mx:Application>

        • 1. Re: Connecting a Radio Button with an ArrayCollection
          SiHoop Level 1

          I figured it out:

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
              <mx:Script>
                  <![CDATA[
                      import mx.controls.RadioButton;
                      import mx.collections.ArrayCollection;      
          private function init():void{
                for(var i:int=0;i<cards.length-1;i++){
                  var s:RadioButton=new RadioButton
                  s.label=cards[i].label
                  s.data=cards[i].data
                  s.y+=30
                 
                  panel.addChild(s)
                  s.addEventListener(MouseEvent.CLICK, closeHandler)
              }
          }
                      public var cards:ArrayCollection = new ArrayCollection(
                          [ {label:"Visa", data:1},
                            {label:"MasterCard", data:2},
                            {label:"American Express", data:3} ]);
                 
                      private function closeHandler(event:Event):void {
                           myData.text = "Data: " +  event.target.data;
                      }    
                  ]]>
              </mx:Script>

           

              <mx:Panel  id="panel" title="ComboBox Control Example"
                  height="75%" width="75%" layout="horizontal"
                  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

           


                  <mx:VBox width="250">
                      <mx:Text  width="200" color="blue" text="Select a type of credit card."/>
                      <mx:Label id="myData" text="Data:"/>
                  </mx:VBox>       

           

              </mx:Panel>   
          </mx:Application>