Directory

← Back

language-select

Language Picker for Vaadin 14

Author

Rating

Popularity

200+

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

cleaned own pom file to not include any unnecessary dependencies

Released
2020-11-23
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Browser
N/A

language-select - Vaadin Add-on Directory

Language Picker for Vaadin 14 language-select - Vaadin Add-on Directory
This Component is intended for Vaadin 14 Applications that use an [I18NProvider](https://vaadin.com/docs/v14/flow/advanced/tutorial-i18n-localization.html). 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
Online