JavaScript Interaction
Vaadin supports two-direction JavaScript calls from and to the server-side. This allows interfacing with JavaScript code without writing client-side integration code.
Calling JavaScript
You can make JavaScript calls from the server-side with the execute() method in the JavaScript class. You can get a JavaScript instance from the current Page object with getJavaScript().
// Execute JavaScript in the currently processed page
Page.getCurrent().getJavaScript().execute("alert('Hello')");The JavaScript class itself has a static shorthand method getCurrent() to get the instance for the currently processed page.
// Shorthand
JavaScript.getCurrent().execute("alert('Hello')");The JavaScript is executed after the server request that is currently processed returns. If multiple JavaScript calls are made during the processing of the request, they are all executed sequentially after the request is done. Hence, the JavaScript execution does not pause the execution of the server-side application and you can not return values from the JavaScript.
Handling JavaScript Function Callbacks
You can make calls with JavaScript from the client-side to the server-side. This requires that you register JavaScript call-back methods from the server-side. You need to implement and register a JavaScriptFunction with addFunction() in the current JavaScript object. A function requires a name, with an optional package path, which are given to the addFunction(). You only need to implement the call() method to handle calls from the client-side JavaScript.
JavaScript.getCurrent().addFunction("com.example.foo.myfunc",
new JavaScriptFunction() {
@Override
public void call(JsonArray arguments) {
Notification.show("Received call");
}
});
Link link = new Link("Send Message", new ExternalResource(
"javascript:com.example.foo.myfunc()"));Parameters passed to the JavaScript method on the client-side are provided in a JSONArray passed to the call() method. The parameter values can be acquired with the get() method by the index of the parameter, or any of the type-casting getters. The getter must match the type of the passed parameter, or an exception is thrown.
JavaScript.getCurrent().addFunction("com.example.foo.myfunc",
new JavaScriptFunction() {
@Override
public void call(JsonArray arguments) {
try {
String message = arguments.getString(0);
int value = arguments.getInt(1);
Notification.show("Message: " + message +
", value: " + value);
} catch (Exception e) {
Notification.show("Error: " + e.getMessage());
}
}
});
Link link = new Link("Send Message", new ExternalResource(
"javascript:com.example.foo.myfunc(prompt('Message'), 42)"));The function callback mechanism is the same as the RPC mechanism used with JavaScript component integration, as described in "RPC from JavaScript to Server-Side".