Internationalization (i18n) is not a RichFaces feature. So, we will briefly describe it, as we are going to support different locales in our application (as for every real, well-made one).
In order to internationalize text strings, we can use message bundles for every language we would like to support; those bundles are normal properties files that contain the localized version of a string message. For example, if we want to write a "Hello World!" string in a different language, we have to define a label (for example, helloWorld) and use it inside the message bundles.
Let's configure our application for i18n and then make an example for changing the menu bar.
Our seam-gen project is configured for i18n. In fact, if you look inside the /view/resources/WEB-INF/faces-config.xml file, you will find a section configuring supported locales and the default one:
<application> <locale-config> <default-locale>en</default-locale> <supported-locale>bg</supported-locale> <supported-locale>de</supported-locale> <supported-locale>en</supported-locale> <supported-locale>fr</supported-locale> <supported-locale>it</supported-locale> <supported-locale>tr</supported-locale> </locale-config> ... </application>
For now, we just want to support two locales (English and Italian), so we can just remove the other ones.
For every locale, we have an associated message bundle file that you can find in the resource directory it is called messages_<locale>.properties.
Therefore, for the English locale (with en code), we will have messages_en.properties and so on you will find the label with the associated translation inside it; we will see how to use them soon.
Note
Configuring the locale using components.xml
Although the standard JSF way to configure the locales using faces-config.xml works with JBoss Seam, it gives another way to do it using components.xml.
In order to use the "Seam way", just delete the locale configuration from the faces-config.xml file and add the following code to components.xml:
<?xml version="1.0" encoding="UTF-8"?> <components ...other xmlns... xmlns:international="http://jboss.com/products/seam/international"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation= ...other locations... http://jboss.com/products/seam/international http://jboss.com/products/seam/international-2.1.xsd> ...other configuration.. <international:locale-config default-locale="en" supported-locales="en it"/> </components>
There are other features you can enable using Seam to configure i18n, refer to the Seam documentation for more information.
Now that we have configured everything, we can start using i18n for every string we write. As an example, let's edit the /view/layout/menu.xhtml file.
Now it looks like this:
<rich:toolBar xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:rich="http://richfaces.org/rich">
<rich:toolBarGroup>
<h:outputText value="#{projectName}:"/>
<s:link view="/home.xhtml" value="Home" propagation="none"/>
</rich:toolBarGroup>
<rich:toolBarGroup location="right"> <h:outputText value="#{loggedUser.name} #{loggedUser.surname}" rendered="#{identity.loggedIn}"/>
<s:link view="/login.xhtml" value="Login" rendered="#{not identity.loggedIn}" propagation="none"/>
<s:link view="/home.xhtml" action="#{identity.logout}" value="Logout"
rendered="#{identity.loggedIn}" propagation="none" />
</rich:toolBarGroup>
</rich:toolBar>
As you can see, the highlighted lines show that we have the English translation hardcoded into the XHTML this way they can't be changed.
If we want to support i18n, we have to add the label and the respective translation into the messages bundle files let's edit /resource/messages_en.properties and add the following lines:
home=Home login=Log in logout=Log out
Then, let's edit the /resource/messages_it.properties file and add the following lines:
home=Pagina principale login=Accedi logout=Esci
In order to display the localized string in JBoss Seam, we can just use the built-in messages property in either of the following two ways:
<h:outputText value="#{messages.helloWorld}"/>
<h:outputText value="#{messages['helloWorld']}"/>
Therefore, in our case, the menu will look like this:
<rich:toolBar xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:rich="http://richfaces.org/rich">
<rich:toolBarGroup> <h:outputText value="#{projectName}:"/>
<s:link view="/home.xhtml" value="#{messages.home}" propagation="none"/> </rich:toolBarGroup>
<rich:toolBarGroup location="right"> <h:outputText value="#{loggedUser.name} #{loggedUser.surname}" rendered="#{identity.loggedIn}"/>
<s:link view="/login.xhtml" value="#{messages.login}" rendered="#{not identity.loggedIn}" propagation="none"/>
<s:link view="/home.xhtml" action="#{identity.logout}" value="#{messages.logout}" rendered="#{identity.loggedIn}" propagation="none" />
</rich:toolBarGroup>
</rich:toolBar>
We can also use the EL expression inside the resource bundle, in this way:
hello=Hello, #{loggedUser.name} #{loggedUser.surname}
As for the skin, we want the user to be able to change the default locale using a menu. In order to do that, we use built-in Seam components that make our task trivial.
Let's open the layout/template.xhtml file again and add this code before the footer div:
<div class="leftFooter">
<h:form>
<h:selectOneMenu value="#{localeSelector.localeString}">
<f:selectItems value="#{localeSelector.supportedLocales}"/>
</h:selectOneMenu>
<h:commandButton action="#{localeSelector.select}" value="#{messages['changeLanguage']}"/>
</h:form>
</div>
We are using the localeSelector Seam component to get the supported locales list and select the preferred one.
Again, we are using the non-Ajax version of the commandButton component because we want the page to be completely reloaded in order to reflect the new selected locale.
We have also to add the new class to the /view/stylesheet/theme.css file, shown as follows:
.leftFooter {
text-align: left;
font-size: 11px;
float: left;
}
And we need to add the changeLanguage label for the button into the message bundles.
In order to do that, let's open the /resources/messages_en.properties file and add the following line:
changeLanguage=Change language
Now let's open the /resources/messages_it.properties file and add the Italian translation for the same label, shown as follows:
changeLanguage=Cambia lingua
We have to internationalize the "change skin" button and all of the other strings used into the application we have; this repetitive task (that consists of editing the two files as explained for the changeLanguage label) is left as an exercise for the reader.
Note
Default language
The selected language (if the user didn't make a choice) for a Seam application is the one sent by the browser in the HTTP headers, if the application accepts that language. If not, the default locale is selected.
JBoss Seam makes it simple to persist the selected locale in a cookie just add the following line into the components.xml file:
<international:locale-selector cookie-enabled="true"/>
For more information on other features, refer to the Seam framework documentation at http://seamframework.org/Documentation.