14 Replies Latest reply on Nov 4, 2009 6:13 AM by Jerry62712

    How do I add an event listener

    Jerry62712 Level 1

      I tried adding an event listener to this object:

      <mx:Button id="calculateButton"
                  label=" "
                  toolTip=" "
                  styleName="normalText"
                  click="swapToResultsState()"
                  rollOverEffect="{glowButton}"
                  horizontalCenter="-100" verticalCenter="0"
                  tabIndex="85" />

      using this code:

              calculateButton.addEventListener(KeyboardEvent.KEY_DOWN, swapToResultsState);

       

      which gave this error:

      Multiple markers at this line: -1120: Access of undefined property calculateButton. -1120: Access
      of undefined property swapToResultsState.

      What am I doing wrong?

        • 1. Re: How do I add an event listener
          msakrejda Level 4

          Where is the code that adds the event listener? The code itself looks fine, but it's not seeing your button. Is it in the script block of the MXML component declaring your button? Also, where is the handler function declared? It looks like it can't find that either.

          • 2. Re: How do I add an event listener
            Jerry62712 Level 1

            Doesn't this:

             

                    calculateButton.addEventListener(KeyboardEvent.KEY_DOWN, swapToResultsState);

             

            add the event listener?  That code is in a script block in the mxml file.  The button is a component added to the mxml (not via scripting).  The routine swap... is in a script file that is imported to the mxml file.

             

            The button has the "swap..." as an event (click), but as Flex won't recognize a keyboard enter when you have to programmably move the focus to allow lower parts of the form to be displayed, I have to find some way without a mouse to activate the control.

            • 3. Re: How do I add an event listener
              danwize

              One issue is you don't need the line calculateButton.addEventListener;  When you set the click attribute of the button tag to swapToResultsState, the listener is automatically added to the button without that code.

              • 4. Re: How do I add an event listener
                Jerry62712 Level 1

                Thanks.  How would I add the event to the invocation of the code?

                 

                          <mx:Button id="calculateButton"
                            label=" "
                            toolTip=" "
                            styleName="normalText"
                            click="swapToResultsState(Event)"
                            keyDown="swapToResultsState(Event)"
                            rollOverEffect="{glowButton}"
                            horizontalCenter="-100" verticalCenter="0"
                            tabIndex="85" />

                 

                Event isn't the right thing to add.  At the other end, swap... looks like this:

                 

                public function swapToResultsState(event:KeyboardEvent):void {

                    if (event.charCode == Keyboard.TAB)
                        trace("*testing*" +
                                event.currentTarget.name +
                                " hears tab key press: " +
                                String.fromCharCode(event.charCode) +
                                " (key code: " +
                                event.keyCode +
                                " character code: " +
                                event.charCode + ")");
                    else
                        trace("*testing*" +
                                event.currentTarget.name +
                                " hears other key press: " +
                                String.fromCharCode(event.charCode) +
                                " (key code: " +
                                event.keyCode +
                                " character code: " +
                                event.charCode + ")");

                 

                If it is a tab I want to pass it on to Flex to do the tab and bail out of this routine.  Otherwise, I'll execute the rest of the routine.

                • 5. Re: How do I add an event listener
                  msakrejda Level 4

                  Try 'event' (lowercase).

                  • 6. Re: How do I add an event listener
                    Jerry62712 Level 1

                    I did.  I think it is that you can't have two listeners (click and keyDown).  Any way around that, or is my assumption wrong and I'm just doing it wrong?

                    • 7. Re: How do I add an event listener
                      msakrejda Level 4

                      If you have one handler for two events of different types (i.e., different subclasses of Event), you need to declare your handler to only use common code in the hierarchy. You're assuming that your handler will get a KeyboardEvent, but that's not true for a 'click' event (I believe that's a MouseEvent, but I'm not sure). Either write your handler to accept the generic 'Event', or have two separate handlers (possibly that call a third function for common code).

                      • 8. Re: How do I add an event listener
                        danwize Level 1

                        If you add the keyboardEvent listener to the button, that event will only fire when a key is pressed and the button has focus which generally defeats the purpose of a keyboard Event.  It would be better to add that event listener to the stage.

                        • 9. Re: How do I add an event listener
                          Jerry62712 Level 1

                          Sorry for the late reply.  I've been out for the past couple of days.

                           

                          By "stage" do you mean set the keyboard event listener to the canvas object?  That is in a VBox object which also includes a header and footer component.  The footer has links on it.

                           

                          I've looked at some of the doc on it, but I'm not getting it yet.  I eventually will.  I can be taught over time.

                          • 10. Re: How do I add an event listener
                            danwize Level 1

                            I would recommend adding the listener to the stage.  Like this:

                             

                            stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

                             

                            Also realize that stage will be null until the applicationComplete event is fired by your application.

                            1 person found this helpful
                            • 11. Re: How do I add an event listener
                              Jerry62712 Level 1

                              I'm almost there, but not quite.

                               

                              Recap:  I want the button to go to "swapToResultsState()" if the user clicks on it.  If they use the keyboard tab I want to just send the tab to the system and let them move on to the next object on the form using this routine:

                               

                              public function calcButtonPressed(e:KeyboardEvent):void {
                                  if (e.currentTarget.id == "calcButtonContainer"){
                                      Alert.show("Calc Button clicked");
                                      if (e.keyCode == 9)
                                          calculateButton.dispatchEvent(new KeyboardEvent(KeyboardEvent.KEY_DOWN, true, false));
                                      else
                                          swapToResultsState();
                                  }
                              }

                               

                              If they press any key but the tab (or shift-tab) key then I want to go to "swapToResultsState()".

                               

                              What happens is that the tab key is pressed and the calcButtonPressed is executed.  Debugging through it, the tab (9) key is detected and the event executed.  This seems to re-invoke this routine with a keycode of 0.  I need to send the tab to the system and not reenter this code.

                               

                              Thanks

                              • 12. Re: How do I add an event listener
                                Flex harUI Adobe Employee

                                Keyboard events bubble so you don't need to redispatch them.  Just don't do anything if keyCode==9

                                • 13. Re: How do I add an event listener
                                  Jerry62712 Level 1

                                  I'm doing something wrong I guess.  Here is the code:

                                  public function calcButtonClicked(e:KeyboardEvent):void {
                                      if (e.keyCode != 9 && e.keyCode != 32)
                                          swapToResultsState();
                                      Alert.show("*Testing* calc key: " + e.keyCode);
                                  }

                                  When I'm on the calc button and hit the tab key, the alert shows up, but the focus never moves to the next button.

                                  • 14. Re: How do I add an event listener
                                    Jerry62712 Level 1

                                    As Emma Letella would say, never mind.

                                     

                                    It seems that the act of observation affects the outcome.  Hmm.  Where have I heard that before.

                                     

                                    By removing the alert box it started behaving as I wanted - tabbinb or shift tabbing moves focus and enter or space activates the button.

                                     

                                    Thanks for your insight and effort.  I really appreciate it.