SiteMesh

1. SiteMesh 란?

sitemesh는 웹페이지 레이아웃이고 framework 다.
자바, J2EE, XML 기반의 오픈소스 프레임워크고 Servlet스펙 2.3에서 소개된 개념의 필터들로 구성되어 있다.

SiteMesh의 설정을 담당하고 있는 것은 decorators.xmlsitemesh.xml 파일이다.

-decorators.xml : 여러 장식자의 정의와 특정 장식자가 적용될 페이지의 리스트가 설정되어 있다.
-sitemesh.xml : 장식자 연결자 리스트가 설정되어 있다.
만일 Sitemesh가 해당 경로에서 설정 파일을 찾는데 실패하면sitemesh-2.2.1.jar 에 패키징 되어 있는 sitemesh-default.xml 파일로 대체된다.

  • 이점
    레이아웃 정보와 본문을 분리해서 개발할 경우 레이아웃이 변경될 경우 빠르게 대응할 수 있고 본문페이지의 소스 코드가 줄어들어
    개발 생산성 및 유지보수성을 높일 수 있다.

2. 동작 원리

자세한 설명은 여기(introduction to sitemesh)를 참고하세요

2. 설치와 설정

Sitemesh 동작 원리를 알기 위해 테스트 페이지를 만들 것이다.
그 전에 동작할 수 있는 환경으로 셋팅이 필요하다.

  • 1.SiteMesh를 다운로드 받는다.
  • 2.web-app/WEB-INF/lib 아래로 sitemesh-2.1.jar를 복사한다.
  • 3.web-app/WEB-INF/web.xml 파일을 열어 <web-app>태그안에 <filter> 태그를 추가한다
  • 4.web-app/WEB-INF/decorators.xml을 생성한다.
  • 5.web-app/WEB-INF/sitemesh.xml을 생성한다.

2.1 sitemesh-2.1.jar 복사

  • 웹 애플리케이션의 모든 요청은 PageFilter를 통해 컨테이너에게 알린다.
  • /WEB-INF/lib 폴더에 sitemesh-2.1.jar 복사함 (Sitemesh 사이트에서 다운로드 받음)

2.2 web.xml

  • 웹 애플리케이션에게 알려주어야 한다.

<?xml version="1.0" encoding="ISO-8859-1"?>
 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 
    "http://java.sun.com/dtd/web-app_2_3.dtd">    
<web-app>    
"<!-- sitemesh 추가 시작부분 -->"
 <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>*.jsp</url-pattern>
 </filter-mapping>    
 <taglib>
    <taglib-uri>sitemesh-page</taglib-uri>
    <taglib-location>/WEB-INF/sitemesh-page.tld</taglib-location>
 </taglib>    
 <taglib>
    <taglib-uri>sitemesh-decorator</taglib-uri>
     <taglib-location>/WEB-INF/sitemesh-decorator.tld</taglib-location>
 </taglib>    
" <!-- sitemesh 추가 마지막부분 -->"    
</web-app>



2.3 WEB-INF 폴더에 decorators.xml 파일 생성

  • 애플리케이션을 위한 decorators를 정의할 때 사용된다.

<decorators defaultdir="/decorators">
 <decorator name="main" page="main.jsp">
 <pattern>*</pattern>
 </decorator>
 
 <decorator name="panel" page="panel.jsp"/>
 <decorator name="printable" page="printable.jsp"/>
</decorators>

<decorator>요소는 하나의 장식자(decorators)를 정의함
-속성
name : 장식자 이름 정의
page : jsp내에 정의
<pattern>: 하위요소는 특별한 장식자가 적용될 때 사용됨

  • 장식자 태그,페이지 태그
장식자 태그,페이지 태그장식자 페이지를 생성할 때 사용되는 태그
decorator:head/>장식될 페이지의 <head>태그의 내용을 삽입
<decorator:body/>장식될 페이지의 <body>태그의 내용을 삽입
<decorator:title/>장식될 페이지의 <title>태그의 내용을 삽입
<decorator:getProperty/>장식이 완료된 HTML 페이지의 <body>태그 내에 이벤트 핸들러를 생성하기 위해 사용
<decorator:usePage/>장식자 페이지에서 장실될 페이지의 페이지 객체를 얻을 수 있게 함
  • 페이지 태그
