listBox

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

XML-элемент

listBox

Java-класс

JmixListBox

Основы

ДЕМО

listBox можно заполнить программно с помощью setItems(). Между отдельными элементами можно вставлять компоненты, например разделители.

XML
<vbox width="AUTO">
    <h4 text="Simple ListBox"/>
    <listBox id="listBox"/>
</vbox>
<vbox width="AUTO">
    <h4 text="ListBox with separator"/>
    <listBox id="listBox2"/>
</vbox>
Java
@ViewComponent
protected JmixListBox<String> listBox;
@ViewComponent
protected JmixListBox<String> listBox2;

@Subscribe
protected void onInit(InitEvent event) {
    List<String> items = List.of("Jmix", "Vaadin", "SpringBoot", "EclipseLink");
    listBox.setItems(items);
    listBox2.setItems(items);

    listBox.setValue("Jmix");
    listBox2.setValue("Jmix");

    listBox2.addComponents("Vaadin", new Hr());
}

Элементы из контейнера данных

ДЕМО

Используйте itemsContainer, чтобы заполнить компонент сущностями из контейнера коллекции.

<data>
    <collection id="productsDc"
                class="io.jmix.uisamples.entity.Product"
                fetchPlan="_local">
        <loader id="productsDl">
            <query>
                <![CDATA[select e from Product e]]>
            </query>
        </loader>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
<layout>
    <listBox itemsContainer="productsDc"/>
</layout>

Элементы перечисления

Используйте itemsEnum, чтобы заполнить listBox значениями перечисления:

<listBox itemsEnum="com.company.onboarding.entity.OnboardingStatus"/>

Элементы, недоступные для выбора

ДЕМО

itemEnabledProvider применяется к каждому элементу этого listBox, чтобы определить, должен ли элемент быть активным (true) или неактивным (false). Неактивные элементы отображаются серым цветом, и пользователь не может их выбрать. По умолчанию все элементы активны.

Представьте, что listBox отображает список пользователей. Вы хотите, чтобы только пользователи со статусом "Завершен" в обучении были активны, а пользователи со статусами "В процессе" или "Не начато" - неактивными.

@ViewComponent
protected JmixListBox<Product> listBox;

@Subscribe
protected void onInit(InitEvent event) {
    initListBox();
}

protected void initListBox() {
    listBox.setItems(getListBoxItems());
    listBox.setItemEnabledProvider(product -> product.count() > 0);
}

@Supply(to = "listBox", subject = "renderer")
protected ComponentRenderer<Text, Product> listBoxRenderer() {
    return new ComponentRenderer<>(product -> new Text(product.getDisplayName()));
}

protected Collection<Product> getListBoxItems() {
    return List.of(
            new Product("TV set", 4),
            new Product("Keyboard", 13),
            new Product("Earphones", 0),
            new Product("Telephone", 23),
            new Product("Laptop", 0)
    );
}

В этом примере itemEnabledProvider проверяет статус каждого пользователя. Только пользователи со статусом OnboardingStatus.COMPLETED будут отображаться как активные в listBox.

Рендеринг элементов

ДЕМО

Фреймворк предоставляет гибкость в настройке отображения элементов. Вы можете использовать либо метод setRenderer(), либо аннотацию @Supply, чтобы добиться этого.

XML
<layout classNames="list-box-custom-renderer">
    <listBox id="listBox"/>
</layout>
Java
protected static final String PATH_PREFIX = "/META-INF/resources/icons/";

@ViewComponent
protected JmixListBox<Simpson> listBox;

@Autowired
protected UiComponents uiComponents;
@Autowired
protected Resources resources;

@Subscribe
protected void onInit(InitEvent event) {
    listBox.setItems(getListBoxItems());
}

@Supply(to = "listBox", subject = "renderer")
protected ComponentRenderer<HorizontalLayout, Simpson> listBoxRenderer() {
    return new ComponentRenderer<>(simpson -> {
        HorizontalLayout row = uiComponents.create(HorizontalLayout.class);
        row.setAlignItems(FlexComponent.Alignment.CENTER);

        Avatar avatar = uiComponents.create(Avatar.class);
        avatar.setImageHandler(getSimpsonImageHandler(simpson));

        Span name = new Span(simpson.name());
        Span shortName = new Span(simpson.shortName());
        shortName.addClassNames("short-name");

        VerticalLayout column = uiComponents.create(VerticalLayout.class);
        column.add(name, shortName);
        column.setPadding(false);
        column.setSpacing(false);

        row.add(avatar, column);
        row.addClassName("row");
        return row;
    });
}

protected List<Simpson> getListBoxItems() {
    return List.of(
            new Simpson("Homer Jay Simpson", "Homer", "homer-simpson.png"),
            new Simpson("Marjorie Jacqueline Simpson", "Marge", "marge-simpson.png"),
            new Simpson("Bartholomew Jojo Simpson", "Bart", "bart-simpson.png")
    );
}

protected DownloadHandler getSimpsonImageHandler(Simpson simpson) {
    String picture = simpson.picture();
    return DownloadHandler.forClassResource(getClass(), PATH_PREFIX + picture);
}

В качестве альтернативы вы можете отображать элементы, используя вложенный элемент fragmentRenderer. Дополнительную информацию смотрите в разделе Рендерер фрагментов.

Атрибуты

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

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

itemsContainer

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

—

itemsEnum

Задаёт перечисление элементов.

—

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

id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - height - maxHeight - maxWidth - minHeight - minWidth - readOnly - visible - width

Обработчики

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

Имя Описание

itemEnabledProvider

Определяет, включен ли каждый элемент. См. Отключенные элементы.

itemsLabelGenerator

Предоставляет текст, отображаемый для каждого элемента.

renderer

Предоставляет компонент для отображения каждого элемента. See Рендеринг предметов.

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

AttachEvent - ComponentValueChangeEvent - DetachEvent

Элементы

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

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