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
Step by step goes a long way.
gmlwjd9405.github.io
설정
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
Tiles JSP support: Classes and tag libraries to use Tiles in a JSP environment. Last Release on Sep 30, 2017
mvnrepository.com
위 주소로 들어가면 아래 내용이 나온다.
이 세 가지의 최신 버전 <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";
}
}
'Portfolio' 카테고리의 다른 글
| [Spring] 프로젝트 생성 (0) | 2023.05.09 |
|---|
