Internationalisation(i18n) in GWT Application

Internationalization is the technique of designing the application to be attuned with different regions or countries where the application needs to be run. Internationalization requires separation of the usage data to be internationalized into properties file. In the Java programming language, internationalization is usually implemented by means of Resource Bundles i.e., a .properties file for each locale that needs to be supported. GWT also uses the same mechanism of implementing internationalization using Resource Bundles.

also read:

• Code Splitting in GWT
• What is Model View Presenter (MVP) in GWT Application?
• History Management in GWT

GWT’s I18N support

GWT provides a module which contains all the core classes and interfaces related to internationalization in the package named com.google.gwt.i18n and the module is com.google.gwt.i18n.I18N . GWT supports two ways of internationalizing the application. They are :

• Static String Internationalization
• Dynamic String Internationalization

In this article we will discuss how to internationalize the application using Static String Internationalization. GWT provides the Static String i18n through
the interfaces like Constants, ConstantsWithLookup and Messages.

Sample Application

The sample application we discuss here demonstrates how to add I18N support to the GWT application. We will create Login application which has support for three locales English, French and Hindi. Let us see the step by step procedure for the same.

Software Requirements

Install the following softwares to run the sample application.

• JDK 1.6
• Eclipse 3.6 IDE
• GWT SDK 2.0.0
• GWT Eclipse Plug-in
• GWT plug-in for IE browser. (to run in development mode)

GWT Project Structure

How to Implement I18N in GWT?

1. Inherit the I18N module and add the locale values to the application
   module file.

• Mention each locale value that the application wants to support by extending the locale value in the Module’s XML file as shown below.

<module>

    <inherits name="com.google.gwt.user.User"/>

   <inherits name="com.google.gwt.i18n.I18N"/>

    <entry-point/>
    <extend-property name="locale" values="fr"/>
    <extend-property name="locale" values="hi"/>

    </module>

From the above configuration of the module file , it indicates that our application supports two locales French and Hindi apart from the default locale.

2. Create .properties file for each locale

• All the resource bundles must have same base name and should differ in their suffix which indicates the locale.
• The message lookup algorithm considers the base name, current locale and key of the message.
• Place all the .properties files in the src package.

AppConstants.properties is for the default locale i.e., english which has the key/value pairs as below.

username: Username
password: Password
login: Login

AppConstants_fr.properties supports French locale. The key/value pairs are as below.

username: Nom d'utilisateur
password: Mot de passe
login: connexion

3.Create an Interface corresponding to the Property Files.

• Create an interface that extends GWTs Constants interface. Resource bundles can be used by binding them to this interface.
• The base name of the property files and the interface name must be same.
• Each method in the interface corresponds to the key in the properties file.

Create the interface as shown below:

public interface AppConstants extends Constants {

String username();
String password();
String login();

}

• If the method name is different from the message key in the properties file then annotate the method with @Key annotation
  to bind the method name to message key in the resource bundle as below.

@Key(“uname”)

String username();

Where uname is the message key in the properties file.

4. Setting up the EntryPoint class.

The last step of the application is to use the Constants interface and values from the properties file.

• Create the interface object through the deferred binding mechanism that is by using GWT.create() method.
• Assign the text to the labels and buttons by using the interface methods which reads the values from the properties file.

AppConstants constants=(AppConstants)GWT.create(AppConstants.class);// Creating Interface object
	public void onModuleLoad() {
		// Getting the values from resource bundle through interface methods
		Label username=new Label(constants.username());
		Label passsword=new Label(constants.password());
		TextBox ubox=new TextBox();
		PasswordTextBox pbox=new PasswordTextBox();
		Button button = new Button(constants.login());
	}

GWT Sample Application

public class LoginI18nDemo implements EntryPoint {
	public LoginI18nDemo () {}
	AppConstants constants=(AppConstants)GWT.create(AppConstants.class);
	public void onModuleLoad() {
		Label username=new Label(constants.username());
		Label passsword=new Label(constants.password());
		TextBox ubox=new TextBox();
		PasswordTextBox pbox=new PasswordTextBox();
		Button button = new Button(constants.login());
		Grid g=new Grid(3,2);
		g.setWidget(0,0,username);
		g.setWidget(0,1,ubox);
		g.setWidget(1, 0, passsword);
		g.setWidget(1,1,pbox);
		g.setWidget(2, 1, button);
		HorizontalPanel links=new HorizontalPanel();
		Anchor french=new Anchor("French",GWT.getHostPageBaseURL()+"?locale=fr");
		Anchor hindi=new Anchor("Hindi",GWT.getHostPageBaseURL()+"?locale=hi");
		links.add(french);
		links.add(hindi);
		links.setSpacing(5);
		RootPanel.get().add(g);
		RootPanel.get().add(links);
	}
}

Conclusion

In this article we learned how to internationalize the GWT application using Static String approach, allowing the user to select the locale in which the application should be rendered. In the next article we will discuss how to Internationalize using Dynamic String approach and how to use Messages Interface.

also read:

• Code Splitting in GWT
• What is Model View Presenter (MVP) in GWT Application?
• History Management in GWT