Add Multilingual Support to Your Java Web Pages | WebReference

Add Multilingual Support to Your Java Web Pages

By Rob Gravelle


[next]

Locale-sensitive methods in JavaScript, such as those that perform formatting of numbers and date/time values, do so based on the default locale of the browser. This value may not necessarily match the locale of the user's PC because the browser locale is part-and-parcel of the browser build version.

In some cases, the reliance on the browser's default locale may not be the most favorable option. In fact, the Web 2.0 style does not support this paradigm at all. Instead, most International websites offer visitors the option of selecting their preferred language and/or country so that their experience can be tailored to their particular tastes.

In this follow up to the JavaScript's Lack of i18n Support and What It Means for You article, I explore one solution for implementing multilingual support to your Web pages and client-side scripts using Java Servlets and JSPs. Later, I'll explore some existing frameworks that might also fit the bill.

Controlling the Presentation Locales

Corporations know how to maximize user satisfaction, and by extension, sales. They spend a lot of money on the compiling and dissection of Web statistics in order to make the user's experience the best it can be and most conducive to a purchase of their products. From Coca-Cola to McDonalds to Nike, modern companies are a global affair. As such, they want visitors from all parts of the world to feel equally welcome on their sites. Case in point, the Jaguar company has sites for most major countries, accessible via links on their home page:

Figure 1. Jaguar International Homepage

Clicking on the Germany link brings up the German site, which conforms to the "de_DE" locale:

Figure 2. Jaguar German Homepage

(BTW, I will happily accept donations for that car.)

The Jaguar pages are built using Flash in order to provide very dynamic graphics and other multimedia content. Other sites, such as Expedia, !Yahoo Finance and Google Maps, provide highly interactive content using more "traditional" Web technologies.

Fetching Labels at Runtime

In the previous article, I explained how to insert multilingual content in to JavaScript literals using server-side technologies. That technique took advantage of the fact that server-side code gets executed before sending the page to the browser. This allows you to utilize the i18n capabilities of the server-side programming language to fetch the values based on either the browser's default locale or one the user chooses.

The drawback to this approach was that you could not change the values after the page had loaded. A more flexible way to fetch labels is to use Ajax with Dynamic HTML on the client side. Using this combination, you can update any part of the page without reloading everything.

The i18nSupportTestPage.jsp Source

The following page presents a welcome message to the visitor. It is contained in an <H1> tag with an ID of "welcome". Rather than provide the text using server-side <%=variable%> tags as I did in the previous article, I use some unobtrusive JavaScript and Ajax to accomplish the same thing on this page. In fact, the JavaScript is so unobtrusive that there is no indication in the HTML source that the value of the heading is multilingual! The only hint to the presence of dynamic content on the page is the references to two JavaScript files. The Protoype.js script, although optional, is highly recommended for making Ajax calls easier. I simplified things even further by writing my own AjaxCall() method in my i18n_support.js script:

The i18n_support.js Script

All of the client-side i18n functionality resides in this script. It makes use of several Prototype features, such as Event.observe(), Element.observe(), and of course, the Ajax.Request object. The Event.observe() handler acts as a sink to the window onload event in order to initialize other handlers and retrieve the initial value of the welcome message. My AjaxCall() method adds some additional checks and error handling. Once the framework is in place, a label can be set with only one or two lines of code (see lines 4 and 5 below):


[next]