3.5.2.1.7. 复选框

在线示例

API 文档

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

该组件对应的 XML 名称： checkBox

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

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

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

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

@Inject
private CheckBox accessField;
@Inject
private Notifications notifications;
@Subscribe
protected void onInit(InitEvent event) {
    accessField.addValueChangeListener(valueChangeEvent -> {
        if (Boolean.TRUE.equals(valueChangeEvent.getValue())) {
            notifications.create()
                    .withCaption("set")
                    .show();
        } else {
            notifications.create()
                    .withCaption("not set")
                    .show();
        }
    });
}

通过 dataContainer 和 property 属性可以创建关联数据源的复选框：

<data>
    <instance id="customerDc" class="com.company.sales.entity.Customer" view="_local">
        <loader/>
    </instance>
</data>
<layout>
    <checkBox dataContainer="customerDc" property="active"/>
</layout>

从这个例子可以看出，这个界面包含了一个关联 Customer 实体的 customerDs 数据容器，Customer 实体具有 active 属性。checkBox 的 dataContainer 属性需要指向一个数据容器；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