프로그래밍

Sitemesh의 사용방법

guitarhero 2017. 8. 25. 16:47
728x90

Sitemesh란 웹페이지를 구성하는 레이아웃을 효율적으로 만들수 있게 도와주는 프레임워크이다. 


보통 웹페이지들은 top, left menu, contents, (right menu), footer로 구성되는데

메뉴의 이동을 할때 그 폼을 유지한채 중간의 컨텐츠만 변경되는 경우가 대부분인데 모든 페이지를 중복으로 구성하는 것은 비효율적이고 

관리도 어렵기 때문에 공통된 부분들을 한곳에 집중 해서 처리하고 변경되는 부분만 변경될 수 있도록 해주는 프레임워크라고 할 수 있겠다. 


비슷한 기능으로는 Tiles가 있는데 Sitemesh는 Decorator Pattern을 사용하고 Tiles는 Composite View Pattern을 사용한다. 


장점으로는 


설정과 사용방법이 비교적 간단하고 다른 아키텍쳐와 잘 통합된다. (JSP, 서블릿, XML, CGI(Perl, Python등) )


spring 기준으로 

1. lib에 라이브러리 추가해준다. 





2. sitemesh.xml과 decorator.xml(경로와 이름은 설정에서 바꿀수 있음)을 WEB-INF에 추가해 준다. 




sitemesh.xml


<?xml version="1.0" encoding="UTF-8"?>

<sitemesh>

<property name="decorators-file" value="/WEB-INF/sitemesh-decorator.xml" />

<excludes file="${decorators-file}" />

<page-parsers>

<!--

<parser content-type="text/html;charset=UTF-8" class="com.opensymphony.module.sitemesh.parser.FastPageParser" />

-->

<parser content-type="text/html; charset=UTF-8" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />

<parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />

<parser content-type="text/html; charset=EUC-KR" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />

</page-parsers>

<decorator-mappers>

<!-- <param name="parameter" value="decorator" /> -->


<mapper class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">

</mapper>


<mapper class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">

</mapper>

<mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">

   <param name="decorator" value="robot" />

</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.PageDecoratorMapper">

     <param name="property.1" value="meta.decorator" />

     <param name="property.2" value="decorator" />

   </mapper>


<mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">

<param name="config" value="${decorators-file}" />

</mapper>


</decorator-mappers>


</sitemesh>


위와 같이 설정할 수 있고 브라우저별이나 페이지별 charset 에 맞춰서 설정도 추가 할 수 있다. 


sitemesh-decorator.xml


<?xml version="1.0" encoding="UTF-8"?>

<decorators defaultDir="/jsp/layout"><!-- 레이아웃 파일들의 폴더경로-->


<excludes><!-- url 패턴에 따른 예외 지정-->

<pattern>*/reload.do</pattern>

<pattern>*/upload.do</pattern>

</excludes>


<decorator name="test" page="layout.jsp"><!-- url 패터에 따른 레이아웃파일 지정-->

<pattern>/test/test*</pattern>

<pattern>/web/*</pattern>

</decorator>

</decorators>


layout.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>

 

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title><decorator:title />| TEST</title>

    <!-- header -->

    <decorator:head />

    <!-- //header -->

</head>

<body>

    <div id="wrap">

        <p>wrap</p>

        <!-- container -->

        <div id="container">

            <p>container</p>

            <!-- lnb -->

            <div class="lnb" >

                <p>lnb</p>

            </div>

            <decorator:body/>

            <!-- //content -->

        </div>

        <!-- //container -->

        <!-- footer -->

        <div id="footer">

            <p>footer</p>

        </div>

        <!-- //footer -->

    </div>

</body>

</html>


등으로 구성한다. 보기와 같이 그렇게 어려운 설정도 없고 관련 자료들도 많아서 사용하기 편하다. 



728x90

'프로그래밍' 카테고리의 다른 글

CGI란 무엇인가  (0) 2017.08.25