본문 바로가기
개발/Framework || Lib

SiteMesh

by 백아절현 2007. 10. 17.
spring framework 워크북을 보던도중 4장에 떡하니 튀어나온 sitemesh 이놈은...
프레임웍 공부하는데 또다른 프레임웍이 나오면 어쩌라고 -.-;
뭐 대충보니 page layout을 관리해주는것 같다.. 자세히 안봐서 모림;
밑의 자료만 봐도 대충 이해하실꺼라 믿심다~


SiteMesh 살펴보기

Table of Contents

SiteMesh 란?

  • SiteMesh is a web-page layout and decoration framework and web- application integration framework to aid in creating large sites consisting of many pages for which a consistent look/feel, navigation and layout scheme is required.

  • SiteMesh intercepts requests to any static or dynamically generated HTML page requested through the web-server, parses the page, obtains properties and data from the content and generates an appropriate final page with modifications to the original. This is based upon the well-known GangOfFour Decorator design pattern.

  • SiteMesh can also include entire HTML pages as a Panel within another page. This is similar to a Server-Side Include, except that the HTML document will be modified to create a visual window (using the document's Meta-data as an aid) within a page. Using this feature, Portal type web sites can be built very quickly and effectively. This is based upon the well-known GangOfFour Composite design pattern.

  • SiteMesh is built using Java 2 with Servlet, JSP and XML technologies. This makes it ideal for use with J2EE applications, however it can be integrated with server-side web architectures that are not Java based such as CGI (Perl/Python/C/C++/etc), PHP, Cold Fusion, etc...

  • SiteMesh is very extensible and is designed in a way in which it is easy to extend for custom needs.

SiteMesh는 web-page layout이고, decoration(장식) 프레임웍이고, 일관된 look/fee, navagation, layout scheme를 필요로하는 많은 페이지로 구성된 큰 사이트를 만드는것을 도와주는 web-application 통합 프레임웍이다.

  • SiteMesh는 Servlet Filter 이다. 그러므로, Servlet 2.3스펙을 따른 컨테이너가 필요하다.
  • SiteMesh는 순수자바로 작성되어 플랫폼에 독립적이다.
  • SiteMesh는 JRE 1.3보다 높은 버전이 요구된다. 좋은 성능을 위해 JRE 1.4.x 또는 보다 높은 버전을 사용해라.
  • Java SDK 1.4 또는 그 이상, Jakarta Ant version 1.5 또는 그이상에서 빌드해라.
    참고 : http://www.opensymphony.com/sitemesh/requirements.html/

– 위에서 나온 대로 SiteMesh는 웹 페이지 레이아웃 및 데코레이션 프레임웍이다.일반적으로 사이트는 통일되고 일관된 룩앤필과 네비게이션, 레이아웃을 유지해야 한다.
SiteMesh는 이러한 사항들을 조직화할 수 있도록 도와주고 또한 변화와 수정에 탁월한 대처 능력을 가지고 있다. SiteMesh는 웹서버에 요구된 정적/동적요청(request)를 가로채고,
요청된 페이지 자원을 파싱하며 설정된 프로퍼티와 랜더링할 데이터를 컨덴츠로부터 읽어 들인 후원래의 페이지에 장식과 수정을 가하여 최종 페이지를 생성한다.
이것은 GoF의 장식자 패턴에 기반하고 있으며 작동하는 시퀀스는 서블릿 스펙2.3부터 새롭게 추가된 필터(filter)에 기반을 하고 있다.

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

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

SiteMesh 설정법

  1. SiteMesh를 다운로드 받는다.
  2. web-app/WEB-INF/lib 아래로 sitemesh-2.2.1.jar를 복사한다.
  3. web-app/WEB-INF/sitemesh.xml을 생성한다.
  4. web-app/WEB-INF/decorators.xml을 생성한다.
  5. web-app/WEB-INF/web.xml 파일을 열어 <web-app>태그안에 <filter> 태그를 추가한다
<sitemesh.xml>
<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 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.RobotDecoratorMapper">
			<param name="decorator" value="robot" />
		</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.FileDecoratorMapper">
		</mapper>

		<mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
			<param name="config" value="${decorators-file}" />
		</mapper>

	</decorator-mappers>

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

<decorators defaultdir="/decorators">
    <!-- Any urls that are excluded will never be decorated by Sitemesh -->
    <excludes>
        <pattern>/exclude.jsp</pattern>
        <pattern>/exclude/*</pattern>
    </excludes>

    <!-- decorator 태그안에 page의 경로는 web-app/decorators/main.jsp가 된다.-->
    <decorator name="main" page="main.jsp">
        <pattern>/*</pattern>
    </decorator>

    <decorator name="panel" page="panel.jsp"/>
    <decorator name="printable" page="printable.jsp"/>
    <decorator name="black" page="black.jsp"/>
    <decorator name="nopanelsource" page="nopanelsource.jsp"/>
    <decorator name="badpanelsource" page="badpanelsource.jsp"/>

    <decorator name="velocity" page="velocity.vm">
        <pattern>/velocity.html</pattern>
    </decorator>

    <decorator name="freemarker" page="freemarker.ftl">
        <pattern>/freemarker.html</pattern>
    </decorator>

    <decorator name="test" page="test.jsp">
        <pattern>/agent.jsp</pattern>
    </decorator>
</decorators>

<decorators/> 엘리먼트는 장식자들의 리스트를 정의하고 있다.
defaultdir="/decorators" 어트리뷰트는 기본적으로 장식자 페이지들이 위치하고 있는 경로를 나타낸다.
<excludes/> 엘리먼트는 장식자가 적용되지 않아야 할 패턴의 리스트이다.
decorator name="main" main 장식자는 모든 패턴의 리소스에 적용되며 main.jsp를 장식자 페이지로 사용함을 알 수 있다.

panel,printable,black,nonpanelsource,badpanelsource는 모두 패턴을 지정하지 않았고, 프리메이커(freemaker),벨로시티는 특정페이지를 적용했다.

적절한 패턴이 설정도지 않은 장식자는 main 장식자 소스에서 보았듯이 다른 장식자 내에서 <page:applyDecorator/>를 통해 포함할 때 사용되거나 장식자 연결자(sitemesh.xml)에서 특정 장식자를 지정할 때 사용된다.

<web.xml>
<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 샘플예제

  • 위와 같이 설정을 완료한후, sitemesh사이트에서 full버전을 다운로드받아, sitemesh-2.2\src\example-webapp\index.html을 실행시키면, 아래와 같은 화면이 나타난다.


  • index.html 파일을 호출하면, decorators.xml의

    <decorator name="main" page="main.jsp">
    <pattern>/*</pattern>
    </decorator>

    의 설정에 따라, main.jsp의 레이아웃을 갖는다.

<index.html>
<html>
    <head>
        <title>SiteMesh Sample Site</title>
    </head>
    <body>

        <p>Welcome to the SiteMesh sample...</p>

        <h3>Samples</h3>

        <ul>
            <li><a href="counter.jsp">JSP counter</a></li>
            <li><a href="mandelbrot.pl">Perl Mandelbrot</a></li>
            <li><a href="inline.jsp">Inline Example</a></li>
            <li><a href="toggledecorator.jsp">Toggling Decorator</a></li>
            <li><a href="agent.jsp">Agent Mapped Decorator</a></li>
            <li><a href="meta.html">Meta Test</a></li>
            <li><a href="velocity.html">Velocity Decorator</a></li>
            <li><a href="freemarker.html">Freemarker Decorator</a></li>
            <li><a href="badpanel.html">Invalid panel source Test (not found)</a></li>
            <li><a href="badsource.html">Invalid panel source Test (incorrect JSP)</a></li>
        </ul>

    </body>
</html>

index.html의 내용은 간단하다. 크게 SiteMesh Sample Site 문구가 담긴 <title>엘리먼트와 컨덴츠를 담고 있는 <body>엘리먼트로 나뉘어 있다.
그러나 실행 결과는 위에 보는 것과 같이 출력이 된다.

SiteMesh가 index.html의 내용에 패널부분을 추가하고 , 타이틀 내용으로 헤더를 만들고 풋터 부분을 추가해 주었다.
index.html에 장식자 main과 장식자 페이지 /decorators/main.jsp 가 적용되었기 때문이다.

<main.jsp>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>
<html>
<head>
	<title><decorator:title default="Mysterious page..." /></title>
	<link href="<%= request.getContextPath() %>/decorators/main.css" rel="stylesheet" type="text/css">
         <decorator:head />
</head>

<body>
	<table width="100%" height="100%">
		<tr>
			<td valign="top">
				<page:applyDecorator page="/tiny-panel.html" name="panel" />
				<page:applyDecorator page="/counter.jsp" name="panel" />
				<page:applyDecorator page="/google.html" name="panel" />
				<%--page:applyDecorator page="/random.pl" name="panel" /--%>
			</td>
			<td width="100%">
				<table width="100%" height="100%">
					<tr>
						<td id="pageTitle">
							<decorator:title />
						</td>
					</tr>
					<tr>
						<td valign="top" height="100%">
							<decorator:body />
						</td>
					</tr>
					<tr>
						<td id="footer">
							<b>Disclaimer:</b>
							This site is an example site to demonstrate SiteMesh. It serves no other purpose.
						</td>
					</tr>
				</table>
			</td>
		</tr>
	 </table>

	<%-- Construct URL from page request and append 'printable=true' param --%>
	<decorator:usePage id="p" />
	<%
		HttpServletRequest req = p.getRequest();
		StringBuffer printUrl = new StringBuffer();
		printUrl.append( req.getRequestURI() );
		printUrl.append("?printable=true");
		if (request.getQueryString()!=null) {
			printUrl.append('&');
			printUrl.append(request.getQueryString());
		}
	%>
	<p align="right">[ <a href="<%= printUrl %>">printable version</a> ]</p>

</body>
</html>

/decorators/main.jsp 장식자 페이지는 전반적인 페이지에 적용되기 위해 제작된 메인 레이아웃이다.

<decorator:title default="Mysterious page..."/> 는 장식될 페이지의 <title> 엘리먼트의 텍스트를 가져와 삽입한다.default 어트리뷰트는 <title> 엘리먼트의 텍스트를 얻는데 실패할 경우 보여줄 텍스트이다.
<pgae:applyDecorator/> 를 통해 장식자를 현재의 장식자에 포함했다. page 어트리뷰트를 통해 삽입할 외부 자원을 선택하고 name을 지정하여 장식할 장식자를 지정한다. 예제에서 사용된 장식자는 panel 이다.
<decorator:body/> 를 이용해 페이지의 본문을 장식하였다.
<decorator:usePage/> 태그를 이용하여 요청 객체에 접근한 후 현재 페이지의 url에 ?printable=true 쿼리 스트링을 삽입하여 프린트 페이지의 링크를 생성하였다.

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


  • Printable version을 클릭했을때, 아래와 같은 화면이 나타난다.



분명 default 로 적용되는 장식자 페이지는 main.jsp 라고 했는데 왼쪽 패널과 헤더,풋터가 없는 상태로 출력되었다.
이렇게 작동하는 이유는 ?printable=true 로 Printable version에 링크가 걸리기 때문이다.
이 링크를 SiteMesh는 장식자 연결자인 PrintableDecoratorMapper printable=true 라는 쿼리 스트링을 파싱하면서 printable 장식자를 적용하기 때문이다.

<printable.jsp>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<html>
	<head>
		<title><decorator:title  /></title>
		<decorator:head />
	</head>
	<body>

		<h1><decorator:title /></h1>
		<p align="right"><i>(printable version)</i></p>

		<decorator:body />

	</body>
</html>
  • 장식자 연결자 (sitemesh.xml)
    장식자 연결자는 SiteMesh에게 장식에 사용될 적합한 장식자를 선정해 주는 역할을 하며 기본적으로 지원되는 장식자 연결자는 다음과 같은 조건에 따라 장식자 선정을 수행하도록 고안되었다.
    • 요청된 페이지나 경로에 따라 장식에 참여할 장식자의 결정
    • 요청이 일어난 시간 또는 로케일(locale),브라우저에 따른 장식자의 결정
    • url쿼리 스트링, 요청속성, 메타태그 속성에 따라 장식자 결정
    • 웹 페이지 사용자의 설정에 따른 장식자의 결정

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 가 장식자로 선정 될 것이다.

  • 주의사항
    • SiteMesh 는 필터를 기반으로 작동한다. 즉 서블릿 스펙 2.3을 지원하는 서블릿 컨테이너를 사용해야 한다.
    • URL 요청이 아닌 RequestDispatcher.include()나 forward()를 통한 자원의 접근을 http-request가 없으므로 필터를 호출하지 않는다. 이 문제는 서블릿 스펙 2.4를 통해서 해결할 수 있다. web.xml의 설정상에 명시할 수 있다.
      <filter-mapping>
        <filter-name>Logging filter</filter-name>
          <url-pattern>/*</url-pattern>
          <dispatcher>REQUEST</dispatcher>
          <dispatcher>FORWARD</dispatcher>
          <dispatcher>INCLUDE</dispatcher>
      </filter-mapping>
      



출처 : 자바지기 위키 http://wiki.javajigi.net/display/OSS/SiteMesh#SiteMesh-SiteMesh%EC%83%98%ED%94%8C%EC%98%88%EC%A0%9C

'개발 > Framework || Lib' 카테고리의 다른 글

ibatis  (0) 2008.01.03
스프링 예제 설명되어있는 블로그  (1) 2007.10.24
step by step2-2  (0) 2007.10.04
step by step2-1  (0) 2007.10.04
step by step1-2  (0) 2007.10.03

댓글