Skip to main content

Software  > Globalization > 

Globalize your On Demand Business

Because Tiles are now shipped with Struts, it is better to create a Struts-enabled Web project so that both struts and tiles tag libraries are included in the project, moreover, many Struts features, such the globalization capability, can also be made use of.

In this working example, I use WebSphere Application Developer V5.1.2 to create a Struts-enabled Web project. Remember to check “Add Struts support” in the “Feature Page” panel (Figure 6).
Figure 6: Adding Struts support in the Creating New Dynamic Web Project wizard of WSAD V5.1.2 (click to enlarge)

Figure 6. Adding Struts support in the Creating New Dynamic Web Project wizard of WSAD V5.1.2. Click on image to display full-size.

To make it easier to globalize textual content, check "Create Resource Bundle" and fill in the resource bundle folder name and property file name.

Figure 7: Setting resource bundle in the Creating New Dynamic Web Project wizard of WSAD V5.1.2 (click to enlarge)

Figure 7. Setting resource bundle in the Creating New Dynamic Web Project wizard of WSAD V5.1.2. Click on the image to display full-size.

You can extract the textual content and put them the property files according to the locale.

After the project is created, we can find that Struts and Tiles tag libraries are automatically under the directory of WEB-INFO, for example, struts-tiles.tld, struts-bean.tld, struts-html.tlg, and struts-logic.tld.

Decomposing Web site into Tiles

Taking the index page of HelloGlobalMarket project for example, six tiles can be extracted:

  • Header, containing the content of the header in the index page;
  • Footer, containing the content of the footer;
  • Welcome, containing the content in the Welcome panel;
  • GeneralHotOffer, containing the content of the general hot offer;
  • SpecialHotOffer, containing the content of the special hot offer for the US market;
  • NavigationBar, containing the links for navigating the Web site;

The code of each tile should be put into a separate JSP file. For example, the Welcome panel is put in the Welcome.jsp, with the following source code:

<table width="100%" border="1" bgcolor="#CCCCCC" height="200">
<tr>
<td align="center">
Hello, Global Market for the United States!
</td>
</tr>
</table>


In this working example, a folder named “jsp” is created under the directory “HelloGlobalMarket/Web Content/”. All the jsp files are put in this folder.

Globalizing Tile Content

Globalization of Web content covers two areas: translating textual data and handling globalization features.

Because Tiles is part of the Struts framework, and Struts provides a very easy way of globalizing the textual content, we can make use globalization capability of Struts. Textual content can be translated into different languages and then organized into different localization packs as per corresponding locales.

In this working example, all the translatable textual Strings are stored in property files, which are used as localization packs. Figure 8 shows the localization pack structure of the working example.

Figure 8: Localization Pack structure of HelloGlobalMarket project

Figure 8. Localization Pack structure of HelloGlobalMarket project

The data for the locale of en_US is stored in the file named ApplicationResources_en_US.properties, and that for zh_CN, in ApplicationResources_zh_CN.properties. For example, the localization pack for en_US is as follows:

title=Hello Global Market for US
header=Header
footer=Footer
welcome=Hello, Global Market for the United States!
generaloffer=General Hot Offer
specialoffer=Special Hot Offer for US Market
home=Home
link=US Lab
labindex=Content of US Lab page

### not for translation
linkvalue=/HelloGlobalMarket/jsp/LabIndex.jsp?content=USLabIndex.jsp

In a tile that needs to retrieve textual content from the localization pack, it only needs to include tag library of “struts-bean.tld”. This can be done by including the tag library at the beginning of the JSP file for that tile:

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

Then in the JSP code where a piece textual data needs to be inserted, we only need to invoke the “message” tag of the struts-bean.tld. Taking the Welcome.jsp as an example, the globalized JSP code will be as follows:

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<table width="100%" border="1" bgcolor="#CCCCCC" height="200">
<tr>
<td align="center">
<bean:message key="welcome"/>
</td>
</tr>
</table>

In order to make the Web pages for China market easy to understand, I also write content in English, but with terms like “Hello, Global Market for China” to indicate that they are retrieved from the localization pack for the locale of zh_CN.

The globalization features are handled in the same way as it is in normal globalization applications. Please refer to IBM redbook e-business Globalization Solution Design Guide: Getting Started for details.

Setting up Site Layout File

With all the tiles extracted, a site layout file for the index page can be set up, using names of tiles instead of the original HTML codes. A site layout file is also a JSP file. Because the layout of the index page for US market and that for China market are a little bit different, I use different site layout files respectively, named as SiteLayout_en_US.jsp and SiteLayout_zn_CN.jsp.

The code of the SiteLayout_en_US.jsp is as follows:

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<html>
<head>
<title><bean:message key="title"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="1">
<tr>
<td colspan="3">
<div align="center">
<tiles:insert attribute="Header" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
<tr>
<td width="15%" rowspan="2" valign="top">
<div align="center">
<tiles:insert attribute="NavigationBar" ignore="true">
</tiles:insert>
</div>
</td>
<td colspan="2">
<div align="center">
<tiles:insert attribute="Welcome" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
<tr>
<td width="60%">
<div align="center">
<tiles:insert attribute="GeneralHotOffer" ignore="true">
</tiles:insert>
</div>
</td>
<td width="40%">
<div align="center">
<tiles:insert attribute="SpecialHotOffer" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div align="center">
<tiles:insert attribute="Footer" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
</table>
</body>
</html>

