checkbox

checkbox — компонент с двумя состояниями: выбран или не выбран.

XML-элемент

checkbox

Java-класс

JmixCheckbox

Основы

ДЕМО

Пример использования checkbox:

<checkbox id="carField" label="I have a car"/>

checkbox связанный с данными

ДЕМО

Привязка данных означает связывание визуального компонента с контейнером данных. Изменения в визуальном компоненте или соответствующем контейнере данных могут вызывать обновления друг друга. Смотрите Использование компонентов данных для получения дополнительной информации.

Следующий пример создаёт checkbox, связанный с данными. Атрибут сущности должен быть типа Boolean.

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <checkbox id="activeCheckbox"
              label="Checkbox connected to a container"
              dataContainer="customerDc"
              property="active"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

Контейнер экземпляра customerDc загружает сущность Customer с локальными атрибутами. Атрибут dataContainer связывает компонент с контейнером, а property выбирает логический атрибут active.

Состояния

checkbox может находиться в нескольких состояниях, определяющих его внешний вид и функциональность.

Enabled

  • Включено: Флажок интерактивный и реагирует на действия пользователя. Пользователи могут щелкнуть по нему, чтобы изменить его состояние.

  • Отключено: Флажок неактивен и не реагирует на действия пользователя. Визуально он часто отображается серым цветом, чтобы указать на его неактивное состояние.

<checkbox label="The enabled checkbox"
          value="true"
          enabled="true"/>
<checkbox label="The disabled checkbox"
          enabled="false"
          value="true"/>

Только чтение

Атрибут readOnly управляет возможностью взаимодействия пользователя с компонентом checkbox. Если он установлен в true, флажок становится доступным только для чтения, то есть пользователь не может изменить его состояние.

<checkbox label="The readOnly checkbox"
          value="true"
          readOnly="true"/>
<checkbox label="The editable checkbox"
          readOnly="false"
          value="true"/>

Indeterminate

Атрибут indeterminate управляет тем, находится ли флажок в неопределённом состоянии. Это состояние представляет собой ситуацию, когда флажок не полностью отмечен и не полностью снят.

Визуально это меняет внешний вид флажка, чтобы указать на неопределённое состояние.

В соответствии со стандартом HTML5, это влияет только на внешний вид, а не на значение "checked". 
<checkbox label="With indeterminate state = true"
          value="false"
          indeterminate="true"/>
<checkbox label="With indeterminate state = false"
          indeterminate="false"
          value="false"/>

Required

Компонент можно настроить как обязательный, используя атрибут required или связав его с обязательным атрибутом c @NotNull валидацией.

Как и поля ввода, checkbox пройдёт проверку @NotNull, только если он отмечен. Поведение по умолчанию можно изменить с помощью свойства jmix.ui.component.checkbox-required-state-initialization-enabled, которое позволяет считать неотмеченное состояние значением false.

События клика мыши

Событие com.vaadin.flow.component.ClickEvent генерируется при клике на компонент. Этот обработчик должен указать один из трех следующих субъектов, чтобы определить количество кликов, связанных с событием.

  • click - запускает событие при каждом клике на компонент.

  • singleClick - запускает событие после таймаута, чтобы убедиться, что это не двойной щелчок.

  • doubleClick - запускает событие, когда по компоненту происходит двойной щелчок.

Например:

Событие com.vaadin.flow.component.ClickEvent отправляется, когда пользователь кликает по флажку.

@Autowired
private Notifications notifications;

@Subscribe(id = "checkbox", subject = "clickListener")
public void onCheckboxClick(final ClickEvent<JmixCheckbox> event) {
    if (event.getSource().getValue()){
        notifications.show("Set");
    } else {
        notifications.show("Not set");
    }
}

Атрибуты

checkbox имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

enabled

Устанавливает компонент явно отключенным или включенным. См. Включенное состояние.

true

indeterminate

Установите неопределённое состояние checkbox. См. Неопределённое состояние.

false

readOnly

Указывает, находится ли компонент checkbox в режиме только для чтения. См. Состояние только для чтения.

false

required

Установите необходимое состояние checkbox. См. Требуемое состояние.

false

value

Задаёт значение компонента.

—

checkbox имеет следующие общие атрибуты:

id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - clickShortcut - colspan - css - dataContainer - focusShortcut - height - label - maxHeight - maxWidth - minHeight - minWidth - property - tabIndex - visible - width

Обработчики

checkbox имеет следующие уникальные обработчики:

Имя Описание

ClickEvent

com.vaadin.flow.component.ClickEvent запускается при щелчке по компоненту. См. Нажмите «События».

checkbox имеет следующие общие обработчики:

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent

Элементы

Компонент checkbox может содержать следующие вложенные элементы: tooltip.

Смотрите также