How do I get JavaScript callback working?

Flow
1

I’m looking for a convenient way to call a Java method from JavaScript on the client side.

With Vaadin 8 I used

JavaScript.getCurrent().addFunction(fun, (JsonArray arguments) -> {
            LOGGER.debug("got js response! | {}", arguments.asString());           
        });

to register a JavaScript function and call it from JS on the client side.

How can I achieve something equivalent with Vaadin 10?

2

Have you checked this chapter in documentation: https://vaadin.com/docs/v10/flow/advanced/tutorial-execute-javascript.html

3

Thanks for your reply! I got this part working, but the doc only handles the Java server → JavasScript client case.

I’m looking for a way to get the reverse working. I want to call a Java method from JavaScript on the client side.

The code I posted for registering a JS function no longer works in Vaadin 10 and I’m looking for something to replace it with.

4

Hi Bastian,

You export a method in Java using @ClientCallable, for example:

@ClientCallable
private void myFunction(){
    //do something on the server-side
}

… and then call it on the client side by using the $server object:

element.$server.myFunction();

The name of the function exported on the client-side is the same name of the method declared on the server side.

5

Gilberto Torrezan Filho:
Hi Bastian,

You export a method in Java using @ClientCallable, for example:

@ClientCallable
private void myFunction(){
    //do something on the server-side
}

… and then call it on the client side by using the $server object:

element.$server.myFunction();

The name of the function exported on the client-side is the same name of the method declared on the server side.

Okay this works well for void methods. But how can i send data to the client side? In my case i have an addon where the serverside computes some data. This data should be requestable vis javascript on client side. Is this possible?

Regards

6

Sure thing! Just declare the arguments in the method.

To send complex objects you can use JsonObject and JsonArray as parameter:

@ClientCallable
private void myFunctionWithParameters(String param1, int param2, JsonObject param3, JsonArray param4){
    //do something on the server-side
}

element.$server.myFunctionWithParameters('Cool', 42, {my: 'object'}, ['array']
);
7

Thank you for your help!

I got the the callback working and it looks more convenient than the old Vaadin8 solution.

8

On the java side set the id of the element with the @ClientCallable method.
Call setId(“myelement”) on your com.vaadin.flow.component.Component element.

On the client side get the element in java script with:

var element = document.getElementById("myelement");

This only works reliably if you only have one element with the id “myelement” on the page.

9

Bastian Stegmann:
On the java side set the id of the element with the @ClientCallable method.
Call setId(“myelement”) on your com.vaadin.flow.component.Component element.

On the client side get the element in java script with:

var element = document.getElementById("myelement");

This only works reliably if you only have one element with the id “myelement” on the page.

In my case I dont have any element on the java side to set the ID, I just want to send a string from JS and print it inside mu java method.

What should I do?

10

Do you solve your problem?