JavaScript in Vaadin

Hey everybody,

I’m trying to implement an editor to draw molecules. I’ve all .css and .js files I need to make it work. I tested the editor in HTML which is only line of code to make it work. Now I try to make it work in Vaadin. My problem is that I’m not really familiar with JavaScript and how to use it in Vaadin/Java. I was reading through the documentary for JavaScript in Vaadin but couldn’t find the things I need. I was thinking of doing this.


Whereas sketcher would be a function written in JavaScript. The editor needs two other JavaScript libraries in order to work, which I set in my properties. I would like to know if Vaadin is looking through all JavaScript libraries to find the function or if I have to write it something special to link to this particular JavaScript library.

Thanks in advance

I’m guessing that this editor is a JavaScript component.
In this case you should follow
this tutorial
to integrate in Vaadin. This way you can use your editor like any other Vaadin Component.

Thanks for your quick reply. I’ll have a look.

Hello again,
I went through the tutorial and it worked very well, but now I’m stuck with my connector, because the debug mode of Vaadin tells me that the function I want to use is not defined. The definition of the function in JavaScript is as follows:
(function (a, h, j, l, e, g, f, i, u) {
a.SketcherCanvas = function (a, h, i, c) {


Unfortunately there is no documentation or anything else which tells me, what this a means. I know what the second parameters are.
In HTML it’s very easy to write:

So I tried in my connector to use the same with:
window.com_mosgrid_chemdoodle_ChemDoodle = function() {

this.onStateChange = function() {
$.ChemDoodle.SketcherCanvas(this.getState().name, this.getState().width, this.getState().height;

But it fails because the function is not defined. Maybe I did something wrong with the annotations of the JavaScript files.

I hope someone understands my problem and can help me.

Best regards
Hauke Glandorf

Found my mistake. It works now. The error was saying $ is not defined.

Thanks for sharing to your post.

Got a new problem now. The editor uses two css-files, but when the website is loaded, the CSS-files are not used.
My question is now if there is a way to call the css-files from Vaadin so they’re used in the JavaScript class. Or do I have to call the css-files in JavaScript?

@StyleSheet might help here.

If not, take a look at
this tutorial
for alternatives.

Thanks for the tip.
A new problem appeared. It seems that the JavaScript component is so strong that it’s always on the top layer of my layout. It doesn’t matter if I have different buttons and labels on my layout, everytime I add the JavaScript component to the layout everything else will be underneath it. Is there a way to stop the JavaScript component from going to the top layer? Even if I have 2 two JavaScript components which are aligned to the top left and bottom right, the last added JavaScript component will be the only thing seen.

I found a solution in the Vaadin blog. The canvas needs to initialized at first.