VAADIN - 按钮|在HTML Layout-Script中实现

Question

有什么机会在HTML脚本中使用Vaadin Button吗？

我想使用以下按钮

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