Vaadin Flow:组件和元素之间的差异

Question

在Vaadin Flow中,除了Components之外,现在还有Elements.

在元素的javadoc中说:

Component是元素或元素层次结构的更高级抽象.

这实际意味着什么？在更高级别以及使用Elements和何时使用组件时所做的是什么？

Answer 1

作为一个实际的例子,让我们考虑一下HTML标签<input>.您可以创建一个服务器端Element实例,<input>在浏览器中为您提供Element myElement = new Element("input").

此外,假设您要配置元素的占位符文本,例如<input placeholder="Enter your name here">.使用ElementAPI,这是myElement.setAttribute("placeholder", "Enter your name here").

作为最后一个示例,您还添加了一个将值更改事件转发到服务器的侦听器.您还需要配置浏览器事件的哪些部分发送到服务器并在侦听器中访问该值:myElement.addEventListener("change", event -> System.out.println("New value: " + event.getEventData("element.value")).addEventData("element.value");.

您可以用这种方式构建整个应用程序,但这样做并不方便.你想拥有一个知道标签名称input没有每次都输入字符串的类.您需要一个setPlaceholder方法而不是使用泛型setAttribute并记住属性的名称.最后,您需要一种在新值可用的位置添加值更改侦听器的方法event.getValue().

这正是Component进入图片的地方.它允许您创建一个Input扩展的类,Component并为这些功能提供Java API.在引擎盖下,Input组件将使用ElementAPI,但将其隐藏为Input类的用户不必了解的实现细节.

此外,组件也可以基于其他组件而不是直接使用Element.这通常是您创建组成例如应用程序中的视图的组件的方式.