Praveen Singh

Tutorial: Tiles 3 with Spring 3 with JSP or FTL view.

Introduction


TILES 3 WITH SPRING 3 WITH JSP OR FTL VIEW

All websites have something in common: they are made of pages that share similar structures. The pages share the same layout, while each page is made of different independent pieces, but always placed in the same position across all the site.

The Composite View pattern formalizes this typical use, by allowing to create pages that have a similar structure, in which each section of the page vary in different situations.

For example, if we check the below image



With Page 1 to Page 2, only thing has changed is body content.
Tiles understand this and created the framework to serve that need.
Tiles also provide the flexible approach for different view type.
we going to cover two view type in this tutorial
  1. JSP view
  2. FTL view

Our application final look


Taking the above image in mind, i will also build the application with all four major part
Look of our application will be like below image.


Step by step video Demo of Application


 Below is the video to cover step by step tutorial to build this application with demo of whole application

Application Structure


Application code


 Application has divide in below section.
As i mention, we will have two view type in this demo.

Setting up common part - server/spring we app

Setting dependencies/lib correctly
Tiles 3 application with Spring 3 do need a lots of lib.
But truth to be accepted, u may not need all of the jars, provided below, however i can guarantee you that, your application will work with below jars as of mine.
Also, i would like make it claer that i am a big fan of Maven, however it take time to write all thedependencies name correctly in xml file and i am very lazy person.


WEB-INF/web.xml
Starting point of any application, provide the trigger point for Spring application.
Also make sure that only url with .htm prefix can hit the spring dipatcher server.


<?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>tiles</display-name>
 <servlet>
  <servlet-name>tiles</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>tiles</servlet-name>
  <url-pattern>*.htm</url-pattern>
 </servlet-mapping>
 <listener>
  <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
 </listener>
 <welcome-file-list>
  <welcome-file>   
      home.htm   
           </welcome-file>
 </welcome-file-list>
</web-app>



src/com/controller/HomeController.java

The only Spring controller used in this tutorial, server the response of URL.


 package com.controller;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller  
public class HomeController {  
     @RequestMapping("/home.htm")  
     public String home() {  
      System.out.println("INSIDE HOME");
          return "home";  
     }  
     
     @RequestMapping("/page.htm")  
     public String page(@RequestParam(value="pageNo") String pageNo,HttpServletRequest request) {
      System.out.println("PageNo: " + pageNo);
      request.setAttribute("pageNo", pageNo);
          return "page";  
     }  
}


WEB-INF/tiles-servlet.xml
the servlet context file for spring we app, tell Spring that it is annotation driven application and where to look for annotation

<?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"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 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  
      http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

 <context:component-scan base-package="com" />
 <mvc:annotation-driven />

</beans> 

Setting up Tiles 3 app with Spring 3 and JSP View

If you are here to look for FTL view, you can skip fewlines and directly jump to FTL section.
Opposite is also true, if you need just JSP code, no need to check FTL part

WEB-INF/applicationContext.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"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 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  
      http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
 <context:component-scan base-package="com" />
 <context:annotation-config />
 <mvc:annotation-driven />

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


WEB-INF/tile/tilesJsp.xml

Base of Tiles view, describe the different views of application and define their look and feel
<!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/view/jsp/layout.jsp">
  <put-attribute name="title" value="Sample Title" />
  <put-attribute name="header" value="/WEB-INF/view/jsp/header.jsp" />
  <put-attribute name="menu" value="/WEB-INF/view/jsp/menu.jsp" />
  <put-attribute name="body" value="" />
  <put-attribute name="footer" value="/WEB-INF/view/jsp/footer.jsp" />
 </definition>

 <definition name="home" extends="baseLayout">
  <put-attribute name="title" value="Home" />
  <put-attribute name="body" value="/WEB-INF/view/jsp/home.jsp" />
 </definition>
 
  <definition name="page" extends="baseLayout">
  <put-attribute name="title" value="Page" />
  <put-attribute name="body" value="/WEB-INF/view/jsp/page.jsp" />
 </definition>
