Introduction

When we are designing our web application, we need to have a page structure in place. Tiles is a famous plugin for defining the web page structure in a web application. Struts came up with tiles plugin for the first time. But the popularity of this plugin resulted in it being adopted by the Spring MVC framework too.

The following steps will guide you in configuring the Tiles plugin with Spring MVC framework:

Steps to use Tiles plugin in Spring MVC

This tutorial assumes that you already have basic idea about the configuration and working of Spring MVC framework:

1) Include required jars

Include the following jar files in the project classpath:

antlr-runtime-3.0.jar
commons-beanutils-1.7.0.jar
commons-digester-1.8.jar
commons-logging-1.0.4.jar
commons-logging-api-1.1.jar
jstl.jar
org.springframework.asm-3.0.0.M3.jar
org.springframework.beans-3.0.0.M3.jar
org.springframework.context-3.0.0.M3.jar
org.springframework.context.support-3.0.0.M3.jar
org.springframework.core-3.0.0.M3.jar
org.springframework.expression-3.0.0.M3.jar
org.springframework.web-3.0.0.M3.jar
org.springframework.web.servlet-3.0.0.M3.jar
standard.jar
tiles-api-2.0.4.jar
tiles-core-2.0.4.jar
tiles-jsp-2.0.4.jar

You can download a zip file containing the above jar files from spring tiles dependencies location

Also make sure that these jar files are present inside /WEB-INF folder of spring MVC application.

Tip for STS (Spring Tool Suite): If you are planning to use MAVEN and STS for creating your spring web application based on Tiles, use the following dependency config for fetching the tiles related jar files from maven repository:

<dependency>
  <groupId>org.apache.tiles</groupId>
  <artifactId>tiles-core</artifactId>
  <version>2.2.2</version>
  <type>jar</type>
  <scope>compile</scope>
</dependency>
<dependency>
  <groupId>org.apache.tiles</groupId>
  <artifactId>tiles-template</artifactId>
  <version>2.2.2</version>
  <type>jar</type>
  <scope>compile</scope>
</dependency>
<dependency>
  <groupId>org.apache.tiles</groupId>
  <artifactId>tiles-jsp</artifactId>
  <version>2.2.2</version>
  <type>jar</type>
  <scope>compile</scope>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
  <artifactId>tiles-servlet</artifactId>
  <version>2.2.2</version>
  <type>jar</type>
  <scope>compile</scope>
</dependency>

2) Configure dispatcher

Add the following contents to dispatcher-servlet.xml:

 	<context:component-scan base-package="com.controller" />
   	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer" p:definitions="/WEB-INF/tiles-defs.xml" />
 

Here we are telling Spring MVC to scan the base package for tiles specific classes. The second statement provides the location of tiles configuration file.
Please note that the tiles-defs.xml file has to be present at the location mentioned in second line.

Tip 1: The dispatcher-servlet.xml file needs to be present inside the WEB-INF folder of your spring web applications. The name dispatcher-servlet is used because we shall use the name dispatcher for our Spring MVC dispatcher in the deployment descriptor file web.xml. If you plan to use a different name for the spring MVC dispatcher is web.xml, you need to use the same name for the above shown config file.

Tips 2: Some developers want to use view resolvers for going from one URL to another. In that case, “ResourceBundleViewResolver” can be used with Tiles. This resolver looks at the url requested and fetches the corresponding jsp page configured with it. The above file in case of view resolver shall look like:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="

http://www.springframework.org/schema/beans


http://www.springframework.org/schema/beans/spring-beans.xsd


http://www.springframework.org/schema/context


http://www.springframework.org/schema/context/spring-context.xsd">

    <bean id="viewResolver" class="org.springframework.web.servlet.view. ResourceBundleViewResolver" p:basename="views" />
 	<context:component-scan base-package="com.controller" />
   	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer" p:definitions="/WEB-INF/tiles-defs.xml" />
</beans>

To display views we use the ResourceBundleViewResolver. By default the views.properties file will be used to store the key value pairs, we specify this using the basename attribute. A sample for view.properties shall look like:

welcome.(class)=org.springframework.web.servlet.view.tiles2.TilesView
welcome.url=welcome

ManageQuiz.(class)=org.springframework.web.servlet.view.tiles2.TilesView
ManageQuiz.url=ManageQuiz

AttemptQuiz.(class)=org.springframework.web.servlet.view.tiles2.TilesView
AttemptQuiz.url=AttemptQuiz

