想必很多人在寫專案時都會要切版

會要切版不外乎是因為同樣的版面要重覆的利用

在以前~應該是討厭鬼還是在學生的時候

同樣的版面要重覆的利用大多都是用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上

成功了~

 sitemesh1   

 

 

備註

我的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; }

 

 

 

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 討厭鬼 的頭像
    討厭鬼

    討厭鬼教學

    討厭鬼 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