Spring Tiles Integration

Here we’ll explain about Spring Tiles integration.Website is generally divided into number of pieces of reusable template that are being rendered among different web pages.

Eg:- A site containing header, footer, menu etc.

In the above example the items consists of same throughout the website and provide it a common look and feel. It is very difficult to hard code this in each and every wed page and later if a change is required than all the pages needs to be modified. So we use the mechanism like templatization mechanism. In this mechanism we make a common Header, Footer, Menu and include this in each page.

The tiles plug-in allow both templating and componentization. The mechanism of templating and componentization are similar. In this mechanism we define the parts of page or a tile that we assemble to build another part or a full page. Parts of a page can

  1. Take parameters
  2. Allowing dynamic content
  3. Can be seen as a method JAVA language

Tiles are templating system helps to maintain a consistent look and feel across all the web pages of a web application. It increases the reusability of template and reduces code duplication. The layout of website is defined as in a central configuration file and this layout can be extended across all the WebPages of the web application.

If we want to use Tiles in our project we included couple of additional dependencies. They are

  1. Struts version 1.1 or higher
  2. Commons BeadUtils
  3. Commons Digester
  4. Commons Logging

The above dependencies are all available in the spring distribution.

The following figure shows our application layout or design. In application layout, our goal is to add Header, Footer and Menu to our application program.

Website Structure
Website Structure

For the Addition of Tiles support to our spring program, we will use few jar files. The following list of JARs is added in WEB-INF/lib folder.

WEB-INF Structure
WEB-INF Structure

The highlighted jar files in above list are the new jars to be added in project for Tiles integration.

Configuring Tiles framework in Spring MVC

Eg:-To configure Tiles, an entry for bean TilesConfigure has to be made in spring-servlet.xml. Open the spring-servlet.xml from WEB-INF folder and add following code between <beans> </beans> tag.

<bean
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass">
<value>
org.springframework.web.servlet.view.tiles2.TilesView
</value>
</property>
</bean>
<bean
class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/tiles.xml</value>
</list>
</property>
</bean>

In the above bean definition an input configuration file /WEB-INF/tiles.xml is passed like an argument.

Create a file named as tiles.xml in WEB-INF folder and copy the below code into it

Tiles XML
Tiles XML
<?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="base.definition"
template="/WEB-INF/jsp/layout.jsp">
<put-attribute name="title" value="" />
<put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
<put-attribute value="/WEB-INF/jsp/menu.jsp" />
<put-attribute value="" />
<put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />
</definition>
<definition extends="base.definition">
<put-attribute name="title" value="Contact Manager" />
<put-attribute value="/WEB-INF/jsp/contact.jsp" />
</definition>
</tiles-definitions>

In the above code we have define a template base.definition. This layout consists of attributes such as Header, Title, Body, Menu and Folder and this layout is then extended and new definitions for Contact page. We have overridden the default layout and change the content for Body and Title.

Creating View- The JSPs

 

Creating View- The JSPs
Creating View- The JSPs

 

We will design the template for our web application in a JSP file named as layout.jsp. This template will consist of different segments of web page such as Header, Footer, and Menu etc. After that we are creating four JSP files and write the codes.

File:- WebContent/WEB-INF/jsp/layout.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>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" align="center">
<tr><td height="30" colspan="2"><tiles:insertAttribute /></td>
<td height="250"><tiles:insertAttribute /></td>
<td width="350"><tiles:insertAttribute /></td>
</tr>
<tr><td height="30" colspan="2"><tiles:insertAttribute /></td>
</tr></table></body></html>
File:- WebContent/WEB-INF/jsp/header.jsp
<h1>Header</h1>
File:- WebContent/WEB-INF/jsp/menu.jsp
<p>Menu</p>
File:- WebContent/WEB-INF/jsp/footer.jsp
<p>Copyright &copy; SiteName</p>

OUTPUT

 

Output
Output