Spring MVC Tiles 3 Integration Tutorial

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", "[email protected]", 32));
        persons.add(new person("asif", "[email protected]", 28));
        persons.add(new person("ramiz", "[email protected]", 26));
        persons.add(new person("rizwan", "[email protected]", 32));
        persons.add(new person("amol", "[email protected]", 33));
        persons.add(new person("ramdas", "[email protected]", 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: