ValuePicker 值选择器
ValuePicker - 值选择器 组件可展示任意类型的值。由文本框和一组由操作定义的按钮组成。
ValuePicker 是 ValuesPicker、EntityPicker、EntityComboBox 的基类。
组件的 XML 名称:valuePicker。
基本用法
ValuePicker 可以有标题和自定义或预定义操作:
<valuePicker id="valuePicker"
caption="msg://code">
<actions>
<action id="generate"
icon="REFRESH"
description="msg://description"/>
<action id="clear" type="value_clear"/>
</actions>
</valuePicker>
如需创建关联至数据的 ValuePicker,可以用 XML 的 dataContainer 和 property 属性:
<data>
<instance id="userDc"
class="ui.ex1.entity.User">
<fetchPlan extends="_base"/>
<loader/>
</instance>
</data>
<layout spacing="true">
<vbox spacing="true" id="vBox">
<valuePicker id="loginValuePicker"
caption="msg://ui.ex1.entity/User.login"
dataContainer="userDc"
property="login">
<actions>
<action id="generate" icon="REFRESH"/>
</actions>
</valuePicker>
上面的例子中,界面为具有 login 属性的 User 实体定义了 userDc 数据容器。在 ValuePicker 中,dataContainer 属性指向 userDc 数据容器,property 包含实体 login 属性的名称。
默认情况下,用户不能手动输入值。如果设置 fieldEditable 属性为 true,可以启用手动输入。要注意,输入的值不会设置到数据模型。如需处理用户输入,使用 FieldValueChangeEvent 监听器。
下面的例子中,User 实体有 age 属性。我们在 XML 中定义 ageValuePicker,其中 fieldEditable="true":
<valuePicker id="ageValuePicker"
caption="msg://ui.ex1.entity/User.age"
dataContainer="userDc"
property="age"
fieldEditable="true">
<actions>
<action id="clear" type="value_clear"/>
</actions>
</valuePicker>
现在用户可以手动输入值了。如需处理该值(解析为字符串),在控制器订阅 FieldValueChangeEvent:
@Autowired
private ValuePicker<Integer> ageValuePicker;
@Subscribe("ageValuePicker")
public void onAgeValuePickerFieldValueChange(ValuePicker.FieldValueChangeEvent<Integer> event) {
String text = event.getText(); (1)
notifications.create()
.withCaption("Entered value: " + text)
.show();
if (!Strings.isNullOrEmpty(text)) {
ageValuePicker.setValue(Integer.parseInt(text)); (2)
}
}
| 1 | 获取用户输入字符串 |
| 2 | 将解析的值复制给 ageValuePicker |
操作
可以给 ValuePicker 设置自定义或预定义的操作,操作作为按钮显示在右侧。
定义操作可以用 XML 中用内部的 actions 元素或者在控制器中用 addAction() 方法编程式添加。
|
如需在 Jmix Studio 中添加 |
预定义操作
框架只提供了一个预定义操作 - value_clear:
<action id="clear" type="value_clear"/>
用 type 和 id 属性在 XML 中设置预定义操作。
用 addAction() 编程式设置:
@Autowired
protected ValuePicker<String> loginValuePicker;
@Autowired
protected Actions actions;
@Subscribe
protected void onInit(InitEvent event) {
loginValuePicker.addAction(actions.create(ValueClearAction.ID));
}
自定义操作
如需在 XML 中定义自定义操作,可以使用内部的 actions 元素。为 action 指定 id 和 icon 属性:
<valuePicker id="loginValuePicker"
caption="msg://ui.ex1.entity/User.login"
dataContainer="userDc"
property="login">
<actions>
<action id="generate" icon="REFRESH"/>
</actions>
</valuePicker>
然后在界面控制器订阅 Action.ActionPerformedEvent 实现自定义逻辑:
@Subscribe("loginValuePicker.generate") (1)
protected void onLoginValuePickerGenerate(Action.ActionPerformedEvent event) {
loginValuePicker.setValue(RandomStringUtils.randomAlphabetic(5, 10));
}
| 1 | @Subscribe 注解包含 ValuePicker 的 id 以及操作的 id,以“.”分隔。 |
验证
如需验证 ValuePicker 组件的值,可以在内部的 validators 元素使用 validator。
ValuePicker 可以使用下列预定义的 validators:
下面例子中,我们展示为 countryValidField 使用 NotNullValidator:
<entityComboBox id="countryValidField"
caption="Select a country"
optionsContainer="countriesDc">
<validators>
<notNull/>
</validators>
</entityComboBox>
事件和处理器
|
如需使用 Jmix Studio 生成处理器的桩代码,需要在界面 XML 描述或者 Jmix UI 层级结构面板选中该组件,然后用 Jmix UI 组件面板的 Handlers 标签页生成。 或者可以使用界面控制器顶部面板的 Generate Handler 按钮。 |
格式化器
参阅 Formatter。
Validator
为组件添加 validator 实例。如果值验证失败,validator 必须抛出 ValidationException 异常。
如果 预定义 的验证器不能满足要求,可以添加自定义的验证器实例:
@Install(to = "iconComboBox", subject = "validator")
protected void iconComboBoxValidator(FontAwesome icon) {
if (icon != null)
if (icon == FontAwesome.FILE_PDF_O)
throw new ValidationException("The file type you selected " +
"is not currently supported");
}
ValueChangeEvent
参阅 ValueChangeEvent。
ValuePicker XML 属性
|
可以使用 Studio 界面设计器的 Jmix UI 组件面板查看和编辑组件的属性。 |
align - caption - captionAsHtml - css - description - descriptionAsHtml - enable - box.expandRatio - fieldEditable - htmlSanitizerEnabled - icon - id - inputPrompt - stylename - tabIndex - visible - width