페이지 태그장실자 페이지 내에서 다른 장식자를 포함할 때 사용
<page:applyDecorator/>현재 장식자 페이지 내에 장식될 페이지와 장식 지정하여 삽입한다.
<page:param/><page:applyDecorator/> 사용시 해당 장식자에세 파라미터를 전달하기 위해 사용

2.4 WEB-INF 폴더에 sitemesh.xml 파일 생성


<?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.FastPageParser" />
  </page-parsers>
  <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 for localization -->
    <mapper 
        class="com.opensymphony.module.sitemesh.mapper.LanguageDecoratorMapper">
      <param name="match.en" value="en" />
      <param name="match.zh" value="zh" />
    </mapper>
    <!-- Mapper for browser compatibility -->
    <mapper 
        class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">
      <param name="match.MSIE" value="ie" />
      <param name="match.Mozilla/" value="ns" />
    </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.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.ConfigDecoratorMapper">
      <param name="config" value="${decorators-file}" />
    </mapper>
  </decorator-mappers>
</sitemesh>


  • 장식자 연결자 (sitemesh.xml)
    장식자 연결자는 SiteMesh에게 장식에 사용될 적합한 장식자를 선정해 주는 역할을 하며 기본적으로 지원되는 장식자 연결자는 다음과 같은 조건에 따라 장식자 선정을 수행하도록 고안되었다.

1. 요청된 페이지나 경로에 따라 장식에 참여할 장식자의 결정
2. 요청이 일어난 시간 또는 로케일(locale),브라우저에 따른 장식자의 결정
3. url쿼리 스트링, 요청속성, 메타태그 속성에 따라 장식자 결정
4 .웹 페이지 사용자의 설정에 따른 장식자의 결정


- PageDecoratorMapper : PageDecoratorMapper는 메타 태그에 decorator 항목이 있을 때 장식자를 리턴한다. 
예를 들어 현재 main.jsp 라는 장식자가 default 로 결정되어 있지만 decorator_test 라는 이름의 장식자를 특정 페이지에 적용하고 싶다면 

<META name="decorator" content="decorator_test"> 혹은 <HTML decorator="decorator_test">

를 특정페이지에 추가한다. 

- AgentDecoratorMapper : AgentDecoratorMapper는 브라우저에 따른 장식자를 선택할수 있도록 한다. 예를 들어 http클라이언트가 익스플로러 라면 /decorators/main-ie.jsp 장식자 페이지를 적용하게 된다. 모질라 기반 브라우저라면 /decorators/main-ns.jsp 가 장식자 페이지로 결정될 것이다. 만약 선정된 장식자 페이지를 찾는데 실패한다면 기본 장식자 페이지인 main.jsp 가 적용될 것이다. 
- PrintableDecoratorMapper : PrintableDecoratorMapper는 url쿼리 스트링의 printable=true라는 문자열에 반응한다. /WEB-INF/decorators.xml에 정으된 장식자 중 printable장식자를 리턴할 것이다. 
- ParameterDecoratorMapper : ParameterDecoratorMapper는 설정에 정의된 파라미터와 동일한 스트링이 url 쿼리 스트링에 존재할 때 정의해 놓은 장식자를 선정하도록 되어 있다. 위의 예에서 confirm=true 문자열과 일치할 경우 somedecorator 가 장식자로 선정 될 것이다. 

2.5 index.jsp


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<%@ page 
language="java"
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">

<TITLE>index.jsp</TITLE>
</HEAD>
<BODY>
	<H4>Test different decorators</H4>
<table>
	<tr><td><A href="login.jsp"> Login Page</A></td></tr>
	<tr><td><A href="home.jsp"> Home Page</A></td></tr>
	<tr><td><A href="help.jsp"> Help Page</A></td></tr>
</table>

</BODY>
</HTML>


