Spring - 타일즈(Tiles) 적용하기

스프링 타일즈란 뷰페이지의 jsp들을 상단, 사이드, 메인, 하단을 설정 상태로 include 처리해주는 구조의 템플릿을 말합니다.

 

페이지들을 일괄관리 할 수 있고, 공통사용하는 부분들을 매번 등록을 따로 해주지 않아도 되기 때문에 편리합니다.

 

적용하는법에 대해 알아보겠습니다.

먼저, 타일즈 적용을 위해 pom.xml에 메이븐 추가부터 해보겠습니다.

 

---

 

pom.xml - 라이브러리 추가

<properties>
	<org.apache.tiles-version>3.0.3</org.apache.tiles-version>
</properties>

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

<dependency>
	<groupId>org.apache.tiles</groupId>
	<artifactId>tiles-servlet</artifactId>
	<version>${org.apache.tiles-version}</version>
</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-extras</artifactId>
	<version>${org.apache.tiles-version}</version>
</dependency>

Maven에 추가된 모습

pom.xml을 열어서 원하는 버전으로 입력하시면 다운로드가 될 겁니다.

저는 3.0.3버전으로 진행했습니다.

 

버전 정보들은 아래 URL에서 확인하시면 좋을 것 같습니다.

https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp

Maven Repository: org.apache.tiles » tiles-jsp

 

다음으로 사용할 상단, 사이드, 메인, 하단으로 사용할 jsp들을 만들어 놓겠습니다.

나중에 타일즈 설정파일에서 연결을 할겁니다.

 

WEB-INF/views/tiles라는 디렉토리를 만들고 안에 각각 JSP들을 구성합니다.

 

 

사용할 JSP구성

JSP 4개 생성

안에 사용할 내용은 비워두셔도 됩니다.

 

다음은 servlet-context.xml에 InternalResourceViewResolver를 변경 및 tiles설정을 추가하겠습니다.

 

 

servlet-context.xml

<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/spring/tiles-define.xml</beans:value>
        </beans:list>
    </beans:property>
</beans:bean>

order 부분을 유의해서 설정해주셔야 합니다. tiles가 우선순위가 되도록 해주어야 합니다.

 

 

tiles 설정을 추가 후 이클립스에서 에러가 발생한다면 아래 포스팅을 참고해주세요

https://myhappyman.tistory.com/82

Spring - tiles 적용 에러 발생 'org.springframework.web.servlet.view.tiles3.TilesConfigurer' not found

 

servlet-context.xml을 추가했으면 beans:value에 처리한 tiles-define.xml을 생성하고 설정하겠습니다.

tiles-define.xml

xml을 생성하고 설정을 하겠습니다.

 

 

tiles-define.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>
	<!-- main layout -->
	<definition name="layout-tiles" template="/WEB-INF/views/tiles/tiles-layout.jsp">
		<put-attribute name="header" value="/WEB-INF/views/tiles/headerTemplate.jsp" />
		<put-attribute name="left" value="/WEB-INF/views/tiles/sidebarTemplate.jsp" />
		<put-attribute name="body" value="" />
		<put-attribute name="foot" value="/WEB-INF/views/tiles/footerTemplate.jsp" />
	</definition>
	
	<definition name="*/*" extends="layout-tiles">
		<put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />
		<put-attribute name="title" value="게시판" />
	</definition>
</tiles-definitions>

 

이 부분에서는 상단, 사이드, 바닥 메인으로 사용할 템플릿 등을 설정합니다.

definition에서 name은 변수처럼 사용할 이름을 지정하고 template은 사용할 jsp를 지정합니다.

그 내부에는 따라오는 헤더, 사이드, 바닥 jsp들을 처리하고 마찬가지로 name은 사용할 이름 value에는 실제로 들어갈 jsp를 입력합니다.

 

먼저 생성해놓은 JSP 중 tiles-layout.jsp를 메인으로 사용하고 각각 header sidebar, footer부분을 영역별로 사용할 예정입니다.

 

아래서 extends부분은 위에서 선언한 jsp를 상속받아 실제로 사용하는 페이지에 이식하고 body영역은 실제 페이지를 사용하기 위해 설정하는 부분으로 메인 body로 쓸 jsp영역을 설정할 수 있으며, {1}/{2}.jsp을 통해 board/board.jsp로 갈때 자연스럽게 이식되어 사용할 수 있게 합니다.

title과 같은 설정으로 브라우저의 title태그도 변경이 가능합니다.

 

이로써 간단하게 tiles설정이 끝났습니다.

 

---

 

JSP들 소스 수정과 CSS들을 입력하여 동작하는지 확인해보겠습니다.

 

headerTemplate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="Header">Header</div>

 

sidebarTemplate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="SideBar">Side</div>

 

footerTemplate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="Footer">Footer</div>

 

tiles-layout.jsp

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

<!-- 공통변수 처리 -->
<c:set var="CONTEXT_PATH" value="${pageContext.request.contextPath}" scope="application"/>
<c:set var="RESOURCES_PATH" value="${CONTEXT_PATH}/resources" scope="application"/>
<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script type="text/javascript">
		var CONTEXT_PATH = "${CONTEXT_PATH}";
		var RESOURCES_PATH = "${RESOURCES_PATH}";
	</script>
	<link rel="stylesheet" href="${RESOURCES_PATH}/css/common.css">
    <title><tiles:insertAttribute name="title" /></title>
  </head>
  
  <body>
  	<div class='wrap'>
  		<tiles:insertAttribute name="header" />
		  <div class='content'>  	
  			<tiles:insertAttribute name="left"/>
	  		<div class="page_content">
	  			<tiles:insertAttribute name="body"/>
	  		</div>
  		</div>
  		<tiles:insertAttribute name="foot" />
  	</div>
  </body>
  
</html>

공통변수 처리부분이나 script부분은 무시하셔도 됩니다.

tiles-define.xml에서 각각 JSP들을 불러왔으니 사용해야겠죠? 해당페이지에서 원하는 영역에 삽입을 할 수 있습니다.

<tiles:insertAttribute name="사용할 이름" />을 통해 적용하시면 됩니다.

 

resources/css/common.css를 만들었습니다.

 

 

common.css

@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
}
.wrap{
	width: 100%;
}

.Header, .content, .Footer{
	width: 100%;
	float: left;
}

.Header, .Footer{
	height: 8em;
}

.SideBar{
	width: 10%;
	height: 600px;
	background-color: #FFBB00;
	float: left;
}

.page_content{
	width: 90%;
	height: 600px;
	background-color: #EAEAEA;
	float: left;
}

.Header{
	background-color: #ABF200;
}

.Footer{
	background-color: #FF00DD;
}

 

 

예시로 board/board.jsp를 이동하게 된 경우 발생한 결과 화면입니다.

tiles 적용