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

Question

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)

Robert Newton · Accepted Answer · 2023-03-06 03:39:14Z

0

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

answered Mar 6, 2023 at 3:39

Robert Newton

1,62115 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sandro Over a year ago

Perfect! Thank you so much. The Tabulator is a great example (I might even switch to that) and the JsPropertyMap also works like a charm. Complex structures can be built easily by also using JsArray objects. I also found the JsMap class - not quite sure what the difference between it and the JsPropertyMap is though. I also found this useful: vuegwt.github.io/vue-gwt/guide/gwt-integration/js-interop.html

Robert Newton Over a year ago

The gwt-tabulator project is abandoned. I am using a local copy where I fixed a few minor things. It works for tabulator 4.x . They are on 5 now which is quite different.

Robert Newton Over a year ago

@Sandro Yes I had found that VueGWT page useful also. I hadn't heard of JsMap. Like JsArray it represents the javascript map/array in Java (from the elemental2-core library). I'm not sure of the pros/cons of JsMap versus JsPropertyMap (from jsinterop-base library)

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related