Note : Materialize JSNI conversion to JSInterop

Don't use static methods (Except if your using Namespaces like Toast component)

If you use static context to your method you will get

(TypeError) : Cannot read property 'material' of undefined

Javascript

$(".mydropdown").dropdown();

JSInterop

@JsMethod
public native JsMaterialElement dropdown();

With Namespace

Javascript

Materialize.toast("message", 3000, funct);

JSInterop

JsMaterialElement.toast(msg, lifeMillis, className, () -> {
    if(callback != null) {
        callback.run();
    }
});

Defining Functions

Javascript

function({
  // some methods
});

JSInterop

new Functions.Func() {
   // Some methods
};

With JQuery selector to perform Materialize api

Javascript

$(".collapsible").collapsible();

JSInterop

$(".collapsible").collapsible();

With JS Configuration Object

Javascript

options = {
  container: "body",
  selectYears: true,
  selectMonths: true,
  format: "yyyy/mm/dd";
};

JSInterop

@JsType(isNative = true, name = "Object", namespace = JsPackage.GLOBAL)
public class JsDatePickerOptions {

    @JsProperty
    public String container;

    @JsProperty
    public boolean selectYears;

    @JsProperty
    public boolean selectMonths;

    @JsProperty
    public String format;

}

With additional Js method

javascript

interact(target).draggable(options);

JSInterop

@JsType(isNative = true, namespace = JsPackage.GLOBAL)
public class JsDnd extends JQueryElement {

    @JsMethod(namespace = JsPackage.GLOBAL)
    public static native JsDnd interact(Element target);

    @JsMethod
    public native void draggable(JsDndOptions options);
}

Using native multidimensional array objects in JSinterop

javascript

   var toolbar = [
      ["string", ["string", "string"],
      ["string", ["string", "string"]
   ];

JSInterop

    Object[][] toolbar = new Object[][]{
         new Object[] {"string", new Object[]{"string", "string"}},
         new Object[] {"string", new Object[]{"string", "string"}}
    };

Native JS Constructor objects to JSInterop

javascript

$wnd.MyPlugin(element, options);

JSInterop

@JsType(isNative = true, namespace = JsPackage.GLOBAL)
public class MyPlugin {
    public MyPlugin (Element element, Options options) {};
}

// Then we can call
MyPlugin myPlugin = new MyPlugin(element, options);

Native JS properties

javascript

navigator.appName;

JSInterop

@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "navigator")
public class Navigator {
    public static String appName;
}
// Calling
Navigator.appName;

Source Reference

All source code for JSInterop integration to GMD is available and feel free to test it and submit PR.