There are very few resources available on internet which explains step by step integration of tiles in simple jsp page.
Apache Tilesâ„¢ is a templating framework built to simplify the development of web application user interfaces.
Tiles allows authors to define page fragments which can be assembled into a complete page at runtime. These fragments, or tiles, can be used as simple includes in order to reduce the duplication of common page elements or embedded within other tiles to develop a series of reusable templates. These templates streamline the development of a consistent look and feel across an entire application.
Ste p1 : Download the Tiles jar file from here.
Step 2 : Add following jar files in the lib folder of the web application.
commons-beanutils-1.8.0.jar
commons-digester-2.0.jar
jcl-over-slf4j-1.5.8.jar
log4j-over-slf4j-1.6.1.jar
servlet-api.jar
slf4j-api-1.5.8.jar
slf4j-jdk14-1.5.8.jar
tiles-api-2.2.2.jar
tiles-core-2.2.2.jar
tiles-jsp-2.2.2.jar
tiles-servlet-2.2.2.jar
tiles-servlet-wildcard-2.2.2.jar
tiles-template-2.2.2.jar
Step 3: Create following jsp pages:
banner.jsp, common_menu.jsp, credits.jsp, cssPath.jsp, home_body.jsp and SideBar.jsp.
Step 4: Create a master layout page.
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <html> <head> <title><tiles:getAsString name="title" /> </title> <tiles:insertAttribute name="cssFile"></tiles:insertAttribute> </head> <body> <div id="wrapper"> <div id="menu"> <tiles:insertAttribute name="menu" /> </div> <div id="header"> <tiles:insertAttribute name="header" /> </div> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <tiles:insertAttribute name="body" /> <div style="clear: both;"> </div> </div> <div id="sidebar"> <tiles:insertAttribute name="sideBar" /> </div> <div style="clear: both;"> </div> </div> </div> </div> </div> <div id="footer"> <tiles:insertAttribute name="footer" /> </div> </body> </html>
As you can see, tiles:insertAttribute tag is used. It will work as placeholder and will be replaced by actual pages at run time as per definition in “tiles-defs.xml”
Read more on configuring tiles attributes.
Below output shows the layout.
Step 5: Now create a “tiles-defs.xml” in WEB-INF Folder, which have all the configuration.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="myapp.homepage" template="/layouts/classic.jsp">
<put-attribute name="title" value="Simple Tiles application without Struts" />
<put-attribute name="header" value="/tiles/banner.jsp" />
<put-attribute name="menu" value="/tiles/common_menu.jsp" />
<put-attribute name="body" value="/tiles/home_body.jsp" />
<put-attribute name="footer" value="/tiles/credits.jsp" />
<put-attribute name="cssFile" value="/tiles/cssPath.jsp" />
<put-attribute name="sideBar" value="/tiles/SideBar.jsp" />
</definition>
</tiles-definitions>
The attribute “name” defined in tag “tiles:insertAttribute” comes from above configuration file and replaced by the pages specified.
Step 6 : Now create the jsp page which uses the Tiles template defined above.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<tiles:insertDefinition name="myapp.homepage" />
</body>
</html>
Template name “myapp.homepage” is looked up into file “tiles-defs.xml” and configuration is applied at runtime as per definition.
Download the war file from here, change extension from “zip” to “war”.
Leave a Reply