Today I will present a short tutorial on how to implement internationalization feature in your JSF 2.0 web application. This tutorial is based on the previous one called Java EE 6 – Getting Started (maven, CDI and persistence) ready project.
We will continue from that point and add simple i18n feature with language switching capabilities.
First of all you need to define available languages for your application in faces-config.xml found in (src/main/webapp/WEB-INF/faces-config.xml
<!-- This file is not required if you don't need any extra configuration. -->
<faces-config version="2.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
<!-- Write your navigation rules here. You are encouraged to use CDI for creating @Named managed beans. -->
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>pl</supported-locale>
</locale-config>
<resource-bundle>
<base-name>com.softwarepassion.j2ee6tutorial.messages</base-name>
<var>msg</var>
</resource-bundle>
</application>
</faces-config>
As you can see, I have defined support for two languages here, ‘pl’ – Polish and English which is the default one.
In order to use your language specific messages you need to define ‘.properties’ file for each single language.
Place your files in /src/main/resources/name/of/your/package/*.properties’ We will start with the english version first (messages.properties):
I have added just one single property for the string key called ‘Title’
Do the same for the second properties file called ‘messages_pl_PL.properties’ and place the file in the same location. As you have probably noticed already, the file for each language must follow simple naming convention like messages_+your language code+.properties
Now its time to actually implement i18n handling logic. To save selected language for each user we will use the most natural option which is a session scoped JSF managed bean.
import java.util.Locale;
import java.util.logging.Logger;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
/**
* Used for managing i18n in application for each user
* @author Krzysztof Grajek
*
*/
@ManagedBean
@SessionScoped
public class LanguageSwitcher implements Serializable {
private static final long serialVersionUID = 2756934361134603857L;
private static final Logger LOG = Logger.getLogger(LanguageSwitcher.class.getName());
private Locale locale = FacesContext.getCurrentInstance().getViewRoot().getLocale();
public Locale getLocale() {
return locale;
}
public String getLanguage() {
return locale.getLanguage();
}
/**
* Sets the current {@code Locale} for each user session
*
* @param languageCode - ISO-639 language code
*/
public void changeLanguage(String language) {
locale = new Locale(language);
FacesContext.getCurrentInstance().getViewRoot().setLocale(locale);
}
}
Once we have properties files defined, created our session scoped managed JSF bean, its time to wire it up in your xhtml documents.
I will add all language switching code inside my xhtml template which is used throughout the project as the template for all xhtml documents.
Locate your template file called ‘default.xhtml’ (src/main/webapp/WEB-INF/templates/default.xhtml) and add change it to the following:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="#{languageSwitcher.language}"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view locale="#{languageSwitcher.locale}">
<h:head>
<title>Java EE 6 Starter Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h:outputStylesheet name="css/screen.css"/>
</h:head>
<h:body>
<div id="container">
<div id="content">
<div id="sidebar">
<h3>Language switcher:</h3>
<h:form id="langauge_form">
<h:commandLink action="#{languageSwitcher.changeLanguage('pl')}" value="Polski" /> |
<h:commandLink action="#{languageSwitcher.changeLanguage('en')}" value="English" />
</h:form>
</div>
<ui:insert name="content">
[Template content will be inserted here]
</ui:insert>
</div>
<div id="footer">
<h:graphicImage value="/resources/gfx/weld.png" alt="Weld logo"/>
<p>
This project was generated from a Maven archetype maintained by the Weld team.<br/>
Weld is the reference implementation of CDI, released under the Apache License, Version 2.0.<br/>
</p>
</div>
</div>
</h:body>
</f:view>
</html>
Final webpage with language switcher:
You can download the project files from here: sp_J2EE6Tutorial