首页 > 解决方案 > Vaadin Flow:组件和元素之间的区别

问题描述

在除了组件之外的 Vaadin Flow 中,现在还有元素。

在 Element 的 javadoc 中说:

组件是元素或元素层次结构的更高级别抽象。

这实际上意味着什么?在这个更高层次上做了什么,什么时候使用元素和什么时候使用组件?

标签: javavaadinvaadin-flow

解决方案


作为一个实际示例,让我们考虑 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. 这通常是您在应用程序中创建构成例如视图的组件的方式。


推荐阅读