Dynamic Web Project - Tiles Template 추가

Tiles

Spring Apache Tiles는 레이아웃 템플릿 엔진이다. 중복되는 <include> 태그를 사용하지 않아도 지정된 레이아웃에

따라 페이지 타일을 조합하여 완전한 페이지로 만들어준다.

간단하게 얘기하면 Tiles는 웹 페이지 상단이나 하단 메뉴와 같이 반복적으로 사용되는 부분들에 대한 코드를 분리해서

한곳에서 관리할 수 있도록 가능하게 해주는 프레임워크이다.

 

 

1. pom.xml dependency 추가

아래의 dependency 를 pom.xml 에 추가한다.

<!-- Tiles -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.3</version>
</dependency>

프로젝트 마우스 오른쪽 클릭 > Maven > Update Project...

 

* tiles Dependency 추가 시 본인은 아래와 같이 slf4j 가 존재하지 않는다고 에러가 떴다.

 위와 같은 에러가 뜨는 경우 아래 dependency 도 추가 해줘야 한다.

<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>1.7.5</version>
</dependency>
<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-simple</artifactId>
    <version>1.6.4</version>
</dependency>

 

2. dispatcher-servlet 에 Tiles 설정을 위한 View Resolver 및 Config 설정 추가

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:context="http://www.springframework.org/schema/context"
          xmlns:mvc="http://www.springframework.org/schema/mvc"
          xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
							http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
							http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">

	<bean id="handlerMapping" class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping">
		<property name="order" value="1"></property>
	</bean>
	
	<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"></property>
		<property name="order" value="1"></property>
	</bean>
	
	<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions" value="/WEB-INF/views/tiles.xml"></property>
	</bean>
	
	<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/"></property>
		<property name="suffix" value=".jsp"></property>
	</bean>
</beans>

 

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

Tiles View Resolver 를 Bean 등록하여 Tiles Template 설정을 한다.

 

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

Tiles 설정 파일을 지정하여 Config 설정한다.

 

3. tiles.xml 및 tiles 설정 jsp 파일 생성

 

 

WEB-INF/views/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-tiles" template="/WEB-INF/views/tiles/tiles-layout.jsp">
			<put-attribute name="header" value="/WEB-INF/views/tiles/header.jsp"></put-attribute>
			<put-attribute name="left" value="/WEB-INF/views/tiles/left.jsp"></put-attribute>
			<put-attribute name="body" value=""></put-attribute>
			<put-attribute name="footer" value="/WEB-INF/views/tiles/footer.jsp"></put-attribute>
		</definition>
		
		<definition name="testLayout" extends="layout-tiles">
			<put-attribute name="body" value="/WEB-INF/views/test/test.jsp" />
			<put-attribute name="title" value="게시판" />
		</definition>
	</tiles-definitions>

 

layout-tiles 라는 이름으로 layout 을 정의한다.

template 속성을 통해 layout 을 설정할 jsp 파일을 정의한다.

각각 부분적으로 header, left, footer, body 를 보여줄 jsp 파일을 정의한다.

 

header.jsp

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

 

left.jsp

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

 

footer.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 uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html>
<head>
	<style>
	* {
		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;
	}
</style>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<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="footer" />
  	</div>
</body>
</html>