Recommended
More Related Content
Similar to SiteMesh
Similar to SiteMesh (20)
More from ymtech
More from ymtech (20)
SiteMesh
- 1. ㈜유미테크 SiteMesh (웹 페이지의 레이아웃을 관리하는 프레임워크)
- 2. ㈜유미테크2㈜유미테크 SiteMesh 목차 1. 소개 2. 동작 방식 3. 설정 4. 태그 라이브러리 5. 페이지별 Decorator
- 3. ㈜유미테크3㈜유미테크 SiteMesh 1. 소개 • 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는 프레임워 크 헤더 좌측 메뉴 우측 메뉴 푸터 내용
- 4. ㈜유미테크4㈜유미테크 SiteMesh 2. 동작 방식 • 기존 페이지 • • SiteMesh
- 5. ㈜유미테크5㈜유미테크 SiteMesh 2. 동작 방식 본문에 들어갈 내용 Decorator 정의 사용자에게 전송되는 페이지
- 6. ㈜유미테크6㈜유미테크 SiteMesh 3. 설정 • pom.xml • web.xml <dependency> <groupId>opensymphony</groupId> <artifactId>sitemesh</artifactId> <version>${opensymphony-sitemesh-version}</version> </dependency> <filter> <filter-name>sitemesh</filter-name> <filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class> </filter> <filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
- 7. ㈜유미테크7㈜유미테크 SiteMesh 3. 설정 • decorators.xml – SiteMesh를 적용할 곳의 패턴들을 지정 • decorator.jsp <?xml version="1.0" encoding="utf-8"?> <decorators defaultdir="/"> <decorator name="deco" page="/WEB-INF/common/decorator.jsp"> <pattern>/*</pattern> </decorator> </decorators>
- 8. ㈜유미테크8㈜유미테크 SiteMesh 3. 설정 • decorator.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %> <decorator:usePage id="thePage" /> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <decorator:head /> </head> <body> <div id=“header"> header </div> <div id=“content” <decorator:body /> </div> <div id=“footer”> footer </div> </body> </html>
- 9. ㈜유미테크9㈜유미테크 SiteMesh 4. 태그 라이브러리 • <decorator:head /> – 적용될 페이지의 <head>태그의 내용을 삽입 • <decorator:body /> – 적용될 페이지의 <body>태그의 내용을 삽입 • <decorator:title /> – 적용될 페이지의 <title>태그의 내용을 삽입 • <decorator:getProperty /> – 적용이 완료된 HTML 페이지의 <body> 태그 내에 이벤트 핸들러를 생성하기 위해 사용 • <decorator:usePage /> – decorator 페이지에서 적용될 페이지의 페이지 객체를 얻을 수 있게 함
- 10. ㈜유미테크10㈜유미테크 SiteMesh 5. 페이지별 Decorator • meta 정보 등록 – home.jsp – login.jsp • decorator.jsp - meta 정보 불러오기 <% String topMenu = thePage.getProperty("meta.topMenu"); request.setAttribute("topMenu", thePage.getProperty("meta.topMenu")); %> <meta name="topMenu" content="home"/> <meta name="topMenu" content=“login/>
- 11. ㈜유미테크11㈜유미테크 SiteMesh 5. 페이지별 Decorator • decorator.jsp - <body> <body> <!-- header--> <div id="header"> <div> <c:choose> <c:when test="${topMenu == 'home'}"> Home Page <a href="${ctx}/j_spring_security_logout"> 로그아웃 </a> </c:when> </c:choose> <c:choose> <c:when test="${topMenu == 'login'}"> <p> 로그인 Page </p> </c:when> </c:choose> </div> </div> <!-- content --> <div> <decorator:body /> </div> </body>
Editor's Notes
- 1. SiteMesh의 정의 SiteMesh는 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는 프레임워크입니다. 쉽게 말해서 웹사이트의 동일한 상단, 하단, 메뉴 부분을 한곳에서 관리하고 각각의 페이지는 실제 내용만을 관리할 수 있도록 해줍니다. 즉, 상단/하단/메뉴와 같이 반복되는 부분이 각 페이지마다 들어가 있으면 추후 유지보수가 어렵기 때문에 SiteMesh와 같은 프레임워크를 사용하는 것이죠. 장점 : 레이아웃 정보와 본문을 분리해서 개발함으로써 레이아웃이 변경될 경우 빠르게 대응, 본문 페이지의 소스코드가 줄어들어 개발 생산성 및 유지보수성을 높일 수 있다.
- SiteMesh는 기본적으로 Java Servlet 환경에서 Filter 형태로 동작하고 있으며 다음 그림과 같이 Decorator 페이지를 한번 필터링 하는 방식입니다. 기존 페이지는 웹서버가 바로 렌더링된 페이지를 보내주지만 SiteMesh에서는 Decorator 페이지를 한번 더 거치게 된다는 것이죠.
- 미리 중간에 있는 이미지와 같이 Decorator를 정의해 둡니다. 상단의 {title}과 우측의 Body-Content만 각각의 파일들은 가지고 있으면 되는 것이죠. 즉, welcome.jsp와 search.cgi와 같은 파일에는 본문에 들어갈 내용만 가지고 있으면 되는 겁니다. 이제 Filter를 통해 decorator를 거치면서 하단과 같이 동일한 상단, 하단, 메뉴를 가지고 있는 페이지로 사용자에게 전송됩니다.