'getproperty'에 해당되는 글 2건

  1. 2015.10.16 Sitemesh에서 메타 태그로 Decorator에 값 전달하기~
  2. 2015.06.19 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
prev | 1 | next