Sitemesh 설정, 사용방법

 

그동안 미뤄놨던 Sitemesh 에 대한 정리

 

 

Sitemesh3 가 나왔다고 하지만 내가 사용했던 Sitemesh2 2.4.2 버전을 기준으로 설명한다. 

설정 및 테스트는 jsp로 진행한다.

 

 

 

> Sitemesh란

웹페이지의 레이아웃을 효율적으로 처리할 수 있게 도와주는 프레임워크이다.

 

웹페이지의 동일한 상단, 하단, 메뉴 등의 부분들은 한곳에서 관리하고 각각의 페이지는 실제 내용만을 관리한다.

 



 

> Design Pattern

디자인 패턴에는 여러가지가 있다.

 

그 중에서 Sitemesh는 Decorator 패턴을 사용한다.

 

레이아웃 프레임워크중에서 가장 많이 사용되고있는 Tiles와 비교해보자.

Tiles (타일즈) 는 Composite View Pattern 을 사용한다.

 

부모 뷰와 자식 뷰들을 전체와 부분 관계로 나타낸다.


모든 뷰는 자신보다 작은 부분들의 집합이며 여러 뷰에서 생기는 중복 코드를 감소시키는 역할을 한다.

 

각각의 뷰들 사이의 일관성을 높여 유지보수와 제어를 수월하게 할 수 있도록 한다.

        

 


Sitemesh는 Decorator Pattern 을 사용한다.

 

웹서버로부터 웹브라우저로 제공되는 원본 컨텐츠를 파싱하고, 컨텐츠로부터 속성과 데이타를 추출하여 최종 결과물을 생산한다.


예를 들면 JSP페이지 수행결과가 웹브라우저에 가기 전에 중간에 가로채서 문서의 내용을 변경할 수 있게 한다.

 

 


> Sitemesh 장점

대형 웹사이트에서 많은 웹페이지가 일관된 사용자 룩앤필, 페이지이동, 페이지 레이아웃을 갖는데 용이하다.

 

설정방법과 사용방법도 Tiles 에 비하면 간단한 수준이다.

 

또한 Java2, Servlet, JSP, XML, CGI(Perl, Python etc), PHP, Cold Fusion 등 다른 아키텍쳐와 잘 통합된다.

 



 

> Sitemesh 설정

 테스트환경 : JSP, Tomcat 7.0, JDK 1.7, eGov 2.7

 

설정방법은 매우 간단하다.

 

http://wiki.sitemesh.org/wiki/display/sitemesh/Download

 

위 주소로 이동하여 2.4.2 버전의 jar 파일을 다운받는다.

 

다운받은 파일을 lib 폴더에 위치시킨다.

 

 

web.xml

1
2
3
4
5
6
7
8
  <filter>
    <filter-name>sitemesh</filter-name>
    <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>sitemesh</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

Sitemesh 를 사용하기 위한 설정이다. 

 

위 내용을 web.xml에 작성한다.

 

 

 

다음으로 아래와 같이 decorators.xml, sitemesh.xml 파일을 생성한다.

 

sitemesh.xml 경로는 꼭 아래 경로에 위치해야 하며 decorators.xml 은 sitemesh.xml 파일 내에서 경로를 설정해줄 수 있기 때문에 아무대나 위치해도 된다.

 

편의상 같이 두는것을 추천한다 ^^

사용할 준비는 다 끝났습니다.

 

이제 decorators.xml 파일과 sitemesh.xml 파일을 살펴보면서 내부에 어떤 설정을 하고 있는지 알아보자.

 

 

sitemesh.xml

태그기본적인 sitemesh의 설정 및 사용할 decorators.xml 파일을 호출하는 역할을 한다.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
    <page-parsers>
        <parser default="true"
            class="com.opensymphony.module.sitemesh.parser.DefaultPageParser" />
        <parser content-type="text/html"
            class="com.opensymphony.module.sitemesh.parser.FastPageParser" />
    </page-parsers>
 
    <excludes file="/WEB-INF/decorators.xml"/>
    
    <decorator-mappers>
 
        <mapper class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper">
            <param name="property.1" value="meta.decorator" />
            <param name="property.2" value="decorator" />
        </mapper>
 
        <mapper
            class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">
        </mapper>
 
        <mapper class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">
            <param name="match.MSIE" value="ie" />
            <param name="match.Mozilla [" value="ns" />
            <param name="match.Opera" value="opera" />
            <param name="match.Lynx" value="lynx" />
        </mapper>
 
        <mapper
            class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">
            <param name="decorator" value="printable" />
            <param name="parameter.name" value="printable" />
            <param name="parameter.value" value="true" />
        </mapper>
 
        <mapper
            class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">
            <param name="decorator" value="printable2" />
            <param name="parameter.name" value="printable2" />
            <param name="parameter.value" value="true" />
        </mapper>
 
        <mapper
            class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">
            <param name="decorator.parameter" value="decorator" />
            <param name="parameter.name" value="confirm" />
            <param name="parameter.value" value="true" />
        </mapper>
 
        <mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">
            <param name="decorator" value="robot" />
        </mapper>
        
        <mapper class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper">
        </mapper>
        
        <mapper
            class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
            <param name="config" value="/WEB-INF/decorators.xml" />
        </mapper>
 
    </decorator-mappers>
 
</sitemesh>

