java - Vaadin Flow:组件和元素之间的区别
问题描述
在除了组件之外的 Vaadin Flow 中,现在还有元素。
在 Element 的 javadoc 中说:
组件是元素或元素层次结构的更高级别抽象。
这实际上意味着什么?在这个更高层次上做了什么,什么时候使用元素和什么时候使用组件?
解决方案
作为一个实际示例,让我们考虑 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
进入图片的地方。它允许您创建一个Input
类,该类扩展Component
并为这些特性提供 Java API。在底层,Input
组件将使用Element
API,但将其隐藏为Input
类用户不必知道的实现细节。
此外,一个组件也可以基于其他组件,而不是直接使用Element
. 这通常是您在应用程序中创建构成例如视图的组件的方式。
推荐阅读
- django - 在 Django 中按类别对项目进行排序
- mongodb - Mongodb4.4 聚合排序随机行为
- haskell - 固定点、变量、让和标记模式构造函数如何在 Winery 中工作?
- c++ - 无法使用 UTF-8 编码解码 main.cpp
- c# - 取消发布者的会话 ServiceBus 消费者活动
- amazon-web-services - 在 AWS X-Ray 的上下文中 sampled=1 是什么意思
- visual-studio - 创建 Visual Studio 扩展时,如何判断鼠标是否悬停在评论上?
- julia - Julia 绘图:如何将单个点和点列表添加到散点图中
- android - Android - Seekbar 刻度线颜色无法更改
- ios - 转换 NSFetchRequest 时出错
到 NSFetchRequest 其中 T 是通用 NSManagedObject