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 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 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
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. |