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:
- Create a project called SpringEx with the package com.w3wiki. This should be in your newly formed project’s src folder.
- Using the Add External JARs options, add the Spring Libraries that are required.
- With index.jsp, you may create an index page.
- Create HelloWorldController.java, ContactController.java, and Contact.java under the above-made package.
- Under the src folder, create the web.xml, tile.xml, and spring-servlet.xml configuration files.
- Create all of the View components’ code.
- 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.w3wiki.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.w3wiki.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 w3wiki" ; m.addAttribute( "message" , message); return "hello" ; } } |
ContactController.java
Java
package com.w3wiki.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.w3wiki.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 w3wiki </ 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 w3wiki</ 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 >GEEEKSFORBeginner</ 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 w3wiki” link following page will be shown
And after clicking on contact us this page will be shown