SiteMesh 3.0版本的简单使用

1. SiteMesh的简介

Sitemesh是由一个基于Web页面布局、装饰及与现存Web应用整合的框架。它能帮助我们再由大量页面工程的项目中创建一致的页面布局和外观，如一致的导航条、一致的banner、一致的版权等。它不仅能处理动态的内容，如JSP、PHP、ASP、CGI等产生的内容，还能处理静态的内容，比如 HTML的内容，使得它的内容也符合你的页面结构的要求。甚至它能像include那样将HTML文件作为一个面板的形式嵌入到别的文件中去。通常我们都是用include标签在每个jsp页面中来不断的包含各种header, stylesheet, scripts and footer，现在，在sitemesh的帮助下，我们可以开心的删掉他

2. SiteMesh的工作原理

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

其中涉及到两个名词：装饰页面(decorator page)和 “被装饰页面(Content page)" , 即 SiteMesh通过对Content Page的装饰，最终得到页面布局和外观一直的页面，

并返回给客户

sitemesh3.0运行环境需要：servlet2.5, JDK1.5 以上。

2.1 正常模式下的web访问流程

2.2 加入SiteMesh装饰的web访问流程

2.3 Sitemesh3.0的配置文件

跟2.X版本不同，siteMesh简化了配置，这里只需要在/WEB-INF目录下建立一个sitemesh3.xml文件

目录结构如下：

3. 搭建SiteMesh3环境

3.1 准备资源

下载sitemesh3.0 --> sitemesh-3.0.zip

将其中disk文件夹下的sitemesh-3.0-alpha-2.jar导入/WEB-INF/lib目录下

3.2 建立装饰页(decorator.jsp)

装饰页可以是静态文件，也可以是动态文件，这里用jsp来测试

在web根目录下建立decorators文件夹，用于存放装饰页，但这不是强制的，你可以任意定义

按 Ctrl+C 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>SiteMesh example: <sitemesh:write property='title'/></title> <style type='text/css'> /* Some 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; } .mainBody { padding: 10px; border: 1px solid #555555; } .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'/></h1> <div class='mainBody'> <sitemesh:write property='body'/> </div> <div class='disclaimer'>Site disclaimer. This is an example.</div> </body> </html>
按 Ctrl+C 复制代码

3.3 建立被装饰页(Content Page) -- hello.html

按 Ctrl+C 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello World</title> <meta name='description' content='A simple page'> </head> <body> <p>Hello <strong>world</strong>!</p> </body> </html>
按 Ctrl+C 复制代码

3.4 建立配置文件(sitemesh3.xml)

这里只做了一个简单的测试，建立一个decorator page 和 content page的映射关系

<?xml version="1.0" encoding="UTF-8"?>
< sitemesh>
<mapping path="/*" decorator="/decorators/decorator.jsp"/>

</sitemesh>

3.5 web.xml的配置

这里不再需要像2.X版本去配置taglib，所以是相当地简化的

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>SiteMesh3TestProject</display-name>
  <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>

4.示例运行结果

SiteMesh 3.0版本的简单使用

猜你喜欢