Recipe14.1.Reusing a Common Page Layout with Tiles

Recipe 14.1. Reusing a Common Page Layout with Tiles

Problem

You want to define a common layout for your application and use that layout throughout your application without having to cut and paste HTML everywhere.

Solution

Use Tiles with your Struts application.

Discussion

Tiles has been distributed with Struts since the Struts 1.1 release. Prior to that, it was available as a separate add-on known as Components. Tiles allows you to create page component definitions that can be reused throughout your application.

The first step in using Tiles is to understand your needs. What are the common elements and what are the elements that change on every page? Is the layout the same across your application? If not, would your application be more usable if it did have a common layout?

To understand how to apply Tiles, this recipe walks you through its application for a simple web site. Say you want to apply a common page layout, such as the one in Figure 14-1, to every page of your application.

Figure 14-1. Typical page layout with header, sidebars, and footer

Moving from left to right and top to bottom, you pull the page apart into its component pieces described in Table 14-1.

Table 14-1. Components of a page layout
Component name	Description	Page position
Title	Text, specific to the body content, displayed in the browser title as well as the header	Browser title bar and within the header
Header	Contains the page title as header text	Top, from left to right margin
Navigation Bar	Contains a set of links for pages that you can display as the body content	Left sidebar
Body Content	Primary content of the page, varies for every page	Centered below the header and between the sidebars
News Sidebar	News and events; this content will be the same on every page	Right sidebar
Footer	Contains legalese and related information, displayed in a smaller font	Bottom, from left to right margin

You can think of the entire page as a single component that contains these components laid out in a particular fashion. You can define this set of components in a Tiles definition file (tiles-defs.xml), as shown in Example 14-1.

Example 14-1. Tiles definitions file

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE tiles-definitions PUBLIC        "-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"        "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd"> <tiles-definitions>     <definition name="mainLayoutDef" path="/layouts/mainLayout.jsp">         <put name="title" value="Struts Cookbook - Chapter 14 : Tiles"/>         <put name="header" value="/common/header.jsp"/>         <put name="navbar" value="/common/navbar2.jsp"/>         <put name="body"   type="string"/>         <put name="news"   value="/common/news.html"/>         <put name="footer" value="/common/footer.jsp"/>             </definition> </tiles-definitions>

The path attribute of the definition element specifies the location of the JSP page that lays out the components. Each put element defines a page component, and the value attribute specifies the contents of that component.

If you have prototyped the layout using an HTML or JSP page, you can transform it into a Tiles layout page. Example 14-2 (sample.html) shows the static source HTML from Figure 14-1.

Example 14-2. Prototype HTML layout page

<html> <head>     <title>Page title</title> </head> <body bgcolor="white">     <table border="0" width="100%">         <tr>             <td align="center" colspan="3" height="100" bgcolor="darkblue">                 <h2><font color="white">Page title</font></h2>             </td>         </tr>         <tr height="300">             <td width="20%" valign="top" bgcolor="gold">                 <p></p><h4>Navigation Sidebar</h4>                 <ul>                     <li>Start Page</li>                     <li><a href="page1.jsp">Page One</a></li>                     <li><a href="page2.jsp">Page Two</a></li>                     <li><a href="page3.jsp">Page Three</a></li>                 </ul>             </td>             <td width="55%" bgcolor="white">This is the body content.</td>             <td width="25%" bgcolor="blue" valign="top">                 <span style="color:white">                     <h4>News and Events</h4>                     <p>Content on this region will be the same                      on every page.</p>                 </span>             </td>         </tr>         <tr><td colspan="3" height="50" bgcolor="darkblue">                 <font color="white" size="-2">                     This is the footer where we add a bunch of legalese and                      talk in a really rapid voice so that no one can undertand                      what we are saying in this run-on sentence.                 </font>             </td>         </tr>     </table> </body> </html>

To convert this page for Tiles, you use the Tiles JSP tags. The tiles:insert tag serves as a placeholder for a component named in a Tiles definition. Example 14-3 (mainLayout.jsp) shows the results of converting the static page in Example 14-2. Though not required, it helps organize your application if you save your layout pages in a separate directory of your application. Conventionally, these common layout JSPs are stored in the web/layouts directory.

Example 14-3. Laying out Tiles components in a reusable JSP

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %> <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %> <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <html:html lang="true"> <head>   <title><tiles:getAsString name="title"/></title>   <html:base/> </head> <body bgcolor="white">     <table border="0" width="100%">         <tr>             <td align="center" colspan="3" height="100" bgcolor="darkblue">                 <tiles:insert attribute="header">                     <tiles:put name="title" beanName="title" beanScope="tile"/>                 </tiles:insert>             </td>         </tr>         <tr height="300">             <td width="20%" valign="top" bgcolor="gold">                 <tiles:insert attribute="navbar"/>             </td>             <td width="55%" bgcolor="white">                 <tiles:insert attribute="body"/>             </td>             <td width="25%" bgcolor="blue" valign="top">                 <tiles:insert attribute="news"/>             </td>         </tr>         <tr>             <td align="center" colspan="3" height="50" bgcolor="darkblue">                 <tiles:insert attribute="footer"/>             </td>         </tr>     </table> </body> </html:html>

You can create a JSP page, as shown in Example 14-4 (view_start_page.jsp), that renders the definition using the layout.

Example 14-4. Rendering a Tiles definition in a JSP page

<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <tiles:insert definition="mainLayoutDef">     <tiles:put name="title" type="string" value="Start Page"/>     <tiles:put name="body" value="/pages/pageStart.jsp"/> </tiles:insert>

Here's another JSP page (view_page_one.jsp) that uses the same definition:

<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %> <tiles:insert definition="mainLayoutDef">     <tiles:put name="title" type="string" value="Page One"/>     <tiles:put name="body" value="/pages/pageOne.jsp"/> </tiles:insert>

With Tiles, you reduce the amount of HTML that you have to cut and paste. More importantly, when you need to modify the layout for all pages, you only have to make the change in one place. If you wanted to swap the position of the sidebars, you could make the change in the layout JSP page and all the Tiles that use the corresponding definition would reflect the new layout.

Tiles ships with Struts so no installation is required. To enable Tiles for your application, do the following:

Place your Tiles definition file (tiles-defs.xml) in your /WEB-INF directory.

Add the Tiles plug-in to your struts-config.xml file, setting the definitions-config property appropriately:

<plug-in className="org.apache.struts.tiles.TilesPlugin" >     <!-- Path to XML definition file -->     <set-property property="definitions-config"                      value="/WEB-INF/tiles-defs.xml" /> </plug-in>

Recipe14.1.Reusing a Common Page Layout with Tiles