如何在 Vaadin 10 组合框中添加语言标志 [英] How to Add Language flags in Vaadin 10 Combo box
问题描述
如何在 Vaadin 10 Como 框中添加语言标志
您可以使用 comboBox.setRenderer()
来构建您自己的将要使用的布局.
comboBox.setRenderer(new ComponentRenderer(language -> {HorizontalLayout layout = new HorizontalLayout();layout.add(new Image(language.getPathToFlag(), language.getName()));layout.add(new Label(language.getName()));返回布局;}));
此示例将使用图像和标签执行基本的 HorizontalLayout.您当然可以根据自己的需要进一步调整.我在这里使用了
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屋!