zoukankan      html  css  js  c++  java
  • [转]decorator(HTML装饰器)

    原文地址:https://blog.csdn.net/jzh440/article/details/7770013

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

    <filter>
      <filter-name>sitemesh</filter-name>
         <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
      </filter>
      <filter-mapping>
         <filter-name>sitemesh</filter-name>
         <url-pattern>/*</url-pattern>
      </filter-mapping>
        在WEB-INF目录下新建一个decorators.xml文件(/decorator是你的包装jsp根路径在这里main.jsp和panel.jsp都是包装jsp,a.jsp,b,jsp是被包装jsp)

    defaultdir: 包含装饰器页面的目录page : 页面文件名name : 别名role : 角色,用于安全webapp : 可以另外指定此文件存放目录Patterns : 匹配的路径,可以用*,那些被访问的页面需要被装饰。
     

    <?xml version="1.0" encoding="utf-8" ?>
     <decorators defaultdir="/decorator">
        <decorator name="main" page="main.jsp">
          <pattern>/page/a.jsp</pattern>
          <pattern>/page/b.jsp</pattern>
     </decorator>
     <decorator name="panel" page="panel.jsp"></decorator>
     </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上。

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>
            <decorator:title default="默认包装器。。。"/>
        </title>
        <decorator:head/>
      </head>
      <body>
      <hr width="100" color="red"/>
          <decorator:body/>
      <hr width="100" color="blue"/>
      </body>
    </html>
     

    main.jsp

     
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>
    <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <title><decorator:title default="装饰器页面..." /></title>
        <decorator:head />
      </head>
      <body bgcolor="gray"<decorator:getProperty property="body.onload" writeEntireProperty="true" />>
     
      <page:applyDecorator page="/common/top.jsp" name="panel"/>
      <div align="center">
        <p><font color="red">this is style's header</font></p>
        <decorator:body/>
        <p><font color="red">this is style's footer</font></p>
        </div>
       <page:applyDecorator page="/common/bottom.jsp" name="panel"/>
      </body>
    </html>
    a.jsp

     

    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>My JSP 'a.jsp' starting page</title>
       </head>
      <body onload="document.someform.a.focus();">
    <form name="someform">
     <font color="red">this is my JSP page. </font><br>
     <input type="text" id="a"/>
    </form>
     </body>
    </html>
    文件都写好之后我们就访问了

  • 相关阅读:
    splice方法以及如何实现数组去重
    数组的几个重要方法以及如何清空数组
    for-in遍历
    浅谈json和数组的区别
    js实现查找替换关键字的效果
    js实现查找关键字效果
    原生js中大小写转化以及split分割字符串方法
    eclipse没有Web项目和Server选项
    【学习】005 线程池原理分析&锁的深度化
    什么是CPU密集型、IO密集型?
  • 原文地址:https://www.cnblogs.com/dirgo/p/10243785.html
Copyright © 2011-2022 走看看