Pages

Wednesday, April 15, 2009

Internationalization

Share it Please
Today we will be seeing how to use Internationalization in a Gwt Application.in order to use Internationalization file in Gwt we need to write a properties file and access it during runtime.

Firstly we will create a properties file with the name “MyConstants.properties” .
This file contains 2 key-value pairs


My_Name=jagadesh
Your_Name=ashok


In Gwt we will create a multi-way of accessing a Constants file. We will be creating a java Interface file which extends another interface called “Constants”. According to the Gwt api, this interface allows us to bind the properties file at compile time .

We will create a Interface called “MyConstants.java”

public interface MyConstants extends Constants {
String My_Name();
String Your_Name();
}

We will be accessing the constants by creating an instance of the java file by using
GWT.create(MyConstants.class);

Now I will access the constants in my Application as ,

public class Application implements EntryPoint {
private MyConstants constants;
public Button showMyName,showYourName;

//OnModuleLoad
public void onModuleLoad() {

constants=(MyConstants)GWT.create(MyConstants.class);

showMyName=new Button("ShowMyName");
showYourName=new Button("ShowYourName");

showMyName.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert(constants.My_Name());
}
});

showYourName.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert(constants.Your_Name());
}
});

RootPanel.get().add(showMyName);
RootPanel.get().add(showYourName);


}//OnModuleLoad()
}

You can see how I access the properties .

In order to use Internationalization , we need to add the package to our Gwt.xml file

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

Another way to use constants with the Gwt is by extending the Messages Interface. This allows us to send arguments at dynamic time where properties are populated with the arguments sent by us. Consider the sample example,

My Properties file looks like this

turnsLeft = Turns left for player {0}:{1}
currentScore = Current score: {0}

in which the turnsLeft takes 2 arguments and second one takes one argument.

Now my Constants interface look as

public interface MyConstants extends Messages {

String turnsLeft(String username, int numTurns);
String currentScore(int numPoints);

}

And from my OnModuleLoad() load I will call as ,

public class Application implements EntryPoint {
private MyConstants constants;
public Button showMyName,showYourName;

//OnModuleLoad
public void onModuleLoad() {

constants=(MyConstants)GWT.create(MyConstants.class);

showMyName=new Button("ShowMyName");
showYourName=new Button("ShowYourName");

showMyName.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert(constants.turnsLeft("jagadesh", 3));
}
});

showYourName.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
//Window.alert(constants.Your_Name());
}
});

RootPanel.get().add(showMyName);
RootPanel.get().add(showYourName);


}//OnModuleLoad()
}

You can check the Response.

U need to take care at one thing , Compile-time checks are performed to ensure that the number of placeholders in a message template (e.g. {0}) matches the number of parameters supplied.

Now lets write a sample code on how to use multiple locale. We may be at a stage where we need to develop a application for multiple language . now iam going to write a sample application where it displays constants for language ‘s English and French.

Let start creating properties files both English and French.

MyConstants.properties

locale=en
turnsLeft = Turns left for player {0}:{1}
currentScore = Current score: {0}

MyConstans_fr.properties

locale=fr
turnsLeft = Turns left for player For French {0}:{1}
currentScore = Current score For French : {0}


u can see the difference for both the constants file. for English the turnsLeft is “Turns left for player {0}:{1}” and for French is “Turns left for player For French {0}:{1}” .

now iam creating a MyConstants Interface.

public interface MyConstants extends Messages {
String locale();
String turnsLeft(String username, int numTurns);
String currentScore(int numPoints);
}

And in my Application.java file

public class Application implements EntryPoint {
private MyConstants constants;
public Button showMyName,showYourName;

//OnModuleLoad
public void onModuleLoad() {

constants=(MyConstants)GWT.create(MyConstants.class);

showMyName=new Button("ShowMyName");
showYourName=new Button("ShowYourName");

showMyName.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
Window.alert(constants.turnsLeft("jagadesh", 3));
}
});

showYourName.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
//Window.alert(constants.Your_Name());
}
});

RootPanel.get().add(showMyName);
RootPanel.get().add(showYourName);
}//OnModuleLoad()
}

In order to run the application with different locales . we need to add the locale definations in .gwt.xml file.



I added the locale definition for French and English. When u run the application u can see the response for English ,




And if you want to see the response for French format , u can just add the locale string to the url in hosted mode browser window .for example , if u have
http://localhost:8888/com.example.Application/Application.html and if u add the locale it looks
http://localhost:8888/com.example.Application/Application.html?locale=fr.when u run the application with url above the application will load the French locale file and response will be like this.




We can add the locale String to the properties file to get which locale is currently in use rather than getting it from the java script using jsni.

No comments :

Post a Comment