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