How to implement i18n in a GWT application?

Question

I have a problem with internationalization. I am trying to implement bilingual support in my GWT application. Unfortunately, I did not find a complete example of how to do this using UiBinder. Here is what I did:

My module is I18nexample.gwt.xml :

<?xml version="1.0" encoding="UTF-8"?> <module rename-to='i18nexample'> <inherits name="com.google.gwt.user.User" /> <inherits name='com.google.gwt.user.theme.clean.Clean' /> <inherits name="com.google.gwt.i18n.I18N" /> <inherits name="com.google.gwt.i18n.CldrLocales" /> <entry-point class='com.myexample.i18nexample.client.ExampleI18N' /> <servlet path="/start" class="com.myexample.i18nexample.server.StartServiceImpl" /> <extend-property name="locale" values="en, fr" /> <set-property-fallback name="locale" value="en" /> </module> 

My Message.java interface:

 package com.myexample.i18nexample.client; import com.google.gwt.i18n.client.Constants; public interface Message extends Constants { String greeting(); } 

There are three properties files in the same package com.myexample.i18nexample.client :

Message.properties

 greeting = hello 

Message_en.properties

 greeting = hello 

Message_fr.properties

 greeting = bonjour 

My UiBinder Greeting.ui.xml file:

 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" ui:generateFormat="com.google.gwt.i18n.rebind.format.PropertiesFormat" ui:generateKeys="com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator" ui:generateLocales="default" > <ui:with type="com.myexample.i18nexample.client.Message" field="string" /> <g:HTMLPanel> <ui:msg key="greeting" description="greeting">Default greeting</ui:msg> </g:HTMLPanel> </ui:UiBinder> 

When the application starts, I always get the output in the browser:

 Default greeting 

Why? What am I doing wrong?

I tried to run the application from a different url:

 http://127.0.0.1:8888/i18nexample.html?gwt.codesvr=127.0.0.1:9997 http://127.0.0.1:8888/i18nexample.html?locale=en&gwt.codesvr=127.0.0.1:9997 http://127.0.0.1:8888/i18nexample.html?locale=fr&gwt.codesvr=127.0.0.1:9997 

The result does not change. Although in the latter case, I was expecting a bonjour message.

If, for example, I use g:Buttton instead of the ui:msg message:

 <g:HTMLPanel> <g:Button text="{string.greeting}" /> </g:HTMLPanel> 

Then I get a button with the text "hello" as a result

And if I provide the url:

 http://127.0.0.1:8888/i18nexample.html?locale=fr&gwt.codesvr=127.0.0.1:9997 

The button text changes to "bonjour" . Here everything works as expected. But why does internationalization not work in my first case?

And is there a difference between the following:

 <ui:msg description="greeting">Default greeting</ui:msg> <ui:msg description="greeting">hello</ui:msg> <ui:msg description="greeting"></ui:msg> 

Should there be different results in these cases? How to write?

Please explain to me the principles of internationalization in GWT and why my example does not work. Any suggestions would be greatly appreciated.

Answer 1

First, the files should be named Message_fr.properties (respectively Message_en.properties ), and not Message_fr.properties (respectively Message_en.properties ).

Then ui:msg et al. in UiBinder will generate an interface (extension com.google.gwt.i18n.client.Messages )), and not use the one you defined. To do this, you need to use {string.greeting} (where string is the ui:field that you pointed to ui:with ). The UiBinder generator will execute GWT.create() in the type class of your ui:with , which you would do in Java code:

 Message string = GWT.create(Message.class); String localizedGreeting = string.greeting(); 

In the implicit message interface (generated by UiBinder), various ui:generateXxx attributes on ui:UiBinder will be converted to annotations on the interface ( @Generate properties or @GenerateKeys annotation @GenerateKeys ).
Then, one method will be created for each ui:msg , where the attributes generate equivalent annotations ( @Key , @Description ), and the content of the ui:msg element is the value of the @DefaultMessage annotation. When you have or widgets inside the content, they will be converted into method arguments and placeholders in the text of @DefaultMessage (the values ​​will be filled using UiBinder).

I suggest that you first do something without UiBinder, and understand how it works; then try ui:msg in UiBinder using -gen in DevMode or the compiler so you can pinpoint which code UiBinder generates (yes, it really only generates code that you could write manually).

In addition, you must add <set-property name="locale" value="en, fr" /> or you will still have the default locale, despite set-property-fallback (it will never be used)).