Spring MVC – Tiles

Spring provides functionality for integrating with the Apache Tiles framework. With the help of spring tiles support, we can easily manage the layout of the Spring MVC application.

Benefits of Spring MVC’s Tiles support:

The following are some of the primary benefits of Spring MVC Tiles 3 Integration:

• Reusability: A single component, such as the header and footer, can be reused across several pages.
• Centralized control: We can control the layout of the page from a single template page.
• Alter the layout easily: We can change the layout of the page at any time using a single template page. As a result, new technologies such as bootstrap, jQuery, and others can be readily integrated into your website.

Example Project

Project structure:

Let’s create a working example with the Eclipse IDE, which will include the following steps:

1. Create a project called SpringEx with the package com.geeksforgeeks. This should be in your newly formed project’s src folder.
2. Using the Add External JARs options, add the Spring Libraries that are required.
3. With index.jsp, you may create an index page.
4. Create HelloWorldController.java, ContactController.java, and Contact.java under the above-made package.
5. Under the src folder, create the web.xml, tile.xml, and spring-servlet.xml configuration files.
6. Create all of the View components’ code.
7. Finally, write code for all Java files and the Bean configuration file, then run the application as directed.

Step 1: Update the pom.xml file to include dependencies

pom.xml

You can download the required dependencies from URLs given in the comments of the program.

XML

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                      http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.javatpoint</groupId>
  <artifactId>SpringMVCTiles</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>SpringMVCTiles Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>3.8.1</version>
        <scope>test</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.1.1.RELEASE</version>
    </dependency>

      <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>3.0-alpha-1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-jasper -->
    <dependency>
        <groupId>org.apache.tomcat</groupId>
        <artifactId>tomcat-jasper</artifactId>
        <version>9.0.12</version>
  </dependency>

   <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
  <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-jsp</artifactId>
        <version>3.0.5</version>
  </dependency>

    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-servlet -->
    <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-servlet</artifactId>
        <version>3.0.5</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-core -->
    <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-core</artifactId>
        <version>3.0.5</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-el -->
    <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-el</artifactId>
        <version>3.0.5</version>
    </dependency>

  </dependencies>
  <build>
    <finalName>SpringMVCTiles</finalName>
  </build>
</project>

Step 2: Create the bean class

Contact.java

Java

package com.geeksforgeeks.form;
public class Contact {

    private String firstname;
    private String lastname;
    private String email;
    private String telephone;

    public String getEmail() {
        return email;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    public String getFirstname() {
        return firstname;
    }
    public String getLastname() {
        return lastname;
    }
    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }
    public void setLastname(String lastname) {
        this.lastname = lastname;
    }
}

Step 3. Create the controller class

HelloWorld.java

Java

package com.geeksforgeeks.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloWorld
{
    @RequestMapping("/hello")
    public String helloWorld(Model m)
    {
        String message = "Hello geeksforgeeks";
        m.addAttribute("message", message);
        return "hello";
    }
}

ContactController.java

Java

package com.geeksforgeeks.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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 com.geeksforgeeks.form.Contact;

@Controller
@SessionAttributes
public class ContactController
{
    @RequestMapping(value = "/addContact", method = RequestMethod.POST)
    public String addContact(@ModelAttribute("contact")    Contact contact, BindingResult result)
    {
        // write the code here to add contact
        return "redirect:contact.html";
    }

    @RequestMapping("/contact")
    public String showContacts(Model m)
    {
        m.addAttribute("command", new Contact());
        return "contact";
    }
}

Step 4. Provide a controller entry in the web.xml file

web.xml

XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
  <display-name>SpringTiles</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <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>

Step 5. Create the requested page

index.jsp

HTML

<a href="hello.html">Hello geeksforgeeks </a>  |
<a href="contact.html">Contact us page</a>

Step 6. Create the other view components

hello.jsp

HTML

<html>
<head>
    <title>Spring MVC Example</title>
</head>
<body>
    <h1>Welcome to GeeksForGeeks</h1>
</body>
</html>

contact.jsp

HTML

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
    <title>Spring Tiles Contact Form</title>
</head>
<body>
<center>
<h1> GFG Contact Manager</h1>
<form:form method="post" action="addContact.html">

    <table>
    <tr>
        <td><form:label path="firstname">Enter your firstname</form:label></td>
        <td><form:input path="firstname" /></td>
    </tr>
    <tr>
        <td><form:label path="lastname">Enter your lastname</form:label></td>
        <td><form:input path="lastname" /></td>
    </tr>
    <tr>
        <td><form:label path="lastname">Enter your email</form:label></td>
        <td><form:input path="email" /></td>
    </tr>
    <tr>
        <td><form:label path="lastname">Enter your mobile.no</form:label></td>
        <td><form:input path="telephone" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="Submit"/>
        </td>
    </tr>
</table>

</form:form>
</center>
</body>
</html>

header.jsp

HTML

<h2>GEEEKSFORGEEKS</h2>
<hr/>

footer.jsp

HTML

<hr/>

<p>Thank you for visiting this site</p>

menu.jsp

HTML

<p>Menu 1</p>


<p>Menu 2</p>

layout.jsp

HTML

<%@ 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:3px solid black;">
        <tiles:insertAttribute name="body" /></div>
        <div style="clear:both"><tiles:insertAttribute name="footer" /></div>

</body>
</html>

Output:

After clicking the “Hello geeksforgeeks” link following page will be shown

And after clicking on contact us this page will be shown