Internationalization and Localization of ADF Faces Pages

Requirement: I have a demo.jsf page. In that page I have two links to change the language (English or French). I have two buttons on demo.jsfpage. The buttons are Search button and Cancel button. Initially when  demo.jsf page loads, only one link will be rendered, say French. The text on the link should be French and the text on the buttons should be Search and Cancel. When I click on the link French, the link with text as Englishshould be rendered, and the text in the Search button should change to recherche, and the text in the Cancel button should change to annuler. If we again click on the link, it should change the language again that is the text of the buttons and render the link with French text.

Information: Internationalization is the process of designing and developing products for easy adaptation to specific local languages and cultures. Localization is the process of adapting a product for a specific local language or culture by translating text and adding locale-specific components. A successfully localized application will appear to have been developed within the local culture. JDeveloper supports easy localization of ADF Faces components using the abstract class java.util.ResourceBundle to provide locale-specific resources.

Solution: For solution of the above requirement follow the below steps:

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create a demo.jsf page in the ViewController project of our application created in Step 1.

Step 3: Drag and drop two af:link, two af:button from the component palette in the demo.jsf page created in Step 2.

Step 4: Create two resource bundles named as resourceBundle.properties and resourceBundle_fr.properties.

Step 5: Register the resourceBundle.properties in the faces-config.xml file. Open the faces-config.xml file --> Overview --> Application --> Click the green (+) icon of the resource bundle. Give the Base Name as resourceBundle.properties and Var Name as res. Give Default Locale as en. Give Supported Locale as en, fr as shown below:

Step 6: Go to the demo.jsf page. Give the text for the af:links and af:buttons. The text should be picked from the resourceBundles that is from resourceBundle.properties and resourceBundle_fr.properties.

Thus the text in the resourceBundle.properties and resourceBundle_fr.properties are as below:

Text in resourceBundle.properties is shown below:

Text in resourceBundle_fr.properties is shown below:

Step 7: Set the rendered properties and actionListener of both the af:link. Thus, the complete demo.jsf code is shown below:

Step 8: Inside the LangaugeBean.java write the codes for each of the actionListener. Thus. the complete LanguageBean.java code is as below:

Step 9: Save and Run the application. The ran application is shown below:

On Click of French link the text the link changes to English, the text on the Search button changes to recherche and the text on the Cancel button changes to annuler as shown below:

Again, on Click of English link the text gets changed.

Thus the solution to our requirement.