CheckBox

CheckBox is a component with two states: selected or deselected.

Component’s XML-name: checkBox.

check box

Basics

Usage example:

<checkBox id="checkBox"
          caption="Create new document"/>

Selecting/deselecting the CheckBox changes its value: Boolean.TRUE or Boolean.FALSE. You can use getValue() and setValue() methods to get or set the value. Passing null to setValue() changes the value to Boolean.FALSE and unchecks the CheckBox.

ValueChangeListener

You can use the ValueChangeListener method to track changes of the CheckBox value, as well as of any other components implementing the Field interface. For example:

@Autowired
private CheckBox checkBox;
@Autowired
private Notifications notifications;

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

Also, you can use the isUserOriginated() method to track the origin of the ValueChangeEvent.

Data-aware CheckBox

To create the CheckBox associated with data, use dataContainer and property attributes.

<data>
    <instance id="userDc" class="ui.ex1.entity.User">
        <loader/>
    </instance>
</data>
<layout>
        <checkBox dataContainer="userDc"
                  property="enabled"
                  caption="User Property"/>
</layout>

In the example above, the screen includes the description of the userDc data container for a User entity with the enabled attribute. The dataContainer attribute of the CheckBox component contains a reference to a data container. The property attribute contains the name of an entity attribute whose value is displayed by the CheckBox. The attribute should have a Boolean type.

Appearance

The appearance of the CheckBox component can be customized using SCSS variables with $cuba-checkbox-* prefix.

All XML Attributes

align - buffered - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - description - descriptionAsHtml - editable - enable - box.expandRatio - height - htmlSanitizerEnabled - icon - id - property - responsive - rowspan - stylename - tabIndex - visible - width