about.(class)=org.springframework.web.servlet.view.JstlView
about.url=/jsp/about.jsp

The views.properties file must be available in the classpath. For your web application, you can safely place the view.properties file in the WEB-INF/classes folder (parallel to your com folder).

3) Configure tiles xml

Add a new file tiles-defs.xml in the WEB-INF folder of web application:

	<?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="/WEB-INF/tiles/baseLayout.jsp">
      			<put-attribute name="title"  value="Template"/>
      			<put-attribute name="header" value="/WEB-INF/tiles/header.jsp"/>
      			<put-attribute name="menu"   value="/WEB-INF/tiles/menu.jsp"/>
      			<put-attribute name="body"   value="/WEB-INF/tiles/body.jsp"/>
      			<put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp"/>
  		</definition>
  
  		<definition name="welcome" extends="baseLayout">
      			<put-attribute name="title"  value="Welcome"/>
      			<put-attribute name="body"   value="/jsp/welcome.jsp"/>
  		</definition>
  
  		<definition name="ManageQuiz" extends="baseLayout">
      			<put-attribute name="title"  value="Manage Quiz"/>
      			<put-attribute name="body"   value="/jsp/ManageQuiz.jsp"/>
  		</definition>
  
  		<definition name="AttemptQuiz" extends="baseLayout">
      			<put-attribute name="title"  value="Attempt Quiz"/>
      			<put-attribute name="body"   value="/jsp/AttemptQuiz.jsp"/>
  		</definition>
  
	</tiles-definitions>

Some points to note about above configuration are:

a) The first definition name “baseLayout” defines the structure of any web page and is not shown to any user.
b) The definitions like “welcome”, “ManageQuiz” and “AttemptQuiz” are the actual pages shown to users.
c) All definitions should extend the baseLayout definition. This gives all pages the same structure.
d) With each definition, we are specifing the page title and body part of the web page.
e) With the use of such configuration, only the body contents are getting changed and not other parts of the web page.

4) Defining page areas using baseLayout

As you can see, the baseLayout.jsp is defining the structure of web pages and is present in /WEB-INF/tiles/.
You may change the name of this file and the path as well. The purpose of having the baseLayout in place is that it configures the height, width of various page components.
Here is the sample baseLayout.jsp for our application.

<%@ 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>
				<title>JQuery Theme Roller</title>
 
			</head>
    	</meta>
    	<body>
        	<table border="1" align="center" width="100%">
            		<tr>
                		<td height="15%" colspan="2">
                    			<tiles:insertAttribute name="header" />
                		</td>
            		</tr>
            		<tr>
                		<td height="75%" width="10%">
                    			<tiles:insertAttribute name="menu" />
                		</td>
                		<td width="75%" width="90%">
                    			<tiles:insertAttribute name="body" />
                		</td>
            		</tr>
            		<tr>
                		<td height="10%" colspan="2">
                    			<tiles:insertAttribute name="footer" />
                		</td>
            		</tr>
        	</table>
	</body>
</html>

The above JSP code has given structure to our page and acts like a template for other pages in our spring web application. The structure consists of header, footer, menu and main body regions. A diagram showing the mock up design for our layout shall look like:

spring-tiles-pic-2

5) Add custom JSP’s

Now add rest of JSP’s defined in the tiles-defs.xml. These include header.jsp, footer.jsp, menu.jsp, AttemptQuiz.jsp and ManageQuiz.jsp. These JSP’s should be present in the same path as shown in step 3 tiles-defs.xml above. For our quiz application, I have added AttemptQuiz.jsp, ManageQuiz.jsp, welcome.jsp and about.jsp. The link to full source code for this Quiz sample application is available at the end of this tutorial

6) Add tiles controllers

For each of the JSP’s added in the /jsp folder, add the following classes to the com.controller folder. These classes have to be compiled inside WEB-INF/classes/com/controller.

It is worth mentioning here that we added the base package as com.controller in the dispatcher-servlet.xml in step 2 above.
Here is the source code for one of the controller. You need to write controllers for all the jsp’s present inside jsp folder of web application.

package com.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class AttemptQuizController {

	@RequestMapping("/about.htm")
	public String redirect()
	{
		return "AttemptQuiz";
	}
}

A few points to note about the above controllers are:
a) Here we are forwarding the request to the URL for which we had configured the Dispatcher servlet which in this case is *.htm.
b) The return string has to be one of the definition name configured in step 3.