2# : sitemesh 태그

10# : decorators.xml 에 정의된 excludes 태그를 사용한다는 선언이다. decorators.xml 이 아닌 별도의 파일을 생성할 수 도 있다.

12# : decorator 를 연결해주는 맵퍼를 정의, 정의된 순서대로 우선순위가 결정되는것 같다.

14# : PageDecoratorMapper : meta 태그를 사용하여 decorator을 선택할 수 있다.

PageDecoratorMapper는 <meta>태그에 decorator 항목이 있을 때 장식자를 리턴한다. 예를 들어 현재 layout.jsp 라는 장식자가 default 로 결정되어 있지만 popup이라는 이름의 장식자를 특정 페이지에 적용하고 싶다면 <meta name="decorator" content="popup"></meta> 라고 작성

19# : PageDecoratorMapper  : 프레임셋 사용시

page가 HTMLPage 또는 isFrameSet() 의 return value가 true일 때 특정 decorator을 선정할 수 있도록 한다.

decorator의 이름은 주어진 property에서 지정할 수 있다.

23# : AgentDecoratorMapper : 브라우저별로 다른 decorator을 설정할 경우

AgentDecoratorMapper는 브라우저에 따른 장식자를 선택할수 있도록 한다. 
예를 들어 http클라이언트가 익스플로러 라면 /decorators/layout-ie.jsp 장식자 페이지를 적용하게 된다. 
모질라 기반 브라우저라면 /decorators/layout-ns.jsp 가 장식자 페이지로 결정될 것이다. 만약 선정된 장식자 페이지를 찾는데 실패한다면 기본 장식자 페이지인 layout.jsp 가 적용될 것이다.

30# : PrintableDecoratorMapper : url queryString 의 특정 패턴에 따라 decorator을 설정할 경우

url쿼리 스트링의 printable=true라는 문자열에 반응한다.

/WEB-INF/decorators.xml에 정의된 장식자 중 printable장식자를 리턴할 것이다.

44# : ParameterDecoratorMapper : url queryString 에 dacoratorName를 설정할 경우

url쿼리 스트링의 decorator=decoratorName&confirm=true라는 문자열에 반응한다.

/WEB-INF/decorators.xml에 정의된 장식자 중 decoratorName장식자를 리턴할 것이다.

51# : RobotDecoratorMapper : 검색엔진의 로봇이라고 식별될 때 decorator 를 사용한다.

55# : FileDecoratorMapper : web-app context에서 decorator 이름을 사용할 파일이름으로 취급한다.

58# : ConfigDecoratorMapper : decorators.xml 에 정의된 decorator를 사용한다.

 

* 자세한 설명은 다음 주소 참고

http://wiki.sitemesh.org/wiki/display/sitemesh/DecoratorMappers

 

 

decorators.xml

정의된 decorator 패턴을 지정하는 역할

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8"?>  
 
<decorators defaultdir="/WEB-INF/jsp/decorators">
 
    <excludes>
      <pattern>/includeSample/*</pattern>
    </excludes>    
    
    <decorator name="sitemeshSample" page="layout.jsp">
       <pattern>/sitemeshSample/view/*</pattern>  
    </decorator>  
    
    <decorator name="sitemeshSamplePopup" page="popup.jsp">
       <pattern>/sitemeshSample/popup/*</pattern>  
    </decorator>  
      
    <decorator name="popup" page="popup.jsp"/>
    <decorator name="printable" page="printable.jsp"/>
    <decorator name="printable2" page="printable2.jsp"/>
    <decorator name="help" page="help.jsp"/>
    
</decorators>

3# : 정의된 decorator 파일들이 있는 기본 디렉토리를 설정

5# : controller를 호출하는 url 값이 정의된 패턴에 해당한다면 decorator를 사용하지 않음

9#, 13# : controller를 호출하는 url 값이 정의된 패턴에 해당한다면 지정된 page의 레이아웃 형태를 사용한다.

17# ~ 20# : 패턴이 없는 decorator이다.

sitemesh.xml 에서 정의한 mapper로 사용가능하다.

 

 

layout.jsp

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
27
28
29
30
31
32
33
34
35
36
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>title:::::<decorator:title /></title>
    <!-- header -->
    <decorator:head></decorator:head>
    <!-- //header -->
</head>
<body>
    <!-- UI Object -->
    <div id="wrap">
        <p>wrap</p>
        <!-- container -->
        <div id="container">
            <p>container</p>
            <!-- snb -->
            <div class="snb" >
                <p>snb</p>
            </div>
            <decorator:body ></decorator:body>
            <!-- //content -->
        </div>
        <!-- //container -->
        <!-- footer -->
        <div id="footer">
            <p>footer</p>
        </div>
        <!-- //footer -->
    </div>
    <!-- //UI Object -->
</body>
</html>

2# : dacorator 태그를 사용하기 위한 선언

8# : decorator:title : 컨텐츠 페이지에서 title을 가져온다.

10# : decorator:head : 컨텐츠 페이지에서 head 를 가져온다.

24# : decorator:body : 컨텐츠 페이지에서 body 부분을 가져온다.

 

 

 

위 내용만 보면 기본적인 sitemesh 설정 및 사용하는데 크게 무리가 없을 것이다.

 

 

 

 

 

by 개발자 CofS 2016.12.22 15:07
| 1 2 3 4 5 6 |