티스토리 뷰
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의 전체 소스는 다음과 같다.
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 |