Vaadin提示：以声明方式构建UI

如果您使用了GWT，那么您可能会发现UiBinder对于设计复杂的UI很有用。在有关Vaadin的系列文章中，我们希望在Vaadin和GWT之间得出相似之处。 Vaadin提供了多种开箱即用的工具和组件，用于构建复杂且美观的UI。其中之一是可以像UiBinder那样声明性地构建UI。与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);
}}

结果：

声明方式

如果用户界面很复杂且具有嵌套组件，则声明方法可能会很有用。 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 Designer允许使用鼠标和拖放来设计UI。我们仅将此工具用于演示目的，因此我们无法真正对其进行评估。 Vaadin-Designer可以通过减少构建UI的时间和处理“样板”部分来帮助提高生产率。不幸的是，Vaadin Designer不是免费的，其增值取决于一个项目到另一个项目。