common

SiteMash 적용하기

보통 사랑 :D 2010. 5. 26. 18:26
sitemash를 사용하면 view단에 설정에 따라 레이아웃 템플릿을 적용할 수 있다.

1. 준비

www.opensymphony.com/sitemesh/

jar 를 내려받자. (테스트 버전 sitemesh-2.4.1.jar)


2.필터설정(추가하는 필터만)
filter 설정하여 요청받은 url을 가로채기 위해 web.xml에 아래 설정을 추가한다.
(모든 url에 적용되도록 설정하였다)

<!-- 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>/*</url-pattern>
 </filter-mapping>
 <!-- // sitemesh -->


3.레이아웃 설정파일 추가
WEB-INF 하위에 sitemesh.xml과 decorators.xml 을 추가한다.
(샘플소스에 있음)

3-1 sitemesh.xml (전문)
샘플소스에 있는 sitemesh.xml을 그대로 적용하였다.

<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
    <!--decorator 결정-->
    <property name="decorators-file" value="/WEB-INF/decorators.xml" />
    <excludes file="${decorators-file}" />

  <!--parser를 설정:해당 페이지의 content-type이 뭐라고 쓰여있는지에 따라
데코레이터 결정 -->  
  <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.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.PageDecoratorMapper" >
   <param name="property" value="meta.decorator" />
  </mapper>

 <!-- mapper결정 : 설정파일 사용하여 decorator정하기-->  
<mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
            <param name="config" value="${decorators-file}" />
        </mapper>
    </decorator-mappers>
</sitemesh>


sitemesh.xml은 사이트매쉬 자체에 대한 설정 파일이다.

어떤 decorator를 사용할지 mapper를 결정하고 parser를 설정한다.




3-2 decorators.xml(전문)
header, sidebar,fotter를 추가하였다.

<?xml version="1.0" encoding="ISO-8859-1"?>
<decorators defaultdir="/decorators">

 <!-- [s] ujTest -->
 <decorator name="intro" title="CMS Service" page="Intro.jsp">
    <pattern>/LoginForm.do</pattern>
    <pattern>/member/registerMemberForm.do</pattern>
 </decorator>
 <decorator name="_header" page="/decorators/header.jsp" />
 <decorator name="_sidebar" page="/decorators/sidebar.jsp"  />
 <decorator name="_footer" page="/decorators/footer.jsp" />
 <!-- [e] ujTest -->

</decorators>


3-3. main.jsp 예(body)
<body>
<div id="wrap">
 <div id="header">
       <page:applyDecorator name="_header" />
 </div><hr /><!--end header-->
 <div id="body">
  <div id="sidebar">
   <page:applyDecorator name="_sidebar" />
  </div>
   <decorator:title />
  <decorator:body />
 </div><!-- end body -->
 <div id="footer">
  <page:applyDecorator name="_footer" />
 </div><!-- end footer -->
</div><!-- end wrap -->
</body>
decorators.xml에서 설정한 _header, _sidebar, _footer파일을 해당 위치에 삽입한다.


3-4. footer.jsp 예 (전문)
<p class="copyright"><img src="/common-dnc/images/template/footer_copyright.gif" alt="copyright 2009 sk telecom. all rights reserved" /></p>

footer.jsp를 보면 알수있듯 해당 소스가  decorator를 통해 적용한 위치에 그대로 삽입된다.


덧. 테스트한 프로젝트에 스프링 시큐리티를 사용중이어서 applicationContext-security.xml 에 intercept-url 추가하였다.
<sec:http ...>
 <sec:intercept-url pattern="/common-dnc/**" filters="none" />
</sec:http>



수고하셨습니다♡