3.5.2.1.7. 复选框

在线示例

API 文档

CheckBox 是一个拥有两个状态的组件: 选中或者未选中。

CheckBox

该组件对应的 XML 名称: checkBox

通过本地化消息包获取标签的复选框例子:

  1. <checkBox id="accessField" caption="msg://accessFieldCaption"/>

勾选或者取消勾选复选框会改变它的值为 Boolean.TRUE 或者 Boolean.FALSE。这个值可以通过 getValue() 方法获取,也可以通过 setValue() 方法设置。通过 setValue() 设置 null 的话,会把值改成 Boolean.FALSE 然后取消复选框的选择。

复选框值的变化,跟其它组件一样,只要实现了 Field 接口,都可以通过 ValueChangeListener 监听到,ValueChangeEvent 事件的来源可以通过 isUserOriginated() 方法跟踪。比如:

  1. @Inject
  2. private CheckBox accessField;
  3. @Inject
  4. private Notifications notifications;
  5. @Subscribe
  6. protected void onInit(InitEvent event) {
  7. accessField.addValueChangeListener(valueChangeEvent -> {
  8. if (Boolean.TRUE.equals(valueChangeEvent.getValue())) {
  9. notifications.create()
  10. .withCaption("set")
  11. .show();
  12. } else {
  13. notifications.create()
  14. .withCaption("not set")
  15. .show();
  16. }
  17. });
  18. }

通过 dataContainerproperty 属性可以创建关联数据源的复选框:

  1. <data>
  2. <instance id="customerDc" class="com.company.sales.entity.Customer" view="_local">
  3. <loader/>
  4. </instance>
  5. </data>
  6. <layout>
  7. <checkBox dataContainer="customerDc" property="active"/>
  8. </layout>

从这个例子可以看出,这个界面包含了一个关联 Customer 实体的 customerDs 数据容器,Customer 实体具有 active 属性。checkBoxdataContainer 属性需要指向一个数据容器;property 属性需要指向实体中需要展示到复选框控件的字段名字,这个字段必须要是 Boolean 类型。如果这个值是 null,那么复选框是默认为非选中状态。

CheckBox 的展示可以使用带 $cuba-checkbox-* 前缀的 SCSS 变量进行自定义。可以在创建一个 主题扩展 或者一个 自定义主题 之后在可视化编辑器里修改这些变量的值。


复选框组件的属性

align - caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - description - descriptionAsHtml - editable - enable - box.expandRatio - height - icon - id - property - stylename - tabIndex - visible - width

API

addValueChangeListener commit - discard - isModified - setContextHelpIconClickHandler