HTML localization (i18n)

Flow
1

Hi guys,
I read this [topic]
(https://vaadin.com/docs/v10/flow/advanced/tutorial-i18n-localization.html) where it is explained how to use the localization using java.
How I can do the same operation on the HTML text?

Is possible to localize labels o other text that is present on the HTML files?

Thanks
Gianluca

2

Hi Gianluca. Unfortunately, there is not yet a proper way to do this. We do have some ideas for it and making it easy is in the backlog https://github.com/vaadin/flow/issues/3906, but currently the earliest we would have time for it would be V14 (released June 2019). But, to be honest, it might go later than that too.

Please go +1 the issue for to show your interest and help us prioritize this over other things, if it is important for you.

Cheers,
Pekka

3

Hi Pekka,
thanks for you answer. I am very surprised, since this strongly affects the development of a web application with Vaadin 10.
This means that, currently, it is not feasible to create an enterprise web application, and I need to use ‘old’ approach using all java code to localize the web presentation pages.

It’s a big limitation as well as a big problem!
Thanks
Gianluca

4

Maybe you can use ResourceBundle.

public class LMSMessages {

    public enum MessageLocale {
        EN,
        ES
    }

    public static LMSMessages shared = new LMSMessages();

    private ResourceBundle bundle_en;
    private ResourceBundle bundle_es;

    private LMSMessages(){
        bundle_en = ResourceBundle.getBundle("messages", Locale.ENGLISH);
        bundle_es = ResourceBundle.getBundle("messages", Locale.forLanguageTag("ES"));
    }

    public String getString(String string, MessageLocale locale) {
        if (locale == MessageLocale.EN) {
            return bundle_en.getString(string);
        }
        else if (locale == MessageLocale.ES) {
            return bundle_es.getString(string);
        }

        return bundle_es.getString(string);
    }

...
    public static final String TO = "TO";
    public static final String FROM = "FROM";
    public static final String SUBJECT = "SUBJECT";
    public static final String MESSAGE = "MESSAGE";
    public static final String NEW_MESSAGE = "NEW_MESSAGE";
...
}


public class LMSView extends VerticalLayout {

    protected LMSMessages.MessageLocale locale;

    public LMSView(){
        super();
        locale = LMSMessages.MessageLocale.EN;
    }

    public void setLocale(String lang){
        if (lang.toUpperCase().contains("EN")) {
            locale = LMSMessages.MessageLocale.EN;
        }
        else {
            locale = LMSMessages.MessageLocale.ES;
        }
    }

    public String getString(String string){
        return LMSMessages.shared.getString(string, locale);
    }
}

@Route
@Viewport("width=device-width, initial-scale=1")
@HtmlImport("frontend://styles/global-styles.html")
public class MainView extends LMSView {
...

    public MainView(HttpServletRequest request){

        setClassName("main-layout");
        setLocale(request.getLocale().getLanguage());

        Label userLabel = new Label(getString(LMSMessages.USER));
		...
    }

   ...
}

Every resource file is using unicode codes. You can create unicode resource files with native2ascii java tool.

5

Resource bundle examples.
17403292.jpg

6

Thanks Roberto,
your code is really useful, but implies that all the development should be java side.

Thanks a lot for your help