Spring MVC

Build Nested Template in Spring MVC


Create Spring MVC Project

On the Eclipse, create a Spring MVC project in Spring Boot

Enter Project Information:

  • Name: LearnSpringMVCWithRealApps
  • Group: com.demo
  • Artifact: LearnSpringMVCWithRealApps
  • Description: Learn Spring MVC with Real Apps
  • Package: com.demo

Select the technologies and libraries to be used:

  • Web

Click Next button to show Site Information for project

Click Finish button to finish create Spring MVC project




Configure pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.demo</groupId>
	<artifactId>LearnSpringMVCWithRealApps</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>LearnSpringMVCWithRealApps</name>
	<description>Learn Spring MVC with Real Apps</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.2.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>

		<!-- Spring MVC -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<!-- JSTL tag lib -->
		<dependency>
			<groupId>javax.servlet.jsp.jstl</groupId>
			<artifactId>javax.servlet.jsp.jstl-api</artifactId>
			<version>1.2.1</version>
		</dependency>

		<dependency>
			<groupId>taglibs</groupId>
			<artifactId>standard</artifactId>
			<version>1.1.2</version>
		</dependency>

		<!-- Tomcat for JSP rendering -->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>provided</scope>
		</dependency>

		<!-- Tiles -->
		<dependency>
			<groupId>org.apache.tiles</groupId>
			<artifactId>tiles-jsp</artifactId>
			<version>3.0.8</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.scala-lang</groupId>
			<artifactId>scala-library</artifactId>
			<version>2.11.0</version>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

Configure application.properties

spring.mvc.view.prefix = /WEB-INF/views/
spring.mvc.view.suffix = .jsp
spring.mvc.static-path-pattern=/resources/**

server.port=9596

Configure Spring MVC

package com.demo;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;

@Configuration
public class SpringMVCConfiguration extends WebMvcConfigurerAdapter {

	@Bean
	public UrlBasedViewResolver viewResolver() {
		UrlBasedViewResolver urlBasedViewResolver = new UrlBasedViewResolver();
		urlBasedViewResolver.setViewClass(TilesView.class);
		return urlBasedViewResolver;
	}

	@Bean
	public TilesConfigurer tilesConfigurer() {
		TilesConfigurer tilesConfigurer = new TilesConfigurer();
		tilesConfigurer.setDefinitions(new String[] { "/WEB-INF/tiles/tiles.xml" });
		return tilesConfigurer;
	}
}




Create Controllers

Create new package named com.demo.controllers. In this package, create controllers as below:

HomeController

Create new java class, named HomeController.java

package com.demo.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("home")
public class HomeController {

	@RequestMapping(method = RequestMethod.GET)
	public String index() {
		return "home.index";
	}

}

AboutUsController

Create new java class, named AboutUsController.java

package com.demo.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("aboutus")
public class AboutUsController {

	@RequestMapping(method = RequestMethod.GET)
	public String index() {
		return "aboutus.index";
	}

	@RequestMapping(value = "about1", method = RequestMethod.GET)
	public String about1() {
		return "aboutus.about1";
	}

	@RequestMapping(value = "about2", method = RequestMethod.GET)
	public String about2() {
		return "aboutus.about2";
	}

}

NewsController

Create new java class, named NewsController.java

package com.demo.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("news")
public class NewsController {

	@RequestMapping(method = RequestMethod.GET)
	public String index() {
		return "news.index";
	}

	@RequestMapping(value = "news1", method = RequestMethod.GET)
	public String news1() {
		return "news.news1";
	}

	@RequestMapping(value = "news2", method = RequestMethod.GET)
	public String news2() {
		return "news.news2";
	}

	@RequestMapping(value = "news3", method = RequestMethod.GET)
	public String news3() {
		return "news.news3";
	}

}




Create Views

Create new folders with path webapp\WEB-INF\views in src\main. In views folder, create JSP Pages as below:

Master Template View

Create new folder named templates. Create new jsp file named masterTemplate.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Master Template</title>
</head>
<body>

	<a href="${pageContext.request.contextPath}/home">Home</a> |
	<a href="${pageContext.request.contextPath}/aboutus">About Us</a> |
	<a href="${pageContext.request.contextPath}/news">News</a>
	<br>
	<tiles:insertAttribute name="content"></tiles:insertAttribute>
	<br>
	Copyright PMK Lab

</body>
</html>

About Us Template View

In templates folder, create new jsp file named aboutUsTemplate.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<br>
<a href="${pageContext.request.contextPath }/aboutus/about1">About 1</a> |
<a href="${pageContext.request.contextPath }/aboutus/about2">About 2</a>
<br><br>
<tiles:insertAttribute name="aboutUsContent"></tiles:insertAttribute>

News Template View

In templates folder, create new jsp file named newsTemplate.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<br>
<a href="${pageContext.request.contextPath }/news/news1">News 1</a> |
<a href="${pageContext.request.contextPath }/news/news2">News 2</a> |
<a href="${pageContext.request.contextPath }/news/news3">News 3</a>
<br><br>
<tiles:insertAttribute name="newsContent"></tiles:insertAttribute>

Home View

Create new folder named home. Create new jsp file named index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<h3>Home Page</h3>

About Us View

Create new folder named aboutus. Create new jsp file named index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<h3>About Us Page</h3>

About 1 View

In aboutus folder, create new jsp file named about1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<h3>About 1 Page</h3>

About 2 View

In aboutus folder, create new jsp file named about2.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<h3>About 2 Page</h3>

News View

Create new folder named news. Create new jsp file named index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<h3>News Page</h3>

News 1 View

In news folder, create new jsp file named news1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<h3>News 1 Page</h3>

News 2 View

In news folder, create new jsp file named news2.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<h3>News 2 Page</h3>

News 3 View

In news folder, create new jsp file named news3.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<h3>News 3 Page</h3>

Tiles Definitions

In src\main\webapp\WEB-INF folder, create new folder named tiles folder, create tiles.xml file as below:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

<tiles-definitions>

	<definition name="masterTemplate"
		template="/WEB-INF/views/templates/masterTemplate.jsp">
		<put-attribute name="content" value=""></put-attribute>
	</definition>

	<definition name="home.index" extends="masterTemplate">
		<put-attribute name="content" value="/WEB-INF/views/home/index.jsp"></put-attribute>
	</definition>

	<!-- Define About Us Template -->
	<definition name="aboutus.index" extends="masterTemplate">
		<put-attribute name="content">
			<definition name="aboutUsTemplate"
				template="/WEB-INF/views/templates/aboutUsTemplate.jsp">
				<put-attribute name="aboutUsContent" value="/WEB-INF/views/aboutus/index.jsp"></put-attribute>
			</definition>
		</put-attribute>
	</definition>

	<definition name="aboutus.about1" extends="masterTemplate">
		<put-attribute name="content">
			<definition extends="aboutUsTemplate">
				<put-attribute name="aboutUsContent"
					value="/WEB-INF/views/aboutus/about1.jsp"></put-attribute>
			</definition>
		</put-attribute>
	</definition>

	<definition name="aboutus.about2" extends="masterTemplate">
		<put-attribute name="content">
			<definition extends="aboutUsTemplate">
				<put-attribute name="aboutUsContent"
					value="/WEB-INF/views/aboutus/about2.jsp"></put-attribute>
			</definition>
		</put-attribute>
	</definition>

	<!-- Define News Template -->
	<definition name="news.index" extends="masterTemplate">
		<put-attribute name="content">
			<definition name="newsTemplate"
				template="/WEB-INF/views/templates/newsTemplate.jsp">
				<put-attribute name="newsContent" value="/WEB-INF/views/news/index.jsp"></put-attribute>
			</definition>
		</put-attribute>
	</definition>

	<definition name="news.news1" extends="masterTemplate">
		<put-attribute name="content">
			<definition extends="newsTemplate">
				<put-attribute name="newsContent" value="/WEB-INF/views/news/news1.jsp"></put-attribute>
			</definition>
		</put-attribute>
	</definition>

	<definition name="news.news2" extends="masterTemplate">
		<put-attribute name="content">
			<definition extends="newsTemplate">
				<put-attribute name="newsContent" value="/WEB-INF/views/news/news2.jsp"></put-attribute>
			</definition>
		</put-attribute>
	</definition>

	<definition name="news.news3" extends="masterTemplate">
		<put-attribute name="content">
			<definition extends="newsTemplate">
				<put-attribute name="newsContent" value="/WEB-INF/views/news/news3.jsp"></put-attribute>
			</definition>
		</put-attribute>
	</definition>

</tiles-definitions>

Structure of Spring MVC Project




Run Application

Select LearnSpringMVCWithRealAppsApplication.java file in com.demo package, right click and select Run As/Spring Boot App menu

Access index method in home controller with following url: http://localhost:9596/home

Output

Access index method in aboutus controller with following url: http://localhost:9596/aboutus

Output

Access about1 method in aboutus controller with following url: http://localhost:9596/aboutus/about1

Output

Access about2 method in aboutus controller with following url: http://localhost:9596/aboutus/about2

Output

Access index method in news controller with following url: http://localhost:9596/news

Output

Access news1 method in news controller with following url: http://localhost:9596/news/news1

Output

Access news2 method in news controller with following url: http://localhost:9596/news/news2

Output

Access news3 method in news controller with following url: http://localhost:9596/news/news3

Output

References

I recommend you refer to the books below to learn more about the knowledge in this article:


Related Posts

Multiple Data Sources in Spring Data JPA and Spring Boot MVC

Import Excel File in Spring MVC Framework

Use DataTables in Spring MVC Framework and Spring Data JPA