Using the language bean from XPages Toolkit for Internationalization

Introduction

You have people who tend to tick around where they live and work and you have people who tend to switch location now and then. Especially in Europe which is divided into many countries with many different languages, somehow operating under one flague,  you are sometimes amazed that organizations have not fully adapted to the trend of “travelling” co-workers.

different langiages

If you are lucky an application is presented bilingual but in a lot of occasions an application is presented either in English (when that is the official language of communication) or in a native language where the application is initiated and being used.

But what if that cross-border European co-worker enters the work floor?

Internationalization

Internationalization refers to the process whereby you prepare your application for users from varied geographies. There are two parts to this:

The need for localization is obvious; a German user wants to see an application in German and a French user in French, and so on. Localization involves making different language versions of all the application’s user interface available and ensuring the correct strings are used based on user preferences.

Support in XPages

In the IBM Notes and Domino Application Development wiki you can learn about the support for internationalization in XPages.

In this post I will describe how you can use the language bean that is part of the XPages Toolkit available in OpenNTF.

Sample application

In this post we will build a simple XPages UI which looks as followed:

sample

In a combo-box you get presented a list with available language options. And based upon your selection values will be collected from a set of property files.

I will include a dropbox link to the sample application.

Walkthrough

First: download & install the library. Beside the library there is also a sample application which comes in handy to borrow code from.

Java classes

The following files you will need:

class

Property files

The property files contain the actual string values. The amount of files depends on the number of languages you want to support. In our case 4: English (default), Swedish, German and Dutch. There will be three types of files: general, contacts and keywords.  That makes 12 (4*3) in total.

propfiles

Here is what the files could look like. First the general poperties file:

AppTitle=Language Bean
Formula=Formula
Bean=Bean
NotAvailable=Not Available
SwitchLanguage=Choose Your Language
Select=Select
Header=Demo Language Bean
SubHeader=Register A Person
Submit=Submit

Which becomes in Swedish:

AppTitle=Språk Böna
Formula=Formel
Bean=Böna
NotAvailable=Inte Tillgänglig
SwitchLanguage=Välj Ditt Språk
Select=Välj
Header=Demo Språk Böna
SubHeader=Registrera En person
Submit=Skicka

The contacts properties files:

LastName=Last Name
FirstName=First Name
Gender=Gender
Hair=Hair

In German:

LastName=Nachname
FirstName=Vorname
Gender=Geschlecht
Hair=Har

And at last the keywords properties file:

Male=male
Female=female
White=white
Brown=brown
Black=black
Red=red

Which becomes in Dutch:

Male=mannelijk
Female=vrouwelijk
White=wit
Brown=bruin
Black=zwart
Red=rood

The properties files are “registrered” in the language bean via the following method:

public List<String> getPropertyFileNames() {
List<String> propertyFileNames = new ArrayList<String>();
propertyFileNames.add(“contact”);
propertyFileNames.add(“keywords”);
propertyFileNames.add(“general”);
return propertyFileNames;
}

Layout custom control

My demo app contains 2 pages which demonstrates the 2 options you have with the toolkit: use the language bean or the toolkit @formula.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221; xmlns:xe=”http://www.ibm.com/xsp/coreex”&gt;
<xe:applicationLayout id=”applicationLayout1″><xp:this.facets>
<xp:panel xp:key=”LeftColumn”>
<xe:navigator id=”navigator1″>
<xe:this.treeNodes>
<xe:pageTreeNode page=”/bean.xsp”>
<xe:this.label><![CDATA[#{javascript:xptI18NBean.getValue(“general.Bean”)}]]></xe:this.label>
</xe:pageTreeNode>
<xe:pageTreeNode page=”/formula.xsp”>
<xe:this.label><![CDATA[#{javascript:xptI18NBean.getValue(“general.Formula”)}]]></xe:this.label>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator></xp:panel></xp:this.facets>
<xp:callback facetName=”facet_1″ id=”callback1″></xp:callback>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration navbarText=”Language Bean”
collapsedLeftMenuLabel=”Pages”>
<xe:this.navbarUtilityLinks>
<xe:basicLeafNode
href=”https://quintessens.wordpress.com/&#8221;
label=”Kwintessential Notes” title=”Visit My Site”>
</xe:basicLeafNode>
<xe:basicLeafNode
href=”http://www.openntf.org/main.nsf/project.xsp?r=project/XPages%20Toolkit&#8221;
label=”XPages Toolkit” title=”Visit Project on OpenNTF”>
</xe:basicLeafNode>
</xe:this.navbarUtilityLinks>
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
</xp:view>

Bean XPage

I will spare you the  complete code for the Bean page. Check the download if you want the complete code.  The principle is simple. You collect the value via the following pattern

xptI18NBean.getValue(“[properties file].[key]”)

That could become something like:

xptI18NBean.getValue(“general.SwitchLanguage”)

Switching language

In order to switch language a combobox control is presented with the following code:

<xp:comboBox id=”cbSwitchLanguage” defaultValue=”#{javascript:xptI18NBean.getCurrentLanguage()}”>
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:xptI18NBean.getAllLanguages()}]]>
</xp:this.value>
</xp:selectItems>
<xp:eventHandler event=”onchange” submit=”true” refreshMode=”complete”>
<xp:this.action>
<![CDATA[#{javascript:var sv = getComponent(“cbSwitchLanguage”).getValue()
if(sv != null && sv != “”) {
var locSet:Locale = new Locale(sv);
context.setLocale(locSet);
context.reloadPage();
}}]]>
</xp:this.action>
</xp:eventHandler>
</xp:comboBox>

Language options

The getAllLanguages method in the language bean “registers” the available language options:

public List<String> getAllLanguages() {
List<String> languages = new ArrayList<String>();
languages.add(“en”);
languages.add(“de”);
languages.add(“sv”);
languages.add(“nl”);
return languages;
}

That is basically it!

Formula XPage

This page differs from the Bean page in the way it accesses the property files. It uses a formula which is defined in the XPages Toolkit library.

The formula follows the following pattern:

@XPTLanguageValue(“[properties file].[keyword]”)

Which could become something like:

@XPTLanguageValue(“general.SwitchLanguage”)

Download

A sample application for download is available under the following URL.

Wrapup

I am curious what method you use to make your applications available in multiple languages. Please drop a line how you have solved it.

I found the language bean in the XPages Toolkit very intuitive and easy to use. At least in some cases it solves the problem nice and quickly so my thanks go out to it’s project members.

svenska

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s