SiteMesh3简介及使用

Love The Way You Lie 2021-10-24 05:16 360阅读 0赞

所属专栏： [Java开发经验记录][Java]

最近项目用到SiteMesh3，研究学习一段时间后决定写篇博文来记录收获。

# SiteMesh #

*  [SiteMesh][]
    
     *  [介绍][Link 1]
     *  [工作原理][Link 2]
     *  [配置及使用][Link 3]
        
         *  [下载][Link 4]
         *  [1添加maven依赖][1_maven]
         *  [2webxml中添加SiteMesh过滤器][2webxml_SiteMesh]
         *  [3创建一个装饰页面decorator page][3_decorator page]
         *  [4创建一个被装饰页面content page][4_content page]
         *  [5配置][5]
            
             *  [1XML方式][1XML]
             *  [1Java方式][1Java]
     *   *  [6查看效果][6]
         *  [7高级配置][7]
            
             *  [1XML形式配置][1XML 1]
             *  [2Java形式配置][2Java]
         *  [自定义标签的使用][Link 5]
            
             *  [装饰页面decorator][decorator]
             *  [内容页面content][content]
             *  [效果][Link 6]

--------------------

## **介绍** ##

SiteMesh 是一个网页布局和修饰的框架，利用它可以将网页的内容和页面结构分离，以达到页面结构共享的目的。

Sitemesh是由一个基于Web页面布局、装饰以及与现存Web应用整合的框架。它能帮助我们在由大量页面构成的项目中**创建一致的页面布局和外观**，如一致的导航条，一致的banner，一致的版权，等等。**它不仅仅能处理动态的内容**，如jsp，php，asp等产生的内容，**它也能处理静态的内容**，如htm的内容，使得它的内容也符合你的页面结构的要求。甚至于它能将HTML文件象include那样将该文件作为一个面板的形式嵌入到别的文件中去。所有的这些，都是GOF的Decorator模式的最生动的实现。尽管它是由java语言来实现的，但它能与其他Web应用很好地集成。

下图是SiteMesh的结构图

![这里写图片描述][SouthEast]

--------------------

## **工作原理** ##

SiteMesh是基于Servlet的filter的，即过滤流。它是通过截取response，并进行装饰后再交付给客户。

其中涉及到两个名词： **装饰页面**(decorator page)和 **被装饰页面**(Content page), 即 SiteMesh通过对Content Page的装饰，最终得到页面布局和外观一致的页面，并返回给客户。

**运行SiteMesh3至少需要：**

*  JDK 1.5
 *  一个Servlet 2.5兼容容器
 *  SiteMesh运行时库

--------------------

## **配置及使用** ##

### **下载** ###

