Is there a good tutorial with examples for JSInterop available somewhere ?

[Frank]

I am want to wrap some basic functions from the visjs timeline library : http://visjs.org/examples/timeline/interaction/eventListeners.html

I just want to create a timeline. Passing in the data can be done using simple json strings.

And then I also want to add a handler when an item is updated. This is done using callback functions in javascript

    items.on('update', function (event, properties) {

         console.log(JSON.stringify(event) + " ; " + JSON.stringify(properties));

    });

Is there anywhere a tutorial available about the latest version of JSInterop ? With some example where a basic UI javascript widget is wrapped, with callbacks ?

I am not really getting things done with the basic documentation on the GWT website. Note that I know nothing about JavaScript.



I managed to wrap this using JSNI. But really want to use JSInterop.

[Jens]

The most in-depth documentation is already linked at the very bottom of the corresponding gwtproject.org page:

https://docs.google.com/document/d/10fmlEYIHcyead_4R1S5wKGs1t2I7Fnp_PaNaa7XTEk0/edit#heading=h.828haudjx0kl

In addition there is a document which talks about union types in elemental2 which can be helpful as well if you have to deal with union types: 

https://docs.google.com/document/d/14mQeAGQ9M_5uTTUbzRQzCYETA887dTO-xFLtQhgUXXk/edit

In general if you want to consume existing JS API then just model that API using @JsType(isNative = true, ...) annotated classes and for callbacks use @JsFunction annotated interfaces. Your small example could be something like:

@JsType(isNative = true, ....) // TODO: namespace, name
class Items {
  native void on(String event, ItemsEventCallback callback);
}

@JsFunction
@FunctionalInterface
interface ItemsEventCallback {
  void onEvent(Object event, Object properties); // TODO: parameter types should probably of a specific type but I don't know the JS library so have used Object here.
}

-- J.