3. Sitemesh 구조 및 설계

  • sitemesh 구조는 PageFilter 클래스라는 필터에 기본을 두고 있다.
    컨테이너가 페이지로부터 요청을 받았다면 이것을 PageFilter로 보낸다.
    애플리케이션 응답을 위해 커스텀 응답을 생성한다.
    이것을 요청한 웹 애플리케이션으로 보낸다.
    웹 애플리케이션은 커스텀 응답 객체내 요청된 리소스를 쓸 것이고 PageFilter로 다시 되돌려 보낸다.
  • 1. 파싱단계
    PageFilter 클래스로 제어가 넘어왔을때 웹 애플리케이션에 의해 생성된 응답의 컨텐츠 타입을 시험할 것이다.
  • 2. 장식단계
    두 단계로 나누어 볼 수 있다.
    a. 페이지 장식하기 위한 방법 결정
    = Sitemesh는 DecoratorMapper 인터페이스(int()메소드와 getDecorator()메소드를 가진)를 구현한 자바 클래스인 장식자연결자의 개념을 가지고 있다.
    sitemesh.xml이것을 위한 엔트리(entry)를 추가함으로써 선언된다.
    sitemesh.xml내에서 모든 연결자는 이것위에 선언된 연결자의 아버지와 같은 존재이다.
    Sitemesh가 특정 페이지를 위해서 장식자를 찾을때 이것은 sitemesh.xml내에 첫 연결자의 인스턴스를 생성할 것이고 이것의 getDecorator()메소드를 호출
    할 것이다.
    getDecorator()메소드 내에는 페이지를 위한 장식자를 결정하도록 시도할 것이다. 만약에 연결자가 장식자를 얻을 수 있다면 그것을 반환할 것이다.
    아니면 상위의 getDecorator()메소드를 호출하게 될 것이다 페이지를 위한 정확한 장식자를 찾을때까지 이런 작읍을 계속 수행한다.
    b. 장식자 적용
    = 장식자(하나의 JSP페이지)가 발견되었을때 SiteMesh는 이것을 위한 요청을 할당할 것이다.
    장삭지 JSP페이지는 이전단계로부터 파싱된 페이지로 접근한다. 다양한 부분(header,footer, title같은)을 읽기 위한 sitemesh커스텀 태크를 사용할 것이고
    마지막의 풀력페이지내에 적당한 위치에 그것을 추가할 것이다.

4. Velocity & FreeMarker 장식자

  • 벨로시티프리마커는 웹페이지를 생성하기 위해 사용할 수 있는 템플릿 언어이다.
    이 언어들은 일반 JSP보다 좀 더 쉽게 작업하도록 만들지만 JSP처럼 프로그램적이지는 않다.
  • web.xml 에 추가한다.

<servlet>
  <servlet-name>sitemesh-velocity</servlet-name>
  <servlet-class> 
    com.opensymphony.module.sitemesh.velocity.VelocityDecoratorServlet
  </servlet-class>
</servlet>
<!--Declare servlet for handling freemarker requests -->
<servlet>
  <servlet-name>sitemesh-freemarker</servlet-name>
  <servlet-class>
    com.opensymphony.module.sitemesh.freemarker.FreemarkerDecoratorServlet
  </servlet-class>
  <init-param>
    <param-name>TemplatePath</param-name>
    <param-value>/</param-value>
  </init-param>
  <init-param>
    <param-name>default_encoding</param-name>
    <param-value>ISO-8859-1</param-value>
  </init-param>
</servlet>
<!-- Velocity servlet should serve all requests with .vm extension-->
<servlet-mapping>
  <servlet-name>sitemesh-velocity</servlet-name>
  <url-pattern>*.vm</url-pattern>
</servlet-mapping>
<!-- FreeMarker servlet should serve all requests with .dec extension-->
<servlet-mapping>
  <servlet-name>sitemesh-freemarker</servlet-name>
  <url-pattern>*.dec</url-pattern>
</servlet-mapping>

  • freemarket.jar, velocity-dep.jar, velocity-tools-view.jar를 lib폴더에 추가
  • headerfooter.dec 생성(프리마커)

<html>
  <head>
    <title>My Site - $Advanced SiteMesh</title>
      ${head}
  </head>
  <body>
    <table border="1">
      <tr>
        <td>SiteMesh Corporation</td>
      </tr>
      <tr>
        <td>${body}</td>
      </tr>
      <tr>
        <td>SiteMesh copyright</td>
      </tr>
    </table>
  </body>
</html>

  • sidemenu.vm 생성(벨로시티)

<html>
  <head>
    <title>My Site - $title</title>
      $head
  </head>
  <body>
    <table border="1">
      <tr>
        <td> SiteMesh Header </td>
      </tr>
      <tr>
        <td> Sidemenu </td>
        <td> $body </td>
      </tr>
      <tr>
        <td> SiteMesh Footer </td>
      </tr>
    </table>
  </body>
</html>


문서에 대하여