Globalize your On Demand Business

Generally speaking, Tiles framework is a recent achievement in Web page technology. It is based on the concept of JSP templates, which separates Web content from layout, but Tiles also divides Web content into small sub-units that can be dynamically inserted into a template or passed as parameters according to the need of a Web page. In this way, both the Web layout and content are re-usable across the same Web site.

In Web UI design, it is quite often that some parts of a Web page appear again and again in different Web pages across the same Web site, for example, the general page layout, header, footer, and navigation bar. Tiles framework introduces in the concept of site layout, site layout definition, and tiles. With Tiles framework, Web developers can decompose a Web site into separate sub-units, or tiles as it is called in the Tiles framework, define the tiles in the tiles definition file, and then compose the general layout of the Web pages with tiles. When coding the UI of different Web pages, different content can be put into different tiles, and then different tiles can be composed together for the same Web page but targeting for different local markets.

For detailed information of how to build a Web site using Tiles framework step by step, please refer to the tutorial on the IBM developerWorks site “Master the Tiles Framework”.

The reason why Tiles framework can be used for globalization market customization is that in a Web site for different markets, the Web content and layout can be the same in most places except for one or two minor variations. With Tiles framework, we only need to define different site layout for different markets or put different content in the same tiles.

In the following chapter, I shall introduce step by step how to develop a Web site with globalization market customization feature using Tiles framework, through the process of developing a working example Web site, “HelloGlobalMarket"

Implementing Globalization Market Customization using Tiles Framework

HelloGlobalMarket is a demo Web site of an IT company, and it has development labs in various countries and also sells products in markets all over the world. To avoid complexity, this demo site just supports two locales: en_US and zh_CN, and correspondingly two markets: US market and China market.

Designing Web Sites

The design of a Web site enabled for globalization market customization is a little more complicated than that of a common one, because the designer needs to take into account the differences among the Web content for different markets, and should include them into the Web sites, while at the same time keep a uniform style for all the Web pages.

“HelloGlobalMarket” serves people of two markets, the market of the United States and the market of China, and the index pages for the two markets are generally similar to each other, except for a few minor differences for different market needs (as shown in the Figure 3 and Figure 4).

Figure 3. Index page of HelloGlobalMarket for United States

Figure 4.Index page of HelloGlobalMarket for China

We can see that there are two main differences between the two index pages:

1. In the navigation bar of the index of the Web site for US market, there is a link to “US Lab”, which should link to a Web page containing information of US lab; while in that for China market, the link is to “China Lab”.
2. In the index page for US market, in addition to General Hot Offer, there is Special Hot Offer for US; while in that China market, just General Hot Offer is there.

In this working example, there is also another kind of Web page containing content for labs.

Figure 5. Web page containing content for US Lab

We can see that the layout of this Web page is different from the two index pages above, but it also contains the same header and footer. By using the Tile framework, we can also make use of the existing tiles of header and footer.

Continue to Creating a Struts enabled web project