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 ```javascript $(".mydropdown").dropdown(); ``` JSInterop ```java @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/b>

$(".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);
}

Source Reference

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