</tiles-definitions>  


WEB-INF/view/jsp/layout.jsp

Describe the basic layout in which different component can be plugged.

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>  
<!DOCTYPE html>
<html>
<head>
<title>Three Column Layout</title>
<style type="text/css">
body {
 font-family: Arial, Verdana, sans-serif;
}

.header,.footer,.leftPane,.rightPane {
 border: 1px solid gray;
}

.header,.main,.footer {
 width: 960px;
 color: #665544;
 margin: 0px auto;
 clear: both;
}

.leftPane,.rightPane {
 float: left;
 margin: 10px;
 height: 400px;
}

.leftPane {
 width: 100px;
}

.rightPane {
 width: 815px;
}

.leftMenu {
 list-style: none;
 padding: 0;
 margin: 10px;
}
</style>
</head>
<body>
<tiles:insertAttribute name="header" />
 <div class="main">
  <tiles:insertAttribute name="menu" />
  <div class="rightPane">
   <tiles:insertAttribute name="body" />
  </div>
 </div>
<tiles:insertAttribute name="footer" />
 
</body>
</html>




WEB-INF/view/jsp/header.jsp
Describe the header part of layout.

<div class="header">
 <h1>Sample Header(JSP)</h1>
</div>



WEB-INF/view/jsp/menu.jsp

Describe the menu part of layout.
<div class="leftPane">
   <ul class="leftMenu">
    <li><a href="page.htm?pageNo=1">Page 1</a></li>
    <li><a href="page.htm?pageNo=2">Page 2</a></li>
    <li><a href="page.htm?pageNo=3">Page 3</a></li>
    <li><a href="page.htm?pageNo=4">Page 4</a></li>
   </ul>
  </div>



WEB-INF/view/jsp/footer.jsp

Describe the footer part of layout.

<div class="footer">
  <h1>Sample Footer</h1>
 </div>



WEB-INF/view/jsp/home.jsp

Describe the landing body part: home

<%@ 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">

<h1>This is home(JSP)</h1>




WEB-INF/view/jsp/page.jsp

Describe the rest of page

<%@ 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">

<h1>Welcome to Page(JSP): ${pageNo}</h1>


Setting up Tiles 3 app with Spring 3 and FTLView

This part describe FTL view, if you are a JSP lover, check above code

WEB-INF/applicationContext.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"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 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  
      http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
 <context:component-scan base-package="com" />
 <context:annotation-config />
 <mvc:annotation-driven />

 <bean id="viewResolver"
  class="org.springframework.web.servlet.view.UrlBasedViewResolver">
  <property name="viewClass">
   <value>
    org.springframework.web.servlet.view.tiles3.TilesView
   </value>
  </property>
 </bean>
 <bean id="tilesConfigurer"
  class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
  <property name="definitions">
   <list>
    <value>/WEB-INF/tile/tilesFtl.xml</value>
   </list>
  </property>
  <property name="completeAutoload" value="true"/> 
 </bean>
</beans> 



WEB-INF/tile/tilesFtl.xml

Base of Tiles view, describe the different views of application and define their look and feel

 <!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_1.dtd">

<tiles-definitions>
 <definition name="baseLayout" template="/WEB-INF/view/ftl/layout.ftl"
  templateType="freemarker">
  <put-attribute name="title" value="Sample Title" />
  <put-attribute name="header" value="/WEB-INF/view/ftl/header.ftl"
   type="freemarker" />
  <put-attribute name="menu" value="/WEB-INF/view/ftl/menu.ftl"
   type="freemarker" />
  <put-attribute name="body" value="" />
  <put-attribute name="footer" value="/WEB-INF/view/ftl/footer.ftl"
   type="freemarker" />
 </definition>
 <definition name="home" extends="baseLayout">
  <put-attribute name="title" value="Home" />
  <put-attribute name="body" value="/WEB-INF/view/ftl/home.ftl"
   type="freemarker" />
 </definition>
 <definition name="page" extends="baseLayout">
  <put-attribute name="title" value="Page" />
  <put-attribute name="body" value="/WEB-INF/view/ftl/page.ftl"
   type="freemarker" />
 </definition>
