decorator（HTML裝飾器）

明亮的技術部落格發表於2017-06-27
HTML

1>:每當遇到一個新的技術，首先我會問自己，這個技術是做神馬的？用這個技術有神馬好處？相比其它方式他的優勢在哪裡？我該怎樣實現這個技術？

      首先這個Decorator解釋一下這個單詞：“裝飾器”，我覺得其實可以這樣理解，他就像我們用到的Frame，他把每個頁面都有的東東提煉了出來，也可能我們也會用各種各樣的include標籤，將我們的常用頁面給包括進來：比如說頁面的top,bottom這些每個頁面幾乎都有，而且都一樣，如果我們在每個頁面都include,可以發現我們的程式是多嗎的冗餘，重複。相比之下裝飾器給我們提供了一個較好的選擇，他在你要顯示的頁面根本看不出任何include資訊，可以說完全解耦。

2>:decorator的原理：

     sitemesh應用Decorator模式，用filter擷取request和response,把頁面元件head,content,banner、bottom結合為一個完整的檢視。通常我們都是用include標籤在每個jsp頁面中來不斷的包含各種header, stylesheet, scripts and footer.

3>:decorator的實現

     首先我們http://www.opensymphony.com/sitemesh/下載我們需要的jar包：sitemesh-2.4.jar

    在我們的web.xml中配置如下資訊：

[html] view plain copy
 print?
  1. <filter>   
  2.   <filter-name>sitemesh</filter-name>   
  3.      <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>   
  4.   </filter>   
  5.   <filter-mapping>   
  6.      <filter-name>sitemesh</filter-name>   
  7.      <url-pattern>/*</url-pattern>   
  8.   </filter-mapping>  

    在WEB-INF目錄下新建一個decorators.xml檔案（/decorator是你的包裝jsp根路徑在這裡main.jsp和panel.jsp都是包裝jsp,a.jsp，b,jsp是被包裝jsp）

defaultdir: 包含裝飾器頁面的目錄page : 頁面檔名name : 別名role : 角色，用於安全webapp : 可以另外指定此檔案存放目錄Patterns : 匹配的路徑，可以用*,那些被訪問的頁面需要被裝飾。

 

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="utf-8" ?>   
  2.  <decorators defaultdir="/decorator">  
  3.     <decorator name="main" page="main.jsp">  
  4.       <pattern>/page/a.jsp</pattern>   
  5.       <pattern>/page/b.jsp</pattern>  
  6.  </decorator>  
  7.  <decorator name="panel" page="panel.jsp"></decorator>  
  8.  </decorators>  

 建立我們的包裝jsp在WEBROOT->decorator下面：這裡有兩個分別是main.jsp和panel.jsp

panel.jsp

<decorator:head />

插入原始頁面(被包裝頁面)的head標籤中的內容(不包括head標籤本身)。

<decorator:body />

插入原始頁面(被包裝頁面)的body標籤中的內容。

<decorator:title [ default="..." ] />

插入原始頁面(被包裝頁面)的title標籤中的內容，還可以新增一個預設值。

下面介紹一下<page:applyDecorator name="  " page=" ">

其實這裡是一樣的name指的是我們要用的包裝器名字也就是在decorator.xml中定義好的，page指的是被包裝頁面。

還有就是<decorator:getProperty property="" [default=""][writeEntireProperty=""]/>

插入原始頁面的property屬性指定的值同名的屬性。

property:指定那個屬性將要被插入

default:如果沒有發現指定的屬性，則插入此值

writeEntireProperty:表示是否將（空格 屬性名=“屬性值”）整個插入，允許時的值是true或yes或1

例如下面例子中的：當你訪問a.jsp時，焦點會定在text上。

[html] view plain copy
 print?
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>  
  7.         <decorator:title default="預設包裝器。。。"/>  
  8.     </title>  
  9.     <decorator:head/>  
  10.   </head>  
  11.   <body>  
  12.   <hr width="100" color="red"/>  
  13.     <decorator:body/>  
  14.   <hr width="100" color="blue"/>  
  15.   </body>  
  16. </html>  

 

main.jsp

[html] view plain copy
 print?
  1.    
  2. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  3. <%@ taglib uri="<a href="http://www.opensymphony.com/sitemesh/page">http://www.opensymphony.com/sitemesh/page</a>" prefix="page"%>  
  4. <%@ taglib uri="<a href="http://www.opensymphony.com/sitemesh/decorator">http://www.opensymphony.com/sitemesh/decorator</a>" prefix="decorator" %>  
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  6. <html>  
  7. <head>   
  8.     <title><decorator:title default="裝飾器頁面..." /></title>   
  9.     <decorator:head />   
  10.   </head>   
  11.   <body bgcolor="gray"<decorator:getProperty property="body.onload" writeEntireProperty="true" />>  
  12.    
  13.   <page:applyDecorator page="/common/top.jsp" name="panel"/>  
  14.   <div align="center">  
  15.     <p><font color="red">this is style's header</font></p>   
  16.     <decorator:body/>  
  17.     <p><font color="red">this is style's footer</font></p>   
  18.     </div>  
  19.    <page:applyDecorator page="/common/bottom.jsp" name="panel"/>  
  20.   </body>   
  21. </html>  
[html] view plain copy
 print?
  1. a.jsp  


 

[html] view plain copy
 print?
  1. <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.   <head>  
  5.     <title>My JSP 'a.jsp' starting page</title>  
  6.    </head>  
  7.   <body onload="document.someform.a.focus();">  
  8. <form name="someform">  
  9.  <font color="red">this is my JSP page. </font><br>  
  10.  <input type="text" id="a"/>  
  11. </form>  
  12.  </body>  
  13. </html>  

檔案都寫好之後我們就訪問了：效果如下：

如果感覺不夠詳盡請看這裡：http://hi.baidu.com/%C9%AE_%CC%C6/blog/item/b5731091b4591493a977a488.html


原文出處:http://blog.csdn.net/jzh440/article/details/7770013

相關文章