Home » Struts » Struts Tiles Tutorial

Struts Tiles Tutorial

Updated on by

Introduction :

Tiles is used to create reusable presentation components.

Consider an example of web application whose web page layout has a header, body and footer part as shown bellow.

Struts Tiles Tutorial


Generally we have have two ways to create the layout.

We can add header and footer section in all pages of our website or we can create Header and Footer in seperate file and, we need to include the header and footer into each pages by jsp:include tag. In the first way all pages contains the header and footer source code.

By using first way When the header or footer will change, we have to change all pages. Second way looks good because if we are changing Header or Footer no need to change all the pages.

Suppose in future we need to add menu section to each page, as shown by the picture below,In that case we have to change all pages, because he have to add the include command of the menu in each page.

Struts Tiles Tutorial


In this situation tiles is the best way to develop the page layout.By using Tiles no need to change each and every page.

Tiles use a separate layout file, that contains the container of the layout. When the layout will be changed only the layout file and the tiles configuration files have to change by the developer. That will save many time on large applications.


Steps to integrate and use Tiles framework with Struts Application :

Installing Tiles :

Enable the tiles framework in struts framework by writing the following plug-in tag in Struts-configuration file. 

<plug-in className="org.apache.struts.tiles.TilesPlugin">
    <set-property property="definitions-config"
        value="/WEB-INF/tiles-definitions.xml" />
    <set-property property="moduleAware" value="true" />
</plug-in>

In the above entry you can see definitions-config parameter which is set to the value /WEB-INF/tiles-definitions.xml. So we have to create a file called tiles-definitions.xml in WEB-INF directory.

There are two ways in which you can specify the Tiles definition and their attributes. One is using JSP Tile Definition and the other way is using XML Tile Definition.

Creating Application :

Create a Dynamic Web Project in Eclipse and provide the name of this project to StrutsTilesEx.

Our first step is design the base layout page using tiles. The base layout page is a normal jsp page, which defines different sections. A region is defined using the <tiles:insert> tag. The attribute value hold the name of the region.

Consider the image given below

Struts Tiles Tutorial

The layout shown above can be created using the following code.create a Layout.jsp file in your WebContent folder and copy following code in it.

Layout.jsp


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-tiles.tld" 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:getAsString name="title" ignore="true" />
</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" align="center">
<tr>
<td height="10%" colspan="2"><tiles:insert attribute="header" />
</td>
</tr>
<tr>
<td width="20%" height="250"><tiles:insert attribute="menu" />
</td>
<td><tiles:insert attribute="body" /></td>
</tr>
<tr>
<td height="15%" colspan="2"><tiles:insert attribute="footer" />
</td>
</tr>
</table>
</body>
</html>

Layout.jsp file will define overall layout of web page.We have used tag <tile:insert> in order to place the respective elements on this page.

Tiles Definition :

tiles-defs.xml file contains all the Tile definitions.Create a file tiles-defs.xml inside WEB-INF directory of your project and add below code in this file.

tiles-defs.xml


<?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="layout" page="/Layout.jsp">
		<put name="header" value="/header.jsp" />
		<put name="body" value="/body.jsp">
			<put name="menu" value="/menu.jsp">
				<put name="footer" value="/footer.jsp">
	</definition>
</tiles-definitions>

In the above code we have replace names like title, body,menu,header, footer etc with the content of the JSPs. Hence tiles will replace the tag <tile:insert> with appropriate content in Layout.jsp .

The name of the Tile definition is "layout" and it contains one jsp page for each region. Since the title region is specified using getAsString tag, we provide a String variable instead of a jsp page. When an action is forwarded to the Tile definition baseLayout, then the Layout.jsp page will be displayed with corresponding jsp pages in the Tile definition.

Create JSP files for Header,Footer,body and Menu Section :

Create these JSP files inside WebContent of your Project

header.jsp


<div style="width: 100%; height: 80px; background-color: #DEB887">
	<h3>Tiles Plugin Example Sample Header Page</h3>
</div>

footer.jsp


<div style="width: 100%; height: 50px; background-color: #F87217">
    Copyright & javawebtutor.com
</div>

body.jsp


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body bgcolor="">
	<p>sample body content.</p>
	<br>
	<br><h1>Body Section</h1>
	</br>

</body>
</html>

Menu.jsp


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body bgcolor="">
        <a href="www.google.co.in" >google</a><br>
        <a href="www.facebook.com" >Facebook</a>
    </body>
</html>

HomePage.jsp 


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

<tiles:insert page="/Layout.jsp" flush="true">
   <tiles:put name="title" type="string" value="Welcome Page" />
   <tiles:put name="header" value="/header.jsp" />
   <tiles:put name="menu" value="/menu.jsp" />
   <tiles:put name="body" value="/body.jsp" />
   <tiles:put name="footer" value="/footer.jsp" /> 
</tiles:insert>

index.jsp 


<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<html:html>
<body>
	<h3>Struts Tiles Simple Example</h3>

	<html:link page="/HomePage.jsp">Tiles Example</html:link>

</body>
</html:html>

Include the TilesPlugin :

To use Struts tiles framework, you have to declare the "TilesPlugin" plug-in class in the Struts configuration file.

struts-config.xml


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

<!DOCTYPE struts-config PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN"
          "http://jakarta.apache.org/struts/dtds/struts-config_1_2.dtd">
		  
<struts-config>
	<plug-in className="org.apache.struts.tiles.TilesPlugin">
		<set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" />
		<set-property property="moduleAware" value="true" />
	</plug-in>
</struts-config>

Directory Structure of Project :

Directory Structure of Project is shown below.

Struts Tiles Tutorial


Run the application :

To run the project, right click on Project name from Project Explorer and select Run as -> Run on Server (Shortcut: Alt+Shift+X, R)

Output :

Struts Tiles Tutorial


Home Page(Using Tiles) :

Struts Tiles Tutorial


Click here to download this example(src+lib) developed in eclipse


Previous Next Article

Model View Controller(MVC) Introduction Creating Struts Application In Eclipse Struts Login Application in Eclipse Struts Flow-How Struts Works Resources of Struts 1.x Application Development Login Form Example Using Struts Different Types of Form Bean in Struts Action Class in Struts Framework Introduction to Modules in Struts Application Struts DispatchAction Tutorial Struts Validation Framework Tutorial With Example Struts Tiles Tutorial Struts and Mysql Database Connectivity Example Declarative Exception Handling in Struts
comments powered by Disqus