VAADIN-按鈕| 在HTML布局腳本中實現

Question

在HTML腳本中是否有使用Vaadin按鈕的機會？

我想使用以下按鈕

Button button_login = ew Button();
button_login.setID("buttonlogin");

並且此按鈕應在以下腳本中實現

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

（只有一個主意）

有。 一個在HTML腳本中綁定按鈕的想法？

謝謝！

Answer 1

我完全不確定html腳本是什么意思。 如果您可以使用JavaScript來實現，那么這是我的嘗試。

通常在單擊按鈕時執行JavaScript

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

需要使用外部.js文件（例如hello.js ，以下內容

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

假設hello.js直接位於/VAADIN/目錄下，請在您的UI或相關組件類中添加以下注釋

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

然后在ClickListener您可以像下面這樣引用function hello()

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

Answer 2

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

我將JS文件放到：

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

我的donut.js是：

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