CheckBox
CheckBox
is a component with two states: selected or deselected.
Component’s XML-name: checkBox
.

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