Spring MVC Tiles Example

Spring provides integration support with apache tiles framework. So we can simply manage the layout of the spring mvc application by the help of spring tiles support.

Advantage of Tiles support in Spring MVC

Reusability: We can reuse a single component in multiple pages like header and footer components.
Centralized control: We can control the layout of the page by a single template page only.
Easy to change the layout: By the help of single template page, we can change the layout of the page anytime. So your website can easily adapt new technologies such as bootstrap, jquery etc.

Spring MVC Tiles Example

Let's see a simple spring mvc tiles example.

Required Jar files

To run this example, you need to load:

Spring Core jar files
Spring Web jar files
Tiles jar files

download required jar file

You need to put these jar files inside the WEB-INF/lib directory.

Directory Structure

Let's see the files of spring tiles example in eclipse.

Index Page

index.jsp

<a href="hello.html">Hello Spring</a> | 
<a href="contact.html">Contact</a>

Controller classes

HelloWorldController.java

package com.javatpoint.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class HelloWorldController {
	@RequestMapping("/hello")
	public ModelAndView helloWorld() {
		String message = "Hello World, Spring MVC @ Javatpoint";
		return new ModelAndView("hello", "message", message);
	}
}

ContactController.java

package com.javatpoint.controller;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.servlet.ModelAndView;
import com.javatpoint.form.Contact;
@Controller
@SessionAttributes
public class ContactController {
	@RequestMapping(value = "/addContact", method = RequestMethod.POST)
	public String addContact(@ModelAttribute("contact")	Contact contact, BindingResult result) {
		//write the code here to add contact
		return "redirect:contact.html";
	}
	
	@RequestMapping("/contact")
	public ModelAndView showContacts() {
		return new ModelAndView("contact", "command", new Contact());
	}
}

Form class

Contact.java

package com.javatpoint.form;
public class Contact {
	private String firstname;
	private String lastname;
	private String email;
	private String telephone;
	//getters and setters
}

web.xml

In this xml file, we are specifying the servlet class DispatcherServlet that acts as the front controller in Spring Web MVC. All the incoming request for the html file will be forwarded to the DispatcherServlet.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  
 <servlet>
	<servlet-name>spring</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	<load-on-startup>1</load-on-startup>
</servlet>
	
<servlet-mapping>
	<servlet-name>spring</servlet-name>
	<url-pattern>*.html</url-pattern>
</servlet-mapping>
	
</web-app>

spring-servlet.xml file

This is the important configuration file where we need to specify the ViewResolver and View components.

The context:component-scan element defines the base-package where DispatcherServlet will search the controller class.

Here, the UrlBasedViewResolver class is used for the ViewResolver.

The prefix+string returned by controller+suffix page will be invoked for the view component.

This xml file should be located inside the WEB-INF directory.

spring-servlet.xml

 <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-3.0.xsd
		http://www.springframework.org/schema/context
		http://www.springframework.org/schema/context/spring-context-3.0.xsd">

	<context:component-scan
		base-package="com.javatpoint.controller" />

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

tiles.xml file

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>

	<definition name="hello" extends="base.definition">
		<put-attribute name="title" value="Hello Spring MVC" />
		<put-attribute name="body" value="/WEB-INF/jsp/hello.jsp" />
	</definition>

</tiles-definitions>

View Components

hello.jsp

<html>
<head>
	<title>Spring MVC Example</title>
</head>
<body>
<h1>Welcome to Spring MVC</h1>
	<p>Message is: ${message}</p>
</body>
</html>

contact.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
	<title>Spring Tiles Contact Form</title>
</head>
<body>
<h2>Contact Manager</h2>
<form:form method="post" action="addContact.html">

	<table>
	<tr>
		<td><form:label path="firstname">First Name</form:label></td>
		<td><form:input path="firstname" /></td> 
	</tr>
	<tr>
		<td><form:label path="lastname">Last Name</form:label></td>
		<td><form:input path="lastname" /></td>
	</tr>
	<tr>
		<td><form:label path="lastname">Email</form:label></td>
		<td><form:input path="email" /></td>
	</tr>
	<tr>
		<td><form:label path="lastname">Telephone</form:label></td>
		<td><form:input path="telephone" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="submit" value="Add Contact"/>
		</td>
	</tr>
</table>	
	
</form:form>
</body>
</html>

header.jsp

<h2>Header</h2>
<hr/>

footer.jsp

<hr/>
<p>Copyright  2010-2014 javatpoint.com.</p>

menu.jsp

<p>Menu 1</p>
<p>Menu 2</p>

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>
		<div><tiles:insertAttribute name="header" /></div>
		<div style="float:left;padding:10px;width:15%;"><tiles:insertAttribute name="menu" /></div>
		<div style="float:left;padding:10px;width:80%;border-left:1px solid pink;">
		<tiles:insertAttribute name="body" /></div>
    	<div style="clear:both"><tiles:insertAttribute name="footer" /></div>

</body>
</html>

download this example (developed using Eclipse)
download the required jar files