起風前的相遇: Spring MVC (2) -- Tiles

Tiles是一個分割網頁的Library，提供了一個除了使用<jsp:include>之外的JSP組合工具；
透過xml設定檔，將重覆不需變動的頁面分割後定為Template，讓開發人員專注在各個模組中不同的頁面並使其具有組合性。

通常一個頁面基本的格局大概如下圖

這次的Demo就以table來分割而不以div方式來制定，簡單的html如下

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title></title>
</head>
<body>
<table>
 <tr>
  <td colspan="2">Header</td>
 </tr>
 <tr>
  <td>Menu</td><td>Body</td>
 </tr>
 <tr>
  <td colspan="2">Footer</td>
 </tr>
</table>
</body>
</html>

寫成JSP的include大概會變成下面這樣

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title></title>
</head>
<body>
<table>
 <tr>
  <td colspan="2"><jsp:include file="/WEB-INF/jsp/common/header.jsp"></jsp:include></td>
 </tr>
 <tr>
  <td><jsp:include file="/WEB-INF/jsp/common/menu.jsp"></jsp:include></td><td>Body</td>
 </tr>
 <tr>
  <td colspan="2"><jsp:include file="/WEB-INF/jsp/common/footer.jsp"></jsp:include></td>
 </tr>
</table>
</body>
</html>

看起來還不錯，但是個一個jsp都必需重覆include header,menu,footer這三個jsp，而且萬一哪天出了什麼事，例如要加個ad在畫面的最右側，那所有的jsp都必需要被修正.....嗯，如果以部份認為PG死不完，班是應該的管理人員來看，也許也不是什麼大事吧....

但是Tiles提供了一個反其道而行的方式，先要求我們產生一個基本的jsp做為layout，將header,menu,body,footer當成是變數，再利用xml設定每個變數是要指到哪一個jsp，就讓我們一步一步看下去（。。。有點藍色xx網的感覺

(1)Library
先在pom.xml中加入要使用的library，如果僅是使用基本的tiles功能，只要加入一項即可
<dependency>

<dependency>
    <groupid>org.apache.tiles</groupid>
    <artifactid>tiles-jsp</artifactid>
    <version>2.2.2</version>
</dependency>

(2)建立Template Layout JSP -- layout.jsp
簡單來說，就是利用tiles:insertAttribute來取代jsp:include
加入ignore＝"true"代表可以不給值。

<%@ include file="/WEB-INF/jsp/common/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title><tiles:insertattribute ignore="true" name="title"></tiles:insertattribute></title>
</head>
<body>
<table>
 <tr>
  <td colspan="2"><tiles:insertattribute name="header"> </tiles:insertattribute></td>
 </tr>
 <tr>
  <td><tiles:insertattribute name="menu"></tiles:insertattribute></td><td><tiles:insertattribute name="body"></tiles:insertattribute></td>
 </tr>
 <tr>
  <td colspan="2"><tiles:insertattribute name="footer"></tiles:insertattribute></td>
 </tr>
</table>
</body>
</html>

(3)設定Tiles的Template XML -- tiles.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN" "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
    <!--採用/WEB-INF/jsp/common/layout.jsp做為基本版型，-->
 <definition name="base.definition" template="/WEB-INF/jsp/common/layout.jsp">
  <put-attribute name="title" value="">
  </put-attribute><put-attribute name="header" value="/WEB-INF/jsp/common/header.jsp">
  </put-attribute><put-attribute name="menu" value="/WEB-INF/jsp/common/menu.jsp">
  </put-attribute><put-attribute name="body" value="">
  </put-attribute><put-attribute name="footer" value="/WEB-INF/jsp/common/footer.jsp">
 </put-attribute></definition>
    <!-- 延用基本版型，改變title與body的值 -->
 <definition name="hello" extends="base.definition">
  <put-attribute name="title" value="Say Hello to Tiles">
  </put-attribute><put-attribute name="body" value="/WEB-INF/jsp/helloTiles.jsp">
 </put-attribute></definition>
</tiles-definitions>

而其中/WEB-INF/jsp/common/下的header.jsp,menu.jsp,footer.jsp,helloTiles.jsp就隨你寫入內容囉

(4)更改SpringMVC 的ViewReslover -- spring-servlet.xml
將先前採用的JstlView改為TilesView，並加入tilesConfigurer指定tiles設定檔

<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" id="viewResolver">
  <property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView">
 </property></bean>

 <bean class="org.springframework.web.servlet.view.tiles2.TilesConfigurer" id="tilesConfigurer">
  <property name="definitions">
   <list>
    <value>/WEB-INF/tiles.xml</value>
   </list>
  </property>
 </bean>

這樣就完成最簡單的SpringMVC與Tiles設定囉

起風前的相遇

10 11月 2010

Spring MVC (2) -- Tiles

沒有留言: