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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<%@ 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]—>
body{ margin-top:20px; margin-bottom:20px; background-color:#DFDFDF;}
</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
|
1
2
3
4
|
<div class=“span-24”>
<img src=“resources/images/techzoo-header.png”
width=“950” style=“padding-top:10px;” />
</div>
|
Footer.jsp
|
1
2
3
4
5
6
7
8
|
<hr />
<div class=“span-1 prepend-3”> </div>
<div class=“span-16 last”>
<p>
<b>TechZoo – A Zoo of Technology</b>
( All rights Reserved)
</p>
</div>
|
menu.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<%@ 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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
package 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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
package 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’.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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
|
1
2
3
4
|
<div style=“margin:10px;”>
<h3>SpringMVC – Tiles3 Integration tutorial</h3>
<p>By:– Tousif Khan</p>
</div>
|
personList.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<%@ 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:
Download Source (without jars, size 63 kb)
Download WAR file (size 4.63 Mb)
Source techzoo.org
