Spring 3 MVC: Tiles Plugin Tutorial with Example in Eclipse

Welcome to Part 4 for Spring 3.0 MVC Series. In previous article we saw how to create a form using Spring 3 MVC and display it in JSP. Also we learn about annotation @ModelAttribute.

In this part we will discuss about Tiles Framework and its Integration with Spring 3.0 MVC. We will add Tiles support to our HelloWorld Spring application that we created in previous parts. I strongly recommend you to go through previous articles and download the source code of our sample application.

Introduction to Tiles 2

Nowadays, website are generally divided into pieces of reusable template that are being rendered among different web pages. For example a site containing header, footer, menu etc. This items remains same through out the website and give it a common look and feel. It is very difficult to hard code this in each and every webpage and if later a change is needed than all the pages needs to be modified. Hence we use templatization mechanism. We create a common Header, Footer, Menu page and include this in each page.

Tiles Plugin allow both templating and componentization. In fact, both mechanisms are similar: you
define parts of page (a “Tile”) that you assemble to build another part or a full page. A part can
take parameters, allowing dynamic content, and can be seen as a method in JAVA language. Tiles is a templating system used to maintain a consistent look and feel across all the web pages of a web application. It increase the reusability of template and reduce code duplication.

A common layout of website is defined in a central configuration file and this layout can be extended across all the webpages of the web application.

Our Application Layout

Our goal is to add Header, Footer and Menu to our Spring 3 HelloWorld application. Following will be the layout of the same.

tiles-framework-layout

Required JAR files

In order to add Tiles support to our Spring3 application, we will need few jar files. Following is the list of JARs in our example. Add these JARs in WEB-INF/lib folder.
spring-3-tiles-framework-jar
The highlighted jar files in above list are the new jars to be added in project for Tiles integration.

Configuring Tiles framework in Spring MVC

To configure Tiles, an entry for bean TilesConfigure has to be made in spring-servlet.xml. Open the spring-servlet.xml from WEB-INF folder and add following code between <beans> </beans> tag.

File: /WebContent/WEB-INF/spring-servlet.xml

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

An input configuration file /WEB-INF/tiles.xml is passed as argument in above bean definition. This file contains the Tiles definition for our web application.

Create a file tiles.xml in WEB-INF folder and copy following code into it.
tiles-xml-spring-mvc

File: WebContent/WEB-INF/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="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="contact" extends="base.definition">
		<put-attribute name="title" value="Contact Manager" />
		<put-attribute name="body" value="/WEB-INF/jsp/contact.jsp" />
	</definition>

</tiles-definitions>

Here in tiles.xml we have define a template base.definition. This layout contains attributes such as Header, Title, Body, Menu and Footer. The layout is then extended and new definitions for Contact page. We have override the default layout and changed the content for Body and Title.

Creating View – The JSPs

spring-tiles-jsp-files

We will define the template for our webapplication in a JSP file called layout.jsp. This template will contain different segments of web page (Header, Footer, Menu etc). Create four new JSP files layout.jsp, header.jsp, menu.jsp and footer.jsp and copy following content in each of them.

File: WebContent/WEB-INF/jsp/layout.jsp

<%@ 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" cellpadding="2" cellspacing="2" align="center">
	<tr>
		<td height="30" colspan="2"><tiles:insertAttribute name="header" />
		</td>
	</tr>
	<tr>
		<td height="250"><tiles:insertAttribute name="menu" /></td>
		<td width="350"><tiles:insertAttribute name="body" /></td>
	</tr>
	<tr>
		<td height="30" colspan="2"><tiles:insertAttribute name="footer" />
		</td>
	</tr>
</table>
</body>
</html>

File: WebContent/WEB-INF/jsp/header.jsp

<h1>Header</h1>

File: WebContent/WEB-INF/jsp/menu.jsp

<p>Menu</p>

File: WebContent/WEB-INF/jsp/footer.jsp

<p>Copyright &copy; ViralPatel.net</p>

That’s All Folks

Compile and Execute the application in Eclipse and see that the header, menu and footer are properly applied.
spring-tiles-demo-screen-contact-manager

Download Source Code

Click here to download Source Code (8.88kb).

Moving On

Today we saw how we can configure Tiles framework with Spring 3 MVC application. We used org.springframework.web.servlet.view.tiles2.TilesConfigurer class in bean definition to define the tiles configuration file. In next part we will discuss about Internationalization/Localization and adding its support in Spring 3 MVC. I hope you liked this article. Feel free to post your queries and comments in comment section.



