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.
Tiles consists of one taglib (
struts-tiles.tld); all the supporting Java
classes are contained within the main struts JAR (
A standard taglib entry is placed inside the configuration file (
the Web application:
<taglib> <taglib-uri>/tags/struts-tiles</taglib-uri> <taglib-location>/WEB-INF/struts-tiles.tld</taglib-location> </taglib>
|Definition of Tiles taglib in
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>
|Definition of Tiles plugin 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
To use Tiles in a JSP, simply use the standard taglib tag:
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
|Preparing for use of the Tiles taglib inside a JSP|
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.
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:
|2||Identifies the Tiles taglib to be used on this page.|
|6||Sets the window title based on dynamically specified text -- varies from page to page.|
|10||Inserts the content of the dynamically specified header page -- this will probably be the same on every page but may vary as the name of the page is not hard-coded here. Contains common elements like a top menu.|
|17||Displays the dynamically specified text as a page heading -- varies from page to page and is probably just a longer version of the title.|
|19||Inserts the contents of the dynamically specified body -- this is where the actual contents of the page in question will go (such as a menu page consisting of anchors or a login form for validation).|
|26||Inserts the contents of the dynamically specified footer page -- behaves quite similarly to the header and contains common page closing tags such as company logos.|
A description of some of the key lines:
|7-19||The main element of a tiles defintion file is
|8-18||The definition of a layout named
|9, 11||These are values that will be placed into the resulting page as literals (and not
interpreted as tile JSP pages); individual pages will obviously override these to suit
their page title and headings. These correspond to the
|13, 15, 17||These values will be considered to point to either other Tiles layouts or specific
JSP pages. (The system will basically try to match the name to a layout; if that
fails, it will look for a page with the name instead.) Of these, only the
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.
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
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
<%@ 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>
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):
|Tile attribute||Overriding value|
|title||The value ("Main menu") for the window title is
hard-coded and specified using the
The value for the page heading is provided by providing body content for the
|body||The value for the body page (not created yet in this example) is hard-coded here. Remember, this value will not be treated as a string; instead, it will be processed as the name of either another JSP page (as is the case here) or the name of another Tiles layout (which will be resolved recursively).|
|Overridden layout values in
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.
pageHeadingset for this particular example to work. However, this can be easily changed to another snippet of code to render this example usable. Go back