Sunday, August 4, 2013

Internationalization(i18n) and Localization(L10N)

Internationalization(i18n):-The process of preparing an application to support more than one language and to represent data in different formats.There are 18 letters between i and n so will refer as i18n

Localization(L10N): -The process of adapting an internationalized application to support a specific region or locale
Lets take an example of Facebook which supports multiple languages like Engilish,Portugal,Hindi etc.
This can be achieved in JSF by using resource bundle.

Steps to Internationalization :-
  • Create a JSF web application in Eclipse
    • Open work space
    • Then New-->Create dynamic web application
    • Select run time environment like Tomcat etc.
    • Place JSF related libraries/Jars into build path(Ex:- ApacheMyFaces.lib etc.)
  • Create a resource bundle :- generally they will be .properties files,where we write text for different languages
  • Loading resource bundle :- There are two ways of implementing
    • faces-config.xml :- use <resource-bundle> is used to i18n for entire application
    • <f:loadBundle> :- is used to i18n for a particule web page

We will now implement i18n and L10N in a web application. We have a login page which supports English and French languages.Text related to this are placed in .properties file
  1. Create two .properties file one for English and One for French languages.Place them under src folder
    ApplicationResource.properties
    LoginId: Login Id:
    Password: Password:
    Login: Login
    Reset: Reset
ApplicationResource_fr.properties
LoginId: Identification d'ouverture :
Password: Mot de passe :
Login: Ouverture
Reset: Remettre à l'état initial
  1. Now we will use this resources in faces-config.xml .We can do this from GUI of faces-config.xml

<application>
<resource-bundle>
<base-name>ApplicationResource</base-name>
<var>msg</var>
</resource-bundle>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>fr_FR</supported-locale>
</locale-config>
</application>
  1. Create a ManagedBean-LoginBean.java and register it in faces-config.xml . We can do this from GUI of faces-config.xml
    LoginBean.java
import java.util.Locale;
import javax.faces.context.FacesContext;

public class LoginBean {
private String uName;
private String password;

public String getuName() {
return uName;
}

public void setuName(String uName) {
this.uName = uName;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}
public String changeFrench()
{
FacesContext.getCurrentInstance().getViewRoot().setLocale(Locale.FRENCH);
return "";
}
}

Explanation :-
In LoginBean.java we have a method changeFrench() which will take care of getting text from properties file and converting it into respective language
FacesContext.getCurrentInstance().getViewRoot().setLocale(Locale.FRENCH);
The above statement is used change language to French
  1. Login.jsp

<f:view>
<h:form>
<h:outputText value="#{msg.LoginId}">
</h:outputText>
<h:inputText value="#{loginBean.uName }"></h:inputText>
<br>
<h:outputText value="#{msg.Password}"></h:outputText>
<h:inputText value="#{loginBean.password }"></h:inputText>
<br>
<h:commandButton value="#{msg.Login}"></h:commandButton>
<h:commandButton value="#{msg.Reset}"></h:commandButton>
<h:commandLink action="#{loginBean.changeFrench }">
<h:outputText value="French"></h:outputText>
</h:commandLink>
</h:form>
</f:view>

Here we have used #{msg.LoginId} etc. statements. The variable msg is declared in faces-config.xml .
Now run the application .By default the page will be in english for converting into French click on link French.
Screenshot of Login.jsp in English :-

Click on French the method changeFrench in LoginBean will get called and converts the text into French


If we want to do it for a specific jsp page we can use
<f:loadBundle var="msg" basename="ApplicationResource"/> after <f:view> tag
Happy Learning

Please provide your valuable comments on this article and share it across your network.


No comments:

Post a Comment

Like and Share