Spring MVC Tiles 3 Integration Tutorial

In this post, I will show how to integrate Apache Tiles 3 with Spring MVC.

Tousif Khan

Jul. 18, 14 · Tutorial

Likes (5)

Comment

Save

97.6K Views

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:

Spring Framework Integration

Opinions expressed by DZone contributors are their own.

Related

Trending

Spring MVC Tiles 3 Integration Tutorial

In this post, I will show how to integrate Apache Tiles 3 with Spring MVC.

Related

Partner Resources