[Spring Boot] Tiles 기본 설정 및 사용법 + 예제

Spring Boot에서 Tiles 기본 설정 및 사용하기

 

Tiles

: 화면 분할에 유용한 라이브러리

: 페이지마다 공통적으로 들어가는 Header, Footer, left, right 등의 부분에 대한 정보를 모아서 관리해준다.

 

그동안은  header, footer를 inclue 폴더 안에 넣어서 정리하고 사용했었는데

이번에 타일즈라는 방법을 알게 되어 적용해보려고 한다.

 

include 를 사용할 때는 매 페이지마다 헤더와 푸터를 적어줘야 했는데

Tiles는 처음에 세팅을 하면 그 후에는 추가를 하는 방식으로 URL과 Mapping만 처리하면 된다고 한다.

 

Tiles의 마지막 배포 버전은 3.0.8이며 2017년을 마지막으로 종료되었다고 한다.

 

 

https://sseb32310.tistory.com/101

[Spring] spring boot 새프로젝트 만들기 + maven

 

에서 spring boot + maven 프로젝트를 만들었고 

이어서 Tiles를 적용해보려고 한다.

 

---

 

타일즈를 사용하기 위한 설정

 

1. pom.xml 에 라이브러리 추가하기

먼저 타일즈 관련 라이브러리를 추가하자

 

(필수)

- tiles-core

Maven Repository: org.apache.tiles » tiles-core (mvnrepository.com)

 

- tiles-jsp

Maven Repository: org.apache.tiles » tiles-jsp (mvnrepository.com)

 

-tiles-servlet

Maven Repository: org.apache.tiles » tiles-servlet (mvnrepository.com)

 

 

(선택)

- tiles-api

Maven Repository: org.apache.tiles » tiles-api (mvnrepository.com)

 

- tiles-template

Maven Repository: org.apache.tiles » tiles-template (mvnrepository.com)

 

- tiles-extras

Maven Repository: org.apache.tiles » tiles-extras (mvnrepository.com)

 

<!-- tiles -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>3.0.8</version>
</dependency>
<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-api</artifactId>
    <version>3.0.8</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-template</artifactId>
    <version>3.0.8</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-extras -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>3.0.8</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>3.0.8</version>
</dependency>

 

 

필수라고 표시해놓은 위의 3개의 라이브러리만 추가하겠다

 

그리고 Spring Boot 사용시 tomcat-embed-jasper 와 jstl 을 추가해줘야 하므로

 

* tomcat-embed-jasper

: Spring boot 내장 톰캣에는 jasper engine이 없기 때문에 JSP 엔진 역할을 하는 패키지

Maven Repository: org.apache.tomcat.embed » tomcat-embed-jasper (mvnrepository.com)

 

* jstl

Maven Repository: javax.servlet » jstl » 1.2 (mvnrepository.com)

 

<!-- JSP -->
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

 

도 추가해주었다.

 

 

원래 pom.xml <dependencies>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

 

 

추가 후 pom.xml 의 <dependencies>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <!-- tiles -->
    <dependency>
        <groupId>org.apache.tiles</groupId>
        <artifactId>tiles-core</artifactId>
        <version>3.0.8</version>
    </dependency>
    <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>
    
    <!-- JSP -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>

</dependencies>

 

버전을 생략하면 알아서 맞는 버전으로 맞춰서 가져온다.

 

만약 스프링 부트가 3버전 이상인 경우 이 글도 참고하기 

https://sseb32310.tistory.com/100

[spring Boot] Tiles3 import Error (Spring 3.0버전 이상)

 

근데 3버전이상에서 Tiles를 사용할 수 있게 만들어주는 해결방법은 아님

 

---

 

2. 폴더 만들기

 

먼저 폴더를 만들어줄건데

 

폴더는

1. view 페이지인 jsp파일이 들어갈 폴더 : WEB-INF/jsp/views

2. 타일즈의 구성요소 및 레이아웃이 들어갈 폴더 : WEB-INF/jsp/template

3. 타일즈의 설정이 들어갈 폴더 : WEB-INF/tiles

 

 

이렇게 3개를 만들 것이다.

 

 

 

 

폴더들은 src - main - webapp 폴더 아래에 위치한다

 

 

 

다 만들면 이렇게 구성된다.

---

3. application.properties 수정

 

 

src/main/resources 패키지 안에 있는 application.properties에 view 페이지 경로를 알려주자

 

 

# view
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

 

경로를 다르게 만들었다면 그에 맞게 적어주면 된다.

 

---

4. TilesConfig.java 생성하기

src/main/java 안에 있는

com.boot 패키지 안에 TilesConfig라는 클래스를 생성해 주었다.

 

package com.boot;

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

@Configuration
public class TilesConfig {

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

    @Bean(name = "tilesConfigure")
    public TilesConfigurer tilesConfigurer() {
    	
        final TilesConfigurer configurer = new TilesConfigurer();
        configurer.setDefinitions(new String[] {"/WEB-INF/tiles/tiles.xml"}); 
        configurer.setCheckRefresh(true);
        return configurer;
    }
    
	@Bean
	public TilesViewResolver tilesViewResolver() {
		final TilesViewResolver resolver = new TilesViewResolver();
		resolver.setViewClass(TilesView.class);
		resolver.setOrder(1);
		return resolver;
	}
	
}

 

---

 

5. view 페이지 만들기

 

앞에서 만들었던 폴더1번의 위치에 뷰페이지를 만들어보자

 

 

 

WEB-INF/jsp/views 폴더 안에 test.jsp 라는 파일을 만들었다

 

test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>test.jsp 입니다.</h1>
</body>
</html>

 

---

 

6.  tiles 구성요소 및 레이아웃 만들기

 

 

6-1. tiles 구성요소

 

간단하게 header와 fooeter만 만들어보자

WEB-INF/jsp/template 안에 만들면 된다.

 

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>    
<h1>header.jsp입니다.</h1>

 

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>    
<h1>footer.jsp입니다.</h1>

 

 

* 만들 때 taglib(prefix="tiles")을 추가하는 것을 잊지말자

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>

 

 

6-2. 레이아웃 

 

template 폴더 안에 layout.jsp를 만들었다

layout에는 위에서 만들었던 header와 footer를 넣을 것이고

이렇게 페이지의 레이아웃을 정하는 페이지이다.

 

여러개의 layout 파일을 만들어서 원하는 파일에 적용할 수 있지만 귀찮으니 하나만 만들어보겠다.

 

*taglib 꼭 추가하기!

 

layout.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>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<tiles:insertAttribute name="title"/>
	<header>
		<tiles:insertAttribute name="header"/>
	</header>

	<tiles:insertAttribute name="contents"/>
	
	<footer>
		<tiles:insertAttribute name="footer"/>
	</footer>
</body>
</html>

 

 

코드를 보면

title에는 7번에서 할 tiles.xml에서 지정해준 값이 들어갈 것이고

header와 footer에는 6-1에서 만들었던 header와 footer의 내용이 들어갈 것이다.

contents에는 5번에서 만든 jsp의 내용이 들어갈 것이다.

 

우리가 만든 파일들을 layout에 연결해주기 위해서는

tiles.xml이라는 타일즈 설정 파일을 만들어줘야한다.

---

7.  tiles.xml 추가

 

tiles폴더 안에 tiles.xml을 만들어주면 된다.

 

 

 

tiles.xml

<?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="layout" template="/WEB-INF/jsp/template/layout.jsp">
    	<put-attribute name="title" value="Tiles page" />
    	<put-attribute name="header" value="/WEB-INF/jsp/template/header.jsp" />
    	<put-attribute name="footer" value="/WEB-INF/jsp/template/footer.jsp" />
	</definition>
  
  	<definition name="/*/*" extends="layout">
    	<put-attribute name="contents" value="/WEB-INF/jsp/{1}/{2}.jsp" />
  	</definition>

</tiles-definitions>

 

 

<tiles-definitions>안에 들어가있는 코드를 살펴보면

 

<definition name="layout" template="/WEB-INF/jsp/template/layout.jsp">
    <put-attribute name="title" value="Tiles page" />
    <put-attribute name="header" value="/WEB-INF/jsp/template/header.jsp" />
    <put-attribute name="footer" value="/WEB-INF/jsp/template/footer.jsp" />
</definition>

 

 

우리가 6번에서 만든 파일들의 위치를 알려주었다.

header와 footer를 포함하고 있는 layout.jsp 파일을

template="/WEB-INF/jsp/template/layout.jsp" 를 통해 template이라고 지정하고

name="layout" 을 통해 layout이라는 별명을 주었다.

 

layout에 넣을 요소들로는 title, header, footer가 있고 

title처럼 값 자체를 줄수도 있고 header나 footer처럼 파일을 지정할 수도 있다.

 

이들을 사용할때는 name으로 지정해준 별명을 주로 사용한다.

 

<definition name="/*/*" extends="layout">
    <put-attribute name="contents" value="/WEB-INF/jsp/{1}/{2}.jsp" />
</definition>

 

<definition> 은 extends를 통해 layout을 받아온다.

즉 name에 해당하는 파일에 layout 템플릿을 적용하겠다는 뜻이다.

name의 값은 controller에서 반환하는 값이며

해당 파일의 내용은 layout의 contents 영역에 들어가서 출력된다.

 

---

 

8. Controller 생성 및 작성

 

 

컨트롤러를 먼저 만들자

 

 

 

* 프로젝트를 생성할 때 만들어져있던 

com.boot 아래에 위치해야만 제대로 동작된다.

 

 

TestController.java

package com.boot.controller;

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

@Controller
@RequestMapping("/views")
public class TestController {
	
