Enterprise Integration Zone is brought to you in partnership with:

I work for an IT company as Technology Lead and in my leisure time I bake new recipes for applications and try my hands on latest trends on programming. Primarily I write about Java, JEE, Spring, Hibernate, jQuery, PHP, CakePHP, Web 2.0, UI, ExtJS, Sencha Touch and the list goes on.... Of late I am trying new technologies such as Twitter Bootstrap, Responsive Frameworks, Mobile development etc and I love it. www.techzoo.org Tousif is a DZone MVB and is not an employee of DZone and has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

Spring MVC Tiles 3 Integration Tutorial

07.18.2014
| 10588 views |
  • submit to reddit

One of the areas in which Spring MVC has advance compares to other frameworks is in the separation of view technologies. In this post, i will show how to integrate Apache Tiles 3 with Spring MVC. Apache Tiles is a free open-source template engine for java web frameworks. It’s based on Composite pattern and used to simplify the development of user interfaces.

Create a spring configuration XML file which add bean definition for TilesConfigurar and TilesView.

<?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:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
	http://www.springframework.org/schema/beans/spring-beans-3.2.xsd 
	http://www.springframework.org/schema/context  
	http://www.springframework.org/schema/context/spring-context-3.2.xsd 
	http://www.springframework.org/schema/mvc
	http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
    http://www.springframework.org/schema/tx
    http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">
	
	<context:annotation-config />
	<context:component-scan base-package="org.techzoo.springtiles.controller" />

	<mvc:annotation-driven />
	<mvc:default-servlet-handler />
	<mvc:resources mapping="/resources/**" location="/resources/" />

	<bean id="viewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver"/>

	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/layouts/layouts.xml</value>
				<value>/WEB-INF/layouts/views.xml</value>
			</list>
		</property>
	</bean>

</beans>

Now create a tiles definition xml file which contains tiles template definitions. I have created two xml files, one for tiles base template and another for tiles body definition but you can combine it in one.

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE tiles-definitions PUBLIC  
        "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"  
        "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>

    <definition name="DefaultTemplate" 
      template="/WEB-INF/views/template/SiteTemplate.jsp">
		<put-attribute name="title" 	value="Home" />
		<put-attribute name="header" 	value="/WEB-INF/views/template/header.jsp" />
		<put-attribute name="menu" 		value="/WEB-INF/views/template/menu.jsp" />
		<put-attribute name="body" 		value="" />
		<put-attribute name="footer" 	value="/WEB-INF/views/template/footer.jsp" />
	</definition>
	
</tiles-definitions>

Create a template jsp which include the common pages (like header, footer, menu etc.). I have used Blueprint css framework to create a grid for layout.

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Spring MVC - Tiles Integration tutorial</title>
	<link rel="stylesheet" href="resources/css/screen.css" 
      type="text/css" media="screen, projection"></link>
	<link rel="stylesheet" href="resources/css/print.css" 
      type="text/css" media="print"></link>
	<!--[if IE]>
	<link rel="stylesheet" href="resources/css/ie.css" 
      type="text/css" media="screen, projection">
	<![endif]-->
<style>
body{ margin-top:20px; margin-bottom:20px; background-color:#DFDFDF;}
</style>
</head>
<body>
	<div class="container" style="border: #C1C1C1 solid 1px; border-radius:10px;">
		<!-- Header -->
		<tiles:insertAttribute name="header" />
		<!-- Menu Page -->
		<div class="span-5  border" style="height:400px;background-color:#FCFCFC;">
			<tiles:insertAttribute name="menu" />
		</div>
		<!-- Body Page -->
		<div class="span-19 last">
			<tiles:insertAttribute name="body" />
		</div>
		<!-- Footer Page -->
		<tiles:insertAttribute name="footer" />
	</div>
</body>
</html>

Header.jsp

<div class="span-24">
    <img src="resources/images/techzoo-header.png"
        width="950" style="padding-top:10px;" />
</div>

Footer.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<ul style="list-style:none;line-height:28px;">
 
    <li>
    <spring:url value="/index" var="homeUrl" htmlEscape="true" />
        <a href="${homeUrl}">Home</a>
    </li>
 
    <li>
    <spring:url value="/viewPeson" var="personListUrl" htmlEscape="true" />
        <a href="${personListUrl}">Person List</a>
    </li>
 
</ul>

As you can see, In you main template jsp we have inserted body attribute but in tiles-def xml file that body attribute is blank. This is because spring controller will render this portion using its view rendering mechanism.

Create a Controller which has two action (index and viewPeson) . The return value of every controller will be mapped with each tiles definition which is associated with jsp to render as body in template.

ackage org.techzoo.springtiles.controller;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import org.techzoo.springtiles.vo.Person;
 
@Controller
public class SpringTilesController {
 
    @RequestMapping(value="index")
    public String index() {
        return "index";
    }
    
    @RequestMapping(value="viewPeson")
    public ModelAndView viewPersons(Model model) {
        Map<String, List<Person>> persons =
                new HashMap<String, List<Person>>();
        persons.put("persons", Person.createPersons());
        return new ModelAndView("personList", persons);
    }
    
}

A Person VO class just to show a list of person in personList.jsp.

ckage org.techzoo.springtiles.vo;
 
import java.util.ArrayList;
import java.util.List;
 
public class Person {
 
    private String name, email;
    private int age;
    
    public Person(String name, String email, int age) {
        this.name = name;
        this.email = email;
        this.age = age;
    }
    
    //getter, setters methods
  
    @Override
    public String toString()
    {
        return String.format(
            "Person [name = %s, email = %s, age = %d]",
                name, email, age);
    }
    
    public static List<Person> createPersons() {
        List<Person> persons = new ArrayList<Person>();
        persons.add(new Person("Tousif", "tousif@mail.com", 32));
        persons.add(new Person("Asif", "asif@mail.com", 28));
        persons.add(new Person("Ramiz", "ramiz@mail.com", 26));
        persons.add(new Person("Rizwan", "rizwan@mail.com", 32));
        persons.add(new Person("Amol", "amol@mail.com", 33));
        persons.add(new Person("Ramdas", "ramdas@mail.com", 31));
        return persons;
    }
}

Your second tiles defination xml (views.xml) will looks similar to following. Both the tile defination ‘index’ and ‘personList’ is extending ‘DefaultTemplate’.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
	"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
	"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>

	<definition name="index" extends="DefaultTemplate">
	    <put-attribute name="body"	
        value="/WEB-INF/views/index.jsp" />
	</definition>

	<definition name="personList" extends="DefaultTemplate">
	    <put-attribute name="body"	
        value="/WEB-INF/views/personList.jsp" />
	</definition>
	
</tiles-definitions>

index.jsp

<div style="margin:10px;">
	<h3>SpringMVC - Tiles3 Integration tutorial</h3>
	<p>By:- Tousif Khan</p>
</div>

personList.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div style="margin: 10px;">
	<h4>List of Persons</h4>
	<table style="width: 600px" class="reference">
		<tbody>
		<tr>
			<th>Sr. No.</th>
			<th>Name</th>
			<th>Age</th>
			<th>Email</th>
		</tr>
		<c:forEach var="person" items="${requestScope.persons}"
			varStatus="loopCounter">
		<tr>
			<td><c:out value="${loopCounter.count}" /></td>
			<td><c:out value="${person.name}" /></td>
			<td><c:out value="${person.email}" /></td>
			<td><c:out value="${person.age}" /></td>
		</tr>
		</c:forEach>
		</tbody>
	</table>
</div>


Output:

Published at DZone with permission of Tousif Khan, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)