Vaadin - Button | Implement In Html Layout-script

is there any oportnunity to use a Vaadin Button in a HTML script? Id like to use the following button Button button_login = ew Button(); button_login.setID('buttonlogin'); and thi

Solution 1:

I am quite unsure what you mean by html script. If it is something you can achieve using JavaScript then here is my try.

Generally to execute JavaScript on button click

Buttonjs=newButton("Do JavaScript");
js.addClickListener( click -> { 
   com.vaadin.ui.JavaScript.getCurrent().execute("alert(´Hello´)");
 });

When in need to use external .js files, for example hello.js, contents below

function hello() {
   alert("Hello JavaScriptWorld!");
}

Assuming hello.js is directly under /VAADIN/ directory, add following annotation to your UI or relevant component class

@JavaScript({"vaadin://hello.js"})// all paths must be relative to /VAADIN

Then in ClickListener you can refer to function hello() like

com.vaadin.ui.JavaScript.getCurrent().execute("hello()");

Solution 2:

Java @com.vaadin.annotations.JavaScript("vaadin://themes/paastheme/layouts/ui/donut/donut.js") public class BrowsePeopleUI extends UI {}

I put JS file to:

src/main/resources/VAADIN/themes/paastheme/layouts/ui/donut/donut.js

My donut.js is:

Javascript var util = util || {}; util.donut = () => {console.log(document.querySelectorAll("[data-svg]"))};