3 Replies Latest reply on Jan 11, 2010 11:36 PM by archemedia

    Custom Button - 'mouseDown' triggering the 'click' event

    FlexPHX Level 1

      I'm working on a touchscreen kiosk application, and we have a new requirement to trigger the click event when the mouse button is pressed, not released. What would be the best way to go about it? I've modified the mouseDownHandler() to trigger the click event, and modified clickHandler() to suppress the second 'click' event. But there were some issues and oddities with this - I've started patching them up (quite hackishly), only for new bugs and oddities to pop up. Is there a simpler way?

       

      Thanks!

        • 1. Re: Custom Button - 'mouseDown' triggering the 'click' event
          archemedia Level 4

          If you have a button in your app, just add a mouseDown event listener to it. If there's on event listener for the click event, then no the clickHandler won't be called. Is this what you want?

           

          <mx:Button label="Button" mouseDown="myFunction(event)"/>

           

          d

          • 2. Re: Custom Button - 'mouseDown' triggering the 'click' event
            FlexPHX Level 1

            Thank you for your answer Archemedia. Yes, I've been aware of this simple solution However, the application is already pretty huge (codewise) and this is exactly what we want to avoid - to change the event that we listening to from 'click' to 'mouseDown' everywhere. There are probably 100s of buttons in this app. Also, ideally, this would be configurable so we can easily turn this functionality on/off as needed (in runtime), since some touchscreens may be better suited for the regular 'click' event (this Kiosk app rund on varied hardware configurations, different touschscreens, etc.)

             

            So the requirement is - a Button that dispatches the 'click' event when you press the mouse button (mouseDown).

            • 3. Re: Custom Button - 'mouseDown' triggering the 'click' event
              archemedia Level 4

              Hi,

               

              I made a custom button class which overrides the click and mouseDown handlers. It looks like this:

               

              package components
              {
                  import flash.events.Event;
                  import flash.events.MouseEvent;
                 
                  import mx.controls.Button;

               

                  public class KioskButton extends Button
                  {
                      public function KioskButton()
                      {
                          super();
                      }
                     
                      //clickFromDown will be set to true if kioskMode is on and mouseDown event has occured
                      private var _clickFromDown:Boolean = false;
                     
                      private var _kioskMode:Boolean = false;
                      public function get kioskMode():Boolean
                      {
                          return _kioskMode;
                      }
                      public function set kioskMode(value:Boolean):void
                      {
                          _kioskMode = value;
                      }
                     
                      override protected function clickHandler(event:MouseEvent):void
                      {
                          if (_kioskMode && !_clickFromDown)
                          {
                              event.stopImmediatePropagation();
                              return;
                          }
                         
                          _clickFromDown = false;
                         
                          super.clickHandler(event);
                      }
                     
                      override protected function mouseDownHandler(event:MouseEvent):void
                      {
                          if (_kioskMode)
                          {
                              _clickFromDown = true;
                              var ce:Event = new MouseEvent(MouseEvent.CLICK);
                              dispatchEvent(ce);
                          }
                         
                          super.mouseDownHandler(event);
                        
                      }
                  }
              }

               

               

              This is a test app to demonstrate how it works:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  layout="vertical" xmlns:components="components.*"
                  creationComplete="init()">
                  <mx:Script>
                      <![CDATA[
                          private var fbTimer:Timer = new Timer(1000);
                         
                          private function init():void
                          {
                              fbTimer.addEventListener(TimerEvent.TIMER, clearFeedback);   
                          }
                         
                          private function handleClick(evt:Event):void
                          {
                              showFeedback(evt);
                          }
                         
                          private function showFeedback(evt:Event):void
                          {
                              feedback.text = evt.type;
                              fbTimer.reset();
                              fbTimer.start();
                          }
                         
                          private function clearFeedback(evt:TimerEvent):void
                          {
                              feedback.text = "";
                          }
                         
                         
                      ]]>
                  </mx:Script>
                  <components:KioskButton kioskMode="true" label="Kiosk on" click="handleClick(event)"/>
                  <components:KioskButton kioskMode="false" label="Kiosk off" click="handleClick(event)"/>
                  <mx:Label id="feedback"/>
              </mx:Application>

               

              note: you can implement a Application variable that holds the kioskMode value and alter the button class so that is reads the _kioskMode value from there. This way, you switch to kioskmode at runtime.