Site mesh

㈜유미테크

SiteMesh

㈜유미테크2 ㈜유미테크 SiteMesh

목차

1. 소개2. 동작 방식3. 설정4. 태그 라이브러리5. 페이지별 Decorator


1. 소개• 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는

프레임워크

헤더

좌측 메뉴 우측 메뉴

푸터내용


2. 동작 방식• 기존 페이지

• SiteMesh


2. 동작 방식

본문에 들어갈 내용

Decorator 정의

사용자에게 전송되는 페이지


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>


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>


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>


4. 태그 라이브러리• <decorator:head />

– 적용될 페이지의 <head> 태그의 내용을 삽입• <decorator:body />

– 적용될 페이지의 <body> 태그의 내용을 삽입• <decorator:title />

– 적용될 페이지의 <title> 태그의 내용을 삽입• <decorator:getProperty />

– 적용이 완료된 HTML 페이지의 <body> 태그 내에 이벤트 핸들러를 생성하기 위해 사용

• <decorator:usePage />– decorator 페이지에서 적용될 페이지의 페이지 객체를 얻을 수 있게

함


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/>

5. 페이지별 Decorator• decorator.jsp - <body>

<body><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><div> <decorator:body /></div></body>

Site mesh

Software

Transcript of Site mesh