티스토리 뷰

sitemesh는 레이아웃을 꾸며주는 기술이다. 웹페이지들을 보면 어떤 화면을 출력하던지 항상 같은 위치에 존재하는 태그들을 볼 수 있다.(메뉴나 하단내용 등)

 

같은 기술로는 tiles나 velocity 등이 있지만 이것들과 sitemesh는 동작하는 구성이 다르다.

 

Tiles나 Velocity 방식이 전체 페이지 중 내용 부분에 해당하는 코드만을 생성하는 방식이라면, SiteMesh는 완전한 HTML 페이지를 생성한 뒤 Decorator라는 패턴을 사용하여 데코레이터HTML 페이지에 레이아웃을 입히는 방식이다.

 

 

sitemesh 설정

 

1. 스프링 메이븐의 라이브러리를 디펜던시한다.(pom.xml)

(그룹아이디 : opensymphony, 아이팩트아이디 : sitemesh)

 

 

 

 

2. sitemesh.xml과 decorator.xml을 생성한다.

 

sitemesh.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
<?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>
 

 

 

 

 

decorators.xml

decorators.xml 파일이다. excludes엘리먼트 안에는 sitemesh를 사용하지 않을 url패턴을 넣으면 된다.

 

decorator엘리먼트는 스프링 컨트롤러를 타고 리턴된 페이지(view)가 생성되고 이 페이지의 head나 body를

설정한 페이지인 /WEB-INF/views/layout/layout1.jsp에 붙여넣게 된다.

 

즉 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="ISO-8859-1"?>
 
<decorators defaultdir="/WEB-INF/views">
    <!-- 이것은 sitemesh를 사용하지 않을 패턴을 지정한다 -->
    <excludes>
         <pattern>*.action</pattern>     
    </excludes>
 
 
 <decorator name="layout1" title="RPS Service" page="layout/layout1.jsp">
        <pattern>home.do</pattern>
        <pattern>/</pattern>
  </decorator>
 
 
 
 
  <decorator name="header" page="/WEB-INF/views/sitemesh/header.jsp" />
  <!-- <decorator name="_sidebar" page="/decorators/sidebar.jsp"  /> -->
  
 
</decorators>

 

 

 

 

 3. web.xml에 사이트메쉬 필터를 정의해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <!-- 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>*.do</url-pattern>
  </filter-mapping>
  
   <filter-mapping>
   <filter-name>sitemesh</filter-name>
   <url-pattern>*.action</url-pattern>
  </filter-mapping>

 

 중요한 점은 클라이언트의 요청이 sitemesh필터에 진입하게 되면 decorators.xml에서 해당 요청패턴을 찾는다. 만약에 decorators.xml에 패턴을 정의하지 않으면 요청을 빨리 처리하지 못하고 느려지기 때문에...사용하지 않든지 사용 하든지 필터를 타는 요청은 꼭 패턴에 정의 해줘야된다.(<decorator>,<excludes>)

 

 

 

 

4. 사용자의 요청에 의해서 리턴될 view페이지(home.jsp)를 작성한다.

이 코드가 나중에 sitemesh에 의해 layout1.jsp에 들어가게된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
 
<html>
<head>
    <title>Home</title>
</head>
<body>
<h1>
    home.do Hello world!  
</h1>
<%= request.getParameter("name") %>
<br>
</body>
</html>

 

 

 

 

 

5. 모태가될 데코레이터 페이지를 작성한다. 위에서 정의한 layout1.jsp를 작성한다.

 

<decorator:head />는 view페이지의 head태그 구문(보통 javascript코드겠죠)을 가져오고,

 

<decorator:title default="RPS" />는 view페이지의 title태그 구문을 가져옵니다. title이 없으면 기본값으로 RPS가 된다. 

 

<decorator:body />는 view페이지의 body태그 안의 구문을 가져온다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

       //사용자의 요청에 의해 생성된 페이지의 head태그 구문을 가져온다. 

      <decorator:head />  

 

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>         <decorator:title default="RPS" />          </title>
</head> 

 

<body>
<div>                   </div>
<div>공통헤더</div>
<hr>
 
밑에는 사용자의 요청에 의해서 생성된 html페이지 body부분
<div>         <decorator:body />         </div>
 
<hr>
<div>공통푸터</div>

 

</body>
</html>

 

 

 

6. 스프링의 컨트롤러 부분을 작성합니다.

이 home.do에 진입하고 view페이지(home.jsp)가 생성된다.

그리고 home.jsp는 layout1.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
package choon.rps.project;
 
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
 
import javax.servlet.http.HttpServletRequest;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
 
/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
    
    private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
    
 
    @RequestMapping(value = "/home.do", method = RequestMethod.GET)
    public String home(Locale locale, Model model) {
        logger.info("Welcome home! The client locale is {}.", locale);
        
        
        return "home";
    }
    
    
}
 

 

 

 

 

실행화면. 기본 view페이지가 layout1.jsp로 들어가서 생성된 페이지를 보여준다.

 

 

 

Comments
최근에 올라온 글
최근에 달린 댓글
TAG
more
Total
Today
Yesterday