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

时间:2018-12-13 13:39:36

标签: vaadin

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

example

1 个答案:

答案 0 :(得分:2)

您可以使用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;
}));

此示例将执行带有图像和标签的基本Horizo​​ntalLayout。您当然可以根据需要进一步调整。 我在这里使用了ComponentRenderer,但您也可以使用TemplateRenderer

请注意,除了comboBox.setItemLabelGenerator()之外,您还必须使用comboBox.setRenderer(),因为渲染器不用于所选项目-仅用于项目列表。据我所知,还没有办法为所选项目使用渲染器。


为Vaadin 13编辑:
使用Vaadin 13,您可以使用组件Select来实现所需的功能-选定的选项还会显示一个标志!

Select<Locale> langSelect = new Select<>();
langSelect.setEmptySelectionAllowed(false);
langSelect.setRenderer(new ComponentRenderer<>(item -> {
    HorizontalLayout hLayout = new HorizontalLayout();
    Image languageFlag = new Image("frontend/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;
}));
langSelect.setItems(LanguageDefinitions.SUPPORTED_LANGUAGES);
langSelect.setValue(UI.getCurrent().getLocale());
langSelect.addValueChangeListener(change -> UI.getCurrent().setLocale(change.getValue()));

result using select