Native Javascript method in GWT

33,231

Solution 1

In all the code I've done in the past, I've never used 'this' to identify my class, I have passed the class in.

Eg: Change this:

private native void addNativeMouseWheelListener(String id) /*-{
    function mouseOverHandler(e) {
        $wnd.addEventListener("DOMMouseScroll", scrollWheelMove, false);
    }

    function mouseOutHandler(e) {
        $wnd.removeEventListener("DOMMouseScroll", scrollWheelMove, false);
    }

    function scrollWheelMove(e) {
        if ($wnd.event || $wnd.Event) {
                if (!e) e = $wnd.event;
                if (e.wheelDelta <= 0 || e.detail > 0 ) {
                        $wnd.alert("DOWN");
                } else {
                        [email protected]_lab.client.ValueBox::increaseValue()();
                }
                [email protected]_lab.client.ValueBox::fireChange()();
        }
    }

    var box=$doc.getElementById(id);
    box.addEventListener("mouseout",mouseOutHandler,false);
    box.addEventListener("mouseover",mouseOverHandler,false);
}-*/;

To this:

private native void addNativeMouseWheelListener(ValueBox instance, String id) /*-{
    function mouseOverHandler(e) {
        $wnd.addEventListener("DOMMouseScroll", scrollWheelMove, false);
    }

    function mouseOutHandler(e) {
        $wnd.removeEventListener("DOMMouseScroll", scrollWheelMove, false);
    }

    function scrollWheelMove(e) {
        if ($wnd.event || $wnd.Event) {
                if (!e) e = $wnd.event;
                if (e.wheelDelta <= 0 || e.detail > 0 ) {
                        $wnd.alert("DOWN");
                } else {
                        [email protected]_lab.client.ValueBox::increaseValue()();
                }
                [email protected]_lab.client.ValueBox::fireChange()();
        }
    }

    var box=$doc.getElementById(id);
    box.addEventListener("mouseout",mouseOutHandler,false);
    box.addEventListener("mouseover",mouseOverHandler,false);
}-*/;

Solution 2

I found a better way. It's similar to what you do in JavaScript, where you set "var that = this". Using this approach, you don't have to pass this to listenForPostMessage():

protected native void postMessage(String msg) /*-{
  $wnd.postMessage(msg, "*");
}-*/;

private final native void listenForPostMessage() /*-{
  var that = this;
  $wnd.addEventListener("message", function(msg) {
  [email protected]::onPostMessage(Ljava/lang/String;Ljava/lang/String;)(
    msg.data, msg.origin);
  });
}-*/;

private void onPostMessage(String data, String origin) {
  Label msgLabel = new Label();
  msgLabel.setText("GWT received a postMessage: Data: " +
      data + " Origin: " + origin);
  mainPanel.add(msgLabel);
}
Share:
33,231
DLH
Author by

DLH

I compute.

Updated on July 23, 2022

Comments

  • DLH
    DLH almost 2 years

    I have a native Javascript method in one of my GWT Java classes, but I'm having trouble calling my Java methods from the native Javascript code. I tried to follow this as closely as I could, but I can't get it to work. I compiled it and ran it in Firefox, and the error console said "Error: this.lc is not a function". I tried changing all the methods to public, but that didn't seem to make a difference. What am I doing wrong?

    package com.proprintsgear.design_lab.client;
    ...
    public class ValueBox extends HorizontalPanel {
    ...
    private void fireChange() {
        ...
    }
    
    private void increaseValue() {
        ...
    }
    
    private native void addNativeMouseWheelListener(String id) /*-{
        function mouseOverHandler(e) {
            $wnd.addEventListener("DOMMouseScroll", scrollWheelMove, false);
        }
    
        function mouseOutHandler(e) {
            $wnd.removeEventListener("DOMMouseScroll", scrollWheelMove, false);
        }
    
        function scrollWheelMove(e) {
            if ($wnd.event || $wnd.Event) {
                if (!e) e = $wnd.event;
                if (e.wheelDelta <= 0 || e.detail > 0 ) {
                    $wnd.alert("DOWN");
                } else {
                    [email protected]_lab.client.ValueBox::increaseValue()();
                }
                [email protected]_lab.client.ValueBox::fireChange()();
            }
        }
    
        var box=$doc.getElementById(id);
        box.addEventListener("mouseout",mouseOutHandler,false);
        box.addEventListener("mouseover",mouseOverHandler,false);
    }-*/;
    
  • DLH
    DLH almost 15 years
    Perfect! This makes sense, but I wish it was documented better on the GWT site.