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 this button should be implement in the following script

<div data-location="buttonlogin"></div>

(Only an idea)

Have so. an idea to bind the button in the html script?

Thank!

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()");

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]"))};

来源：https://stackoverflow.com/questions/47430423/vaadin-button-implement-in-html-layout-script

标签