	@RequestMapping("/test")
	public String test() {
		return "/views/test";
		
	}

}

 

---

 

9. 실행

 

컨트롤러까지 다 만들었다면 이제 실행해보자

 

 

Run As => Spring Boot App

클릭 후 

 

 

문제없이 console창에 spring이 떴다면

 

 

브라우저에 들어가서 주소창에

localhost:8080/views/test를 입력하면 layout이 적용된 페이지가 보인다.

 

Title

Header

Content

Footer

순으로 보이는 것을 확인할 수 있고

test.jsp안에 있던 test.jsp입니다가 Content 자리에 들어간 것을 확인할 수 있다.

 

Title, header, footer 말고도 자주 사용하는 것으로는 menu와 body가 있으며

이외에도 원하는대로 만들어서 사용하면 된다.

 

---

 

주의할 점

 

tiles.xml 에서 <definition name="name값"> 태그의 name값은 컨트롤러의 return 값의 형식과 같아야한다.

 

말로만 설명하면 어렵지만 예제를 보면 쉽다.

 

tiles.xml

<?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="layout" template="/WEB-INF/jsp/template/layout.jsp">
    	<put-attribute name="title" value="Tiles test page" />
    	<put-attribute name="header" value="/WEB-INF/jsp/template/header.jsp" />
    	<put-attribute name="menu" value="/WEB-INF/jsp/template/menu.jsp" />
    	<put-attribute name="body" value="/WEB-INF/jsp/template/body.jsp" />
    	<put-attribute name="footer" value="/WEB-INF/jsp/template/footer.jsp" />
	</definition>
  
  	<definition name="/*/*" extends="layout">
    	<put-attribute name="contents" value="/WEB-INF/jsp/{1}/{2}.jsp" />
  	</definition>
  	<definition name="*/*.test" extends="layout">
    	<put-attribute name="contents" value="/WEB-INF/jsp/{1}/{2}.jsp" />
  	</definition>
  
</tiles-definitions>

 

 

layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>


	<h1>layout.jsp</h1>
	<!-- header 부분 -->
	<header>
		<tiles:insertAttribute name="header"/>
	</header>
	
	<!-- menu 부분 -->
	<tiles:insertAttribute name="menu"/>
	
	<!-- body 부분 -->
	<tiles:insertAttribute name="body"/>
	
	<!-- contents 부분 -->
	<tiles:insertAttribute name="contents"/>
	
	<!-- footer 부분 -->
	<footer>
		<tiles:insertAttribute name="footer"/>
	</footer>

 

 

일 때 

 

컨트롤러가 아래와 같다고 하면

package com.example.demo.controller;

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


@Controller
@RequestMapping("/views")
public class TestController {

		@RequestMapping("/test")
		public String test() {
			return "/views/test";
			
		}
		@RequestMapping("/test1")
		public String test1() {
			return "views/test1";
			
		}
		@RequestMapping("/test2")
		public String test2() {
			return "views/test2.test";
			
		}

}

 

1) test.jsp

 

tiles.xml

  	<definition name="/*/*" extends="layout">
    	<put-attribute name="contents" value="/WEB-INF/jsp/{1}/{2}.jsp" />
  	</definition>

 

이 형식과 똑같이 반환되는 

 

controller

@RequestMapping("/test")
public String test() {
    return "/views/test";

}

 

test.jsp는

 

 

 

페이지가 잘 나온다.

 

2) test1.jsp

 

 

controller

@RequestMapping("/test1")
public String test1() {
    return "views/test1";
}

 

 

컨트롤러 반환 형식이 tiles.xml 에서 일치하는 형식이 없으므로

tiles가 적용되지 않은 페이지가 나온다.

(views앞에 / 가 없음)

 

 

3) test2.jsp

 

tiles.xml

<definition name="*/*.test" extends="layout">
    <put-attribute name="contents" value="/WEB-INF/jsp/{1}/{2}.jsp" />
</definition>

 

이부분의 형식과

 

controller

@RequestMapping("/test2")
public String test2() {
    return "views/test2.test";

}

 

컨트롤러의 반환 형식이 같으므로

 

 

 

이렇게 적용된 페이지로 나온다.

 

 

* 형식에 / 가 있는 경우 <put-attribute> 태그안의 value 에서

무조건 {1}/{2} 이런식으로 구별해서 인자를 구별해줘야하며

/의 위치와 개수까지도 맞춰줘야한

 

 

controller 반환값의 형식이 name의 형태와 일치해야하고 

name의 값들이 value의 뒷부분에 들어간다고 생각하면 쉽다

---

 

참고한 글

 

Spring Boot Tiles 설정하기 - Try (has3ong.github.io)

Spring Boot Tiles 설정하기

 

[스프링 tiles] 다른 매핑한 것들은 정상.. : 네이버블로그 (naver.com)

[스프링 tiles] 다른 매핑한 것들은 정상적이게 실행되는데, requestMapping(value="/")의 경우에만 500 오