VAADIN - 按钮| 在HTML布局，脚本执行(VAADIN - Button | imp

有没有oportnunity在HTML脚本中使用Vaadin按钮？

Id喜欢使用下面的按钮

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

文章来源: VAADIN - Button | implement in HTML Layout-Script