Using Tiles with Spring MVC

What are Marker or Tag Interfaces in Java
July 21, 2012
How main Method works in Java
July 21, 2012


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:


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:


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=""

    <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" />

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





The file must be available in the classpath. For your web application, you can safely place the 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"


  		<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 name="welcome" extends="baseLayout">
      			<put-attribute name="title"  value="Welcome"/>
      			<put-attribute name="body"   value="/jsp/welcome.jsp"/>

  		<definition name="ManageQuiz" extends="baseLayout">
      			<put-attribute name="title"  value="Manage Quiz"/>
      			<put-attribute name="body"   value="/jsp/ManageQuiz.jsp"/>

  		<definition name="AttemptQuiz" extends="baseLayout">
      			<put-attribute name="title"  value="Attempt Quiz"/>
      			<put-attribute name="body"   value="/jsp/AttemptQuiz.jsp"/>


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="" prefix="tiles" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        	<title><tiles:insertAttribute name="title" ignore="true" /></title>
				<title>JQuery Theme Roller</title>

        	<table border="1" align="center" width="100%">
                		<td height="15%" colspan="2">
                    			<tiles:insertAttribute name="header" />
                		<td height="75%" width="10%">
                    			<tiles:insertAttribute name="menu" />
                		<td width="75%" width="90%">
                    			<tiles:insertAttribute name="body" />
                		<td height="10%" colspan="2">
                    			<tiles:insertAttribute name="footer" />

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:


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;

public class AttemptQuizController {

	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.


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