zoukankan      html  css  js  c++  java

  • decorator（HTML装饰器） sitemesh

    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中配置如下信息：

    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 : 匹配的路径，可以用*,那些被访问的页面需要被装饰
    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.jsppanel.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上。

     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

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

    文件都写好之后我们就访问了：效果如下：
  • 相关阅读:
    群辉：服务器错误错误代码38
    群晖官方功能使用教程
    CentOS 7设置KVM硬盘模式为SCSI
    CentOS 7下软阵列的创建
    什么是NAS
    CentOS 7下KVM支持虚拟化/嵌套虚拟化配置
    Linux/CentOS实现交换机-简单的交换机实现
    Ubuntu下实现软路由（转）
    CentOS下KVM配置NAT网络（网络地址转换模式）
    CentOS 7安装tunctl
  • 原文地址：https://www.cnblogs.com/humanchan/p/3616960.html
Copyright © 2011-2022 走看看