通用组件 XML

在线示例

component XML 元素支持通过指定全限定类名（FQN）来创建任意 UI 组件。组件属性使用内部的 property 元素定义，类似于操作（action）配置。

例如，可以通过以下方式定义一个 Button 组件：

<component id="button" class="com.vaadin.flow.component.button.Button">
    <properties>
        <property name="text" value="Button"/>
        <property name="icon" value="PLUS" type="ICON"/>
    </properties>
</component>

定义一个自定义组件的示例：

<component id="testComponent" class="com.company.onboarding.component.TestComponent">
    <properties>
        <property name="text" value="Button"/>
        <property name="stringsList" value="a b ,c"/>
        <property name="stringsSet" value="a b ,c"/>
        <property name="stringsArray" value="a b ,c"/>
        <property name="strings" value="a b ,c"/>
        <property name="dataContainer" value="productsDc" type="CONTAINER_REF"/>
    </properties>
</component>

配置属性

  • name 属性值会被转换为 setter 方法名称，例如：

    • text → setText()

    • dataLoader → setDataLoader()

  • 框架会查找第一个 name 匹配且只有一个输入参数的方法来设置值。

    如果多个方法具有相同的名称，则不保证会使用预期的方法来设置值。

  • 将用找到的方法的输入参数类型对 value 属性中的字符串值进行转换，转换为相同类型的实际值。

  • type 属性表示字符串值必须由某个可插拔的 PropertyParser bean 进行转换：

    类型 解析器 描述

    ICON

    IconPropertyParser

    将字符串转换为 Icon 实例。

    CONTAINER_REF

    DataContainerPropertyParser

    通过 ID 解析数据容器

    LOADER_REF

    DataLoaderPropertyParser

    通过 ID 解析数据加载器

属性解析器

当字符串值无法直接使用参数类型进行转换时，会使用可插拔的 PropertyParser bean 处理转换。

目前有三种实现：

  • IconPropertyParser。将字符串转换为 Icon 实例。

    • 如果传入的字符串包含 : 分隔符，则使用 图标集合 和 图标名称 值创建一个新的 Icon。

    • 否则，该字符串被视为 VaadinIcon 常量名称。

      示例：

    • "PLUS" → VaadinIcon.PLUS 图标。

    • "myicons:custom" → 来自自定义集合 "myicons"、名称为 "custom" 的图标。

  • DataContainerPropertyParser。从对应视图的 ViewData 对象中返回具有给定 ID 的 数据容器。

  • DataLoaderPropertyParser。从对应视图的 ViewData 对象中返回具有给定 ID 的 数据加载器。