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

Posted 2023-02-23

【中文标题】VAADIN - 按钮 |在 HTML Layout-Script 中实现

【英文标题】：VAADIN - Button | implement in HTML Layout-Script

【发布时间】：2018-05-05 22:32:45

【问题描述】：

是否有机会在 html 脚本中使用 Vaadin 按钮？

我喜欢使用下面的按钮

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

这个按钮应该在下面的脚本中实现

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

（只是一个想法）

有。在 html 脚本中绑定按钮的想法？

谢谢！

【问题讨论】：

如果你想从 Vaadin 生成 HTML，一个简单的开始就是使用 Label 和 Content.HTML（注意 XSS）。如果您打算做其他事情，请在问题中添加一些内容。什么是“html脚本”和“html布局脚本”？

【参考方案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()like

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

【参考方案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]"));