想必很多人在寫專案時都會要切版
會要切版不外乎是因為同樣的版面要重覆的利用
在以前~應該是討厭鬼還是在學生的時候
同樣的版面要重覆的利用大多都是用include的jsp
當然~在實作時用include跟用切版套件好像是沒有什麼差別!!這也是實話
真正的差別在於要更換版面的時候不用一個一個去把include拿掉更換之類的
只要在設定檔裡做修改就可以了!
現在的切版套件不少~我用過的就只有sitemesh與tiles
那麼今天要先講sitemesh
雖然sitemesh也有用到include但要修改時只要換一個地方就好
那就開始吧~
我的範例是基於strtus2+spring+hibernate架構
可以參考Struts2 架構配置教學、Struts2+Spring架構配置教學(Spring)、Struts2+Spring+Hibernate架構配置教學(Hibernate)上、Struts2+Spring+Hibernate架構配置教學(Hibernate+JNDI)下
在開始前要先加入jar檔
sitemesh-3.0-alpha-2.jar
假如我現在拿到一個版面是這個樣子
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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">
<link rel="stylesheet" type="text/css" href="../css/leather.css" media="screen" />
<title>討厭鬼的教學</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="login-bar">
<a href="//panel.pixnet.cc/signup/step1">首頁</a>
<span class="separator">|</span>
<a id="pixnet-lang" href="#"><span>JqGrid</span></a>
</div>
</div>
<div class="main">
</div>
<div class="footer">
<a href="http://nerdyworld.pixnet.net/blog">討厭鬼的世界</a>
<a href="http://nerdyworld.pixnet.net/blog">討厭鬼的貨物</a>
</div>
</div>
</html>
在這邊看每個人的需求不同,做法也會不相同
討厭鬼先在這邊用簡單的
不過配置還是一樣的
先在web.xml中加入
<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>
而要注意的一點是若你的專案有用到struts2的話
請把上面那一段擺在struts2的配置上面
如討厭鬼的範例
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<display-name>leather</display-name>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:config/action-context.xml,
classpath:config/service-context.xml,
classpath:config/dao-context.xml
</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
</filter>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
接下來在WEB-INF底下先新增一個sitemesh3.xml的檔案
<sitemesh>
<mapping path="/*" decorator="/decorator/leather_decorator.jsp"/>
</sitemesh>
path="/*"指的是url路徑的位置
例如我的專案名稱為leather,那我的url就是http://localhost:8080/leather/
/*是說http://localhost:8080/leather/xxx的路徑都會被套用到
decorator是指要用到版型的路徑
當然如果你有多個的版型要做設定、也是可以的
例如
<sitemesh>
<mapping path="/*" decorator="/decorator/leather_decorator.jsp"/>
<mapping path="/forum/*" decorator="/decorator/forum_decorator.jsp"/>
</sitemesh>
上面的設定是說基本上所以的路徑都會套到leather_decorator.jsp這個版
但是如果是http://localhost:8080/leather/forum/xxx的路徑會套到forum_decorator.jsp這個版
如果你有不想被套版的頁面的話
可以加入<mapping path="/xxxx" exclue="true"/>
接下來因為我在<mapping path="/*" decorator="/decorator/leather_decorator.jsp"/> 中
我的版型位置在/decorator/leather_decorator.jsp
所以我要WebContent底下新增一個folder叫做decorator
並在decorator新增一個leather_decorator.jsp並修改內容
照原本上方拿到的內容修改成如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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">
<link rel="stylesheet" type="text/css" href="../css/leather.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.19.custom.css" media="screen" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<title>討厭鬼<sitemesh:write property='title'/></title>
</head>
<body>
<div class="container">
<div class="header">
<div class="login-bar">
<a href="//panel.pixnet.cc/signup/step1">首頁</a>
<span class="separator">|</span>
<a id="pixnet-lang" href="#"><span>JqGrid</span></a>
</div>
</div>
<div class="main">
<sitemesh:write property='body'/>
</div>
<div class="footer">
<a href="http://nerdyworld.pixnet.net/blog">討厭鬼的世界</a>
<a href="http://nerdyworld.pixnet.net/blog">討厭鬼的貨物</a>
</div>
</div>
</body>
</html>
要被套版的頁面裡的title跟body都會出現在套版頁面上
好了之後就在原本的jsp頁面的title打上教學兩個字
在body打上test字樣
例如討厭鬼的範例
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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>教學</title>
</head>
<body>
test
</body>
</html>
接著再部署到tomcat上
成功了~
備註
我的leather.css內容
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
pre { font-size: 1em ; }
html {}
body {
font-size: 0.8em;
font-family: Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
background: #fff;
margin: 0px ;
}
a { color: #9d574e; text-decoration: none; }
a:hover { color: #000; }
.container {
position: relative;
width: 990px;
margin: 0px auto;
}
.header {
height: 350px;
background: url(../images/flower.jpg);
}
.login-bar {
position: absolute;
top: 350px;
left: 30px;
width: auto;
font-size: 0.85em;
text-align: right;
color: #999;
padding: 0 0;
}
.login-bar a { color: #999; }
.login-bar a:hover { color: #000; }
.main {
line-height: 150%;
width: 200%;
padding: 40px 0 20px;
}
.page {
clear: both;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 0.85em;
padding: 0px;
margin: 10px auto;
}
.page a {
background: none;
padding: 2px 7px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.page a:hover {
color: #333;
background: #eee;
}
.page span {
color: #333;
background: #eee;
padding: 1px 6px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.footer {
clear: both;
font-size: 0.9em;
color: #aaa;
line-height: 180%;
text-align: center;
padding: 50px 10px 20px;
margin: 0 0 0;
}
.footer p {
color: #888;
}
.footer a { color: #333; }