8 Replies Latest reply on Nov 12, 2009 12:08 AM by al7iss

    Dynamically generating Buttons

    al7iss Level 1

      Hi, I'm trying to generate dynamically 10 linkbuttons in flex, it works but when I add a mouse click event listener, i can't get the clicked button label.
      Actually, i stored the labels in an array but when i try to access array [ j ] in the event handler j is always 10 (where it should be beween 0 and 9).
      here is my code:

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="" applicationComplete="init();">

       

          <mx:Script>
             <![CDATA[
                  public var listaddbutton:Array=new Array();
                  public var array:Array


                  public function init():void{
                  var xx:int=40;
                  a=new Array();


                  for(var j:uint = 0; j < 10; j++){
                      listaddbutton.push(new LinkButton());
                      listaddbutton[j].label="linkButton "+j;  
                      array.push(listaddbutton[j].label);
                      listaddbutton[j].addEventListener(MouseEvent.CLICK,f);
                            
                             function f(e:MouseEvent):void{
                                Alert.show(array[j]);
                             } 

                            
            listaddbutton[j].x=xx
            p.addChild(listaddbutton[j]);
            xx+=60;
          }
         ]]>
          </mx:Script>
          <mx:Canvas width="444" height="348" id="p">
          </mx:Canvas>

       

      </mx:Application> 

       

      Please help, thanks

        • 1. Re: Dynamically generating Buttons
          al7iss Level 1

          I know I maybe wasn't very clear in my post so please tell me what you don't understand so I will try to clarify it.

          I'm stuck with this for two days now.

          Thanks

          • 2. Re: Dynamically generating Buttons
            blaka zakata

            Hi,

             

            i stored the labels in an array but when i try to access array [ j ] in the event handler j is always 10 (where it should be beween 0 and 9).

            No, it shouldn't

             

            I don't know why you use the array of labels. You could get button label in event listener:

            var lb:LinkButton = event.target as LinkButton;
            var label:String = lb.label;
            

             

            To store some data you could use the data property of LinkButton:

            var lb:LinkButton...
            // store data
            lb.data = {"somenumber": Number(567), "somestring": "765"};
            ...
            // get data
            var n:Number = lb.data["somenumber"];
            

             

            all-in-one example

             

            • 3. Re: Dynamically generating Buttons
              susrut316

              Try the code below...may be this would solve your purpose.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                  creationComplete="init()">
                 
                  <mx:Script>
                      <![CDATA[
                          import mx.controls.Alert;
                          import mx.controls.LinkButton;
                         
                          private var listAddBtn:Array = [];
                         
                          private function init():void
                          {
                              var xx:int = 0;
                              for(var j:int=0; j<10; j++)
                              {
                                  var lBtn:LinkButton = new LinkButton();
                                  lBtn.label = "linkButton" + j;
                                  listAddBtn.push(lBtn.label);
                                  lBtn.addEventListener(MouseEvent.CLICK, onButtonClick);
                                  lBtn.x = xx;
                                  cnv.addChild(lBtn);
                                  xx += 80;
                              }
                          }
                         
                          private function onButtonClick(event:MouseEvent):void
                          {
                              Alert.show('Clicked Button: '+event.currentTarget.label +'\n Button Array: [' + listAddBtn + ']');
                          }
                         
                      ]]>
                  </mx:Script>
                 
                  <mx:Canvas id="cnv" width="444" height="348"/>
                 
              </mx:Application>

              • 4. Re: Dynamically generating Buttons
                al7iss Level 1

                THANK YOU very much. It worked perfectly .

                • 5. Re: Dynamically generating Buttons
                  JAcques TRIPOZ Level 1

                  Hi,

                   

                  I don't really understand why you're using arrays, if you only wan't

                  to get the label (or get access to the button that is clicked) : just

                  get the event target and cast it as a LinkButton and then grab anything

                  you want...

                   

                  Try this :

                   

                  <?xml version="1.0"?>

                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                                  applicationComplete="init();">

                                  

                                  

                   

                      <mx:Script>

                          <![CDATA[

                          

                              import mx.controls.LinkButton;

                              import mx.controls.Alert;

                                      

                              

                              public function init():void

                              {

                                  var xx:int=40;

                                  var a:Array=new Array();

                   

                                  for (var j:uint=0; j < 10; j++)

                                  {

                                      var b:LinkButton=new LinkButton();

                                      b.label="linkButton " + j;

                                      b.addEventListener(MouseEvent.CLICK, f);

                                      b.x=xx;

                                      p.addChild(b);

                                      xx+=60;

                                  }

                              }

                   

                              function f(e:MouseEvent):void

                              {

                                  var b:LinkButton=e.target as LinkButton;

                                  Alert.show(b.label);

                              }

                          ]]>

                      </mx:Script>

                      <mx:Canvas width="444"

                                 height="348"

                                 id="p">

                      </mx:Canvas>

                   

                  </mx:Application>

                   

                   

                  al7iss a écrit :

                  Hi, I'm trying to generate dynamically 10 linkbuttons in flex, it works but when I add a mouse click event listener, i can't get the clicked button label.

                  Actually, i stored the labels in an array but when i try to access array in the event handler j is always 10 (where it should be beween 0 and 9).

                  here is my code:

                   

                  <?xml version="1.0"?>

                  <mx:Application xmlns:mx="" applicationComplete="init();">

                   

                      <mx:Script>

                         <![CDATA[

                              public var listaddbutton:Array=new Array();

                              public var array:Array

                  >

                              public function init():void{

                              var xx:int=40;

                              a=new Array();

                  >

                              for(var j:uint = 0; j < 10; j++){

                                  listaddbutton.push(new LinkButton());

                                  listaddbutton[j].label="linkButton "+j;  

                                  array.push(listaddbutton[j].label);

                                  listaddbutton[j].addEventListener(MouseEvent.CLICK,f);

                                          

                                         function f(e:MouseEvent):void{

                                            Alert.show(array[j]);

                                         } 

                  >

                        listaddbutton[j].x=xx

                        p.addChild(listaddbutton[j]);

                        xx+=60;

                      }

                     ]]>

                      </mx:Script>

                      <mx:Canvas width="444" height="348" id="p">

                      </mx:Canvas>

                   

                  </mx:Application> 

                   

                  Please help, thanks

                  >

                  • 6. Re: Dynamically generating Buttons
                    al7iss Level 1

                    your code worked perfectly but when I try to use the PopUpManager in the event handles it doesn't work and it works when i use only one button.

                     

                     

                    PopUp.mxml

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="appOnCreationComplete()">
                        <mx:Canvas id="p" left="10" top="10" right="10" bottom="10">
                        </mx:Canvas>
                       
                        <mx:Script>
                              <![CDATA[
                                import mx.utils.StringUtil;
                                  import mx.controls.Alert;
                                import mx.controls.LinkButton;
                                import mx.managers.PopUpManager;
                                public var listaddbutton:Array = new Array();

                     

                                private function appOnCreationComplete():void {
                                      var yy:int = 10;
                                      for(var j:uint = 0; j < 10; j++) {
                                            listaddbutton.push(new LinkButton());
                                          listaddbutton[j].label = "linkButton " + j;
                                          listaddbutton[j].data = {"index": j,"i":j};

                     

                                        listaddbutton[j].addEventListener(MouseEvent.CLICK, function(ev:MouseEvent):void {               
                                      var win:MyCanvas = PopUpManager.createPopUp(this, MyCanvas, true) as MyCanvas;
                                      PopUpManager.centerPopUp(win);
                                  });
                                        listaddbutton[j].y = yy;
                                        listaddbutton[j].x = 10;
                                       
                                  p.addChild(listaddbutton[j]);
                                         
                                        yy += 32;
                                      }
                                }
                              ]]>
                        </mx:Script>
                    </mx:Application>

                     

                     

                    MyCanvas.mxml

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                            layout="vertical"
                            title="popup"
                            showCloseButton="true"
                            width="478"
                            height="394"
                            close="titleWindow_close(event);" backgroundColor="#171E43">

                        <mx:Script>
                            <![CDATA[
                                import mx.events.CloseEvent;
                                import mx.managers.PopUpManager;

                                private function titleWindow_close(evt:CloseEvent):void {
                                    PopUpManager.removePopUp(this);
                                }
                            ]]>
                        </mx:Script>

                        <mx:Canvas width="436" height="338" backgroundColor="#171E43">
                           
                        </mx:Canvas>

                    </mx:TitleWindow>

                    • 7. Re: Dynamically generating Buttons
                      susrut316 Level 1

                      Try the code below.

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="appOnCreationComplete()">
                          <mx:Canvas id="p" left="10" top="10" right="10" bottom="10">
                          </mx:Canvas>
                        
                          <mx:Script>
                                <![CDATA[
                                    import mx.core.IFlexDisplayObject;
                                  import mx.utils.StringUtil;
                                  import mx.controls.Alert;
                                  import mx.controls.LinkButton;
                                  import mx.managers.PopUpManager;
                                  public var listaddbutton:Array = new Array();

                       

                                  private function appOnCreationComplete():void {
                                        var yy:int = 10;
                                       for(var j:uint = 0; j < 10; j++) {
                                            listaddbutton.push(new LinkButton());
                                            listaddbutton[j].label = "linkButton " + j;
                                           listaddbutton[j].data = {"index": j,"i":j};
                                            listaddbutton[j].addEventListener(MouseEvent.CLICK, onClick);
                                          listaddbutton[j].y = yy;
                                          listaddbutton[j].x = 10;
                                            p.addChild(listaddbutton[j]);
                                          yy += 32;
                                        }
                                  }
                                 
                                  private function onClick(ev:MouseEvent):void
                                  {
                                      var win:MyCanvas = PopUpManager.createPopUp(this, MyCanvas, true) as MyCanvas;
                                      PopUpManager.centerPopUp(win);
                                  }
                                ]]>
                          </mx:Script>
                         
                      </mx:Application>

                      • 8. Re: Dynamically generating Buttons
                        al7iss Level 1

                        Thanks, it works