listBox

ДЕМО

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

XML-элемент

listBox

Java-класс

JmixListBox

Атрибуты

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

Обработчики

AttachEvent - ComponentValueChangeEvent - DetachEvent - itemEnabledProvider - itemsLabelGenerator - renderer

Элементы

fragmentRenderer - tooltip

Основы

listbox можно заполнить элементами из перечисления или коллекции сущностей.

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

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

В случае с сущностями, сначала определите контейнер коллекции, а затем передайте его название в атрибут itemsContainer:

<data>
    <collection class="com.company.onboarding.entity.City" id="citiesDc"> (1)
        <fetchPlan extends="_base"/>
        <loader id="citiesDl">
            <query>
                <![CDATA[select e from City e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <listBox itemsContainer="citiesDc"/> (2)
</layout>
1 CollectionContainer для сущности City.
2 citiesDc установлен в качестве контейнера элементов для компонента.
list box basics

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

ДЕМО

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

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

@Install(to = "listBox", subject = "itemEnabledProvider")
private boolean listBoxItemEnabledProvider(final User user) {
    if (user == null) {
        return true;
    }
    return user.getOnboardingStatus() == OnboardingStatus.COMPLETED;

}

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

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

ДЕМО

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

<listBox id="listBox" itemsContainer="usersDc"/>
@Autowired
private UiComponents uiComponents;
@Autowired
private FileStorage fileStorage;

@Supply(to = "listBox", subject = "renderer")
private ComponentRenderer<HorizontalLayout, User> listBoxRenderer() {
    return new ComponentRenderer<>(user -> {
        FileRef fileRef = user.getPicture();
        HorizontalLayout row = uiComponents.create(HorizontalLayout.class);
        row.setAlignItems(FlexComponent.Alignment.END);
        if (fileRef != null) {
            Image image = uiComponents.create(Image.class);
            image.setWidth("30px");
            image.setHeight("30px");
            image.setClassName("user-picture");
            StreamResource streamResource = new StreamResource(
                    fileRef.getFileName(),
                    () -> fileStorage.openStream(fileRef));
            image.setSrc(streamResource);
            row.add(image);
        }
        row.add(new Span(user.getFirstName() + ", " + user.getLastName()));
        return row;
    });
}

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

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

Смотрите документацию Vaadin для получения дополнительной информации.