【发布时间】:2019-01-23 04:54:33
【问题描述】:
在除了组件之外的 Vaadin Flow 中,现在还有元素。
在 Element 的 javadoc 中说:
组件是元素或元素层次结构的更高级别抽象。
这实际上意味着什么?在这个更高的层次上做了什么,什么时候使用元素和什么时候使用组件?
【问题讨论】:
标签: java vaadin vaadin-flow
在除了组件之外的 Vaadin Flow 中,现在还有元素。
在 Element 的 javadoc 中说:
组件是元素或元素层次结构的更高级别抽象。
这实际上意味着什么?在这个更高的层次上做了什么,什么时候使用元素和什么时候使用组件?
【问题讨论】:
标签: java vaadin vaadin-flow
作为一个实际示例,让我们考虑 HTML 标签<input>。您可以创建一个服务器端 Element 实例,在浏览器中为您提供 <input> Element myElement = new Element("input")。
此外,假设您要配置元素的占位符文本,例如<input placeholder="Enter your name here">。使用Element API,这是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 进入图片的地方。它允许您创建一个扩展Component 的Input 类,并为这些特性提供Java API。在底层,Input 组件将使用Element API,但将其隐藏为Input 类的用户不必知道的实现细节。
此外,一个组件也可以基于其他组件,而不是直接使用Element。这通常是您创建组成例如的组件的方式。应用程序中的视图。
【讨论】: