Designing Internationalized User Interface Components for Web Applications

by David Czarnecki
07/12/2001

Related Reading Java Internationalization By Andy Deitsch, David Czarnecki

In our book, Java Internationalization, we have provided many scenarios where internationalization needs to be designed for in an application, whether it is a stand-alone application or a Web application. Proper design of internationalized Web applications may seem a more daunting task given the fact that your users can access your application from any computer in the world.

In this article, we explore the design of user-interface components, where the application is accessed through a Web browser. We will focus on designing user-interface (UI) components in the form of JavaServer Pages, or JSP, custom tags, which will aid you in developing internationalized user interfaces for a Web application. However, as we state in Chapter 1 ("Introduction to Internationalization") of our book, internationalization needs to be designed for the entirety of the system. This covers all aspects of application development, from handling user input in the proper way to manipulating that input through business logic to displaying the results of processing or returning information to the user.

JSP Custom Tags

As of the JavaServer Pages 1.1 specification, Sun Microsystems introduced an addition to the JSP technology known as custom tags, or custom actions. These tags can be packaged together to form a tag library. Custom tags can be reused across JSP pages in an application and can be used by many developers across different Web applications. A tag is an XML-like entity that is placed within a JSP page, and when a particular tag is encountered in a page, it causes a specific action to be executed on the server. JSP custom tags are a very powerful mechanism for performing complex processing that removes code from the JSP page while encapsulating nontrivial programming logic in a reusable component.

In this short article, we cannot go into all the details regarding the use of JSP custom tags. For a more in-depth overview on their use, please read JavaServer Pages by Hans Bergsten (from O'Reilly), or read Jakarta Taglibs, an O'Reilly Network article that discusses the tag libraries from the Jakarta project. We have used the Tomcat reference implementation in developing the tag library for this article.

Example 1-1 shows the tag library descriptor used to describe the tag library developed in this article. A tag library descriptor tells the JSP engine what Java class to load when a tag is encountered in a JSP page and information regarding the valid attributes that can be set for a given tag. In this article, we develop four different tags with different aspects of internationalizing Web applications in mind. They are as follows:

• Content: Retrieving localized text for display on a Web page.

• Formatting: Displaying items such as numbers, dates, times in a localized fashion.

• Form elements: Localizing the display of form elements such as <SELECT></SELECT> lists.

• Media: Presenting properly localized links or references to items such as graphic or multimedia files.

The other component that you will need to be concerned with in terms of using this tag library in your own Web applications is correctly referencing the tag library descriptor. This is done by adding a reference to the tag library in the web.xml file for the particular Web application in which you would like to use this tag library. You will see examples in the JSP pages used to demonstrate each of the tags where a reference is made to the tag library URI () specified in the web.xml file.

Example 1-2. web.xml for the JSP custom tags in this article

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
    "http://java.sun.com/j2ee/dtds/web-app_2.2.dtd">

<web-app>

  <taglib>
    <taglib-location>/WEB-INF/META-INF/taglib.tld</taglib-location>
    <taglib-uri>/oreilly-taglib</taglib-uri>
  </taglib>

</web-app>

Displaying Localized Content

Information on Web pages is usually presented to the user in the form of text. A good portion of the Web has been "localized" into US English. However, what if you want to present content to your users that has been localized for their particular language and/or region? You can do this rather easily by retrieving localized content from a resource bundle on the server from within a JSP tag and writing that information to the JSP page.

Example 1-3 contains the source code for the InsertText tag. This tag accepts the following attributes listed in Table 1-1.

This tag first looks up the resource bundle specified by the resourceBundleName attribute from the tag. It then looks up the component orientation to try to determine from the locale whether or not the text runs from left-to-right or right-to-left to write out <P> tags with the correct text direction attribute. Finally, it writes out the text retrieved from the resource bundle to the JSP page.

We have provided three resource bundles containing the key, Hello, and containing the localized text for "Hello World". These properties files should be placed in the WEB-INF/classes directory for your Web application. Example 1-4 is the resource bundle for English.

Example 1-4. Text resource bundle for English in the United States
(javai18ntextresources_en_US.properties)

Hello=Hello World!

Example 1-5 is the resource bundle for French.

Example 1-5. Text resource bundle for French in the France
(javai18ntextresources_fr_FR.properties)

Hello=Salut tout le monde!

Example 1-6 is the resource bundle for Hebrew.

Example 1-6. Text resource bundle for Hebrew in Israel
(javai18ntextresources_iw_IL.properties)

Hello=\u05e9\u05dc\u05d5\u05dd \u05e2\u05d5\u05dc\u05dd

Example 1-7 is the JSP page that demonstrates the use of the InsertText tag. As you can see at the top of the page, we use the taglib directive to specify the tag library URI which will resolve references from the tags using the proper tag library descriptor and the prefix used to identify the custom JSP tags in the page. We print out the localized text for "Hello World" in the various languages we have provided in this section of the article.

Example 1-7. JSP page to demonstrate use of InsertText JSP tag

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/oreilly-taglib" prefix="oreillytags"%>
<HTML>
<HEAD>
<TITLE>
InsertText Tag Demonstration
</TITLE>
</HEAD>
<BODY>
Hello World (English):
<H1>
<oreillytags:InsertText textID='Hello' 
resourceBundleName='javai18ntextresources' locale='<%= new 
java.util.Locale("en", "US") %>'/>
</H1>
Hello World (French):
<H1>
<oreillytags:InsertText textID='Hello' 
resourceBundleName='javai18ntextresources' locale='<%= new 
java.util.Locale("fr", "FR") %>'/>
</H1>
Hello World (Hebrew):
<H1>
<oreillytags:InsertText textID='Hello' 
resourceBundleName='javai18ntextresources' locale='<%= new 
java.util.Locale("iw", "IL") %>'/>
</H1>

</BODY>
</HTML>

Figure 1-1 demonstrates what the resulting JSP page looks like after it is compiled and executed. As you can see, the proper localized text is output on the page and with the proper directionality attribute applied to the block of text.

Figure 1-1. Resulting output after running Example 1-7

Figure 1-1. Resulting output after running Example 1-7

Formatting Components for Numbers, Dates, and Times

Data such as numbers, dates, and times are also candidate items for displaying in a localized fashion to users of your Web application. Here we have developed a tag called InsertDate. This tag accepts a java.util.Date object and will format it according to the particular locale passed to the tag or using a user-defined pattern passed to the tag.

Example 1-8 contains the source code for the InsertDate tag. This tag accepts the following attributes listed in Table 1-2.

This tag first retrieves a SimpleDateFormat object given the particular style and locale. If a user-defined pattern has not been supplied using the datePattern attribute, the localized date is formatted and output to the JSP page. Otherwise, the user-defined pattern is applied to the formatting object and the date is formatted accordingly and output to the JSP page.

Example 1-8. InsertDate JSP tag

package com.ora.i18n.jsptags;

import java.io.IOException;
import java.text.*;
import java.util.Date;
import java.util.Locale;

import javax.servlet.jsp.*;
import javax.servlet.jsp.tagext.*;

public class InsertDate extends TagSupport {

    private int DEFAULT_STYLE = DateFormat.DEFAULT;
    private Date date;
    private String datePattern;
    private int style;
    private Locale locale;

    public InsertDate() {
        date = null;
        datePattern = null;
        locale = Locale.getDefault();
        style = DEFAULT_STYLE;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    public void setDatePattern(String datePattern) {
        this.datePattern = datePattern;
    }

    public void setLocale(Locale locale) {
        this.locale = locale;
    }

    public void setStyle(int style) {
        this.style = style;
    }

    public int doStartTag() throws JspException {
        try {
            JspWriter out = pageContext.getOut();

            SimpleDateFormat sdf = (SimpleDateFormat) 
DateFormat.getDateInstance(style, locale);
            if (datePattern != null) {
                sdf.applyPattern(datePattern);
            }
           out.print(sdf.format(date));
        } catch (IOException ioe) {
            throw new JspTagException(ioe.toString());
        }

        return SKIP_BODY;
    }

    public void release() {
        super.release();
        date = null;
        datePattern = null;
        locale = Locale.getDefault();
        style = DEFAULT_STYLE;
    }
}

Example 1-9 is the JSP demonstrating the use of the InsertDate tag. We have already covered the use of the taglib directive in the preceding section of this article. In this JSP page, we format the current date using the English and German locales and also using a user-specified pattern.

Figure 1-2 shows the resulting output when the JSP page is compiled and executed.

Figure 1-2. Resulting output after running Example 1-9

Internationalizing Form Elements

We now turn our attention to commonly used UI elements in Web applications: HTML form items. Here we have focused our attention on the output of <OPTION></OPTION> lists used in the <SELECT></SELECT> form element. In Chapter 7, "Searching, Sorting, and Text Boundary Detection," of our book we demonstrate that sort order is different across languages. Therefore, users of your Web application may expect to see items in drop-down lists sorted, as they would expect them to be sorted in their native language. We developed the OptionList tag to fulfill this exact role.

Example 1-10 contains the source code for the OptionList tag. This tag accepts the following attributes listed in Table 1-3.

The OptionList tag first retrieves a collator object that will be used to sort the items in the optionList attribute contained in an ArrayList. It then sorts the items in the ArrayList and outputs them to the JSP page in <OPTION></OPTION> tags. It may seem quite simple, but it is very powerful.

The JSP page demonstrating the use of the OptionList tag is given in Example 1-11. We format a list of fruits in Swedish and German.

Figure 1-3 shows the sorted list of fruits for the Swedish language locale.

Figure 1-3. Sorted list of fruits for the Swedish language

Figure 1-4 shows the sorted list of fruits for the German language locale.

Figure 1-4. Sorted list of fruits for the German language

Localizing Media Elements

Finally, we turn to the localization of references to media elements. These may be items such as images, movie files, or sound clips. In Example 1-12, we developed the InsertImage tag, which creates a proper <IMG> reference based on the attributes of the tag, one of which is the locale. This will be used to create the reference to a localized images directory. In our example, we created separate images/<locale> directories off the root Web application directory for each set of localized images we had. In this example, we have English and German, so we created an images/en_US directory and an images/de_DE directory.

The source code for the InsertImage tag can be found in Example 1-12. The attributes for this tag are listed in Table 1-4.

All of the information required to create the image reference is specified in the tag attributes. This is probably overkill for such a simple demonstration, but it illustrates that you can structure your application and provide a UI component to create proper references to localized data, whether that be text, or in this case, images.

Example 1-12. InsertImage JSP tag

package com.ora.i18n.jsptags;

import java.io.IOException;
import java.util.Locale;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.JspTagException;
import javax.servlet.jsp.tagext.TagSupport;

public class InsertImage extends TagSupport {

    private String image;
    private String imagePath;
    private String imageWidth;
    private String imageHeight;
    private Locale locale;

    public InsertImage() {
        image = null;
        imagePath = null;
        imageWidth = null;
        imageHeight = null;
        locale = Locale.getDefault();
    }

    public void setImage(String image) {
        this.image = image;
    }

    public void setImageHeight(String imageHeight) {
        this.imageHeight = imageHeight;
    }

    public void setImageWidth(String imageWidth) {
        this.imageWidth = imageWidth;
    }

    public void setImagePath(String imagePath) {
        this.imagePath = imagePath;
    }

    public void setLocale(Locale locale) {
        this.locale = locale;
    }

    public int doStartTag() throws JspException {
        JspWriter out = pageContext.getOut();

        try {
            out.print("<IMG width=\"");
            out.print(imageWidth);
            out.print("\" height=\"");
            out.print(imageHeight);
            out.print("\" src=\"");
            out.print(imagePath);
            out.print("/");
            out.print(locale.toString());
            out.print("/");
            out.print(image);
            out.print("\">");
        }
        catch (IOException ioe) {
            throw new JspTagException(ioe.toString());
        }
        return SKIP_BODY;
    }

    public void release() {
        image = null;
        imagePath = null;
        locale = Locale.getDefault();
    }
} 

Example 1-13 is the JSP page used to demonstrate the display of the O'Reilly Web site header for the English and German locales.

Figure 1-5 shows the resulting output when the JSP page is compiled and executed.

Figure 1-5. Resulting output after running Example 1-13

Looking Ahead

This article has dealt with a few of the major areas for designing internationalized user interface components for Web applications.

There are areas we haven't touch on. For example, where is the locale passed to the tags retrieved? That's up to you to decide, but one example would be to store the user's locale preference as an attribute in their session. It could then be retrieved and passed as an attribute to the tags. Another area for extension would be to develop a common base class such as LocaleAwareTag, which might subclass from javax.servlet.jsp.tagext.TagSupport and provide get/setLocale methods and also serve as a common base class for tags that would require a locale attribute.

Finally, you might extend the functionality of a tag like the InsertImage tag to instead pass in an imageID attribute, from which the tag would create the proper localized image reference using data stored for that imageID in a resource bundle. The possibilities are endless!

Hopefully we have conveyed to you a very effective way to provide localized UI components for use in your Web applications. The defining characteristic for each of the JSP tags developed in this article is the use of the locale attribute to retrieve locale-specific objects for formatting or retrieving data or creating references to locale-specific media elements. These four tags would allow you to develop the beginning of an internationalized Web application. As your application becomes more sophisticated, these UI components can be tailored to grow with the application, but will always serve to provide that localization capability.

---

David Czarnecki is a computer scientist in the Internet and Software Technology Laboratory at the GE Corporate Research and Development Center in Niskayuna, New York. He is involved with various e-commerce initiatives and projects, and in recent months has become increasingly involved in providing expertise on how to properly internationalize software. David holds both B.S. and M.S. degrees in computer science. You can write to David at the following e-mail address: David at javainternationalization.com.

---

O'Reilly & Associates recently released (March 2001) Java Internationalization.

• Sample Chapter 4, Isolating Locale-Specific Data with Resource Bundles, is available free online.

• You can also look at the Table of Contents, the Index, and the Full Description of the book.

• For more information, or to order the book, click here.