2014年9月24日 星期三

『JSP』使用 Sitemesh 實作 Master Page 打造網頁樣板

最近在找一個 JSP 運用的像 ASP.NET 的 Master Page 的方法,達成一個母板面的做法,不需要在每一頁還需要從新寫一份載入的頁面,因此,剛好找到一個 Sitemesh 框架看起來挺簡單又好用,它是一種輕量型網頁的佈局及修飾的框架,採取一種 Servlet Filter 的方式達成,先看一下行為模式的做法 (圖片來自官網):

開始實作第一步:下載 sitemesh jar 檔

請先到此網站下載 jar 檔案:https://github.com/sitemesh/sitemesh3/downloads

版本:Sitemesh 3

第二步:新增專案

建立 Java web application > Dynamic Web Project 之後,請將剛才下載的 sitemesh jar 檔案,放在 /WebContent/WEB-INF/lib/ 目錄底下,並且新增 /index.jsp 及 /layout/master-page.jsp 檔案




第三步:配置 sitemesh3 過濾器

打開 /WEB-INF/web.xml 之後增加 filter,在 </web-app> 之前加入:
<filter>
   <filter-name>sitemesh</filter-name>
     <filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
   </filter>
   <filter-mapping>
     <filter-name>sitemesh</filter-name>
     <url-pattern>/*</url-pattern>
   </filter-mapping>

第四步:編輯裝飾頁(母頁)與被裝飾頁

從我們剛剛建立好的  /index.jsp ,及 /layout/master-page.jsp 修改一下

首先是 index.jsp 頁面,呈現的內容是:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>新否現景列送有運界</title>
</head>
<body>
 <p>簡著以受一?的方望爸開下分主他必童什張紅,然立所多難知?時舞務做省事錯員二麼始念,先營展年的洲車畫放可……料作地演光腳位商孩兩何個意地東司精如創原不上負性直此嗎有族;經下回處市出戲燈到利人了,立輕策筆當子是經家華大羅,苦解院家情依手天,巴裡新小期國來地?邊進了、速高外自了會無國用新;環手性。準下大心本。黃你夜變,不張車失評球告到國為:麼每男計中在不點路才。
  運的學告取錯適時,這個也去而戰通調一,果就創治,就叫張傷一;他標黃獨的友地的示香更覺去亞機而我他一麼,到統院我成、事眾族著讀裡才!務持現有多;小發中母部外一大笑願政大小你那張心,達行評改下失?人到乎山下車!然家這他滿……給客經出好金是成定理找之下部畫,青造變如分天不接那方龍毛在致世實一顧興讓羅過落都需氣深;學操產然皮告不愛道兒很利;人麼養,西親家道角,走關小門企帶四自化我極育老長行歡品覺放學立童我化青。意的洋:所西舉路規有象力重德裡來跟所教們不爸?
 </p>
</body>
</html>

接著是裝飾頁 /layout/master-page.jsp
sitemesh 有預設幾個 tag 使用,以下示範有:

  • <sitemesh:write property='title' />
  • <sitemesh:write property='head' />
  • <sitemesh:write property='body' />


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><sitemesh:write property='title' /> | demo sitemesh3</title>
<sitemesh:write property='head' />
</head>
<body>
 Hello Sitemesh3 <h1 class='title'>
  <sitemesh:write property='title' />
 </h1>
 <hr />
 <sitemesh:write property='body' />
</body>
</html>

第五步:增加配置文件 sitemesh3.xml

這邊做了一個 mapping 的機制,把裝飾頁面跟  /* 對應

<?xml version="1.0" encoding="UTF-8"?>
<sitemesh>
  <mapping path="/*" decorator="/layout/master-page.jsp"/>
</sitemesh>  


第六步:看看運行結果




沒有留言:

張貼留言