3 Replies Latest reply on May 18, 2010 12:20 PM by UbuntuPenguin

    Correct way to use an event handler

    SiHoop Level 1

      The following is dynamically adds a series of buttons and a label to each button. The problem is that the event handler fires twice for each button, and the last button never gets processed at all.

      Should I be using a different event handler than ResizeEvent.RESIZE? How do I add the label to the last button in the sequence?

       

      Thank you.

       

      <?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.events.ResizeEvent;
      private var button:Button2;
      public var numButtons:Number=5;
      private var counter:Number=0;
      public function init():void{
          for(var i:int=0; i<numButtons;i++){
              button=new Button2;
              hbox.addChild(button)
              button.addEventListener(ResizeEvent.RESIZE, handleButtonAdded)
          }
      }
      private function handleButtonAdded(e:ResizeEvent):void{
          counter++
          trace(e.target)
          e.target.label= String(counter);
          button.removeEventListener(ResizeEvent.RESIZE, handleButtonAdded)
      }

       

        ]]>
      </mx:Script>
      <mx:HBox id="hbox"  horizontalGap="0"/>
      </mx:Application>

       

      Here's the button: Button2.mxml

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" >
      <mx:Script>
          <![CDATA[
          public function init():void{
              this.width=100;
          }
          ]]>
      </mx:Script>
      </mx:Button>

        • 1. Re: Correct way to use an event handler
          UbuntuPenguin Level 4

          Hmm , what are you trying to do ?  There are a few questionable things happening.  Your event-handler is named "handleButtonAdded" but it takes a ResizeEvent ? Do you mean to trigger an event based on when the button was added to the stage , or parent such as FlexEvent.ADDED or when the creation is complete ,  FlexEvent.CREATION_COMPLETE ?

             The second thing is your "button" variable.  It is declared outside of the loop in the "init" function.  Meaning , when that loop is done and even during execution , it will point to the last button created.  So all the buttons have listeners , meaning when one button fires off a ResizeEvent , it will remove the listener for whatever your variable "button" is pointing to.  This guarantees (well , maybe not) the behaviour that your last button will NOT have a listener , therefore it will not fire.

            By the way , you can set the label and the size of the button when you declare them. You don't have to subclass and use listeners.

          • 2. Re: Correct way to use an event handler
            SiHoop Level 1

            This is extremely helpful-- thank you!

            Let me ask a couple of follow-ups: What's the difference between  FlexEvent.ADDED and FlexEvent.CREATION_COMPLETE and when should each be used?

             

            Also, I see what you mean about declaring the button outside the loop, but how would I remove the event listener if I declare the button within the function (as it would be scoped locally)?

             

            Lastly, on your point about declaring the label of a button locally, how would I do that if I want the number of the button to appear in its label (e.g. button 1, button 2, ... button 20)?

            • 3. Re: Correct way to use an event handler
              UbuntuPenguin Level 4

              1. One deals with adding a component to the displaylist , the other event deals with the lifecycle of a component.

              2.

              You should have to do this , but if you do

              public function eventHandler( event:Event):void

              {

                  var button:Button = event.currentTarget as Button;

                  button.removeEventListener(SomeEvent.Event , eventHandler );

              }

              3.

              public function init():void

              {

                  var button:Button;
                  for(var i:int=0; i<numButtons;i++)

                  {
                      button=new Button();

                      button.width = 100;

                      button.label = "Button " + numButtons.toString();
                      hbox.addChild(button);
                  }
              }

              If this post answered your question  , please mark it as such.

              1 person found this helpful