language-select

Language Picker for Vaadin 14

View larger

Close

This Component is intended for Vaadin 14 Applications that use an I18NProvider. It is a Language Picker based on the Select component from Vaadin.

Changing the Language with this component will automatically set a new Locale in the VaadinSession and all UI's that belong to that Session. It will trigger the localeChange(LocaleChangeEvent event) function of every opened View that implements LocaleChangeObserver, so that any translated labels and strings can be re-translated in the new language and replaced in the View without reloading.

You can now also choose to set a language cookie upon value change, so you can manually set the Session Locale to the used Locale upon Session-Init. See Code Samples for how to do that. Using the Constructor without a boolean parameter will NOT set language cookies upon value change.

LANGUAGE FLAGS:
You need to provide a flag image for each Locale/Language that you will add as item. Place these images in img/languageflags/ folder, and name them [language_code].png
For example en.png for english flag.

To find out where the img folder should be, see https://stackoverflow.com/questions/57553973/where-should-i-place-my-vaadin-10-static-files It will either be /src/main/webapp/img or /src/main/resources/META-INF/resources/img

Warning: if using Spring Security, you need to ignore '/img/**' in your WebSecurityConfigurerAdapter::configure(WebSecurity web). I will fix that in next version by using /images folder instead of /img.

TRANSLATIONS OF LANGUAGE NAMES:
In the ResourceBundle that your I18NProvider implementation uses, add Translations for each Locale/Language that you will use. The keys must be named LanguageSelect.[language_code]
For example LanguageSelect.en=English in the English resourcebundle-file, and LanguageSelect.en=Inglés in the Spanish resourcebundle-file

Sample code

@Route(value = "TestView")
@PreserveOnRefresh
public class LanguageSelectTestView extends HorizontalLayout implements LocaleChangeObserver {
    private LanguageSelect langSelect;
    private Label helloWorld;

    public LanguageSelectTestView(){
        boolean useLanguageCookies = true;
        langSelect = new LanguageSelect(useLanguageCookies, new Locale("de"), new Locale("fr"), new Locale("en"));
        add(langSelect);

        helloWorld = new Label(getTranslation("HelloWorld"));
        add(helloWorld);
    }

    @Override
    public void localeChange(LocaleChangeEvent event) {
        helloWorld.setText(getTranslation("HelloWorld"));
    }
}

@Component
public class ApplicationServiceInitListener implements VaadinServiceInitListener {

    @Override
    public void serviceInit(ServiceInitEvent event) {
        LanguageSelect.readLanguageCookies(event);
    }
}

Links

Compatibility