JavaScript in Vaadin

General
1

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.

JavaScript.getCurrent().execute(“sketcher()”);

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
Hauke

2

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.

3

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

4

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

5

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

6

Thanks for sharing to your post.

7

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?

8

@StyleSheet might help here.

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

9

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.

10

I found a solution in the Vaadin blog. The canvas needs to initialized at first.
https://vaadin.com/blog/-/blogs/vaadin-js-and-dom-initialization-order?_33_redirect