Skip to main content

Create Pure JavaScript Dialogues

Abstract

Create Pure JavaScript Dialogues

This section contains a short guide on how to develop JavaScript dialogues based on the Vaadin Framework.

Basic idea is described in https://vaadin.com/blog/vaadin-7-loves-javascript-components.

Step 1: Define server part of your JavaScript component (see SparqlEditorComponent for more details).

package eu.unifiedviews.plugins.transformer.sparql.construct.editor;
 
@JavaScript({"vaadin://js/sparqleditor/sparqleditor.js", "vaadin://js/sparqleditor/jquery-v1.11.1.min.js", "vaadin://js/sparqleditor/yasqe.bundled.min.js"})
public class SparqlEditorComponent extends AbstractJavaScriptComponent {
 
        ...
        @Override
        protected SparqlEditorState getState() {
        return (SparqlEditorState) super.getState();
        }
 
}

  • @JavaScript annotation

  • extends AbstractJavaScriptComponent

  • override getState() method (see below)

Step 2: Prepare class holding the state object being exchanged between JS part of the component and server part.

In the example below, it just exchanges one string variable.

public class SparqlEditorState extends JavaScriptComponentState {
    public String query = "";
}

Note

Unfortunately, a component's state cannot be modified on the client side, to be updated on the server side. (https://vaadin.com/blog/vaadin-7-loves-javascript-components)

Any possible getters and setters in a state can not be used on the JavaScript side. The values are accessed directly as properties. This is true even if you explicitly have written the accessors in your state class.

There is a way how to define new callbacks for JavaScript in Java (to e.g. report status change back to the server): addFunction on the SparqlEditorComponent

Step 3: Prepare JS part - which has to define the controller, which is bind to the server part component based on its full name (including package).

So in the example above the following would be done:

eu_unifiedviews_plugins_transformer_sparql_construct_editor_SparqlEditorComponent = function() {

    // Create the component
    var mycomponent = new mylibrary.MyComponent(this.getElement());

    // Handle changes from the server-side - whenewher the query is changed, this function is called
    this.onStateChange = function() {
        //access the state object and get the value for query via this.getState().query;
    };

}

  • The function name must reflect the name and package of the server part.

Dpu Using Sparqleditor + Value Change Listeners
sparqlEditorComponent = new SparqlEditorComponent();
sparqlEditorComponent.setStyleName("SparqlEditor");
sparqlEditorComponent.setSizeFull();
sparqlEditorComponent.setImmediate(true);


// Process a value input by the user from the client-side
sparqlEditorComponent.addValueChangeListener(
        new SparqlEditorComponent.CustomValueChangeListener() {
            @Override
            public void valueChange() {
                ...
            }
        });
SparqlEditorComponent

(Server part - value change listeners)

public interface CustomValueChangeListener extends Serializable {
    void valueChange();
}

List<CustomValueChangeListener> listeners = new ArrayList<CustomValueChangeListener>();

public void addValueChangeListener(CustomValueChangeListener listener) {
    listeners.add(listener);
}
References:

https://vaadin.com/blog/vaadin-7-loves-javascript-components

https://dzone.com/articles/integrating-html-and-0

https://vaadin.com/docs/v8/framework/gwt/gwt-javascript/#gwt.javascript.example

JS to JAVA: https://vaadin.com/forum/thread/4690491

https://vaadin.com/api/com/vaadin/ui/AbstractJavaScriptComponent.html

In this section: