[Spring MVC] Tiles 개념과 설정

Tiles란?

Tiles를 이용하지 않으면 화면 내에 공통적으로 들어가게 될 header, footer 같은 소스를 jsp 파일로 분리한다. 그리고 각 화면의 jsp 파일마다 include하는 방식을 사용한다. 이럴 경우, 모든 화면에 header, footer를 include 해야 하고, 페이지의 레이아웃이 바뀔 때 jsp 파일을 모두 수정해야 하기 때문에 번거롭다.

 

이 때, 웹 페이지의 header, footer, 메뉴처럼 공통적인 소스를 분리하여 화면의 jsp 파일에는 각 화면에 해당하는 소스만 작성하고 페이지의 레이아웃을 한 곳에서 설정하여 관리할 수 있도록 하는 프레임워크이다.

 

처음엔 Tiles와 Thymeleaf 둘 중 하나를 선택해서 사용해야 하는 줄 알았다.

하지만 Tiles는 레이아웃 템플릿, Thymeleaf는 텍스트 템플릿 엔진으로 함께 사용 가능한 것이었다.

Thymeleaf는 따로 포스팅할 때 자세히 설명하겠다. 아래 글은 템플릿 엔진에 대한 내용이다.

https://gmlwjd9405.github.io/2018/12/21/template-engine.html

[Template Engine] 템플릿 엔진(Template Engine)이란 - Heee's Development Blog

 

 

설정

pom.xml

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

 

https://mvnrepository.com/search?q=tiles

Maven Repository: tiles

 

위 주소로 들어가면 아래 내용이 나온다.

이 세 가지의 최신 버전 <dependency>를 복사해서 pom.xml에 넣는 것이다.

현재는 3.0.8 버전이 최신이므로 해당 버전을 받는다.

 

servlet-context.xml

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	    <beans:property name="order" value="2" />
	</beans:bean>
	
	<!-- Tiles -->        
	<beans:bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
		<beans:property name="order" value="1" />
	</beans:bean>   
    
	<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<beans:property name="definitions">
			<beans:list>
				<beans:value>/WEB-INF/tiles/tiles.xml</beans:value>
			</beans:list>
		</beans:property>
	</beans:bean>

기존 veiwResolver의 order 속성을 2로 수정하고 아래 Tiles 내용을 추가한다.

order 속성은 실행의 우선순위를 의미한다.

tilesConfigurer에 타일즈 설정을 할 xml 파일의 경로를 입력한다.

 

/WEB-INF/tiles/tiles.xml

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

<tiles-definitions>

	<!-- tiles 적용 -->
	<definition name="template" template="/WEB-INF/tiles/template.jsp">
		<put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
		<put-attribute name="left" value="/WEB-INF/tiles/left.jsp" />
		<put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
	</definition>
 
	<definition name="*" extends="template">
		<put-attribute name="main" value="/WEB-INF/views/{1}.jsp" />
	</definition>
	
</tiles-definitions>

<definition>로 tiles 태그를 사용할 template 파일의 경로를 작성한 후, <put-attribute>에 사용할 태그의 이름, jsp 파일의 경로를 입력한다.

main은 컨트롤러에 의해 화면에 띄워질 jsp파일을 의미하므로 value에 경로를 적어준다.

 

definition name에 *로 설정하면 컨트롤러에서 return값을 "home" 으로 작성하면 되고

*/*로 설정하면 "home/home", "*.*"이면 "home.home", 또는 "*.tiles"로 "home.tiles", "*.normal"은 "home.normal" 식으로 작성하면 된다.

 

jsp 파일

WEB-INF/tiles/header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<h1>Header</h1>
 
<script type="text/javascript">
    $(function() {
          
    });    
</script>

WEB-INF/tiles/footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<h1>Footer</h1>
 
<script type="text/javascript">
    $(function() {
 
    });    
</script>

WEB-INF/tiles/left.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<h1>Left 메뉴</h1>
 
<script type="text/javascript">
    $(function() {
 
    });    
</script>

WEB-INF/tiles/template.jsp _ 레이아웃 파일

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목</title>
    <style>
        #header{            
            width:100%;
            height:50px;
            text-align: center;
            background-color: aqua;
        }
        #left{
            float:left;
             width:15%;
            background-color: gray;
        }
        #main{
            float:left;
             width:85%;
            background-color: lime;
        }
        #footer{
            width: 100%;
            height: 50px;            
            text-align: center;
            background-color: orange;
            clear:both;
        }
         #left, #main{ 
               min-height: 600px;
         } 
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div style="width:100%; height:100%;">
    <div id="header"><tiles:insertAttribute name="header" /></div>
    <div id="left"><tiles:insertAttribute name="left" /></div>
    <div id="main"><tiles:insertAttribute name="main" /></div>    
    <div id="footer"><tiles:insertAttribute name="footer" /></div>
    </div>
 
    <script type="text/javascript">
        $(function() {
 
        });    
    </script>    
</body>
</html>

WEB-INF/views/home.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
</head>
<body>
<h1>
	Hello world!  
</h1>

<P>  The time on the server is ${serverTime}. </P>
</body>
</html>

HomeController.java

@Controller
public class HomeController {
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home() {
        
        return "home";
    }
}

 

이렇게 설정이 완료되었다.

아래 링크는 더 자세한 설명과 preparer이라는 기능에 대해 알려주고 있으므로 필요하다면 참고하자

https://seypark.tistory.com/126

Spring MVC - Tiles로 jsp구성하기