The code of the SiteLayout_zh_CN.jsp is as follows:

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<html>
<head>
<title><bean:message key="title"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="100%" border="1">
<tr>
<td colspan="2">
<div align="center">
<tiles:insert attribute="Header" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
<tr>
<td width="15%" rowspan="2" valign="top">
<div align="center">
<tiles:insert attribute="NavigationBar" ignore="true">
</tiles:insert>
</div>
</td>
<td>
<div align="center">
<tiles:insert attribute="Welcome" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<tiles:insert attribute="GeneralHotOffer" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<tiles:insert attribute="Footer" ignore="true">
</tiles:insert>
</div>
</td>
</tr>
</table>
</body>
</html>

We can see from the above codes that tiles are inserted into the JSP to take place of the JSP codes, because the JSP codes are now inside each tile JSP file.

Setting up Site Definition File

Then we need to set up the mapping relation from tile names to tile JSP files. The mappings are saved in a configuration file. In this working example, this configuration file is named as “tiles-defs.xml”. Please note that the following entry needs to be added into the web.xml file, otherwise, the system cannot find tile definitions when the Web application is running on server.

<servlet>

<init-param>
<param-name>definitions-config</param-name>
<param-value>/WEB-INF/tiles-defs.xml</param-value>
</init-param>

</servlet>

In the tiles-defs.xml file, the following mappings are set up:

<tiles-definitions>
<definition name="siteLayoutDef_en_US" path="/jsp/SiteLayout_en_US.jsp">
<put name="Header" value="/jsp/header.jsp" />
<put name="Footer" value="/jsp/footer.jsp" />
<put name="Welcome" value="/jsp/Welcome.jsp" />
<put name="GeneralHotOffer" value="/jsp/GeneralOffer.jsp" />
<put name="SpecialHotOffer" value="/jsp/SpecialOffer.jsp" />
<put name="NavigationBar" value="/jsp/NavigationBar.jsp" />
<put name="LabContent" value="/jsp/LabIndex.jsp" />
</definition>

<definition name="siteLayoutDef_zh_CN" path="/jsp/SiteLayout_zh_CN.jsp" extends="siteLayoutDef_en_US">
</definition>

<definition name="labLayoutDef" path="/jsp/LabLayout.jsp">
<put name="Header" value="/jsp/header.jsp" />
<put name="Footer" value="/jsp/footer.jsp" />
<put name="Content" value="/jsp/USLabIndex.jsp" />
</definition>
</tiles-definitions>

Because most of the tiles used for an index page for China market are the same as those for US market, the site layout definition for China market, i.e., siteLayoutDef_zh_CN extends the site layout definition for US market.

“LabLayout.jsp” is the site layout for the Web pages containing detailed lab information, such as US lab and China lab. In this working example, the layouts of these two Web pages are the same, so only one lab site layout is used. “labLayoutDef” is the site layout definition file for the lab page site layout. This definition file has the same header and footer as the siteLayoutDef_en_US and siteLayout_zh_CN, but with different main content.

Setting up Web Site based on Site Layout File

Following the Tiles framework, what we now need to do is add two more JSP files: index.jsp, which is used as the index page of the whole Web site, and LabIndex.jsp, which is used as the Web page introducing US lab or China lab information.

The code of index.jsp is as follows:

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<%
String defaultLocaleStr = "en_US";

//Retrieving user locale so as to determine
//which site layout definition file to use.
//Since this working example only support two locales:
//“en_US” and “zh_CN”, if a locale starts with “zh”,
//then “zh_CN” will be applied, and “en_US” will do for
//all the other cases.
String localeStr = request.getParameter("locale");
if (null == localeStr) {
localeStr = (String) session.getAttribute("locale");
System.out.println("session locale: " + localeStr);
if (null == localeStr) {
localeStr = request.getHeader("Accept-Language");
System.out.println("language preference: " + localeStr);
if (null != localeStr) {
if(localeStr.startsWith("zh")){
localeStr = "zh_CN";
}else{
localeStr = defaultLocaleStr;
}
} else {
localeStr = defaultLocaleStr;
}
}
}
session.setAttribute("locale", localeStr);

String siteLayoutDef = "siteLayoutDef_" + localeStr;
%>

<tiles:insert definition="<%=siteLayoutDef%>">
</tiles:insert>

In this way, the index page will invoke the site layout definition according to the current user locale, and the latter will in turn invoke the site layout file in the “path” parameter of the definition, and the site layout file then composes all the tiles included, thus forming the index page of the Web site.

The Web pages introducing details of US lab or China lab are also composed in the same way.


gray line

Continue to Conclusion


We're here to help
Easy ways to get the answers you need.
E-mail IBM