Как добавить языковые флаги в Vaadin 10 Combo box - PullRequest
Новая
       14

Как добавить языковые флаги в Vaadin 10 Combo box

0 голосов
/ 13 декабря 2018

Как добавить языковые флаги в поле Vaadin 10 Como

example

1 Ответ

0 голосов
/ 13 декабря 2018

Вы можете использовать comboBox.setRenderer() для создания собственного макета, который будет использоваться. 

comboBox.setRenderer(new ComponentRenderer<HorizontalLayout, MyLanguageClass>(language -> {
    HorizontalLayout layout = new HorizontalLayout();
    layout.add(new Image(language.getPathToFlag(), language.getName()));
    layout.add(new Label(language.getName()));
    return layout;
}));

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

Обратите внимание, что вы все равно должны использовать comboBox.setItemLabelGenerator() в дополнение к comboBox.setRenderer(), потому что средство визуализации не используется для выбранного элемента - только для списка элементов .Насколько я знаю, пока нет возможности использовать средство визуализации для выбранного элемента.

Редактировать для Vaadin 13 / Vaadin 14:
С Vaadin 13+Вы можете использовать Компонент Select для достижения именно того, что вы хотите - выбранная опция также показывает флаг!

private ComponentRenderer<HorizontalLayout, Locale> languageRenderer = new ComponentRenderer<>(item -> {
    HorizontalLayout hLayout = new HorizontalLayout();
    Image languageFlag = new Image("img/languageflags/"+item.getLanguage()+".png", "flag for "+item.getLanguage());
    languageFlag.setHeight("30px");
    hLayout.add(languageFlag);
    hLayout.add(new Span(getTranslation("LanguageSelection."+item.getLanguage())));
    hLayout.setDefaultVerticalComponentAlignment(Alignment.CENTER);
    return hLayout;
});
private Select<Locale> langSelect;

private Select<Locale> buildLanguageSelection() {
    langSelect = new Select<>();
    langSelect.setEmptySelectionAllowed(false);
    langSelect.setRenderer(this.languageRenderer);
    langSelect.setItems(new Locale("de"), new Locale("fr"), new Locale("en"));
    langSelect.setValue(UI.getCurrent().getLocale());
    langSelect.addValueChangeListener(change -> UI.getCurrent().getSession().setLocale(change.getValue()));
    return langSelect;
}

@Override
public void localeChange(LocaleChangeEvent event) {
    // because the renderer uses `getTranslation()`, this will re-translate the shown values using the new Locale.
    // if langSelect.refreshItems() ever becomes public, use that instead
    langSelect.setRenderer(languageRenderer);
}

Редактировать 2: Я опубликовал Class LanguageSelect как дополнение к vaadin репозиторию , которое основано на этом коде, но гораздо прощеиспользовать.Доступно только для Vaadin 14.

LanguageSelect langSelect = new LanguageSelect(new Locale("de"), new Locale("fr"), new Locale("en"));
add(langSelect);

// in localeChange() 
langSelect.refresh();

result using select

...