可视化组件

Jmix 视图是使用可视化组件进行构建,这些可视化组件具有服务端的 Java 接口并且可以在 XML 中使用相应的 XML 元素进行声明。

例如,下面的 XML 描述定义了一个视图,展示一个文本控件、一个按钮和一个标签:

<view xmlns="http://jmix.io/schema/flowui/view">
    <layout>
        <textField id="nameField"
                   placeholder="Enter your name"
                   datatype="string"/>
        <button id="helloButton" text="Say Hello"/>
        <div id="greetingsLabel"/>
    </layout>
</view>

在这个视图的 Java 类中,可以监听按钮的点击事件、获取文本控件的值并设置给标签:

@ViewComponent
private TypedTextField<String> nameField;

@ViewComponent
private Div greetingsLabel;

@Subscribe("helloButton")
private void onHelloButtonClick(ClickEvent<Button> event) {
    greetingsLabel.setText("Hello " + nameField.getTypedValue());
}

可以看到,文本控件通过 Java 中的 TypedTextField 类表示。TypedTextField 继承自 Vaadin 的 TextField 组件,并添加了对不同类型值的支持、数据绑定以及其他 Jmix 特定的功能。

标签是使用了 Vaadin 的 Div 组件,表示 HTML 的 div 元素。

一般来讲,Jmix 中的每个可视化组件都由下列部分组成:

  1. Component 为基类的 Java 类。可以是一个标准的 Vaadin 组件、组件的扩展版本、还可能是基于 Composite 或完全从头创建的新组件。

  2. 用于在视图 XML 描述中声明式定义该组件的 XML 元素。

  3. 读入 XML 元素然后初始化组件的加载器(Loader)。

第 2、3 项是可选的,你可以直接在视图内初始化任何 com.vaadin.flow.component.Component 的子类然后添加至父组件,即可在网页展示。但是如果组件有 XSD 和加载器类,则更加易于使用。并且,通过添加几个注解,该组件还支持在 Studio 中使用。

Studio 支持在一个可视化设计器中构建视图,提供预预览、组件结构和配置面板。当点击 Add Component 按钮时,Studio 会展示一个可用组件的工具箱:

studio designer 1