Our Application Layout
Our goal is to add Header, Footer and Menu to our Spring 3 HelloWorld application. Following will be the layout of the same.
Required JAR files
In order to add Tiles support to our Spring3 application, we will need few jar files. Following is the list of JARs in our example. Add these JARs in WEB-INF/lib folder.
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
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.File: /WebContent/WEB-INF/spring-servlet.xml
| <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass"> <value> org.springframework.web.servlet.view.tiles2.TilesView </value> </property> </bean> <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer"> <property name="definitions"> <list> <value>/WEB-INF/tiles.xml</value> </list> </property> </bean> |
An input configuration file /WEB-INF/tiles.xml is passed as argument in above bean definition. This file contains the Tiles definition for our web application.
Create a file tiles.xml in WEB-INF folder and copy following code into it.
File: WebContent/WEB-INF/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 name="menu" value="/WEB-INF/jsp/menu.jsp" /> <put-attribute name="body" value="" /> <put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" /> </definition> <definition name="contact" extends="base.definition"> <put-attribute name="title" value="Contact Manager" /> <put-attribute name="body" value="/WEB-INF/jsp/contact.jsp" /> </definition> </tiles-definitions> |
Here in tiles.xml we have define a template base.definition. This layout contains attributes such as Header, Title, Body, Menu and Footer. The layout is then extended and new definitions for Contact page. We have override the default layout and changed the content for Body and Title.
Creating View – The JSPs
We will define the template for our webapplication in a JSP file called layout.jsp. This template will contain different segments of web page (Header, Footer, Menu etc). Create four new JSP files layout.jsp, header.jsp, menu.jsp and footer.jsp and copy following content in each of them.
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 name="header" /> </td> </tr> <tr> <td height="250"><tiles:insertAttribute name="menu" /></td> <td width="350"><tiles:insertAttribute name="body" /></td> </tr> <tr> <td height="30" colspan="2"><tiles:insertAttribute name="footer" /> </td> </tr> </table> </body> </html> |
File: WebContent/WEB-INF/jsp/header.jsp
| 1 | <h1>Header</h1> |
File: WebContent/WEB-INF/jsp/menu.jsp
| 1 | <p>Menu</p> |
File: WebContent/WEB-INF/jsp/footer.jsp
| 1 | <p>footer</p> |
Compile and Execute the application and see that the header, menu and footer are properly applied.
-/ Dinesh
