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
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
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.
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.
The highlighted jar files in above list are the new jars to be added in project for Tiles integration.
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
<?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.
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.
<%@ 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 © SiteName</p>