Wednesday, April 20, 2016

Struggling with gwt 2.8/JsInterop and jQuery, help please!

Hi all,

I need to interface with JQuery API that looks like this:

http://semantic-ui.com/modules/checkbox.html#/examples
========================================
$('.callback.example .checkbox') .checkbox() .first()
.checkbox({ onChecked: function() {...}, onUnchecked: function() {...}, onEnable: function() {...}, onDisable: function() {...}, onDeterminate: function() {..}, onIndeterminate: function() {...}, onChange: function() {...} });
===============================================

I am trying to use JsInterop and getting a weird JS error, because the jQuery API above does not like the SUICheckbox.Settings class, which I thought would be just a map of callbacks. Any hints? How do you do tackle this with JsInterop?

Here is the JS error:
=======================================================
com.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot convert undefined or null to object at Unknown.hasOwnProperty(Unknown@-1) at Unknown.jQuery.extend.isPlainObject(http://127.0.0.1:8080/xxxxxxx/jquery.js@13:289)


Here is the GWT usage code:
=======================================================
SUICheckbox.Settings settings = new SUICheckbox.Settings(); settings.onChecked = ()->Console.log("Checked: "+this.toString()); settings.onUnchecked = ()->Console.log("Unchecked: "+this.toString()); settings.onEnabled = ()->Console.log("Unchecked: "+this.toString()); String checkboxSelector = "#"+planChoices.getElement().getId()+" .checkbox"; SUICheckbox checkBoxContext = 
JQuery
.$(checkboxSelector) //This is fine!
.checkbox(settings); //BOOM error!!!


Here is the GWT JSInertop wrapper code:
======================================================
@JsType(isNative = true) public class JQuery { @JsMethod(namespace = JsPackage.GLOBAL) public static native JQueryContext $(String selector);
}

@JsType(name = "jQuery", isNative = true, namespace = JsPackage.GLOBAL) public class JQueryContext { public native SUICheckbox checkbox(SUICheckbox.Settings setings); }
public interface Functions {
    @FunctionalInterface  @JsFunction // No Return Type
    interface Func {void call();}
}
@JsType(isNative = true, name = "Checkbox", namespace = "checkbox") public class SUICheckbox extends JQueryContext{ @JsType public static class Settings { @JsProperty public Functions.Func onChecked; @JsProperty public Functions.Func onEnabled; @JsProperty public Functions.Func onUnchecked; } }




--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment