Adding dynamic properties to a Javascript object in a GWT + JSInterop context

GWT is a framework that allows you to program the user interface of your application in Java and later it is compiled to Javascript, which will work across all browsers. The main advantage is that you don't have to care about minification of Javascript and compatibility across browsers, easy communication with server side and it is Java, you can use Java on server and client side. With Errai you have CDI (and more) on the client side, which means that you can make your application flexible and create pluggable components.
GWT in its later versions introduced JSInterop, a great way to call Javascript using Java. During the compilation the Java bean will be compiled to an equivalent Javascript code. This is good for Javascript objects with static properties, but knowing Javascript you will always find cases where the attribute name is dynamic, where the attribute is created "on the fly", for example:

var myObject = {
    someAttributeIJustCreated : "the value"
};

In Javascript myObject is a valid type, but this is not how things work with Java. During Javascript development it is handy to use such types and in some Javascript APIs you can't run away from it, for example, in C3.js to map a data X value you must create an attribute with the name of the column matching the column name where the X values will be found. To better understand this see the simple_multiple_xy.js example:

PERHAPS C3 SCREENSHOT HERE?

var chart = c3.generate({
    data: {
        xs: {
            data1: 'x1',
            data2: 'x2',
        },
        columns: [
            ['x1', 10, 30, 45, 50, 70, 100],
            ['x2', 30, 50, 75, 100, 120],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 20, 180, 240, 100, 190]
        ]
    }
});

Notice that to tell that data1 x will x1 we will need to have an attribute of type data1. If you know the API you will see that data1 could be a String, but that I don't know how to map.
How do we map such cases using JSInteorp? After looking for it quite a while I found this github discussion and then the solution was simple:

* Make the attribute of type elemental2.core.JsObject
* Use the following code to create dynamic attributes:

JsObject jsObject = JsObject.create(null);
Js.
       cast(jsObject)
       .asPropertyMap()
       .set("someCustomProperty", "someCustomValue");

And that's it! You can have properties of type JsObject in any object anotated with JsType, for example, if I want to create xs attributewith dynamic attributes (see the c3 object above), I can declare a property as follows:

    @JsProperty
    public native void setXs(JsObject xs);

See you in next post.