'sitemesh'에 해당되는 글 3건

  1. 2015.10.16 Sitemesh에서 메타 태그로 Decorator에 값 전달하기~
  2. 2015.06.19 Sitemesh 활용시 하단의 자바스크립트 처리하기
  3. 2012.04.27 웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

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

|



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 활용시 하단의 자바스크립트 처리하기

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





Trackback 0 And Comment 0

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

|



웹 페이지 레이아웃 설정을 위해 Sitemesh를 많이 사용한다. 

하지만 최근 웹페이지 속도 향상을 위해 자바스크립트를 <head>가 아닌 <body> 하단에 포함하면서 조금 애매한 부분이 발생했다. 


Sitemesh 하단 자바스크립트 처리 이슈 

보통 Sitemesh의 decorator.jsp 파일을 살펴보면 다음과 같이 생성하게 된다. 

스타일시트는 <head> 태그에 배치했지만, JQuery와 부트스트랩을 위한 자바스크립트는 하단에 배치했다. 

Sitemesh의 decorator를 이렇게 만든 다음, 실제 웹페이지에서 하단에 JQuery 함수를 사용하면 

당연히 에러가 발생한다. 



Jquery.js 파일이 앞에서 로딩되어 있지 않기 때문이다. 


물론 자바스크립트를 <head> 태그 내로 옮기면 쉽게 해결할 수도 있다. 

하지만 부트스트랩 등의 최근 자바스크립트를 보면 속도 이슈 때문에 전체 페이지가 로딩된 다음 자바스크립트를 실행하라는 주석이 포함되어 있다. 

<!-- Placed at the end of the document so the pages load faster -->


Sitemesh  하단 자바스크립트 처리 방법

해결책은 decorator의 getProperty를 활용하면 된다. 

decorator.jsp 파일에 다음과 같이 작성한다. 

<decorator:getProperty property="page.local_script">


위 소스가 반영된 decorator.jsp 파일은 다음과 같다. 


23번째 줄에 page.local_script라는 프로퍼티를 선언했다. 

이제 다른 페이지들에서는 다음과 같이 사용하면 된다. 


혹시 Sitemesh를 사용하면서 어쩔 수 없이 <head> 영역에 자바스크립트를 넣었었다면, 이 해결책이 도움이 될 것이다. 

참고로 decorator에서 title을 페이지마다 바꾸는 것은 다음과 같이 사용하면 된다. 

<title><decorator:title default="미니의 프로그래밍 이야기" /></title>


Sitemesh 더 알아보기...

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

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

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





Trackback 0 And Comment 0

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

|



1. SiteMesh의 정의

