Struts 2 and Tiles Framework Integration

Posted by Mohaideen Jamil in Struts-2 | 2 comments

Apache Tiles is a templating framework used to simplify the development of web application user interfaces. Tiles allow defining page fragments which can be combined into a complete page at runtime. These fragments, or tiles, can be used as reusable templates in order to reduce the duplication of common page elements or even embedded within other tiles. See the snapshot below.

** UPDATE: Struts 2 Complete tutorial now available here.

Advantage of tiles framework

Code reusability
Easy to modify
Easy to remove

Jar Required

Folder structure

web.xml

Provide entry of listener class Struts2TilesListener in the web.xml file.

  <listener>
    <listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
  </listener>

Recommended Article

Jsp Pages

Now We will define the template for our web application in baseLayout.jsp file. This template will contain different segments of web page (Header, Footer, Menu, Body).

File : baseLayout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:insertAttribute name="title" ignore="true" /></title>
<style>
.one {
	border-style: solid;
	border-color: #0000ff;
	border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1" align="center" class="one" width="80%">
	<tr>
		<td height="30" colspan="2" class="one" width="20%">
			<tiles:insertAttribute name="header" />
		</td>
	</tr>
	<tr>
		<td height="250" class="one">
			<tiles:insertAttribute name="menu" />
		</td>
		<td width="350" class="one">
	    	<tiles:insertAttribute name="body" />
		</td>
	</tr>
	<tr>
		<td height="30" colspan="2" class="one">
	        <tiles:insertAttribute name="footer" />
		</td>
	</tr>
</table>
</body>
</html>

File : header.jsp

<html>
<body>
<div align="center" style="color: gray; font-weight: bold;">
Struts 2 - Tiles Demo - Header page
</div>
</body>
</html>

File : footer.jsp

<html>
<body>
<div align="center" style="color: gray; font-weight: bold;">
Footer	page © SimpleCodeStuffs.com
</div>
</body>
</html>

File : body.jsp

<html>
<body>
	<p align="center" style="color: gray;font-weight: bold;">Home Page</p>
</body>
</html>

File : menu.jsp

<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<body>
	<s:url action="strutsAction" var="strutsAction" />
	<s:url action="springAction" var="springAction" />
	<div align="center">
		Menu <br /> <br /> <br /> <br />

		<s:a href="%{strutsAction}">Struts Tutorial</s:a>
		<br /> <br />
		<s:a href="%{springAction}">Spring Tutorial</s:a>
	</div>
	<br>
</body>
</html>

File : springTutorial.jsp

<html>
<body>
<p align="center" style="color: gray;font-weight: bold;">Spring Tutorial !!!</p>
</body>
</html>

File : strutsTutorial.jsp

<html>
<body>
	<p align="center" style="color: gray;font-weight: bold;">Struts Tutorial !!!</p>
</body>
</html>

File : index.jsp
It triggers homeAction during application start up

<META HTTP-EQUIV="Refresh" CONTENT="0;URL=homeAction">

Action Class

package com.simplecodestuffs.action;

public class TilesAction {

	public String home() {
		return "home";
	}

	public String struts() {
		return "struts";
	}

	public String spring() {
		return "spring";
	}
}

struts.xml

In struts.xml, inherit the tiles-default package and define all the result type as tiles

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<package name="default" extends="tiles-default">
	<action name="*Action" method="{1}" class="com.simplecodestuffs.action.TilesAction">
		<result name="home" type="tiles">home</result>
		<result name="struts" type="tiles">struts</result>
		<result name="spring" type="tiles">spring</result>
	</action>
</package>
</struts>

Do read :

tiles.xml

The tiles.xml file must be located inside the WEB-INF directory, in which define all the tiles definitions

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd">

<tiles-definitions>

<definition name="baseLayout" template="/baseLayout.jsp">
	<put-attribute name="title" value="Template" />
	<put-attribute name="header" value="/header.jsp" />
	<put-attribute name="menu" value="/menu.jsp" />
	<put-attribute name="body" value="/body.jsp" />
	<put-attribute name="footer" value="/footer.jsp" />
</definition>

<definition name="home" extends="baseLayout">
	<put-attribute name="title" value="Home" />
	<put-attribute name="body" value="/home.jsp" />
</definition>

<definition name="struts" extends="baseLayout">
	<put-attribute name="title" value="Struts Tutorial" />
	<put-attribute name="body" value="/strutsTutorial.jsp" />
</definition>

<definition name="spring" extends="baseLayout">
	<put-attribute name="title" value="Spring Tutorial" />
	<put-attribute name="body" value="/springTutorial.jsp" />
</definition>

</tiles-definitions>

Demo

Home Page with Tiles

Struts Page with Tiles

Spring Page with Tiles

How to define multiple tiles files in struts 2 application?

To define multiple tiles, you need to add following entry in your web.xml file.

<context-param id="struts_tiles">
<param-name>org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG
</param-name>
<param-value>
/WEB-INF/tiles1.xml,/WEB-INF/tiles2.xml</param-value>
</context-param>