7) Download Sample code

If you are going to create a Spring MVC and Tiles based project, its best to have a skeleton structure and build on top of that. This helps in easing the development process and also gives you a good understanding of how the various Spring web MVC components fit together. A sample application for the same purpose can downloaded from:

Spring Tiles Example Tutorial code

Bonus Tip: Apart from Tiles, Apache Velocity is also one of the most commonly used plugin for Spring based web applications.

References

1. Spring MVC and Struts Tiles example
2. Spring MVC Integration of Tiles
3. Spring MVC 3 Tiles 2.2.2 Integration Tutorial

Related Posts

Using Tiles with Spring MVC admin Spring
Introduction When we are designing our web application, we need to have a page structure in place. Tiles is a famous plugin for defining the web page structure in a web application. Struts came up with tiles plugin for the first time. But the popularity of this plugin resulted in...
<h2>Introduction</h2> <p>When we are designing our web application, we need to have a page structure in place. Tiles is a famous plugin for defining the web page structure in a web application. Struts came up with tiles plugin for the first time. But the popularity of this plugin resulted in it being adopted by the Spring MVC framework too. The following steps will guide you in configuring the Tiles plugin with Spring MVC framework: <div id="toc"> 1. <a href="#includejars">Include required jars</a> 2. <a href="#configuredispatcher">Configure dispatcher</a> 3. <a href="#tilesxml">Configure tiles xml</a> 4. <a href="#baselayout">Defining page areas using baseLayout</a> 5. <a href="#customjsp">Add custom JSP’s</a> 6. <a href="#tilescontroller">Add tiles controllers</a> 7. <a href="#downloadcode">Download Sample code</a> 8. <a href="#references">References</a> </div> </p> <h2>Steps to use Tiles plugin in Spring MVC</h2> <p>This tutorial assumes that you already have basic idea about the configuration and working of Spring MVC framework:</p> <a name="includejars"></a> <h3>1) Include required jars</h3> <p>Include the following <a href="http://www.javaexperience.com/important-jar-files-in-jre/">jar files</a> in the project classpath: <blockquote>antlr-runtime-3.0.jar commons-beanutils-1.7.0.jar commons-digester-1.8.jar commons-logging-1.0.4.jar commons-logging-api-1.1.jar jstl.jar org.springframework.asm-3.0.0.M3.jar org.springframework.beans-3.0.0.M3.jar org.springframework.context-3.0.0.M3.jar org.springframework.context.support-3.0.0.M3.jar org.springframework.core-3.0.0.M3.jar org.springframework.expression-3.0.0.M3.jar org.springframework.web-3.0.0.M3.jar org.springframework.web.servlet-3.0.0.M3.jar standard.jar tiles-api-2.0.4.jar tiles-core-2.0.4.jar tiles-jsp-2.0.4.jar</blockquote> <code>You can download a zip file containing the above jar files from <a href="http://www.javaexperience.com/spring_tiles_lib.zip">spring tiles dependencies location</a></code> Also make sure that these jar files are present inside <app>/WEB-INF folder of spring MVC application. <strong>Tip for STS (Spring Tool Suite):</strong> If you are planning to use <strong>MAVEN and STS</strong> for creating your spring web application based on Tiles, use the following dependency config for fetching the tiles related jar files from maven repository: 1 </p> <a name="configuredispatcher"></a> <h3>2) Configure dispatcher</h3> <p>Add the following contents to dispatcher-servlet.xml: 1 Here we are telling Spring MVC to scan the base package for tiles specific classes. The second statement provides the location of tiles configuration file. Please note that the tiles-defs.xml file has to be present at the location mentioned in second line. <strong>Tip 1:</strong> The dispatcher-servlet.xml file needs to be present inside the WEB-INF folder of your spring web applications. The name dispatcher-servlet is used because we shall use the name dispatcher for our Spring MVC dispatcher in the deployment descriptor file web.xml. If you plan to use a different name for the spring MVC dispatcher is web.xml, you need to use the same name for the above shown config file. <strong>Tips 2:</strong> Some developers want to use view resolvers for going from one URL to another. In that case, "ResourceBundleViewResolver" can be used with Tiles. This resolver looks at the url requested and fetches the corresponding jsp page configured with it. The above file in case of view resolver shall look like: 1 To display views we use the ResourceBundleViewResolver. By default the views.properties file will be used to store the key value pairs, we specify this using the basename attribute. A sample for view.properties shall look like: 1 The views.properties file must be available in the classpath. For your web application, you can safely place the view.properties file in the WEB-INF/classes folder (parallel to your com folder). </p> <a name="tilesxml"></a> <h3>3) Configure tiles xml</h3> <p>Add a new file tiles-defs.xml in the WEB-INF folder of <a href="http://www.javaexperience.com/performance-management-for-web-applications/">web application</a>: 1 Some points to note about above configuration are: a) The first definition name "baseLayout" defines the structure of any web page and is not shown to any user. b) The definitions like "welcome", "ManageQuiz" and "AttemptQuiz" are the actual pages shown to users. c) All definitions should extend the baseLayout definition. This gives all pages the same structure. d) With each definition, we are specifing the page title and body part of the web page. e) With the use of such configuration, only the body contents are getting changed and not other parts of the web page.</p> <a name="baselayout"></a> <h3>4) Defining page areas using baseLayout</h3> <p>As you can see, the baseLayout.jsp is defining the structure of web pages and is present in /WEB-INF/tiles/. You may change the name of this file and the path as well. The purpose of having the baseLayout in place is that it configures the height, width of various page components. Here is the sample baseLayout.jsp for our application.</p> 1 The above JSP code has given structure to our page and acts like a template for other pages in our spring web application. The structure consists of header, footer, menu and main body regions. A diagram showing the mock up design for our layout shall look like: <img src="http://www.javaexperience.com/wp-content/uploads/2012/07/spring-tiles-pic-2.gif" alt="spring-tiles-pic-2" width="329" height="247" class="alignnone size-full wp-image-2310" /> <a name="customjsp"></a> <h3>5) <a href="http://www.javaexperience.com/understanding-jsp-lifecycle/">Add custom JSP's</a></h3> <p>Now add rest of JSP's defined in the tiles-defs.xml. These include header.jsp, footer.jsp, menu.jsp, AttemptQuiz.jsp and ManageQuiz.jsp. These JSP's should be present in the same path as shown in step 3 tiles-defs.xml above. For our quiz application, I have added AttemptQuiz.jsp, ManageQuiz.jsp, welcome.jsp and about.jsp. The link to full source code for this Quiz sample application is available at the end of this tutorial</p> <a name="tilescontroller"></a> <h3>6) Add tiles controllers</h3> <p>For each of the JSP's added in the /jsp folder, add the following classes to the com.controller folder. These classes have to be compiled inside WEB-INF/classes/com/controller. It is worth mentioning here that we added the base package as com.controller in the dispatcher-servlet.xml in step 2 above. Here is the source code for one of the controller. You need to write controllers for all the jsp's present inside jsp folder of web application.</p> 1 A few points to note about the above controllers are: a) Here we are forwarding the request to the URL for which we had configured the Dispatcher servlet which in this case is *.htm. b) The return string has to be one of the definition name configured in step 3. <a name="downloadcode"></a> <h3>7) Download Sample code</h3> If you are going to create a Spring MVC and Tiles based project, its best to have a skeleton structure and build on top of that. This helps in easing the development process and also gives you a good understanding of how the various Spring web MVC components fit together. A sample application for the same purpose can downloaded from: <a href="http://www.javaexperience.com/springTilesExample.zip">Spring Tiles Example Tutorial code</a> <strong>Bonus Tip:</strong> Apart from Tiles, <a href="http://velocity.apache.org/">Apache Velocity</a> is also one of the most commonly used plugin for Spring based web applications. <a name="references"></a> <h3>References</h3> 1. <a href="http://java.dzone.com/articles/spring-mvc-and-struts-tiles" target="_blank">Spring MVC and Struts Tiles example</a> 2. <a href="http://www.coderanch.com/t/61221/oa/Spring-MVC-Integration-Tiles-Complete" target="_blank">Spring MVC Integration of Tiles</a> 3. <a href="http://www.javacodegeeks.com/2011/06/springmvc-3-tiles-222-integration.html" target="_blank">Spring MVC 3 Tiles 2.2.2 Integration Tutorial</a>
How to collect a list of all bean instances in Spring IoC
The following two tabs change content below.
I run this blog with lots of passion. In this website, you will find tutorials on Core Java, Spring, Struts, Web Applications, Portals and Database. Please support me and the website by sharing the posts on your facebook / twitter. You can tap the share button at the top of each post. Thanks for the support.

Comments

comments