`

decorator(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

分享到:
评论

相关推荐

    storybook-decorator-react-to-html:用于HTML装饰器的Storybook,用于将React组件转换为静态HTML字符串

    安装 npm install @degjs/storybook-decorator-react-to-html用法作为.storybook/preview.js的全局装饰器(推荐): import { addDecorator } from '@storybook/html' ;import reactToHtml from '@degjs/storybook-...

    vue脚手架,vue3 组件 vue-property-decorator 组件

    `vue-property-decorator`是一个库,它是Vue.js和TypeScript的结合,提供了装饰器来帮助我们在TypeScript中更好地声明和管理组件的属性。它使得我们可以利用TypeScript的强类型系统,提高代码的可维护性和可读性。...

    php设计模式 Decorator(装饰模式)

    核心概念包括组件(Component)、装饰器(Decorator)和具体装饰者(Concrete Decorator)。 1. **组件(Component)**:这是被装饰的对象,它定义了基本行为和接口。在示例中,`MessageBoardHandler` 是组件,它有...

    sitemesh装饰器入门

    装饰器(Decorator)是 Sitemesh 的关键组件,它是一个 HTML 页面,包含通用的页面布局,如头部、底部和侧边栏。例如,创建一个名为 `default.jsp` 的装饰器模板: ```jsp &lt;html&gt; &lt;title&gt;&lt;s:property page=...

    storybook-decorator-script-runner:用于HTML装饰器的Storybook,用于在故事上运行JavaScript

    装饰器的一旦呈现故事,便执行JavaScript模块。 当JavaScript功能依赖于故事中可用的完全渲染的DOM时,这很有用。 安装 npm install @degjs/storybook-decorator-script-runner 用法 作为.storybook/preview.js的...

    django如何通过类视图使用装饰器

    对于需要单独添加装饰器的方法,可以使用`method_decorator`来确保装饰器能够正确处理`self`参数: ```python from django.views import View from django.utils.decorators import method_decorator class ...

    sitemesh的使用和例子

    Sitemesh的核心功能是装饰器(Decorator)模式的应用。它拦截HTTP请求,将响应内容与预先定义好的模板(Decorator)结合,从而实现全局的页面布局。模板通常包含头部、底部、侧边栏等通用元素,而请求处理的原始内容...

    vue中typescript装饰器的使用方法超实用教程

    在Vue中,装饰器(Decorator)是一种元编程的语法特性,用于扩展和修改类的行为。以下将详细介绍在Vue中如何使用typescript的装饰器。 1. **数据声明**: TypeScript允许我们在Vue组件中使用`public`和`private`...

    10-基于装饰器的日志写入器(1).html

    装饰器模式( Decorator ) 代理模式( Proxy ) 外观模式( Facade ) 桥接模式( Bridge ) 组合模式( Composite ) 享元模式( Flyweight ) 行为型模式包含了: 策略模式( Strategy ) 模板方法模式( ...

    详解Python中最难理解的点-装饰器

    使用`@decorator`语法糖,可以更简洁地应用装饰器,如`@my_new_decorator`等价于`another_stand_alone_function = my_new_decorator(another_stand_alone_function)`。 四、使用装饰器的原因 装饰器的主要优势在于...

    使用python装饰器计算函数运行时间的实例

    在上述代码中,`decorator`是一个装饰器,它包装了`function_to_be_decorated`函数。当`function_to_be_decorated`被调用时,实际上调用的是`decorator`返回的`wrapper`函数。 接下来是实例代码部分。首先,定义了...

    Interior-Decorator

    例如,在前端开发中,我们可能有一个基础的HTML元素,然后通过装饰器来增加事件监听、动画效果或者数据绑定等功能,而无需修改原始元素的代码。 在"Interior-Decorator"项目中,主文件夹"Interior-Decorator-main...

    SiteMesh教程.pdf

    同时,SiteMesh允许自定义装饰器映射器(Decorator Mappers),用于控制哪些页面使用哪个装饰器,以及如何解析页面内容。 7. 请求和响应处理: SiteMesh拦截请求和响应,它能够处理页面的request和response,对响应...

    Python中装饰器兼容加括号和不加括号的写法详解

    ### Python中装饰器兼容加括号和不加括号的写法详解 在Python编程语言中,装饰器是一种强大的工具,用于修改或增强其他函数的行为而无需改变其源代码。装饰器可以接受参数来定制其行为,这为用户提供了一种灵活的...

    angular-decorators:用于Angular项目的TS装饰器实用程序

    **Angular装饰器:用于Angular项目的TS装饰器实用程序** Angular框架充分利用了TypeScript的装饰器功能,这是一种元编程机制,可以方便地在类声明、属性、方法或参数上添加元数据和行为。这个名为"angular-...

    页面装饰器(sitemesh)实例源代码

    页面装饰器(Sitemesh)是一种广泛用于Web应用的开源框架,它的主要功能是提供页面布局和装饰功能,使得开发者可以方便地实现统一的页面头部、尾部、侧边栏等元素,从而提高网站的整体风格一致性。在本实例中,我们...

    FIT Decorator-开源

    FIT Decorator的出现是为了增强和扩展FIT的功能,特别是通过引入装饰器模式。 装饰器模式是一种设计模式,它允许在不修改原有对象的基础上动态地给对象添加新的行为或属性。在FIT Decorator中,这种模式被用来修饰...

    Python的装饰器使用详解

    3. **`@`语法糖**:在Python中,`@decorator`的语法实际上是在函数定义前应用装饰器。这等价于将原函数作为参数传递给装饰器函数,然后将装饰器返回的新函数赋值回原函数名。例如,`@make_bold`装饰器的应用可以转换...

    sitemesh的使用方法demo

    Sitemesh 的核心概念是装饰器(Decorator),它是一种模板技术,能够将内容页面与装饰模板相结合,从而实现页面的统一风格。 **安装与配置 Sitemesh** 1. **添加依赖**: 首先,你需要在你的项目中引入 Sitemesh 的...

    sitemesh简单教程页面装配器

    Sitemesh是一款用于Web应用中的页面布局管理工具,它通过采用装饰器(Decorator)设计模式,实现了对Web页面布局的灵活管理和重用。传统的Web开发中,开发者往往需要在每个JSP页面中不断地使用`include`标签来嵌入...

Global site tag (gtag.js) - Google Analytics