Problem efficiently mapping a native JavaScript library variable parameter API with Elemental2 / GWT?

76 views Asked by At

I want to use a specific native JavaScript library (DataTables) from GWT using Elemental2. The initialization API for the library is of the type:

$('#example').DataTable({
        paging: false,
        ordering: false,
        info: false,
        columnDefs:
                [
                    { targets: [2,3], orderable: false },
                    { targets: [0], width : "150px" },
                    { targets: [3], width : "90px"}
                ]
    });

The accepted initialisation parameters are quite variable, extensive and optional.

This is how I initially tried to map it - it worked but is quite tedious to implement.

@JsType(isNative = true,name = "DataTable", namespace = JsPackage.GLOBAL)
public class DataTable
{
    public DataTable(String selector, FeatureOptions options){}
    public native Api clear();
    public native Api draw();
    // and so on...
}


@JsType(isNative = true, name = "Object", namespace = JsPackage.GLOBAL)
public class FeatureOptions
{
    public String  scrollY;
    public boolean scrollCollapse;
    public boolean paging;
    public boolean searching;
    // and so on...
}

At some point I ended up reverting to JSNI.... especially because of the complex type "columnDefs" (it would have required a lot of additional classes).

public native void drawTable(String tableID)/*-{
        var table = $wnd.$('#'+tableID).DataTable({
                searching : false,
                "columnDefs":
                [
                    { targets: [2,3], orderable: false },
                    { targets: [0], "width" : "150px" },
                    { targets: [3], "width" : "90px"}
                ]
            });
    }-*/;

Am I missing an obvious simple and efficient way to generate pure Elemental2 based Java code to implement such native interfaces? E.g. could I use some sort of Map to populate just the parameters I need and pass it as a JSON String or something?

For reference some useful question/answers - none that fit though: (GWT - Using a java bean parameter directly in a native method) (Use third party javascript library (with window references) in GWT)

1

There are 1 answers

3
Robert Newton On BEST ANSWER

There is a JS library called Tabulator,

https://tabulator.info/docs/4.9/columns

that has fairly complex configuration options, and someone did a GWT JsInterop interface for it here:

https://github.com/peruncs/gwt/tree/master/gwt-tabulator/src/main/java/com/peruncs/gwt/tabulator

How that was done may have similarities to what you need to do.

Another approach is to use JsPropertyMap objects: https://github.com/google/jsinterop-base/blob/master/java/jsinterop/base/JsPropertyMap.java