SiteMesh를 이용한 레이아웃 템플릿 처리, 설치 및 세팅, 데코레이터 설정 방법 학습!!


SiteMesh를 이용한 레이아웃 템플릿 처리, 설치 및 데코레이터 설정 방법

- SiteMesh란?

웹 어플리케이션은 수십에서 수백 개의 화면으로 구성되는데 이 화면들 중 상당수는 동일한 레이아웃과 공통된 영역을 갖는다.

모든 JSP 페이지가 공통된 영역에 대한 코드를 갖고 있을 경우 아주 작은 변화만으로도 전체 JSP 페이를 변경해주어야 하는 문제가 발생할 수 있다. 이런 문제를 해소하기 위해 <jsp:include>를 사용해서 공통된 부분을 별도의 JSP로 분리해 내기도 하지만, 레이아웃 자체를 변경하거나 새로운 공통 영역을 추가해야 할 경우 전체 JSP 페이지를 변경해주어야 하는 부담이 남게 된다. 

레이아웃 자체를 템플릿으로 만들어 적용하는 방법을 많이 사용하고 있는데, 레이아웃 템플릿을 만들어주는 기술 중의 하나로 SiteMesh가 있다. 

SiteMesh는 공통으로 적용될 레이아웃과 구성 요소를 정의하고 있는 데코레이터를 응답 결과에 적용하는 방식으로 동작한다. 

데코레이터는 레이아웃 코드 및 헤더와 몸체가 삽입될 위치 정보로 구성된다. 어떤 생성 화면이든지 데코레이터를 적용하기만 하면 데코레이터에 정의된 레이아웃과 공통 영역이 적용된 응답 결과를 볼 수 있게 된다. 


1. SiteMesh 설치

http://wiki.sitemesh.org/display/sitemesh/Download 에서 jar 파일을 받은 뒤에 WEB-INF/lib 폴더에 복사한다.


- SiteMesh를 사용한 템플릿 구현 기초

1. web.xml 파일에 SiteMeshFilter 설정 추가

2. SiteMesh 설정 파일 작성

3. 데코레이터 설정 파일 작성

4. 데코레이터JSP 작성


1. web.xml 파일에 SiteMeshFilter 설정 추가

SiteMesh는 필터라는 것을 이용해서 응답 결과에 데코레이터를 적용한다. 따라서 필터를 web.xml 파일에 설정해주어야 한다.

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xmlns="http://java.sun.com/xml/ns/javaee"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  5. http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="chap19" version="3.0">
  6. <filter>
  7. <filter-name>sitemesh</filter-name>
  8. <filter-class>
  9.     com.opensymphony.sitemesh.webapp.SiteMeshFilter
  10. </filter-class>
  11. </filter>
  12. <filter-mapping>
  13. <filter-name>sitemesh</filter-name>
  14. <url-pattern>/*</url-pattern>
  15. </filter-mapping>
  16. </web-app>


2. sitemesh.xml 파일 설정

sitemesh.xml 파일은 SiteMesh 자체의 설정 파일이다. 이 파일에서는 데코레이터 설정 정보를 관리하기 위한 DecoratorMapper 설정을 하게 된다.

설정 파일에 대한 별도 설정이 없을 경우, SiteMesh가 사용하는 설정 파일의 경로는 /WEB-INF/sitemesh.xml이다.


  1. <sitemesh>
  2. <property name="decorators-file" value="/WEB-INF/decorators.xml" />
  3. <excludes file="${decorators-file}" />
  4. <page-parsers>
  5. <parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
  6. </page-parsers>
  7. <decorator-mappers>
  8. <mapper
  9. class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
  10. <param name="config" value="${decorators-file}" />
  11. </mapper>
  12. </decorator-mappers>
  13. </sitemesh>

11 라인의 ConfigDecoratorMapper는 파일을 이용해서 데코레이터를 설정한다.

설정 파일의 경로를 변경하고 싶다면 2라인의 decorators-file 프로퍼티의 값을 변경하거나 12라인에서 value 속성의 값을 직접 변경하면 된다.

3라인의 <exclude> 태그는 데코레이터를 적용하지 않을 경로 정보를 담고 있는 파일을 지정할 때 사용된다.


3. 데코레이터 설정 파일

  1. <?xml version="1.0" encoding="euc-kr" ?>
  2. <decorators defaultdir="/decorator">
  3. <decorator name="main" page="hello_decorator.jsp">
  4. <pattern>/hello.jsp</pattern>
  5. <pattern>/hello/*</pattern>
  6. </decorator>
  7. <decorator name="news" page="/decorator2/news_decorator.jsp">
  8. <pattern>/news/*</pattern>
  9. </decorator>
  10. <excludes>
  11. <pattern>/hello/exclude.jsp</pattern>
  12. <pattern>/news/exclude.jsp</pattern>
  13. </excludes>
  14. </decorators>


<decorator> 태그의 name 속성과 page 속성은 각각 데코레이터의 이름과 데코레이터로 사용할 JSP 파일을 지정한다. 데코레이터 파일의 경로가 "/"로 시작하지 않을 경우 3번 라인의 defaultdir 속성으로 지정한 경로를 기준으로 데코레이터 파일 경로가 설정된다.


4. 데코레이터 파일 작성

데코레이터는 일반적인 JSP와 동일하게 구현하는데, 차이점이 있다면 SiteMesh가 제공하는 커스텀 태그를 이용해서 문서 제목, <head> 내용, <body> 내용의 삽입할 위치를 지정한다는 것이다.


EX) <%@ taglib prefix="decorator" uri="http://www.opensymhony.com/sitemesh/decorator" %>

는 데코레이터 기능을 제공하는 커스텀 태그를 설정한다. 커스텀 태그를 설정하면 아래의 커스텀 태그를 이용해서 데코레이터 기능을 넣을 수 있다.



<decorator:title> : 데코레이터가 적용될 응답 화면의 <title> 태그의 값이 삽입된다.

<decorator:head> : 데코레이터가 적용될 응답 화면의 <head> 태그의 (title을 제외한) 내용이 삽입된다.

<decorator:body> : 데코레이터가 적용될 응답 화면의 <body> 태그의 내용이 삽입된다.

* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
초이 프로필
WrapUp 블로거

초이

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^