Spring Tiles Integration Hello World Tutorial

In this blog we will talk about What is Apache Tiles and How to integrate tiles with Spring MVC web application. Before we start lets discuss about Why do we need to integrate tiles in our application ?. While creating an enterprise web application its very hard to implement same header and footer style throughout the application, writing same code for header and footer part again and again in every page is really a great pain for developers. Tiles provides a simple implementation of template designing using a external xml file.
In this blog we will create a simple hello world application using Spring MVC and Tiles frameworks. 

Project Structure
Here is a snapshot for overall project structure, add all required files to your project accordingly as mentioned in later part of this tutorial.


Libraries Used
We need to add some additional jar files to our project to make it working with tiles integration. Please make sure you have added all these jar files to your lib folder before start coding.


 /WebContent/WEB-INF/web.xml
As we already knows tat web.xml is always a start point for our Web Application, it tell the container about application structure and behavior. We have added ebtries for DispatcherServlet to tell the container that all incoming request are going to be served by Spring itself. 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
   <display-name>Spring3MVC</display-name>
   <welcome-file-list>
      <welcome-file>index.jsp</welcome-file>
   </welcome-file-list>
   <servlet>
      <servlet-name>spring</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
   </servlet>
   <servlet-mapping>
      <servlet-name>spring</servlet-name>
      <url-pattern>*.html</url-pattern>
   </servlet-mapping>
</web-app>
   

/WebContent/index.jsp
This is the welcome file for our application, we have created an link to Home comtroller here so that further processing can be handed by spring.
<html>
   <head>
      <title>Being Java Guys |Tiles Integration</title>
   </head>
   <body>
      <center>  <br> <br> <br> <br> Being Java Guys |Tiles  Integration Hello World <br> <br> <a href="hello.html">Click   to see your first Tiles page !</a> </center>
   </body>
</html>
   

/WebContent/WEB-INF/spring-servlet.xml
Spring Servlet is the core of Spring applicatons, all spring based configurations and setting goes here in a single file. In 'viewResolver' bean we have added an value of tiles2, indicating that view part of the application is going to be handled by Tiles framework itself.
In 'tilesConfigurer' bean an entry is added for tiles configuration file, tiles.xml. 
<?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:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans  http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  http://www.springframework.org/schema/context  http://www.springframework.org/schema/context/spring-context-3.0.xsd">
   <context:component-scan base-package="com.beingjavaguys.controller" />
   <bean id="viewResolver"  class="org.springframework.web.servlet.view.UrlBasedViewResolver">
      <property name="viewClass">
         <value>    org.springframework.web.servlet.view.tiles2.TilesView </value>
      </property>
   </bean>
   <bean id="tilesConfigurer"  class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
      <property name="definitions">
         <list>
            <value>/WEB-INF/tiles.xml</value>
         </list>
      </property>
   </bean>
</beans>

/WebContent/WEB-INF/tiles.xml
All tiles based configurations and settings goes here, we can specify a number of template here according to our need. These templates can be used along with different pages accordingly. Header, Footer and Other page components can be added here to template. 
<?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.definition" template="/WEB-INF/jsp/Layout.jsp">
      <put-attribute name="title" value="" />
      <put-attribute name="header" value="/WEB-INF/jsp/Header.jsp" />
      <put-attribute name="menu" value="/WEB-INF/jsp/Menu.jsp" />
      <put-attribute name="body" value="" />
      <put-attribute name="footer" value="/WEB-INF/jsp/Footer.jsp" />
   </definition>
   <definition name="hello" extends="base.definition">
      <put-attribute name="title"   value="Being Java Guys | Tiles Integration" />
      <put-attribute name="body" value="/WEB-INF/jsp/Hello.jsp" />
   </definition>
</tiles-definitions>

/src/com/beingjavaguys/controller/Home.java
This is the controller class that takes care of all URL mappings and specified actions for the application.
package com.beingjavaguys.controller;

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

@Controllerpublic
class Home {
   @RequestMapping("/hello")
   public ModelAndView hello() {
      return new ModelAndView("hello", "message", "Body Content goes Here !");
   }
}
/WebContent/WEB-INF/jsp/Hello.jsp
${message}

/WebContent/WEB-INF/jsp/Layout.jsp
In layout template files we can add page elements according to our need and in any design we want. There can be any number of such template configurations and files throughout the application. The <tiles:attribute > tags are used to add appropriate page component on required location.
<%@ 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=UTF-8">
      <title>
         <tiles:insertAttribute name="title" ignore="true" />
      </title>
   </head>
   <body>
      <table border="1" cellspacing="2" align="center">
         <tr>
            <td height="30" colspan="2">
               <tiles:insertAttribute name="header" />
            </td>
         </tr>
         <tr>
            <td height="250" width="150">
               <tiles:insertAttribute name="menu" />
            </td>
            <td width="400">
               <tiles:insertAttribute name="body" />
            </td>
         </tr>
         <tr>
            <td height="30" colspan="2">
               <tiles:insertAttribute name="footer" />
            </td>
         </tr>
      </table>
   </body>
</html>

/WebContent/WEB-INF/jsp/Header.jsp
<center>
   <h1>Header</h1>
</center>

/WebContent/WEB-INF/jsp/Footer.jsp
<center>
   <p>Copyright &copy; Being Java Guys</p>
</center>

/WebContent/WEB-INF/jsp/Menu.jsp
<center>
   <p>Menu</p>
</center>
Here we are done with integrating spring web application with apache tiles framework. Just deploy your application on server and if everything goes right you will output something like these screens.



In this blog we came to know about, what is apache tiles framework and how to integrate Spring with Tiles framework. In upcoming blogs we will see some other tips and tricks about Spring Web Mvc Frameworks.

Download "Spring Tiles HelloWorld Example" from "SkyDrive"