Pular para o conteúdo principal

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.
Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Simplest JavaFX ComboBox autocomplete

Based on this Brazilian community post , I've created a sample Combobox auto complete. What it basically does is: When user type with the combobox selected, it will work on a temporary string to store the typed text; Each key typed leads to the combobox to be showed and updated If backspace is type, we update the filter Each key typed shows the combo box items, when the combobox is hidden, the filter is cleaned and the tooltip is hidden:   The class code and a sample application is below. I also added the source to my personal github , sent me PR to improve it and there are a lot of things to improve, like space and accents support.
2 comentários
Leia mais

Dancing lights with Arduino - The idea

I have been having fun with Arduino these days! In this article I am going to show how did I use an electret mic with Arduino to create a Dancing Lights circuit. Dancing Lights   I used to be an eletronician before starting the IT college. I had my own electronics maintenance office to fix television, radios, etc. In my free time I used to create electronic projects to sell and I made a few "reais" selling a version of Dancing lights, but it was too limited: it simply animated lamps using a relay in the output of a 4017 CMOS IC. The circuit was a decimal counter  controlled by a 555. 4017 decimal counter. Source in the image When I met Arduino a few years ago, I was skeptical because I said: I can do this with IC, why should I use a microcontroller. I thought that Arduino was for kids. But now my pride is gone and I am having a lot of fun with Arduino :-) The implementation of Dancing Lights with Arduino uses an electret mic to capture the sound and light leds...
Postar um comentário
Leia mais

Creating custom Work Item Handler in BPM Suite/jBPM 6

Hi all! In this post I am going to share my experience creating a work item handler for BPM Suite 6.0.3 (which is very similar to jbpm as explained in a previous post ). The Hello World Work Item Handler Let's create a really simple WorkItemHandler just to print "Hello World" in the console. Of course you can implement more feature and make it receive parameters, access database, web services, etc. But in this post we will keep it simple. Really simple. First thing to do is to create a maven project for my WorkItemHandler. Here's the pom.xml of my Maven project: Notice that we are importing jbpm dependency so we can find the java interface that is used to create work item handlers. Now we can start coding. Let's create a class name HelloWorkItemHandler in package org.jugvale.jbpm, here is the simple code: Now we can build our project and go to BPM Suite to configure it so we can use this workitem. Registering the WorkItemHandler UPDATE...
17 comentários
Leia mais