spring

Spring MVC and apache tiles 3 integration

Continue the post Spring, JPA and hibernate integration. In this tutorial I show you how to integration Spring MVC with Apache Tile 3.

Our target web layout as below

 

 

 

 

 

 

Prerequisite for this guide you need follow things:

  • Eclipse
  • Spring MVC
  • Apache Tile 3

1. Dependencies

We need add follow dependencies to pom.xml file

<dependency>
      <groupId>org.apache.tiles</groupId>
      <artifactId>tiles-jsp</artifactId>
      <version>3.0.3</version>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>1.5.6</version>
    </dependency>

2. Configuring Spring MVC with Tiles

To make spring mvc work with tile we need add follow bean define to Spring DispatchServlet configuration file servlet-context.xml

<!-- Tile resolver -->
  <beans:bean id="tilesviewResolver"
    class="org.springframework.web.servlet.view.tiles3.TilesViewResolver"
    p:order="0" />

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

The order property equal 0 p:order="0" mean we want spring try to resolve view by tiles first.
We put tiles define file in folder /WEB-INF/tiles-defs/tiles-defs.xml.
So create this file and put following content into it

<?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" template="/WEB-INF/views/templates/template.jsp">
    <put-attribute name="title" value="" />
    <put-attribute name="header"
      value="/WEB-INF/views/templates/header.jsp" />
    <put-attribute name="menu" value="/WEB-INF/views/templates/menu.jsp" />
    <put-attribute name="content" value="" />
    <put-attribute name="footer" value="/WEB-INF/views/templates/footer.jsp" />
  </definition>
  <definition name="add.emp" extends="base">
    <put-attribute name="title" value="Add Employee" />
    <put-attribute name="content" value="/WEB-INF/views/add.jsp" />
  </definition>
</tiles-definitions>

This file define a base template layout with header,menu,content and footer.
All pages with same layout can inherite from base template. In our sample Add employee page is extended from base layout.
3. Define template pages
Follow is content for template layout, header, menu and footer.
template.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  pageEncoding="ISO-8859-1"%>
<%@ 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=ISO-8859-1">
<title><tiles:insertAttribute name="title" /></title>
<style type="text/css">
#header {
  width: 100%;
  clear: both;
  border: solid 2px;
}

#menu {
  width: 18%;
  float: left;
  border: solid 2px;
}

#content {
  width: 80%;
  float: right;
  border: solid 2px;
}

#footer {
  width: 100%;
  clear: both;
  border: solid 2px;
}
</style>
</head>
<body>
  <div id="header">
    <tiles:insertAttribute name="header" />
  </div>
  <div id="menu">
    <tiles:insertAttribute name="menu" />
  </div>
  <div id="content">
    <tiles:insertAttribute name="content" />
  </div>

  <div id="footer">
    <tiles:insertAttribute name="footer" />
  </div>
</body>
</html>

header.jsp

<h1>Header</h1>

menu.jsp

<p>
Menu go here
</p>

footer.jsp

<p>Copyright &#169; devjav.com</p>

4.Run application
Run application and go to url:http://localhost:8080/springhibernate/manage/add.do
The page will look as below:
5.Source code
You can download source code on my github or click this link

2 thoughts on “Spring MVC and apache tiles 3 integration”

  1. Pingback: URL

Leave a Reply