JSP Page Design With Tiles

By Salman Halim (salmanhalim@hotmail.com)

Introduction

Tiles is a taglib packaged with Jakarta Struts 1.1 (currently in beta stage, but quite stable) and is available as part of the struts package. Struts (1) is an open-source Web application framework available from http://jakarta.apache.org/struts.

Tiles lets the user break the presentation page into small JSP snippets that perform a specific function but are not complete pages in their own rights. Each such snippet becomes known as a tile. Putting these tiles together creates a presentation JSP.

The tiles mechanism has advantages over the basic jsp:include tag in that it is dynamically configurable: an application layout can be defined and portions of it filled in dynamically -- based on values that become known at runtime (such as the current Locale settings, for example).

Tiles can be used on its own; however, it can also be used from within the struts framework. This document will create a simple set of pages with tiles to teach by example; these pages will share a common header, footer and basic layout.

Initial Tiles Installation and Setup

Tiles consists of one taglib (struts-tiles.tld); all the supporting Java classes are contained within the main struts JAR (struts.jar).

A standard taglib entry is placed inside the configuration file (web.xml) of the Web application:

<taglib>
  <taglib-uri>/tags/struts-tiles</taglib-uri>
  <taglib-location>/WEB-INF/struts-tiles.tld</taglib-location>
</taglib>

It is possible to store Tiles definitions inside a centralized XML file (the approach taken in this document). In this case, Tiles needs to be installed as a struts plugin; this basically installs the Tile factory as a plugin, enabling the contents of the tiles definition file to be processed.

<plug-in className="org.apache.struts.tiles.TilesPlugin">
  <set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml"/>
  <set-property property="definitions-debug" value="1"/>
  <set-property property="definitions-parser-details" value="0"/>
  <set-property property="definitions-parser-validate" value="true"/>
</plug-in>

Note that the value of the definitions-config property can be a comma-separated list of tile definition files in the event that there are more than one.

To use Tiles in a JSP, simply use the standard taglib tag:

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

Main Layout

Designing a main tiles layout for use as the page template consists of creating JSP page with placeholders where other pages, tiles layouts or literal strings (such as page titles) will eventually be placed.

Layout JSP

We will use layout.jsp for this application's look. (The source is available here.)

This page basically defines a look for the pages in the application: a title, a header page, a heading, a main body and a footer. The contents of the page will be indented slightly (by being contained in a table) for effect. A breakdown of the significant lines in the source is as follows:

Tiles configuration

This is the /WEB-INF/tiles-defs.xml file (source) mentioned in the struts-config.xml file.

A description of some of the key lines:

Note that these are merely the default values. Some of these will be changed on a per-page basis while others (such as the header) may be left to the defaults.

There can be several such layouts, allowing for different functionality throughout the application and the values that point to individual pages could just as easily be the names of another such layout defined in the configuration files.

Individual Tiles

Up to now, we have defined a Tiles layout. There aren't, however, any pages that make use of this layout. Before we can create those, we have to create a simple header and footer for use in our final version. The source for header.jsp is available here and the source for footer.jsp is available here. Note how these pages are not completely formed HTML pages -- they are tiles which need to be placed inside a larger composite to create a final page. (2)

Typically, tiles are kept in a separate subdirectory (call it tiles, for example) to differentiate between JSP pages that are either complete in there own right or actually use a tile layout (such as the mainLayout used here).

Finally, we can build a full page from the pieces thus composed (except for the "body" portion which we'll do shortly). Here is mainMenu.jsp (the source is available here):

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

<tiles:insert definition="mainLayout">
  <tiles:put name="title" value="Main Menu"></tiles:put>
  <tiles:put name="heading"><%= session.getAttribute( "pageHeading" ) %></tiles:put>
  <tiles:put name="body" value="menu.jsp"/>
</tiles:insert>

The tiles:insert tag causes the insertion of a particular layout at that point in the JSP. If we had wanted to use the default values specified in the tiles-defs.xml file, we would've simply closed this tag without providing content. As it is, we wanted to overwrite several of the vallues to tailor this particular instance to produce a menu.

Of the five values defined in the original layout, only three are being overridden within this instance of the layout (the default header and footer will be used):

At this stage, the only thing missing is a tile JSP named menu.jsp. Just like the header and footer pages, this is not going to be a complete JSP. (The source is here.)

Final Results

When a user hits mainMenu.jsp in our application, they will get a nicely formatted and complete HTML page where all the tiles have been placed. Click here to see the generated source and here to see the page. (4)

Footnotes