介紹Tiles2
如今,網站一般被劃分成片正在呈現不同的網頁之間的可重複使用的模板。例如,一個網站中包含頭,頁腳,菜單等,這項目仍然通過了該網站,並給它一個共同的外觀和感覺。這是非常困難的硬編碼在每一個網頁,如果以後需要改變,不是所有的頁面需要進行修改。因此,我們使用模板化機制。我們創建了一個共同的頁眉,頁腳,菜單頁面,包括在每個頁面。
瓷磚插件允許模板和組件。事實上,這兩種機制是相似的:
定義組裝興建另一部分或一整頁頁(“Tiles”)。的一部分
帶參數,允許動態的內容,並且可以被看作是一種方法,用JAVA語言。Tiles是保持一致的外觀和感覺一個web應用程序在所有的網頁模板系統使用。它增加模板的可重用性,減少代碼重複。
中央配置文件中定義一個常見的網頁佈局,這種佈局可以擴展到所有的Web應用程序的網頁。
應用程序佈局
我們的目標是我們Spring3HelloWorld應用程序添加頁眉,頁腳和菜單。以下將是相同的佈局。
所需JAR包
上述表中突出顯示的jar文件要添加新的Tiles集成項目。
在Spring mvc 中配置Tiles框架
要配置Tiles,在spring-servlet.xml中配置一個TilesConfig的<bean>。打開spring-servlet.xml,並添加下面的代碼<beans></beans>標記之間。
WEB-INF/spring-servlet.xml:
-
<bean id="viewResolver"
-
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
-
<property name="viewClass">
-
<value>
-
org.springframework.web.servlet.view.tiles2.TilesView
-
</value>
-
</property>
-
</bean>
-
<bean id="tilesConfigurer"
-
class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
-
<property name="definitions">
-
<list>
-
<value>/WEB-INF/tiles.xml</value>
-
</list>
-
</property>
-
</bean>
-
<bean id="viewResolver"
-
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
-
<property name="viewClass">
-
<value>
-
org.springframework.web.servlet.view.tiles2.TilesView
-
</value>
-
</property>
-
</bean>
-
<bean id="tilesConfigurer"
-
class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
-
<property name="definitions">
-
<list>
-
<value>/WEB-INF/tiles.xml</value>
-
</list>
-
</property>
-
</bean>
通過上面定義的參數.在WEB-INF中寫一個tiles的配置文件"tiles.xml"這個xml爲我們的web項目定義Tiles
WEB-INF/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>
-
<definition name="base.definition"
-
template="/WEB-INF/jsp/layout.jsp">
-
<put-attribute name="title" value="" />
-
<put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
-
<put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp" />
-
<put-attribute name="body" value="" />
-
<put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />
-
</definition>
-
-
<definition name="contact" extends="base.definition">
-
<put-attribute name="title" value="Contact
Manager" />
-
<put-attribute name="body" value="/WEB-INF/jsp/contact.jsp" />
-
</definition>
-
-
</tiles-definitions>
-
<?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>
-
<definition name="base.definition"
-
template="/WEB-INF/jsp/layout.jsp">
-
<put-attribute name="title" value="" />
-
<put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />
-
<put-attribute name="menu" value="/WEB-INF/jsp/menu.jsp" />
-
<put-attribute name="body" value="" />
-
<put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />
-
</definition>
-
-
<definition name="contact" extends="base.definition">
-
<put-attribute name="title" value="Contact Manager" />
-
<put-attribute name="body" value="/WEB-INF/jsp/contact.jsp" />
-
</definition>
-
-
</tiles-definitions>
在這裏,我們有tiles.xml定義模板base.definition。該佈局包含的屬性,如頭,標題,主體,菜單和頁腳。然後擴展和佈局的新關聯頁面。我們覆蓋默認的佈局改變Body和Title的內容。
創建我們的JSP文件
我們寫一個layout.jsp作爲我們web項目的佈局頁面然後引入相應的頁面
WEB-INF/jsp/layout.jsp
-
<%@
taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
"http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
-
<title><tiles:insertAttribute name="title" ignore="true" /></title>
-
</head>
-
<body>
-
<table border="1" cellpadding="2" cellspacing="2" align="center">
-
<tr>
-
<td height="30" colspan="2"><tiles:insertAttribute name="header" />
-
</td>
-
</tr>
-
<tr>
-
<td height="250"><tiles:insertAttribute name="menu" /></td>
-
<td width="350"><tiles:insertAttribute name="body" /></td>
-
</tr>
-
<tr>
-
<td height="30" colspan="2"><tiles:insertAttribute name="footer" />
-
</td>
-
</tr>
-
</table>
-
</body>
-
</html>
-
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
"http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title><tiles:insertAttribute name="title" ignore="true" /></title>
-
</head>
-
<body>
-
<table border="1" cellpadding="2" cellspacing="2" align="center">
-
<tr>
-
<td height="30" colspan="2"><tiles:insertAttribute name="header" />
-
</td>
-
</tr>
-
<tr>
-
<td height="250"><tiles:insertAttribute name="menu" /></td>
-
<td width="350"><tiles:insertAttribute name="body" /></td>
-
</tr>
-
<tr>
-
<td height="30" colspan="2"><tiles:insertAttribute name="footer" />
-
</td>
-
</tr>
-
</table>
-
</body>
-
</html>
WEB-INF/jsp/header.jsp
WEB-INF/jsp/menu.jsp
-
<span style="font-size:
14px;"><p>Menu</p></span>
-
<span style="font-size:14px;"><p>Menu</p></span>
WEB-INF/jsp/footer.jsp
-
<span style="font-size:
14px;"><p>Copyright <code class="xml
plain">©</code> Zemo.com</p></span>
-
<span style="font-size:14px;"><p>Copyright <code class="xml plain">©</code> Zemo.com</p></span>
所有工作準備就緒部署就行了