twinColumn

twinColumn позволяет пользователям выбирать элементы, перемещая их между доступными и выбранными столбцами.

XML-элемент

twinColumn

Java-класс

TwinColumn

Основы

ДЕМО

Компонент размещает два столбца рядом. В левом находятся доступные для выбора элементы, а в правом — выбранные. Пользователь может выбрать один или несколько элементов и перемещать их между столбцами с помощью кнопок, добавляя в выбор или удаляя из него.

Для создания компонента используйте XML-элемент twinColumn и задайте его атрибут itemsContainer, указав контейнер коллекции. Элементы из этого контейнера будут отображаться в колонках.

Пример создания базового компонента twinColumn:

<data readOnly="true">
    <instance id="productDc"
              class="io.jmix.uisamples.entity.Product"
              fetchPlan="_local">
    </instance>
    <collection id="productTagsDc"
                class="io.jmix.uisamples.entity.ProductTag"
                fetchPlan="_local">
        <loader id="productTagsDl" readOnly="true">
            <query>
                <![CDATA[select e from ProductTag e order by e.name]]>
            </query>
        </loader>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
    <twinColumn id="twinColumn" label="Tags" itemsColumnLabel="Available tags"
                selectedItemsColumnLabel="Selected tags" itemsContainer="productTagsDc"
                dataContainer="productDc" property="tags"/>

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

ДЕМО

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

Для создания twinColumn с привязкой к данным используйте атрибуты dataContainer и property. Атрибут itemsContainer используется для создания списка элементов.

XML
<data readOnly="true">
    <instance id="productDc"
              class="io.jmix.uisamples.entity.Product"
              fetchPlan="_local">
    </instance>
    <collection id="productTagsDc"
                class="io.jmix.uisamples.entity.ProductTag"
                fetchPlan="_local">
        <loader id="productTagsDl" readOnly="true">
            <query>
                <![CDATA[select e from ProductTag e order by e.name]]>
            </query>
        </loader>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
    <twinColumn id="twinColumn" label="Tags" itemsColumnLabel="Available tags"
                selectedItemsColumnLabel="Selected tags" itemsContainer="productTagsDc"
                dataContainer="productDc" property="tags"/>
Java
@ViewComponent
protected InstanceContainer<Product> productDc;
@ViewComponent
protected Span spanValue;

@Autowired
protected Metadata metadata;

@Subscribe
protected void onInit(InitEvent event) {
    Product product = metadata.create(Product.class);
    productDc.setItem(product);
}

@Subscribe("twinColumn")
protected void onTwinColumnValueChange(ComponentValueChangeEvent<TwinColumn<Product>, Product> event) {
    if (productDc.getItem().getTags() == null) {
        return;
    }

    spanValue.setText(getSelectedTagsInstanceName());
}

protected String getSelectedTagsInstanceName() {
    return productDc.getItem().getTags()
            .stream()
            .map(ProductTag::getInstanceName)
            .collect(Collectors.joining(", "));
}

Множественный выбор

ДЕМО

Компонент twinColumn всегда работает в режиме множественного выбора: пользователь может выбрать и переместить несколько элементов. Чтобы разрешить перемещение всех элементов сразу, задайте атрибут selectAllButtonsVisible:

@ViewComponent
protected TwinColumn<String> twinColumn;
@Subscribe("selectAllButtonsCheckbox")
public void onSelectAllButtonsCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    twinColumn.setSelectAllButtonsVisible(event.getValue());
}

Надписи колонок

ДЕМО

Подписи столбцов задаются атрибутами itemsColumnLabel и selectedItemsColumnLabel:

<twinColumn id="twinColumn" label="Shopping list" itemsColumnLabel="Need to buy"
            selectedItemsColumnLabel="Purchased"/>

Порядок элементов

ДЕМО

По умолчанию элементы не сохраняют исходное положение в списке: после перемещения в другой столбец элемент добавляется в конец. Чтобы всегда сохранять исходный порядок, задайте reorderable = "true".

@ViewComponent
protected TwinColumn<String> twinColumn;
@Subscribe("reorderableCheckbox")
public void onReorderableCheckboxValueChange(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    twinColumn.setReorderable(event.getValue());
}

Пользовательские предметы

ДЕМО

Заполнить twinColumn программно можно из списка, отображения «значение — подпись» или перечисления.

XML
<twinColumn id="twinColumnWithList"
            label="Items List"/>
<twinColumn id="twinColumnWithMap"
            label="Items Map"/>
<twinColumn id="twinColumnWithEnum"
            label="Items Enum"/>
Java
@ViewComponent
protected TwinColumn<Integer> twinColumnWithList;
@ViewComponent
protected TwinColumn<Integer> twinColumnWithMap;
@ViewComponent
protected TwinColumn<CustomerGrade> twinColumnWithEnum;

@Subscribe
protected void onInit(InitEvent event) {
    twinColumnWithList.setItems(getItemsList());
    ComponentUtils.setItemsMap(twinColumnWithMap, getItemsMap());
    twinColumnWithEnum.setItems(CustomerGrade.class);
}

protected List<Integer> getItemsList() {
    return List.of(2, 4, 5, 7);
}

protected Map<Integer, String> getItemsMap() {
    Map<Integer, String> itemsMap = new LinkedHashMap<>();
    itemsMap.put(2, "Two");
    itemsMap.put(4, "Four");
    itemsMap.put(5, "Five");
    itemsMap.put(7, "Seven");
    return itemsMap;
}

Варианты темы

ДЕМО

Используйте атрибут themeNames, чтобы применить один или несколько вариантов темы.

Вариант Описание Поддерживается в

no-border

Удаляет внешнюю границу компонента.

Aura, Lumo

no-row-border

Удаляет разделители между строками.

Lumo

checkmarks

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

Lumo

no-spaces-between-actions

Удаляет промежутки между кнопками действий.

Aura, Lumo
Вы можете комбинировать несколько тем, перечисляя их через пробел, чтобы изменить несколько аспектов внешнего вида одновременно.

Атрибуты

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

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

itemsColumnLabel

Устанавливает метку столбца элементов. См. Метки столбцов.

—

itemsContainer

Задаёт контейнер элементов. See Basics.

—

reorderable

Определяет, могут ли пользователи изменять порядок элементов в компоненте. См. Заказ товаров.

—

selectAllButtonsVisible

Определяет, отображаются ли кнопки выбора и очистки всех элементов. См. Мультивыбор.

—

selectedItemsColumnLabel

Устанавливает метку столбца выбранных элементов. См. Метки столбцов.

—

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

id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - dataContainer - enabled - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - themeNames - visible - width

Обработчики

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

Имя Описание

validator

Проверяет значение компонента.

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

AttachEvent - ComponentValueChangeEvent - DetachEvent

Элементы

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