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

Button js = new Button("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]"))};