본문 바로가기

BackEnd/Spring

Tiles설치 및 사용하여 html 템플릿 관리하기

1. 설치하기

해당 설치는 maven dependency를 통해서 설치하는 방법이다.

	<properties>
	    <spring.maven.artifact.version>4.1.2.RELEASE</spring.maven.artifact.version>
		<egovframework.rte.version>3.6.0</egovframework.rte.version>
		<org.apache.tiles-version>3.0.8</org.apache.tiles-version>
	</properties>

2. tiles 관련 dependency 추가 하기

		<dependency>
		   <groupId>org.apache.tiles</groupId>
		   <artifactId>tiles-jsp</artifactId>
		   <version>${org.apache.tiles-version}</version>
		</dependency>
		<dependency>
		   <groupId>org.apache.tiles</groupId>
		   <artifactId>tiles-core</artifactId>
		   <version>${org.apache.tiles-version}</version>
		</dependency>

dependency를 추가한 후 설치된 파일을 확인한다.

3. dispatcher에 tiles 관련 설정하기

	<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"/>
		<property name="order" value="1"/>
	</bean>

	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/tiles/default-layout.xml</value>
			</list>
		</property>
	</bean>

    <bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="2"
	    p:viewClass="org.springframework.web.servlet.view.JstlView"
	    p:prefix="/WEB-INF/jsp/com/webproject/" p:suffix=".jsp"/>

ViewResolver에서 BasedViewResolver의 order 순서를 바꾼다.

tilesViewResolver의 order 순서를 1로 두어서, tiles를 먼저 실행하게 한다.

 

Configurer에는 ViewResolver시에 tiles에 대한 설정을 가진 파일의 경로를 입력한다.

 

4. tiles 설정파일생성하기

< 해당 경로에 파일을 생성하였다 >

tilesConfigurer 에서 설정한 경로에 설정 파일을 생성하고 아래의 코드를 입력하자

<tiles-definitions>
  <definition name="layouts-tiles" template="/WEB-INF/jsp/com/webProject/cmmn/layouts/default-layouts.jsp">
      <put-attribute name="변수명" value="템플릿 경로"/>	
      <put-attribute name="head" value="/WEB-INF/jsp/com/webProject/cmmn/layouts/head.jsp"/>
      <put-attribute name="contents" value="/WEB-INF/jsp/com/webProject/cmmn/layouts/contents.jsp"/>
      <put-attribute name="header" value="/WEB-INF/jsp/com/webProject/cmmn/layouts/header.jsp"/>
      <put-attribute name="footer" value="/WEB-INF/jsp/com/webProject/cmmn//layouts/footer.jsp"/>
  </definition>
</tiles-definitions>

<definition name="*/*.tiles" extends="layouts-tiles">
<put-attribute name="content" value="/WEB-INF/jsp/com/webproject/{1}/{2}.jsp"/>
</definition> 

첫번째 definition 태그의 template은 루트 템플릿에 대한 경로를 입력한다.

put-attribute는 name에 변수명을 value는 각각의 템플릿 경로를 입력한다.

설정된 변수명은 jsp 파일의 태그를 집어 넣을 때 사용된다.

 

두번째 definition태그의 name은 변수명을 상황에 맞춰서 작성되어졌다.

extends는 해당 템플릿이 요청되어졌을때, 추가적으로 요청될 template의 변수명을 입력한다.

put-attribute 역시 임의의 루트를 가진다. 이때, content webproject의 모든 jsp파일을 불러온다.

6. 템플릿 루트를 경로에 파일 생성하기

위에서 정의했던 경로에 파일들을 생성한ㄷ나.

루트 템플릿에는 taglib를 이용하여 라이브러리를 추가한다.

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

<!DOCTYPE html>
<html lang="zxx">
	<tiles:insertAttribute name="head"></tiles:insertAttribute> // 템플릿들 추가하기
	<body>
	<div class="page_loader"></div>
	<tiles:insertAttribute name="header"></tiles:insertAttribute> // 템플릿 추가하기
	<tiles:insertAttribute name="banner"></tiles:insertAttribute>
	<tiles:insertAttribute name="content"></tiles:insertAttribute>
	<tiles:insertAttribute name="설정된 변수명"></tiles:insertAttribute>

	//script 및 라이브러리 추가하기
	<script type="text/javascript" src="js/bootstrap.min.js"></script>

 

7. 하위 템플릿에 html 코드 입력하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- Footer start -->
<footer>
	<div>
    	this is footer
    </div>
</footer>

 

8. 결과