Pages

Integration of Spring mvc with Apache tiles 3.0.

Apache Tiles3 is a templating framework for laying out pieces of a page as fragments that are assembled into a full page at runtime. It provides a nice look and feel to a web application. 

To integrate Apache Tiles 3.0 with Spring MVC with maven, You should follow these steps for integrations.

Step 1 : Insert following dependency for apache tiles 3 and Spring MVC in pom.xml.

<properties>
    <java-version>1.7</java-version>
    <org.springframework-version>3.2.2.RELEASE</org.springframework-version>
    <org.aspectj-version>1.6.9</org.aspectj-version>
    <org.slf4j-version>1.5.10</org.slf4j-version>
</properties>

 <dependencies>
                <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${org.springframework-version}</version>
</dependency>
 
<dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${org.springframework-version}</version>
</dependency>
   
<dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-web</artifactId>
   <version>${org.springframework-version}</version>
</dependency>
<dependency>
   <groupId>org.apache.tiles</groupId>
   <artifactId>tiles-extras</artifactId>
   <version>3.0.0</version>
</dependency>
<dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.5.2</version>
                </dependency>

<dependency>
     <groupId>jstl</groupId>
     <artifactId>jstl</artifactId>
     <version>1.2</version>
</dependency>
  </dependencies>

Step 2: Make a configuration in web.xml for Spring Dispatcher Servlet and Url Mapping under /WEB-INF/.

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

     <servlet>
             <servlet-name>root</servlet-name>
             <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <init-param>
                    <param-name>contextConfigLocation</param-name>
                    <param-value>classpath:/root-servlet.xml</param-value>
           </init-param>
           <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
            <servlet-name>root</servlet-name>
            <url-pattern>/</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
            <welcome-file>/WEB-INF/views/index.html</welcome-file>
    </welcome-file-list>
</web-app>

Step 3: create a root-servlet.xml file for Spring application context under src/main/resources/.

<?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:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
        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">
 
    <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
 
    <!-- Scans within the base package of the application for @Components to configure as beans -->
    <!-- @Controller, @Service, @Configuration, etc. -->
    <context:component-scan base-package="controller" />
 
    <!-- Enables the Spring MVC @Controller programming model -->
    <mvc:annotation-driven />
    
    <mvc:resources location="/img/" mapping="/img/**"/>
    
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer" >
         <property name="definitions">
             <value>/WEB-INF/tiles/tiles.xml</value>
         </property>
    </bean>

    <bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
     <!--Don't add suffix or prefix like you do with .jsp files-->
   <property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"/>
    </bean>
</beans>

Step 4: Declare a tiles.xml file under /WEB-INF/tiles/ folder in project.

<?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="baseLayout" template="/WEB-INF/layout/layout.jsp">
                 <put-attribute name="header" value="/WEB-INF/layout/header.jsp" />
                 <put-attribute name="menu" value="/WEB-INF/layout/menu.jsp"/>
                 <put-attribute name="body" value="" />
          </definition>
          <definition name="welcome" extends="baseLayout">
                 <put-attribute name="body" value="/WEB-INF/views/index.jsp"/>
          </definition>
          <definition name="home" extends="baseLayout">
                 <put-attribute name="body" value="/WEB-INF/views/home.jsp"/>
          </definition>
</tiles-definitions>

Step 5: create a TestController to handle the Http Request under the src/main/java/controller package.

package controller;

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

@Controller
public class TestController {
public TestController() {System.out.println("In TestController ::");}
@RequestMapping(value={"/index","/"})
public ModelAndView  index(){
System.out.println("In Index method");
ModelAndView modelAndView = new ModelAndView("index");
modelAndView.addObject("testForm", new TestForm()); 
return modelAndView;
}

@RequestMapping(value = "/submit", method=RequestMethod.POST)
    public ModelAndView submit(TestForm testForm) {
        System.out.println("In Submit(): get All value from method body...");
        
        ModelAndView modelAndView = new ModelAndView("home");
        modelAndView.addObject(testForm);
        
        return modelAndView;
    }
@RequestMapping("/layout")
public ModelAndView welcomePage() {
ModelAndView modelAndView = new ModelAndView("welcome");
modelAndView.addObject("testForm", new TestForm()); 
return modelAndView;
}
}

Step 6: create a layout.jsp, header.jsp and menu.jsp page under /WEB-INF/layout/ folder.

1. layout.jsp :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Main Page</title>
</head>
<body>
<table border="1" width="100%" height="15%">
<tr bordercolor="yellow" height="2%">
<td colspan="2">
<tiles:insertAttribute name="header"/>
</td>
</tr>
<tr height="10%">
<td width="10%" align="center" bordercolor="yellow">
<tiles:insertAttribute name="menu"/>
</td>
<td width="90%" align="center" bordercolor="yellow">
<tiles:insertAttribute name="body"/>
</td>
</tr>
</table>
</body>
</html>

2. header.jsp :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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">
</head>
<body>
<img alt="image" src="img/clg.jpg">
</body>
</html>

3 menu.jsp : I keep blank this menu.jsp page, you can keep some content in this section as you like.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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">
</head>
<body>
</body>
</html>

create a index.jsp and home.jsp under /WEB-INF/views/ folder.

1. index.jsp :

<%@ page contentType="text/html; charset=ISO-8859-1" %>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome Page</title>
</head>
<body>

<spring:form commandName="testForm" action="/submit">
<table>
<tr> <td>First Name :: </td>
<td><spring:input path="firstName" /></td>
</tr>
<tr> <td>Last Name :: </td>
<td><spring:input path="lastName" /></td>
</tr>
<tr>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</spring:form> 

</body>
</html>

2: home.jsp

<%@ page contentType="text/html; charset=ISO-8859-1" language="java" %> 

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home Page</title>
</head>

<body>
<form:form commandName="testForm">
<table>
<tr> <td>First Name :: </td>
<td><h4>${testForm.firstName}</h4></td>
</tr>
<tr> <td>Last Name :: </td>
<td><h4>${testForm.lastName}</h4></td>
</tr>
<tr><td><a href="layout.html">Go Back</a></td></tr>
</table>
</form:form>
</body>
</html>

Step 7: create a form bean under src/main/java/formbean package and name is TestForm.java

package formbean;

public class TestForm {
private String firstName;
private String lastName;
// getter setters ... 
}

Now, hit this URL http://localhost:8084/Test/layout 
















3 comments: