Spring MVC 3 and Apache Tiles 2.2.2 Integration

Apache Tiles is a popular templating framework used for Java web application. Tiles gain the popularity because Struts 1.x use Tiles as its default template framewrok. SpringMvc that is MVC framework just like Strust, also supports integration with Tiles as template framework.

In this tutorial we will go together to integrate SpringMvc 3 and Tiles 2.2.2. Remember, we use Tiles 2.2.2 although version 3 is ready.
The application we will make is like this:

Every menu in the left when it is clicked will change only the main part of the page (the center part). The old fashioned way to achieve this is using a number of pages that have same left side menu but different layout in the main part. But what happen if we have 100 pages and the footer has changed, we have to change all of the pages. What a waste of time.

I assume you have already know how to use SpingMVC 3

1. Configure The Library

The very first step is to install the needed libraries to the project.

2. Configure dispatcher-servlet.xml

    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
        <property name="definitions">
          <list>
            <value>/WEB-INF/tiles.xml</value>
          </list>
        </property>
    </bean>
 
    <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
      <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/>
    </bean>

<list>

<value>/WEB-INF/tiles.xml</value>

</list>

</property>

</bean>

</bean>

3. Configure tiles.xml

<?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="baseLayout" template="/WEB-INF/jsp/tiles/layout.jsp">
  <put-attribute name="title" value="AwanLabs" />
  <put-attribute name="header" value="/WEB-INF/jsp/tiles/header.jsp" />
  <put-attribute name="navigation" value="/WEB-INF/jsp/tiles/navigation.jsp" />
  <put-attribute name="body" value="" />
  <put-attribute name="footer" value="/WEB-INF/jsp/tiles/footer.jsp" />
 </definition>
   
 <definition name="welcome" extends="baseLayout">
  <put-attribute name="title" value="AwanLabs : Welcome" />
  <put-attribute name="body" value="/WEB-INF/jsp/tiles/welcome.jsp" />
 </definition>
 
 <definition name="createUser" extends="baseLayout">
  <put-attribute name="title" value="AwanLabs : Create User" />
  <put-attribute name="body" value="/WEB-INF/jsp/tiles/createUser.jsp" />
 </definition>
 
 <definition name="listUsers" extends="baseLayout">
  <put-attribute name="title" value="AwanLabs : Create User" />
  <put-attribute name="body" value="/WEB-INF/jsp/tiles/listUsers.jsp" />
 </definition>
   
</tiles-definitions>

<?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>

<put-attribute name="title" value="AwanLabs" />

<put-attribute name="header" value="/WEB-INF/jsp/tiles/header.jsp" />

<put-attribute name="navigation" value="/WEB-INF/jsp/tiles/navigation.jsp" />

<put-attribute name="body" value="" />

<put-attribute name="footer" value="/WEB-INF/jsp/tiles/footer.jsp" />

</definition>

<put-attribute name="title" value="AwanLabs : Welcome" />

<put-attribute name="body" value="/WEB-INF/jsp/tiles/welcome.jsp" />

</definition>

<put-attribute name="title" value="AwanLabs : Create User" />

<put-attribute name="body" value="/WEB-INF/jsp/tiles/createUser.jsp" />

</definition>

<put-attribute name="title" value="AwanLabs : Create User" />

<put-attribute name="body" value="/WEB-INF/jsp/tiles/listUsers.jsp" />

</definition>

</tiles-definitions>

In this configuration file we created one main layout and three partial pages. These partial pages will make our application has dynamic page.

4. JSP Code

layout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<title><tiles:insertAttribute name="title" ignore="true" /></title>
</head>
<body>
 
<table border="1" style="border-collapse: collapse;" cellpadding="2" cellspacing="2" align="center" width="800">    <tbody><tr>
        <td height="30" colspan="2"><tiles:insertAttribute name="header" /></td>
    </tr>
    <tr>
        <td width="150" height="450" valign="top">
 
         <tiles:insertAttribute name="navigation" />
 
        </td>
        <td valign="top" width="650">
 
         <tiles:insertAttribute name="body" />
 
        </td>
    </tr>
    <tr>
        <td height="30" colspan="2">
 
         <tiles:insertAttribute name="footer" />
 
        </td>
    </tr>
</tbody></table></body>
</html>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<html>

<head>

</head>

<body>

</tr>

<tr>

<tiles:insertAttribute name="navigation" />

</td>

<tiles:insertAttribute name="body" />

</td>

</tr>

<tr>

<tiles:insertAttribute name="footer" />

</td>

</tr>

</tbody></table></body>

</html>

header.jsp

<h2>AwanLabs : Riset Teknologi</h2>

1	<h2>AwanLabs : Riset Teknologi</h2>

navigation.jsp

<p><a href="createUser">Create User</a></p>
<p><a href="listUsers">View Users</a></p>
<p><a href="logout.do">Logout</a></p>

<p><a href="createUser">Create User</a></p>

<p><a href="listUsers">View Users</a></p>

<p><a href="logout.do">Logout</a></p>

footer.jsp

<center>
 <b>© 2011 AwanLabs All Rights Reserved</b>
</center>

</center>

welcome.jsp

<h2>Welcome to SpringMVC+Tiles Sample Application </h2>
Agung Setiawan </br>
Agung Setiawan </br>
Agung Setiawan </br>
Agung Setiawan </br>
Agung Setiawan </br>

<h2>Welcome to SpringMVC+Tiles Sample Application </h2>

Agung Setiawan </br>

createUser.jsp

<h2>List Users</h2>

1	<h2>List Users</h2>

listUsers.jsp

<h2>List Users</h2>

1	<h2>List Users</h2>

5. TilesController

package com.agung.springmvcapachetiles.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping(value="tiles/*")
public class TilesController {
    
    @RequestMapping(value="/")
    public String welcome(){
        return "welcome";
    }
    
    @RequestMapping(value="createUser")
    public String createUser(){
        return "createUser";
    }
    
    @RequestMapping(value="listUsers")
    public String listUsers(){
        return "listUsers";
    }
    
}

package com.agung.springmvcapachetiles.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

@RequestMapping(value="tiles/*")

public class TilesController {

@RequestMapping(value="/")

public String welcome(){

return "welcome";

}

@RequestMapping(value="createUser")

public String createUser(){

return "createUser";

}

@RequestMapping(value="listUsers")

public String listUsers(){

return "listUsers";

}

Return String in the methods above refers to tiles name in the tiles.xml file.
Run the application and test the navigation menu.

Facebook Comments

Agung Setiawan

Software Engineer

Spring MVC 3 and Apache Tiles 2.2.2 Integration

1. Configure The Library

2. Configure dispatcher-servlet.xml

3. Configure tiles.xml

4. JSP Code

5. TilesController

2 thoughts on “Spring MVC 3 and Apache Tiles 2.2.2 Integration”

Leave a Reply Cancel reply