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...
And here is how to use it:
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...
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...
