如何在 Vaadin 10 组合框中添加语言标志 [英] How to Add Language flags in Vaadin 10 Combo box

问题描述

如何在 Vaadin 10 Como 框中添加语言标志

解决方案

您可以使用 comboBox.setRenderer() 来构建您自己的将要使用的布局.

comboBox.setRenderer(new ComponentRenderer(language -> {Horizo​​ntalLayout layout = new Horizo​​ntalLayout();layout.add(new Image(language.getPathToFlag(), language.getName()));layout.add(new Label(language.getName()));返回布局；}));

此示例将使用图像和标签执行基本的 Horizo​​ntalLayout.您当然可以根据自己的需要进一步调整.我在这里使用了

How to Add Language flags in Vaadin 10 Como box

解决方案

You can use comboBox.setRenderer() to build your own layout that will be used.

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;
}));

This example will do a basic HorizontalLayout with an Image and a Label. You can of course adjust this further to your needs. I used a ComponentRenderer here, but you can also use a TemplateRenderer

Please note that you still have to use comboBox.setItemLabelGenerator() in addition to comboBox.setRenderer(), because the renderer is not used for the selected item - only for the item list. As far as I know, there is no way yet to use a renderer for the selected item.

---

Edit for Vaadin 13 / Vaadin 14:
With Vaadin 13+, you can use the Component Select to achieve exactly what you want - the selected option also shows a flag!

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);
}

Edit 2: I published the Class LanguageSelect as an add-on in the vaadin repository which bases on this code but is much simpler to use. Available for Vaadin 14 only.

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

---

这篇关于如何在 Vaadin 10 组合框中添加语言标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！