Over a million developers have joined DZone.

Simple Mouse Wheel Support For GWT

·
I was looking to a way to use the mouse wheel in my GWT app, but I didn´t find a straightforward way... so today I spend my morning learning JSNI and, with some piece of code I found on the Internet, I coded my own approach... Feel free to use anywere .. Hope that it might be useful for someone else too... 


public interface MouseWheelListener {
   
    public void onMouseWheelUp(int intensity);
   
    public void onMouseWheelDown(int intensity);
   
}

public class MouseWheel {
   
    private MouseWheel(Element e, MouseWheelListener listener) {
        attachMouseWheelListener(e, listener);
    }
   
    /**
     * Sets a MouseWheelListener to a given Element
     */
    public static void setMouseWheelListener(Element e, MouseWheelListener listener) {
        new MouseWheel(e, listener);
    }
   
   
    /**
     * This method is used by FF
     * @param event
     */
    private static native void dispatchMouseWheelEvent(JavaScriptObject event) /*-{
       
        @br.com.example.client.util.MouseWheel::dispatchMouseWheelEvent(Lcom/google/gwt/core/client/JavaScriptObject;Lbr/com/example/client/util/MouseWheelListener;)(event, this.__mousewheellistener);
   
    }-*/;
   
    /**
     * This method is used by IE and FF
     * Part of this method was retrieved from http://adomas.org/notes/mouse-wheel.html
     *
     * @param event
     * @param listener
     */
    private static native void dispatchMouseWheelEvent(JavaScriptObject event, MouseWheelListener listener) /*-{

         if (!event) event = $wnd.event; // For IE

         var delta = 0;
         if (event.wheelDelta)             // IE case, delta is multiple of 120
              delta = event.wheelDelta / 120;
         else if (event.detail )            // Mozilla case
              delta = -event.detail / 3;   // different sign and multiple of 3
        
         if ( delta > 0 ) {
             listener.@br.com.example.client.util.MouseWheelListener::onMouseWheelUp(I)(delta);
         } else {
             listener.@br.com.example.client.util.MouseWheelListener::onMouseWheelDown(I)(-delta);
         }

         //taken from http://adomas.org/javascript-mouse-wheel/test2.html
         if (event.preventDefault)
             event.preventDefault();
         event.returnValue = false;

    }-*/;
   
   
    private native void attachMouseWheelListener(Element e, MouseWheelListener listener) /*-{
       
        e.__mousewheellistener = listener;
       
        // for FF
        if (e.addEventListener) {
            e.addEventListener('DOMMouseScroll', @br.com.example.client.util.MouseWheel::dispatchMouseWheelEvent(Lcom/google/gwt/core/client/JavaScriptObject;), false);
            return;
        }
       
        // for IE
        e.onmousewheel = function(event) {
            @br.com.example.client.util.MouseWheel::dispatchMouseWheelEvent (Lcom/google/gwt/core/client/JavaScriptObject;Lbr/com/example/client/util/MouseWheelListener;)(event, this.__mousewheellistener);
        }
       
    }-*/;
   
}



And here is how to use it:



        MouseWheel.setMouseWheelListener(RootPanel.get("slot2").getElement(), new MouseWheelListener() {

            public void onMouseWheelUp(int intensity) {
                Window.alert("up.. " + intensity);
            }

            public void onMouseWheelDown(int intensity) {
                Window.alert("down..." + intensity);
            }
       
        }); 



Remember to replace my hardcoded package name (br.com.example) for your own... If you have any suggestion or critic, feel free to tell me... "tserafim" is my gmail username...
Topics:

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}