139 Comments

  • tareq 24 October, 2013, 18:01

    Missed to attached tiles.xml code
    tiles.xml:

  • SantoSh 7 November, 2013, 11:07

    Hello…I get thiS tutorial but I need to Show the Selected menu highlighted So pleaSe do poSt it and leave a mail alSo….I tried many jquery css n js but it doesnt worked…-_-

    So do Some help

    Thanks & reagards,
    SantoSh Tambe

  • Bill 22 November, 2013, 23:04

    This tutorial is in need of significant work. The code supplied via the link works, but trying to follow the instructions as printed does not produce a working example. First, this was built on the hello world example in previous pages. Following these instructions breaks the hello world example, because the instruction to add lines to the spring-servlet.xml does not say to eliminate the bean definition from the hello world example (duplicate view resolver). Once that is fixed, the index.jsp will not successfully invoke hello anymore, so there should be an instruction to eliminate the link to hello world and to add in a link to contract. There is no instructions to add the java files or jsp for contract. Here’s what I had to do in addition to following the supplied instructions to have a working tiles example of hello and contract:
    1. added section to tiles.xml
    2. had to comment out <bean id="viewResolver" section in spring-servlet.xml
    3. added put up contact form section to index.jsp
    4. had to add ContractController.java
    5. had to add Contact.java
    6. had to add contact.jsp

  • kyochan19792002 6 December, 2013, 3:55

    Do not use Tiles API 3.0.3 for this exercise. Use Tiles 2.2.2 instead. In spring-servlet.xml, remove the previous version of viewResolver

  • tushar metha 23 December, 2013, 12:09

    example in this tutorial is working absolutely fine. No need to comment bean id viewResolver. Only value of property viewClass to be changed to org.springframework.web.servlet.view.tiles2.TilesView and comment out prefix, suffix properties

  • Ramja 28 December, 2013, 1:31

    Can I render a .HTML page in place of .JSP for the body.
    Tiles is not recognizing the .HTML file (says mapping not found). I have tried using a jsp with a jsp:include page=”path to .HTML” to no avail.

    Thanks a lot

  • Sandeep 8 January, 2014, 7:15

    Thanks Viraf for publishing the tutorial. Are you planning to publish same tutorial with Title3?

    Cheers

  • ranjit 8 January, 2014, 13:40

    Nice tutorial.This is helping me a lot in learning spring.
    Thanks

  • Sunil Kumar Behera 20 January, 2014, 17:11

    I tried this example of spring mvc tiles application it is running fine but I have one doubt regarding the “command ” which you have used in showContacts() of the ContactController class what is the use of this? As tried without this “command” it is giving error.

    • Boechi 5 June, 2014, 20:09

      See the previous tutorial: http://viralpatel.net/blogs/spring-3-mvc-handling-forms/

      In above controller class, note that we have created two methods with Request Mapping /contacts and /addContact. The method showContacts() will be called when user request for a url contacts.html. This method will render a model with name “contact”. Note that in the ModelAndView object we have passed a blank Contact object with name “command”. The spring framework expects an object with name command if you are using in your JSP file.

  • alex theedom 20 February, 2014, 2:20

    Short and concise article that explains tiles well. Thanks.

  • Soumya 13 March, 2014, 13:35

    Can you release a tutorial with tiles 3 and struts 2?

  • Swati 15 March, 2014, 11:21

    Really help me to understand spring MVC with tiles.
    Great help…… :) :) :)

  • Maria Sebastian 30 March, 2014, 17:05

    Hi Viral,

    Thanks a lot for the post on Spring & Tiles integration!

    I am a beginner with Spring MVC. I wonder how to configure page views after adding few menu items in the menu. In the post there was nothing in the menu.jsp except a word “Menu”. I hope you could guide me to add few menu items and corresponding controller, model and view configuration.

    Thanks,
    Maria Sebastian

  • do thang 16 May, 2014, 21:20

    How can i download extra library?

  • pratik 20 May, 2014, 9:27

    while executing codes I got error : org.apache.jasper.JasperException: An exception occurred processing JSP page /WEB-INF/jsp/layout.jsp at line 12

    9:
    10:
    11:
    12:
    13:
    14:
    15:

    org.apache.tiles.template.NoSuchAttributeException: Attribute ‘header’ not found.
    org.apache.tiles.template.DefaultAttributeResolver.computeAttribute(DefaultAttributeResolver.java:49)
    org.apache.tiles.template.InsertAttributeModel.resolveAttribute(InsertAttributeModel.java:187)
    org.apache.tiles.template.InsertAttributeModel.start(InsertAttributeModel.java:107)
    org.apache.tiles.jsp.taglib.InsertAttributeTag.doTag(InsertAttributeTag.java:306)
    org.apache.jsp.WEB_002dINF.jsp.layout_jsp._jspx_meth_tiles_005finsertAttribute_005f1(layout_jsp.java:133)
    org.apache.jsp.WEB_002dINF.jsp.layout_jsp._jspService(layout_jsp.java:69)
    org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:419)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:391)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:334)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
    org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:209)
    org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:267)
    org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1225)
    org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1012)
    org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:959)
    org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:876)
    org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:961)
    org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:852)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:621)
    org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:837)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:722)

    please help me for the same

  • Boechi 5 June, 2014, 22:10

    Thanks for this tutorial. It worked like a charm. I used Spring 4 and Tiles 3 with maven.

    Question:
    Is there a way to keep the folowing properties in the viewer?

    I almost got it working (it could find everything except the contact [contact.jsp]).
    The Controller was giving the contact view back but this it could not map to the contact.jsp
    When I removed the properties above I needed to add the full path to the jps files.

  • Yuva Kumar R 7 July, 2014, 16:55

    Hi Viral,
    Thanks a lot for the post on Spring & Tiles integration!
    I am a beginner with Spring MVC. I wonder how to configure page views after adding few menu items in the menu. In the post there was nothing in the menu.jsp except a word “Menu”. I hope you could guide me to add few menu items and corresponding controller, model and view configuration, with hibernate / db CRUD operations, etc.
    Thanks,
    Yuva

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *