valuePicker 值选择器

valuePicker 组件可展示任意类型的值。由文本框和一组由操作定义的按钮组成。

  • XML 元素：valuePicker

  • Java 类：JmixValuePicker

基本用法

valuePicker 可以有 label 和自定义或预定义操作：

value picker basic

定义 valuePicker 的示例，这里 label 从本地消息获取，并带有两个操作：

<valuePicker id="valuePicker" label="msg://valuePicker">
    <actions>
        <action id="generate" icon="REFRESH"/>
        <action id="valueClear" type="value_clear"/>
    </actions>
</valuePicker>

如需创建关联至数据的 valuePicker，可以用 XML 的 dataContainer 和 property 属性：

<data>
    <instance class="com.company.onboarding.entity.Step" id="stepDc">
        <fetchPlan extends="_base"/>
        <loader id="stepDl"/>
    </instance>
</data>
<layout>
    <valuePicker dataContainer="stepDc"
                 property="name"
                 label="msg://com.company.onboarding.entity/Step.name">
        <actions>
            <action id="valueClear" type="value_clear"/>
        </actions>
    </valuePicker>
</layout>

上面的例子中，视图为具有 name 属性的 Step 实体定义了 stepDc 数据容器。在 valuePicker 中，dataContainer 属性设置数据容器，property 包含实体需要展示在 valuePicker 中的属性名称。

操作

可以给 valuePicker 设置自定义或预定义的操作，并作为按钮显示在右侧。 定义操作可以用 XML 中用内部的 actions 元素或者在控制器中用 addAction() 方法编程式添加。

如需在 Jmix Studio 中添加 action，可以在视图 XML 或者 Jmix UI 层级面板中选择组件，然后点击 Jmix UI 组件面板的 Add 按钮。

预定义操作

框架只提供了一个预定义操作 - value_clear：

<action id="valueClear" type="value_clear"/>

用 type 和 id 属性在 XML 中设置预定义操作。

用 addAction() 编程式设置：

@ViewComponent
private JmixValuePicker<String> loginValuePicker;

@Autowired
private Actions actions;

@Subscribe
public void onInit(InitEvent event) {
    loginValuePicker.addAction(actions.create(ValueClearAction.ID));
}

自定义操作

如需在 XML 中定义自定义操作，可以使用内部的 actions 元素。为 action 指定 id 和 icon 属性：

<valuePicker id="generateLoginPicker" label="Login">
    <actions>
        <action id="valueClear" type="value_clear"/>
        <action id="generate" icon="REFRESH"/>
    </actions>
</valuePicker>

然后在视图控制器订阅 ActionPerformedEvent 实现自定义逻辑：

@ViewComponent
private JmixValuePicker<String> generateLoginPicker;

@Subscribe("generateLoginPicker.generate")
public void onGenerateLoginPickerGenerate(ActionPerformedEvent event) {
    generateLoginPicker.setValue(RandomStringUtils.randomAlphabetic(5, 10));
}

XML 属性

id - allowCustomValue - autofocus - classNames - colspan - dataContainer - enabled - errorMessage - height - helperText - invalid - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredIndicatorVisible - requiredMessage - tabIndex - themeNames - title - visible - width

allowCustomValue

默认情况下，用户无法手动输入值。但如果设置 allowCustomValue 为 true，则允许用户手动输入。注意，此时手动输入的值并没有设置给数据模型，而需要通过 CustomValueSetEvent 事件对输入值进行自定义处理。

事件和处理器

AttachEvent - BlurEvent - ComponentValueChangeEvent - CustomValueSetEvent - DetachEvent - FocusEvent - formatter - statusChangeHandler - validator

CustomValueSetEvent

io.jmix.flowui.kit.component.valuepicker.CustomValueSetEvent 当用户手动输入值后触发。设置 allowCustomValue 属性启用手动输入。

@Autowired
private Notifications notifications;

@ViewComponent
private JmixValuePicker<String> vPicker;

@Subscribe("vPicker")
public void onVPickerCustomValueSet(
        CustomValueSetEvent<JmixValuePicker<String>, Object> event) {
    String text = event.getText(); (1)
    notifications.create("Entered value: " + text)
            .show();
    if (!Strings.isNullOrEmpty(text))
        vPicker.setValue(text); (2)
}
1 以字符串类型获取用户输入。
2 将值设置给 vPicker。

formatter

为组件添加一个 formatter 实例。

下面的示例中，我们展示 vPicker 值选择器中 formatter 的用法：

@Install(to = "vPicker", subject = "formatter")
private String vPickerFormatter(String value) {
    return value != null ? "Code: " + value : null;
}

如需以编程方式添加 formatter，使用组件的 setFormatter() 方法。

XML 内部元素

tooltip - actions