티스토리 뷰

프로그래밍/Web

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~

루키~ 2015. 10. 16. 08:24

Sitemesh를 사용하다보면 웹 페이지에서 Decorator 파일에 현재의 위치를 전달해야 할 경우가 있다.

예를 들어 네비게이션 메뉴가 있다면, 현재 선택한 페이지를 다르게 표시할 때 주로 사용한다.

다음과 같은 화면을 구성한다고 생각해 보자.

Sitemesh를 사용해서 상단 네비게이션까지 공통영역으로 처리했는데,

세번째 메뉴 선택시 상단의 네비게이션을 각 페이지에 맞춰서 선택한 형태로 변경할 때 바로 이 기능을 사용하면 된다.

메타 태그 넣기

먼저 각 페이지에 다음과 같이 메타 태그를 삽입한다.

5번째 줄에 이름이 "selection"이고, 값이 "mini1"인 메타 태그를 추가한 것을 볼 수 있다.

다른 페이지에도 각각의 고유한 값을 가진 메타 태그를 추가하면 된다.

<meta name="selection" content="mini1" />

decorator.jsp 파일 수정하기

이제 decorator.jsp 파일에서 위에서 작성한 메타 태그를 어떻게 인식하는 지 살펴보자.

<decorator:usePage id="thePage" /> <% String selection = thePage.getProperty("meta.selection"); %>

decorator:usePage로 thePage를 선택한 다음, getProperty를 통해서 메타 태그의 이름이 "selection"인 것의 값을 읽어온다.

그리고 메뉴를 표시하는 곳에서 selction 변수의 값을 체크하면 된다.

<% if(selection != null && "mini1".equals(selection)){ %> <li class="active"><a href="../site/mini1.jsp">미니 메뉴 #1</a></li> <% } else { %> <li><a href="../site/mini1.jsp">미니 메뉴 #1</a></li> <% } %>

해당 메뉴가 선택되었다면 class="active"를 통해 선택 되었음을 나타내도록 구성했다.

최종적으로 적용된 화면은 다음과 같다.

해당 소스가 적용된 decorator.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<decorator:usePage id="thePage" />
<% String selection = thePage.getProperty("meta.selection"); %>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<decorator:head/>
  
</head>  
 
<div class="container theme-showcase" role="main">
	
	<h2>Sitemesh 테스트</h2>
	
	
	<ul class="nav nav-tabs">
		<% if(selection != null && "mini1".equals(selection)){ %> 
		    <li class="active"><a href="../site/mini1.jsp">미니 메뉴 #1</a></li> 
		<% } else { %> 
		    <li><a href="../site/mini1.jsp">미니 메뉴 #1</a></li>
		<% } %>
			
		<% if(selection != null && "mini2".equals(selection)){ %> 
		    <li class="active"><a href="../site/mini2.jsp">미니 메뉴 #2</a></li> 
		<% } else { %> 
		    <li><a href="../site/mini2.jsp">미니 메뉴 #2</a></li>
		<% } %>
		
		<% if(selection != null && "mini3".equals(selection)){ %> 
		    <li class="active"><a href="../site/mini3.jsp">미니 메뉴 #3</a></li> 
		<% } else { %> 
		    <li><a href="../site/mini3.jsp">미니 메뉴 #3</a></li>
		<% } %>
	</ul>
		  
	<decorator:body/>
	
</div>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Sitemesh 더 알아보기...

웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

Sitemesh 활용시 하단의 자바스크립트 처리하기

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~

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

자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~ (1)	2015.10.20
자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기 (0)	2015.09.30
톰캣 로그 한글 깨질때~ (0)	2015.09.06
실시간 커뮤니케이션... WebRTC 기술을 주목하라! (0)	2015.08.31
JSP에서 Gson을 활용해 RecordSet을 JSON으로 변환하기~ (0)	2015.07.06

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
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

글 보관함

루키의 보석함

티스토리 뷰

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~

메타 태그 넣기

decorator.jsp 파일 수정하기

Sitemesh 더 알아보기...

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

티스토리툴바