2013年7月15日

Spring MVC 3 實作教學 (6) - Spring MVC 與 SiteMesh ( 頁面規劃框架 ) ( Use SiteMesh with Spring MVC )

相信在開發 Web Project 時常常會遇到某些頁面內容重複,以往可以使用 JSP include 將會重複的內容引入,但若需要調整頁面版型、風格甚至內容,這些都要重新一一修改,因此基於這個問題衍生出許多頁面規劃的框架,當然今天要介紹的 SiteMesh 也是其中一個。



SiteMesh 只是眾多框架選擇之一,其他的框架當然也可以跟 Spring MVC 作結合。但基於 SiteMesh 方便、簡單所以選擇它當作範例來討論。首先可以先到 SiteMesh 官方網站下載最新的 Library,一樣將 Library 放置在 /WebContent/WEB-INF/lib 底下。另外還需要設定 /WebContent/WEB-INF/web.xml 檔案,因我們將使用 SiteMesh 所以必須在 web.xml 裡面先宣告,設定如下:


設定檔裡面將實作 filter 的部份定義出來,url-pattern 設定為 " /* ",意即符合這個路徑底下的頁面都會進行判斷是否需要套用裝飾頁面的動作。

實作之前我們先來假設需求,若畫面上方導覽列 ( Menu ) 與下方其他資訊、聯絡方式 ( Footer ) 是每頁都會出現的固定內容,只有中間部份會根據 Menu 切換而變動,也就是說我們只需要定義一個裝飾 ( 或者思考為通用的版型 ) 頁面,該頁面內容包含 Menu 與 Footer,接下來只要將其他內容頁面套用這個裝飾頁面即可。頁面擺放可以按照自己的習慣,如我的習慣會將所有頁面放置在 /WebContent/pages/ 底下。

首先建立我們的裝飾頁面 /WebContent/pages/layouts/base.jsp,內容如下圖:


檢視 JSP 內容可看到我依照剛剛的設計,本頁包含了 Menu 與 Footer 部份,除此之外 JSP 最上方還加入宣告使用 SiteMesh 的 taglib,另外於頁面中加入 <dec:body / > 標籤,透過標籤標註此處為內容加入處。也就是當其他頁面套用到 base.jsp 時,其頁面 <body></body> 標籤裡所有內容會被加入 <dec:body /> 目前所在位置。內容會變成 base.jsp 的一部份一起呈現。

先來預覽一下腦海中 base.jsp 畫面:


通用裝飾頁面完成後,我們接著來設計內容頁面 /WebContent/pages/common/home.jsp 剛剛說過當內容頁面是一個完整的 HTML 格式 ( 有 head、body 等標籤 ),透過 <dec:body /> 會將 <body></body> 的內容截取放置到 base.jsp 中。但我們也可以只寫 <body></body> 裡面的內容,如下圖就是只有內容部份的範例:


預覽一下腦海中 home.jsp 畫面:


當然此時的 home.jsp 還沒有與 base.jsp 結合,因為我們還未告訴 SiteMesh 哪些頁面須要套用到哪一個裝飾頁面,所以還需要一個重要的 SiteMesh 設定檔,設定檔預設位置於 /WebContent/WEB-INF/ 底下,預設檔名為 decorators.xml。設定內容如下:


首先必須先將你的裝飾頁面的路徑指定,如範例中為 defaultdir="/pages/layouts",因實際專案中會有多個裝飾頁面,故可以設定多組的 decorator ,每一個 decorator 都要擁有自己的名稱 name="base" ,以及這個 decorator 是使用哪一個裝飾頁面 page="base.jsp",最後只需要將內容頁面的路徑,如範例  <pattern>/common/home</pattern> 加至你想要的 decorator 底下即可。

我們專案檔案目前分布如下:


以上幾個步驟就完成了 SiteMesh 的設定,接著來實際瀏覽我們的結果畫面,進入 /common/home 時畫面如下:


可以看到之前的 base.jsp 與 home.jsp 結合在一起呈現,切換 Menu 選單至 /common/info 頁面:


兩個頁面都順利地照 decorator.xml 設定的套用 base.jsp ,如此一來往後遇內容重複的部份都可以思考如何使用 SiteMesh 來幫助開發,SiteMesh 提供的功能當然不只這次所討論的部份,詳細可以參考官方文件。最後提醒,SiteMesh 雖然方便,但裝飾頁面與內容頁面 js 檔案引入的順序還是要小心處理。( CSS Framework 使用 Bootstrap 延伸的模組 )

其他 Spring Framework 相關教學可以參考本篇整理

熱門文章