如果您使用过 GWT，那么您可能会发现 UiBinder 对于设计复杂的 UI 非常有用。在我们关于 Vaadin 的系列文章中，我们想比较 Vaadin 和 GWT。 Vaadin 提供了多种开箱即用的工具和组件，用于构建复杂且美观的 UI。其中之一是以声明方式构建 UI 的可能性，例如 UiBinder。与 GWT 相比，Vaadin 提供了直接使用 .html 文件的可能性。
程序化方式
与在 GWT 中一样，Vaadin UI 也可以通过编程方式构建。例如，假设我们想要构建一个简单的表单来将任务添加到待办事项列表中。一种以编程方式执行此操作的方法：
public class MainUI extends UI {
@Override
protected void init(VaadinRequest request) {
// TODO Auto-generated method stub
FormLayout layout = new FormLayout();
TextField taskTitle = new TextField();
taskTitle.setCaption("Title");
taskTitle.setIcon(VaadinIcons.CHEVRON_DOWN);
TextArea taskDescription = new TextArea();
taskDescription.setCaption("Description");
taskDescription.setIcon(VaadinIcons.LINES);
DateField taskDate = new DateField();
taskDate.setCaption("Date");
Button button = new Button("Add");
button.setIcon(VaadinIcons.PLUS);
layout.addComponent(taskTitle);
layout.addComponent(taskDescription);
layout.addComponent(taskDate);
layout.addComponent(button);
setContent(layout);
}
}
结果：
声明方式
如果 UI 复杂且具有嵌套组件，则声明式方法很有用。 Vaadin 开发了可以绑定到 Java 组件的 HTML 自定义元素。自定义元素以 vaadin- 开头。 元素名称的其余部分可以通过分隔单词并将其设为小写来从 java 类中提取，如 Vaadin 的 网站中所述。以声明方式创建 UI 的第一步是创建 html 文件，我们将其命名为 Form.html：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="vaadin-version" content="8.0.5"> </head> <body> <vaadin-form-layout> <vaadin-text-field icon="fonticon://Vaadin-Icons/e7ce" caption="Task Name" _id="todoTitle"> </vaadin-text-field> <vaadin-text-area icon="fonticon://Vaadin-Icons/e7ef" _id="todoDescription"> </vaadin-text-area> <vaadin-date-time-field caption="Date" _id="todoDate"> </vaadin-date-time-field> <vaadin-button icon="fonticon://Vaadin-Icons/e801"_id="todoButton"> Add </vaadin-button> </vaadin-form-layout> </body> </html>
第二步是创建一个将绑定到该文件的 java 类。
@DesignRoot
public class Form extends FormLayout {
public Form() {
Design.read("Form.html", this);
}
}
现在我们可以将它用作 UI 类中的普通组件：
public class MainUI extends UI {
@Override
protected void init(VaadinRequest request) {
setContent(new Form());
}
}
要将 .html 中的字段绑定到 java 类中的字段，需要设置 _id 属性。例如，绑定我们的文本框：
<vaadin-text-field icon="fonticon://Vaadin-Icons/e7ce" caption="Task Name" _id="todoTitle"> </vaadin-text-field>
然后我们可以将它添加到java文件中，它会自动绑定：
@DesignRoot
public class Form extends FormLayout {
TextField todoTitle;
public Form() {
Design.read("Form.html", this);
//we can directly use it without initialization
}
}
Vaadin 还提供了一个用于交互式设计 UI 的有趣工具：Vaadin Designer。 Vaadin 设计器允许使用鼠标和拖放来设计 UI。我们仅将该工具用于演示目的，因此我们无法对其进行真正的评估。 Vaadin-Designer 可以通过减少构建 UI 的时间和处理“样板”部分来帮助提高生产力。不幸的是，Vaadin Designer 不是免费的，它的附加值因项目而异。
带走
以编程方式设计 UI 并不总是很方便。 Vaading 有一种以声明方式构建 UI 的有趣方法。 HTML 自定义元素提供了一种将 .html 文件直接链接到 java 的方法。也许这是GWT开发者探索的一条路，因为UiBinder会在下一个3.0版本中被移除。
标签2： Java教程地址：https://www.cundage.com/article/jcg-vaadin-tip-building-uis-declaratively.html
相关阅读
