Bigfat

[Spring] SiteMesh를 이용한 공통 레이아웃 처리하기 본문

Java/web

[Spring] SiteMesh를 이용한 공통 레이아웃 처리하기

kyou 2017. 7. 26. 12:06

SiteMesh 프레임워크를 이용해 공통된 레이아웃을 효율적으로 처리해보자

  SiteMesh 프레임워크를 이용하면 공통된 레이아웃을 분리하여 관리할 수 있다. Decorator 패턴을 사용하므로 작성한 HTML 코드에 공통된 레이아웃을 포장하는 방식이다(참고1).


  SiteMesh를 사용하기 위해 아래와 같이 pom.xml에 의존성을 추가한다.


1
2
3
4
5
6
<!-- SiteMesh -->
<dependency>
    <groupId>opensymphony</groupId>
    <artifactId>sitemesh</artifactId>
    <version>2.4.2</version>
</dependency>
cs


  web.xml에 SiteMesh가 제공하는 PageFilter를 설정한다. url-pattern을 /*로 작성했으므로 모든 요청에 대해 필터가 적용된다.


1
2
3
4
5
6
7
8
9
10
<!-- Sitemesh Page Filter -->
<filter>
    <filter-name>sitemeshPageFilter</filter-name>
    <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>sitemeshPageFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <!-- <dispatcher>FORWARD</dispatcher> -->
</filter-mapping>
cs


  SiteMesh 설정을 위해 sitemesh.xml을 작성해야 하는데, sitemesh.xml 파일은 반드시 WEB-INF 아래(/WEB-INF/sitemesh.xml)에 위치해야 한다(참고2). <property>에 decorator 설정 파일의 name과 value로 경로를 지정해줄 수 있으므로, decorator.xml 파일은 어디에 위치해도 상관없다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
    <property name="decorators-file" value="/WEB-INF/decorators.xml" />
    <excludes file="${decorators-file}" />
 
    <page-parsers>
        <parser content-type="text/html"
            class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
        <parser content-type="text/html;charset=UTF-8"
            class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
    </page-parsers>
 
    <decorator-mappers>
        <mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
            <param name="config" value="${decorators-file}" />
        </mapper>
    </decorator-mappers>
</sitemesh>
cs


  decorator.xml을 아래와 같이 작성한다. defaultdir은 데코레이터로 사용될 페이지의 기본 경로를 설정하고, <decorator>에 데코레이터로 사용될 페이지(.jsp)를 지정한다. <excludes>로 데코레이터를 사용하지 않을 요청을 지정해줄 수 있다. 예를 들면, 회원 가입(/signup), 팝업(/*_pop)의 경우 내비게이션과 같은 공통된 레이아웃이 필요하지 않았기에 exclude했다.


1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/WEB-INF/views/system/include">
    <decorator name="main" page="main_decorator.jsp">
        <pattern>/*</pattern>
    </decorator>
    
    <excludes>
        <pattern>/signup</pattern>
        <pattern>/*_pop</pattern>
    </excludes>
</decorators>
cs


  /WEB-INF/views/system/include/main_decorator.jsp를 아래와 같이 작성하였다. prefix로 decorator로 지정된 태그 라이브러리를 추가해주고, 공통된 코드들을 <head>와 <body>에 작성해준다. <decorator:head />, <decorator:body />에는 데코레이터가 적용되는 페이지의 <head>, <body> 코드가 들어가게 된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator"%>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            <decorator:title default="traveler" />
        </title>
        <style>
        </style>
        <decorator:head />
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <!--// 내비게이션 코드를 작성하였다. -->
        </nav>
        <decorator:body />
        <script>
            // login 관련 script를 작성하였다.
        </script>
    </body>
</html>
cs


  이제 공통된 레이아웃은 데코레이터가 처리하게 되므로 JSP를 심플하게 작성할 수 있다. <head>나 <body>에 추가할 코드가 있다면 아래와 같이 작성하면 된다.


1
2
3
4
5
6
7
8
9
10
11
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
   <style>
        body {
            background-color: green;
        }
   </style>
</head>
<body>
    body입니다.
</body>
cs


  위의 심플한 JSP는 데코레이터로 감싸져 아래와 같이 브라우저에 출력된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator"%>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><decorator:title default="traveler" /></title>
        <style>
       </style>
        <style>
            body {
                background-color: green;
            }
       </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <!--// 내비게이션 코드를 작성하였다. -->
        </nav>
        body입니다.
        <script>
            // login 관련 script를 작성하였다.
      </script>
    </body>
</html>
cs



[Getting Started with SiteMesh 3 참고]

[SiteMesh의 동작 방식과 설치 참고1]

[SiteMesh 설정, 사용방법, 옵션 등에 대한 정리(jsp에서 테스트) 참고2]


저작자표시 비영리 동일조건

'Java > web' 카테고리의 다른 글

[Spring] @RequestMapping의 produces 속성  (2) 2017.07.22
[Spring] AspectJ 적용 시 NoClassDefFoundError, ClassNotFoundException 발생  (2) 2017.05.22
[모델2] 단일 파일 다운로드 구현하기 (게시판 구현)  (0) 2017.05.01
[모델2] Multipart를 이용한 단일 파일 업로드 구현하기 (게시판 구현)  (0) 2017.05.01
[Spring] MyBatis Mapper 파일 설정 방법  (0) 2017.04.28
'Java/web' Related Articles more