SiteMesh(http://www.sitemesh.org/)는 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는 프레임워크입니다. 

쉽게 말해서 웹사이트의 동일한 상단, 하단, 메뉴 부분을 한곳에서 관리하고 각각의 페이지는 실제 내용만을 관리할 수 있도록 해줍니다.

즉, 상단/하단/메뉴와 같이 반복되는 부분이 각 페이지마다 들어가 있으면 추후 유지보수가 어렵기 때문에 

SiteMesh와 같은 프레임워크를 사용하는 것이죠.


웹사이트를 제작하던 초기에는 iframe으로 나누어서 처리하기도 했었구요. 

SiteMesh 이전에는 include를 활용해서 이런 형태를 구현하기도 했었습니다. 

그러나 iframe은 확장이 어렵고 지원하지 않는 브라우저도 많이 있었네요. 

또한 include는 모든 페이지마다 해당 부분을 삽입해줘야 하는 이슈가 있었죠.

그래서 실제로 SiteMesh를 사용해보면 얼마나 편리한지 알 수 있을 겁니다. 


2. SiteMesh의 처리 방식

SiteMesh는 기본적으로 Java Servlet 환경에서 Filter 형태로 동작하고 있으며 

다음 그림과 같이 Decorator 페이지를 한번 필터링 하는 방식입니다.

기존 페이지는 웹서버가 바로 렌더링된 페이지를 보내주지만 SiteMesh에서는 Decorator 페이지를 한번 더 거치게 된다는 것이죠. 

다음 그림을 보면 SiteMesh의 방식을 좀 더 자세히 이해할 수 있을 것 같네요. 

미리 중간에 있는 이미지와 같이 Decorator를 정의해 둡니다. 

상단의 {title}과 우측의 Body-Content만 각각의 파일들은 가지고 있으면 되는 것이죠.

즉, welcome.jsp와 search.cgi와 같은 파일에는 본문에 들어갈 내용만 가지고 있으면 되는 겁니다. 

이제 Filter를 통해 decorator를 거치면서 하단과 같이 동일한 상단, 하단, 메뉴를 가지고 있는 페이지로 사용자에게 전송됩니다. 

개념은 매우 간단하구요. Java 뿐만 아니라 CGI, PHP, ColdFusion 등에서도 SiteMesh를 활용할 수 있다고 합니다. 


3. SiteMesh의 다운로드 및 설치

먼저 SiteMesh를 다운로드해야 하는데요. 현재 SiteMesh3 알파버전이 소개되고 있습니다. 

SiteMesh2를 사용하려면 여기를 눌러서 sitemesh-2.4.2.jar 파일을 다운로드 하시면 됩니다.


설치하는 방법은 /web/WEB-INF/lib 폴더에 복사하면 됩니다. (여기에서 /web은 프로젝트의 Web Content 폴더를 의미합니다.)

그리고 /web/ 하위에 SiteMesh의 Decorator를 위한 폴더를 하나 만들고 SiteMesh를 적용할 jsp 파일을 하나 생성하면 됩니다. 

/web/decorators/decorator.jsp 

여기에서 decorators 폴더명이나 decorator.xml 파일명은 다른 것을 사용하셔도 됩니다. 

나중에 SiteMesh 설정에서 맞춰서 지정만 해주면 되니까요.. ^^


실제 decorator.jsp에는 다음과 같은 형태로 지정하면 됩니다. 

먼저 tablib를 설정해 주셔야 합니다.

그리고 <decorator:head/> <decorator:body/> 부분이 실제 페이지의 <head>와 <body>의 내용을 넣는 부분이라고 보시면 됩니다. 


4. SiteMesh의 설정

이제 마지막으로 SiteMesh의 설정을 해보도록 하겠습니다. 

3개의 XML 파일을 처리해 줘야 하는데요. 모두 /web/WEB-INF/ 하위에서 작업하면 됩니다. 


1) web.xml

SiteMesh는 Filter 형태로 동작한다고 했으므로 web.xml에 필터 관련 설정을 해줘야 합니다. 

특별히 수정할 사항 없이 그대로 지정해 주시면 됩니다. 


2) sitemesh.xml

이어서 sitemesh와 관련된 설정을 해줘야 합니다.

이 부분에서도 맨 위의 <property> 부분의 value만 맞춰서 적어주시면 되는데요. 

기본적으로 /web/WEB-INF/ 하위에 모든 설정파일을 둘 경우, 그대로 사용하셔도 됩니다. 


3) decorator.xml

마지막으로 Decorator를 설정하는 부분을 살펴보도록 하시죠.. 

여기에서는 SiteMesh를 적용할 곳의 패턴들을 지정할 수 있습니다. 

위 예에서는 /en과 /ko 하위의 모든 파일에 sitemesh를 적용하라는 것인데요. 

excludes 를 활용해서 특정 파일이나 폴더만 제외할 수도 있습니다. 

그리고 여기에서 사용하는 defaultdir 이나 page는 SiteMesh 다운로드 및 설치에서 생성한 폴더와 파일명이라는 것을 기억해 두시기 바랍니다. 


SiteMesh를 자주 사용하면서도 한번도 정리한 적이 없었던 것 같아서 작성해봤네요. 

처음 사용하시는 분들에게 도움이 되었으면 합니다. 


Sitemesh 더 알아보기...

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

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

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






Trackback 0 And Comment 0
prev | 1 | next