wiki上的下载链接为：[http://wiki.sitemesh.org/wiki/display/sitemesh3/Home][http_wiki.sitemesh.org_wiki_display_sitemesh3_Home]

GitHub上3.0.1版本下载地址为（含demo）：[https://github.com/sitemesh/sitemesh3/releases/tag/3.0.1][https_github.com_sitemesh_sitemesh3_releases_tag_3.0.1]

--------------------

### **1、添加maven依赖** ###

pom.xml文件添加以下依赖：

<dependency> <groupId>org.sitemesh</groupId> <artifactId>sitemesh</artifactId> <version>3.0.1</version> </dependency>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

--------------------

### **2、web.xml中添加SiteMesh过滤器** ###

<web-app> ... <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> </web-app>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15

--------------------

### **3、创建一个“装饰页面”(decorator page)** ###

该装饰页面包含Web应用程序中常见得布局和样式，它是一个包含`<title>`，`<head>`和`<body>`元素的模板。它至少要包含：

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

标签`<sitemesh:write property='...'/>`将会被SiteMesh重写，用来包含从“被装饰页面”(content page)中提取到的值。可以从被装饰页面”(content page)中提取更多的属性，并且可以自定义规则 。  
在WEB应用程序中创建/decorator.html，其中包含：

<html> <head> <title>SiteMesh example: <sitemesh:write property='title'>Title goes here</sitemesh:write></title> <style type='text/css'> body { font-family: arial, sans-serif; background-color: #ffffcc; } h1, h2, h3, h4 { text-align: center; background-color: #ccffcc; border-top: 1px solid #66ff66; } .disclaimer { text-align: center; border-top: 1px solid #cccccc; margin-top: 40px; color: #666666; font-size: smaller; } </style> <sitemesh:write property='head'/> </head> <body> <h1 class='title'>SiteMesh example site: <sitemesh:write property='title'>Title goes here</sitemesh:write></h1> <sitemesh:write property='body'>Body goes here. Blah blah blah.</sitemesh:write> <div class='disclaimer'>Site disclaimer. This is an example.</div> <div class='navigation'> <b>Examples:</b> [<a href="./">Static example</a>] [<a href="demo.jsp">Dynamic example</a>] </div> </body> </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25

在这个例子中，装饰页面是一个静态的.html文件，但是如果你希望用动态页面，那么可以使用诸如JSP，FreeMarker等技术。

### **4、创建一个“被装饰页面”(content page)** ###

<html> <head> <title>Hello World</title> </head> <body> <p>Well hello there, fine world.</p> <p>And so concludes this <b>SiteMesh</b> example.</p> <h2>How it works</h2> <ul> <li>This page (<code>/index.html</code>) contains vanilla HTML content.</li> <li>SiteMesh is configured (in <code>/WEB-INF/web.xml</code>) to apply a decorator to all paths (<code>/*</code>).</li> <li>The decorator (<code>/decorator.html</code>) contains the common look and feel that is applied to the site.</li> </ul> </body> </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18

像装饰页面一样，被装饰页面可以是静态文件，也可以是由Servlet引擎动态生成（例如JSP）。

--------------------

### **5、配置** ###

SiteMesh配置支持两种方法 : **XML**或**Java**。

#### **5.1、XML方式** ####

在工程的 /WEB-INF/sitemesh3.xml中添加以下设置：

*  1
 *  2
 *  3

#### **5.1、Java方式** ####

# #

要使用Java的配置方式，自定义的SitMesh过滤器需要继承`org.sitemesh.config.ConfigurableSiteMeshFilter`并重写`applyCustomConfiguration(SiteMeshFilterBuilder builder)`方法。  
具体如下：

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13

**既然使用Java配置方式，就不再需要sitemesh3.xml文件，但是在web.xml中要使用自己重写的SiteMesh过滤器。**  
即web.xml的设置改成如下所示：

<filter> <filter-name>sitemesh</filter-name> <filter-class>com.wangxiaoan1234.MySiteMeshFilter</filter-class> </filter> <filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

--------------------

### **6、查看效果** ###

本地查看内容页面.html效果如下：  
![这里写图片描述][SouthEast 1]

通过SiteMesh3装饰后访问效果如下：

![这里写图片描述][SouthEast 2]

查看该效果页面源代码如下：

<html> <head> <title>SiteMesh example: Hello World (Dynamic)</title> <style type='text/css'> body { font-family: arial, sans-serif; background-color: #ffffcc; } h1, h2, h3, h4 { text-align: center; background-color: #ccffcc; border-top: 1px solid #66ff66; } .disclaimer { text-align: center; border-top: 1px solid #cccccc; margin-top: 40px; color: #666666; font-size: smaller; } </style> <style type='text/css'> .date { font-weight: bold; padding: 10px; font-size: larger; } </style> </head> <body> <h1 class='title'>SiteMesh example site: Hello World (Dynamic)</h1> <p>This page demonstrates that dynamic content can be decorated in the same way as static content.</p> <p>This is a simple JSP that shows the date and time on the server is now:</p> <div class='date'>Tue Aug 15 14:25:41 CST 2017</div> <p>Of course, with SiteMesh you are not limited to JSP. Because it's a Servlet Filter, both content and decorators can be generated by any technology in your ServletEngine, including: static files, JSP, Velocity, FreeMarker, JSF, MVC frameworks, JRuby.... you get the point.</p> <div class='disclaimer'>Site disclaimer. This is an example.</div> <div class='navigation'> <b>Examples:</b> [<a href="./">Static example</a>] [<a href="demo.jsp">Dynamic example</a>] </div> </body> </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40

--------------------

### **7、高级配置** ###

#### **7.1、XML形式配置** ####

sitemesh3.xml文件如下：

<?xml version="1.0" encoding="UTF-8"?> <sitemesh>  <mime-type>text/html</mime-type> <mime-type>application/vnd.wap.xhtml+xml</mime-type> <mime-type>application/xhtml+xml</mime-type>  <mapping decorator="/default-decorator.html"/>  <mapping path="/admin/*" decorator="/another-decorator.html"/> <mapping path="/*.special.jsp" decorator="/special-decorator.html"/>  <mapping> <path>/articles/*</path> <decorator>/decorators/article.html</decorator> <decorator>/decorators/two-page-layout.html</decorator> <decorator>/decorators/common.html</decorator> </mapping>  <mapping path="/login.htm" exclue="true" />  <content-processor> <tag-rule-bundle class="com.something.CssCompressingBundle" /> <tag-rule-bundle class="com.something.LinkRewritingBundle"/> </content-processor> </sitemesh>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31

#### **7.2、Java形式配置** ####

对应Java配置如下(同理还是在web.xml中引用自己的SiteMesh过滤器)：

package com.wangxiaoan1234; import org.sitemesh.builder.SiteMeshFilterBuilder; import org.sitemesh.config.ConfigurableSiteMeshFilter; public class MySiteMeshFilter extends ConfigurableSiteMeshFilter { @Override protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) { //默认装饰器，当下面的路径都不匹配时，启用该装饰器进行装饰 builder.addDecoratorPath("/*", "/decorator.html") //添加更多的 mime 类型 .setMimeTypes("text / html","application / xhtml + xml","application / vnd.wap.xhtml + xml") //不同匹配路径采用不同的装饰页面 .addDecoratorPath("/admin/*", "/another-decorator.html") .addDecoratorPath("/*.special.jsp", "/special-decorator.html") //一个匹配路径同时采用不同的装饰页面 .addDecoratorPaths("/articles/*", "/decorators/article.html", "/decoratos/two-page-layout.html", "/decorators/common.html") //满足该匹配路径将不被装饰 .addExcludedPath("/javadoc/*") //添加自定义标签 .addTagRuleBundle(new CssTagRuleBundle()); } }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26

**其中自定义标签类格式如下：**

package com.wangxiaoan1234; import org.sitemesh.SiteMeshContext; import org.sitemesh.content.ContentProperty; import org.sitemesh.content.tagrules.TagRuleBundle; import org.sitemesh.content.tagrules.html.ExportTagToContentRule; import org.sitemesh.tagprocessor.State; /** * 自定义标签 */ public class CssTagRuleBundle implements TagRuleBundle { @Override public void install(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { defaultState.addRule("my-css", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("my-css"), false)); defaultState.addRule("my-footer", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("my-footer"), false)); } @Override public void cleanUp(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { } }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25

在web.xml中还可以指定请求来源：

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10

`<dispatcher>`这个元素有四个可能的值：即`REQUEST`、`FORWARD`、`INCLUDE`和`ERROR`，这个元素使得filter将会作用于直接从客户端过来的request，通过forward过来的request，通过include过来的request和通过`<error-page>`过来的request。如果没有指定任何`<dispatcher>`元素，默认值是`REQUEST`。

### **自定义标签的使用：** ###

#### **装饰页面(decorator)：** ####

<html> <head> <title>SiteMesh example: <sitemesh:write property='title'>Title goes here</sitemesh:write></title> <style> <sitemesh:write property='my-css'/> </style> <sitemesh:write property='head'/> </head> <body> <div> <p>pppppppppppppppppppppp</p> </div> <siteMesh:write property='my-footer'/> </body> </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15

#### **内容页面(content)：** ####

<html> <head> <title>Hello World</title> <my-css> div p { color : red; } </my-css> </head> <body> <p>Well hello there, fine world.</p> <p>And so concludes this <b>SiteMesh</b> example.</p> <my-footer> <div style="text-align: center"> ©wangxiaoan1234.com </div> </my-footer> </body> </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19

#### **效果：** ####

![这里写图片描述][SouthEast 3]

**效果页面源码：**

<html> <head> <title>SiteMesh example: Hello World</title> <style> div p { color : red; } </style> </head> <body> <div> <p>pppppppppppppppppppppp</p> </div> <div style="text-align: center"> ©wangxiaoan1234.com </div> </body> </html>

转载于:https://www.cnblogs.com/wanBean/p/10715062.html

[Java]: https://blog.csdn.net/column/details/16662.html
[SiteMesh]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#sitemesh
[Link 1]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E4%BB%8B%E7%BB%8D
[Link 2]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86
[Link 3]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E9%85%8D%E7%BD%AE%E5%8F%8A%E4%BD%BF%E7%94%A8
[Link 4]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E4%B8%8B%E8%BD%BD
[1_maven]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#1%E6%B7%BB%E5%8A%A0maven%E4%BE%9D%E8%B5%96
[2webxml_SiteMesh]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#2webxml%E4%B8%AD%E6%B7%BB%E5%8A%A0sitemesh%E8%BF%87%E6%BB%A4%E5%99%A8
[3_decorator page]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#3%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E8%A3%85%E9%A5%B0%E9%A1%B5%E9%9D%A2decorator-page
[4_content page]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#4%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E8%A2%AB%E8%A3%85%E9%A5%B0%E9%A1%B5%E9%9D%A2content-page
[5]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#5%E9%85%8D%E7%BD%AE
[1XML]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#51xml%E6%96%B9%E5%BC%8F
[1Java]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#51java%E6%96%B9%E5%BC%8F
[6]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#6%E6%9F%A5%E7%9C%8B%E6%95%88%E6%9E%9C
[7]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#7%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE
[1XML 1]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#71xml%E5%BD%A2%E5%BC%8F%E9%85%8D%E7%BD%AE
[2Java]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#72java%E5%BD%A2%E5%BC%8F%E9%85%8D%E7%BD%AE
[Link 5]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%BF%E7%94%A8
[decorator]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E8%A3%85%E9%A5%B0%E9%A1%B5%E9%9D%A2decorator
[content]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E5%86%85%E5%AE%B9%E9%A1%B5%E9%9D%A2content
[Link 6]: https://blog.csdn.net/wangxiaoan1234/article/details/77017546#%E6%95%88%E6%9E%9C
[SouthEast]: /images/20211023/d054d1453a8646a3a7e41ded74f47e43.png
[http_wiki.sitemesh.org_wiki_display_sitemesh3_Home]: http://wiki.sitemesh.org/wiki/display/sitemesh3/Home
[https_github.com_sitemesh_sitemesh3_releases_tag_3.0.1]: https://github.com/sitemesh/sitemesh3/releases/tag/3.0.1
[SouthEast 1]: /images/20211023/b5e8477d1d804acdb16e1e9bbb09006a.png
[SouthEast 2]: /images/20211023/83541cc8d4374eeaa38452e33b199193.png
[SouthEast 3]: /images/20211023/ea84e3f80ec94b45bb867328883d5be8.png