JSF2 Internationalization example

This tutorial shows how we make an web based application in different languages. I will show here how we can switch in different langugaes like Bengali, Hindi, English, Dutch and French. You don’t need to change the language settings from the browser for switching to different languages. I have given user an option to choose a language in a dropdown where the langugaes are displayed in Bengali, Hindi, English, Dutch and French. If you want you can add more languages and accordingly you need to create separate properties file for each language and configure the supported-locale in faces-config.xml file. This application shows title, welcome message, choose language option and copyright information in Bengali, Hindi, English, Dutch and French languages. By default the selected language is English. You can also set the default language as per your choice, for that you have to configure in the LocaleSwitcher.java managed bean.

Final output

Choose Language

jsf2 internationalization

Default Language – English

jsf2 internationalization

Language – Bengali

jsf2 internationalization

Language – Hindi

jsf2 internationalization

Language – Nederlands(Dutch)

jsf2 internationalization

Language – French

jsf2 internationalization

So here we go how to create an application step by step.

Prerequisites

JDK 1.6
Eclipse (Netbeans better for creating this kind of project)
Tomcat v7
JSF 2 jar – javax.faces.jar

It is assumed that you have a prior knowledge how to configure jdk, Eclipse and Tomcat server together.

1. First we need to create a Dynamic Web Project in Eclipse. Once you create the Dynamic Web Project, the required project structure gets created. Now put the JSF jar file under WEB-INF/lib directory.

2. We then modify the deployment descriptor file for jsf support and welcome file which gets rendered as home page once the application starts up.

 

In the above web.xml file there are several properties as shown below

 

This context-param tells which environment we will use. Environments can be Development, SystemTest, UnitTest, Extension and Production. So we will use here Development because we want to get all the benefits for debugging, testing, error reporting etc. for developing the application. For more info go to https://blogs.oracle.com/rlubke/entry/jsf_2_0_new_feature2

 

The above configuration uses FacesServlet which is related to Java Server Faces. All requests and responses from the client route through this FacesServlet. We have also <load-on-startup/> for loading the FacesServlet at the same time when the application starts up. We can have any value from 0 to 127 for <load-on-startup/>

 

We need to map the URL pattern for each request/response coming from the client. We can have *.jsf, *.faces and *.xhtml for <url-pattern/>. Remember we cannot have multiple URL pattern for JSF application but other application like Struts can have multiple pattern for client requests.

 

The above configuration is required only if are going to use http session for putting some objects in session like login based application.

 

This holds a list of welcome files but remember only one of them will be used – the first one which matches with the URL pattern and file is found in the root directory. Notice that file extension has .jsf because it should match with the URL pattern otherwise it will give you 404 – page not found.

3. We will create properties files for each language Bengali – Messages_bn.properties

 

Hindi – Messages_hi.properties

 

English – Messages.properties

 

Dutch – Messages_nl.properties

 

French – Messages_fr.properties

 

4. Now look at the below JSF Managed Bean LocaleSwitcher.java

 

5. Create face-config.xml file and put it under WEB-INF with the below source code

 

6. We will use template so that we don’t need to copy common things like header/footer and most importantly here is <f:view locale=””/> tag in every page. So put the template file under WEB-INF/template so that it cannot be tempered from outside the world. Netbeans has better support for template file generation. main.xhtml Look at the below template file with <ui:insert/> tag whose content can be overridden by template client file.

 

header.xhtml

 

footer.xhtml

 

7. Now we will look into the index.xhtml file. This is a template client file. Netbeans has better support for template client file generation.

 

8. Simple css styling under resources/css directory. These css files are automatically generated by Netbeans cssLayout.css

 

default.css

 

That’s all. Thanks for your reading. Please do not forget to leave a comment.

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

2 thoughts on “JSF2 Internationalization example

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.