Spring MVC Tiles 3 Integration | Spring Tiles Integration

1. Objective

In our previous tutorial, we studied Spring Security. Today in this Spring MVC Tiles 3 Integration tutorial, we will learn about the integration of Spring MVC Framework with Apache Tiles3. Along with that, we will see the advantages of Spring Tiles Integration it and the working example with Eclipse IDE in place.
So, let’s start Spring MVC Tiles 3 Integration.

Spring MVC Tiles 3 Integration | Spring Tiles Integration

2.Spring MVC Tiles 3

Before going through this Spring MVC Tiles 3 Integration tutorial, we should have basic knowledge of Java language and Spring Framework. Apache Tiles is an open source framework. It is a template engine for Java-based web frameworks.
One of the major areas where the Spring MVC Framework has advanced comparing it with other frameworks is in a separation of the view technologies. The Apache Tiles is based on a composite pattern which is used for simplifying the development of UIs. The Spring Framework provides the integration support with the Apache Tiles framework so as to develop required web applications and manage the layout of Spring MVC by the help of Spring Tiles.

3. Advantages of Tiles in Spring MVC

Some of the major advantages of Spring MVC Tiles 3 Integration as follows:

a. Reusability

You can reuse a single component in many pages. For example, header and footer components.

b. Centralised Control

You have the ability to control the layout of the page. This is done using the single template page only.
c. Easily Changeable Layout
Using the single template page, you are capable of changing the layout of the page anytime. Therefore, your website becomes adaptable to new technologies such as jquery, bootstrap etc.
Read about Spring BeanPostProcessors – Latest Tutorial 2018

4. Spring MVC Tiles Example

Before you proceed with Integration of Spring MVC Tiles 3, we will discuss the working example you need to load some of the jar files:
Spring Core jar files
Spring Web jar files
Tiles jar files
These jar files should be put inside the WEB_INF/lib directory.
Let’s define a working example using Eclipse IDE having the following steps:

1. Create your project with name SpringEx and a package com.example. This should be under the src folder of your created project.
2. Add the Spring Libraries that are required using the Add External JARs options.
3. Define an index page with index.jsp.
4. Create HelloWorldController.java, ContactController.java, and Contact.java under the above-made package.
5. Write the web.xml, tile.xml and spring-servlet.xml configuration file under the src folder.
6. Write the code for all the View components.
7. Finally, write code for all Java files and Bean config file and run the application as described.

a. Index Page

index.jsp

<a href="hello.html">Hello Spring</a> |   
<a href="contact.html">Contact</a>

b. Controller classes

HelloWorldController.java

package com.example.controller;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.servlet.ModelAndView;  
@Controller  
public class HelloWorldController {  
    @RequestMapping("/hello")  
    public ModelAndView helloWorld() {  
        String message = "Hello World, Spring MVC @ example";  
        return new ModelAndView("hello", "message", message);  
    }  
}

ContactController.java

package com.example.controller;  
import org.springframework.stereotype.Controller;  
import org.springframework.validation.BindingResult;  
import org.springframework.web.bind.annotation.ModelAttribute;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RequestMethod;  
import org.springframework.web.bind.annotation.SessionAttributes;  
import org.springframework.web.servlet.ModelAndView;  
import com.example.form.Contact;  
@Controller  
@SessionAttributes  
public class ContactController {  
   @RequestMapping(value = "/addContact", method = RequestMethod.POST)  
    public String addContact(@ModelAttribute("contact") Contact contact,BindingResult result)        return "redirect:contact.html";  
    }  
    @RequestMapping("/contact")  
    public ModelAndView showContacts() {  
        return new ModelAndView("contact", "command", new Contact());  
    }  
}

Read about Spring Bean Definition Inheritance & Bean Definition Template

c. Form class

Contact.java

package com.example.form;  
public class Contact {  
    private String firstname;  
    private String lastname;  
    private String email;  
    private String telephone;  
}

d. web.xml

web.xml

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

e. spring-servlet.xml file

This is the important configuration file where you need to specify the ViewResolver and View components.
This XML file should be located inside the WEB-INF directory.
spring-servlet.xml

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

f. tiles.xml file

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>    
    <definition name="hello" extends="base.definition">  
        <put-attribute name="title" value="Hello Spring MVC" />  
        <put-attribute name="body" value="/WEB-INF/jsp/hello.jsp" />  
    </definition>   
</tiles-definitions>

Let’s Read Spring Java Based Configuration – How to Configure Spring Beans

g. View Components

hello.jsp

<html>  
<head>  
    <title>Spring MVC Example</title>  
</head>  
<body>  
<h1>Welcome to Spring MVC</h1>  
    <p>Message is: ${message}</p>  
</body>  
</html>

contact.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>  
<head>  
    <title>Spring Tiles Contact Form</title>  
</head>  
<body>  
<h2>Contact Manager</h2>  
<form:form method="post" action="addContact.html">  
    <table>  
    <tr>  
        <td><form:label path="firstname">First Name</form:label></td>  
        <td><form:input path="firstname" /></td>   
    </tr>  
    <tr>  
        <td><form:label path="lastname">Last Name</form:label></td>  
        <td><form:input path="lastname" /></td>  
    </tr>  
    <tr>  
        <td><form:label path="lastname">Email</form:label></td>  
        <td><form:input path="email" /></td>  
    </tr>  
    <tr>  
        <td><form:label path="lastname">Telephone</form:label></td>  
        <td><form:input path="telephone" /></td>  
    </tr>  
    <tr>  
        <td colspan="2">  
            <input type="submit" value="Add Contact"/>  
        </td>  
    </tr>  
</table>         
</form:form>  
</body>  
</html>

header.jsp

<h2>Header</h2>  
<hr/>

footer.jsp

<hr/>  
<p>Copyright  example.com.</p>

menu.jsp

<p>Menu 1</p>  
<p>Menu 2</p>

Do you know Spring Dependency Injection – Types of Spring DI & Example
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>  
        <div><tiles:insertAttribute name="header" /></div>  
        <div style="float:left;padding:10px;width:15%;"><tiles:insertAttribute name="menu" /></div>  
        <div style="float:left;padding:10px;width:80%;border-left:1px solid pink;">  
        <tiles:insertAttribute name="body" /></div>  
        <div style="clear:both"><tiles:insertAttribute name="footer" /></div>  
</body>  
</html>

If you have made all of the above files then run the project. You will see a message with two Sub Menus as output:
Welcome to Spring MVC
Clicking on the Sub Menu you will see a form where you have to fill the contact details.
So, this was all about Spring MVC Tiles 3 Integration. Hope you like our explanation.

5. Conclusion

Hence, in this Spring MVC Tiles 3 Integration Tutorial, we have seen about the integration of Spring Framework MVC with Apache Tiles Framework. Along with that you saw advantages of the Spring Tiles with a working example using Eclipse IDE. Furthermore, if you have any query regarding Spring MVC Tiles 3 Integration, feel free to ask in the comment section.
See Also- Spring Batch
For reference