Spring Tiles 적용하기
사용목적
- 공통된 레이아웃을 사용해 유지관리 용이
- 페이지 레이아웃을 쉽고 단순하게 구현 가능
- 타일즈를 이용해서 페이지 레이아웃을 설정하면 각각의 페이지를 따로 관리할 수 있어 수정 작업이 필요한 페이지가 존재하면 전체 페이지를 수정하는 것이 아닌 특정 페이지만 수정하는 방식으로 관리가 가능하다
0.프로젝트 환경
- IDE : STS(Spring Tool Suite)
- New -> Spring -> Spring Legacy Project -> Spring MVC Project
1.의존성 추가
pom.xml
<!-- 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-extras</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-jsp</artifactId>
<version>3.0.8</version>
</dependency>
<!-- Tiles를 이용한 페이지 모듈화 끝 -->
1-1. 타일즈 설정을 위한 Bean 등록
servlet-context.xml
<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
<!-- Tiles 설정을 사용하기 위해 기존 사용하던 ViewResolver의 순서를 2로 변경 -->
<beans:bean 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 설정을 위한 Bean 등록 -->
<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-config.xml</beans:value>
</beans:list>
</beans:property>
</beans:bean>
<!-- Tiles 설정을 위한 Bean 등록 끝 -->
2.tiles-config.xml 작성
- 페이지 구조 정의 및 화면 레이아웃 설정
tiles-config.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="mainTemplate" template="/WEB-INF/views/mainTemplate.jsp">
<!-- 헤더 섹션을 포함합니다 -->
<put-attribute name="header" value="/WEB-INF/views/tiles/header.jsp"/>
<!-- 메인 콘텐츠 섹션은 초기에 비어 있습니다 -->
<put-attribute name="content" value=""/>
<!-- 푸터 섹션을 포함합니다 -->
<put-attribute name="footer" value="/WEB-INF/views/tiles/footer.jsp"/>
</definition>
<!-- 공지 페이지 정의 -->
<!-- 이는 공지 페이지를 위해 메인 템플릿 구조를 확장합니다 -->
<!-- definition name="notice/* : 컨트롤러의 리턴타입 -->
<definition name="notice/*" extends="mainTemplate">
<!-- 공지 페이지의 콘텐츠 섹션은 특정한 공지 콘텐츠를 동적으로 포함합니다 -->
<put-attribute name="content" value="/WEB-INF/views/noticeboard/{1}.jsp"/>
<!-- {1}은 특정 공지를 나타내는 와일드카드입니다 -->
<!-- 예를 들어, /notice/announcement은 /WEB-INF/views/noticeboard/announcement.jsp를 사용합니다 -->
</definition>
</tiles-definitions>
3.레이아웃 용 JSP(mainTemplate.jsp) 작성
- mainTemplate에 header/content/footer를 추가
- Tiles를 사용하기 위해서는 아래 디렉티브 태그 반드시 추가 필요.
<%@ taglib uri=“http://tiles.apache.org/tags-tiles” prefix=“tiles” %>
mainTemplate.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 lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/dist/css/adminlte.min.css">
<script src="${pageContext.request.contextPath }/resources/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/resources/ckeditor/ckeditor.js"></script>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- header 영역 -->
<tiles:insertAttribute name="header"/>
<div class="content-wrapper">
<!-- content 영역 -->
<tiles:insertAttribute name="content"/>
</div>
<!-- footer 영역 -->
<tiles:insertAttribute name="footer"/>
</div>
<script src="${pageContext.request.contextPath }/resources/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath }/resources/dist/js/adminlte.min.js"></script>
</body>
</html>
4.레이아웃에 표시되는 JSP 파일 작성
- 위에서 지정한 header/content/footer JSP파일 작성
- content는 tiles-config.xml에서 jsp파일 동적으로 포함 되도록 설정 했으므로 /WEB-INF/views/noticeboard/ 해당 경로로 들어오는 jsp파일이 자동으로 content 위치에 추가된다.
- 이후 페이지 요청 시 mainTemplate 에서 지정한 형태(header/content/footer 가 포함된)로 페이지를 불러온다
댓글