</tiles-definitions>  




WEB-INF/view/ftl/layout.ftl

Describe the basic layout in which different component can be plugged.

<!DOCTYPE html>
<html>
<head>
<title>Tiles 3 with Spring 3 with JSP or FTL</title>
<style type="text/css">
body {
 font-family: Arial, Verdana, sans-serif;
}

.header,.footer,.leftPane,.rightPane {
 border: 1px solid gray;
}

.header,.main,.footer {
 width: 960px;
 color: #665544;
 margin: 0px auto;
 clear: both;
}

.leftPane,.rightPane {
 float: left;
 margin: 10px;
 height: 400px;
}

.leftPane {
 width: 100px;
}

.rightPane {
 width: 815px;
}

.leftMenu {
 list-style: none;
 padding: 0;
 margin: 10px;
}
</style>
</head>
<body>
<@tiles.insertAttribute name="header" />
 <div class="main">
  <@tiles.insertAttribute name="menu" />
  <div class="rightPane">
   <@tiles.insertAttribute name="body" />
  </div>
 </div>
<@tiles.insertAttribute name="footer" />
 
</body>
</html>



WEB-INF/view/ftl/header.ftl
Describe the header part of layout.

<div class="header">
  <h1>Sample Header(FTL)</h1>
 </div>


WEB-INF/view/ftl/menu.ftl

Describe the menu part of layout.

 <div class="leftPane">
   <ul class="leftMenu">
    <li><a href="page.htm?pageNo=1">Page 1</a></li>
    <li><a href="page.htm?pageNo=2">Page 2</a></li>
    <li><a href="page.htm?pageNo=3">Page 3</a></li>
    <li><a href="page.htm?pageNo=4">Page 4</a></li>
   </ul>
  </div>


WEB-INF/view/ftl/footer.ftl

Describe the footer part of layout.

<div class="footer">
  <h1>Sample Footer</h1>
 </div>


WEB-INF/view/ftl/home.ftl

Describe the landing body part: home


<h1>This is home(FTL)</h1>



WEB-INF/view/ftl/page.ftl

Describe the rest of page

<h1>Welcome to Page(FTL): ${pageNo}</h1>

Summary


As  describe above, Tiles provide very simple solution when we need to modify only small or specific part of View.
With various view type, it is very nice and elegant solution


Code on Github


I have uploaded a Eclipse compatible project on GITHub

To modify it for maven or ant project, you have to do little more work!

Contact Me


If you want to contact me for feedback or suggestion or doubt. You can do so by commenting on Blogger article or in Youtube contact section.

You can also approach me dropping me mail directly at mails.icodingclub@gmail.com

11 comments:

  1. good tutorial nice and easy to understand :))
    .
    .
    but..
    .
    .
    not user friendly XD :))

    ReplyDelete
  2. Your blog has excellent information On JSP.

    ReplyDelete
  3. I get an undefined Freemarker renderer. I am having trouble following the directions here
    https://tiles.apache.org/framework/tutorial/integration/freemarker.html
    Where is the freemarker renderer defined in your example?

    ReplyDelete
  4. Hi,

    Is it possible to replace only body content instead of refreshing whole page through tiles. If yes then how ?

    Thanks,
    Gaurav

    ReplyDelete
  5. thnkx bro for such a nice tutorial ..

    ReplyDelete
  6. perfect explanation about java programming .its very useful.thanks for your valuable information.java training in chennai | java training in velachery

    ReplyDelete
  7. Congratulations guys, quality information you have given!!!..Its really useful blog. Thanks for sharing this useful information
    java training institutes in chennai | java j2ee training institutes in velachery

    ReplyDelete
  8. I'll congrats with you guys, We share its quality of information!! very specific nice content.
    Hadoop Training in Chennai | Java Training | Selenium Training in Chennai

    ReplyDelete
  9. Thanks for sharing the quality and informative information.... really more helpful and my friends
    Java Training in Chennai|Best Java Training in Velachery

    ReplyDelete