Vaadin 技巧:以声明方式构建 UI

位置:首页>文章>详情   分类:Java教程   阅读(134)   2023-12-03 16:34:57

如果您使用过 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版本中被移除。

标签: Java教程
地址:https://www.cundage.com/article/jcg-vaadin-tip-building-uis-declaratively.html