How to integrate javascript in vaadin (eg OpenStreetMap)?

Question

Is it possible to create javascript elements like OpenStreetMap or jQuery inside a vaadin application?

Because vaadin websites are created by programming in java and letting the compiler autocreate the DOM and JavaScript out of it?

So, is it possible at all?

Answer 1

You can create such an integration with AbstractJavaScriptComponent

The basic idea here is to subclass this class, annotate with @JavaScript to pull in the needed JS libs. Then write at least a global function, that sets up your lib in the DOM (you will have a <div> at your disposal). Your component can hold state, the server side can call defined functions on the client (while sending eg state) and the client can call server functions (params passed as JSON).

The Wiki has an example how to include such a component

Answer 2

There are some easy and cheap solutions which are not the best in the long term, but they may be enough:

1)

If you just want to render some html you cant insert it as the value of a label and change its Content Mode to html.

https://vaadin.com/book/-/page/components.label.html

2)

If you just want to execute some javascript code after a ui event you can call Javascript.getCurrent().execute(javascriptCode).

https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html

Notice that if you are trying to do some re-usable components, this is not the right answer