posts - 0, comments - 0, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

[原]简单使用Sitemesh来组装Web页面

Posted on 2007-11-27 20:03 Magic.Yang 阅读(290) 评论(0)  编辑  收藏 所属分类: Java杂记
    Sitemesh是一个基于页面过滤器的框架,能提高页面的重用性和可维护性,效果则类似于HTML的iframe和JSP的include语句,但是它通过过滤器读取配置文件的信息即可,不必在每个被装饰的页面去编写引用语句。

使用步骤很简单:
1、将Sitemesh的jar包(目前版本是2.3)放到/WEB-INF/lib目录下.

2、在[web-app]/WEB-INF/目录下创建decorators.xml文件:


decorators.xml
<decorators>

</decorators>

3、在[web-app]/WEB-INF/目录下创建sitemesh.xml文件:

sitemesh.xml
<sitemesh>
    
<property name="decorators-file" value="/WEB-INF/decorators.xml" />
    
<excludes file="${decorators-file}" />

    
<page-parsers>
        
<parser content-type="text/html"
            class
="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
        
<parser content-type="text/html;charset=GBK"
            class
="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
    
</page-parsers>

    
<decorator-mappers>
        
<mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
            
<param name="config" value="${decorators-file}" />
        
</mapper>
    
</decorator-mappers>
</sitemesh>

4、在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>

5、在[web-app]下面创建decorators目录,在此目录下创建几个页面(可以使用各种不同视图技术):

main.jsp
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>
<html>
    <head>
        <decorator:head />
    </head>
  
    <body>
   
<div align="center">
    <table width="100%" height="100%" border="0">
       
<tr>
           
<td colspan="2" valign="top">
               
<page:applyDecorator page="/decorators/banner.jsp" name="banner" />
           
</td>
        </tr>
        <tr>
            <td width="15%">
               
<page:applyDecorator page="/decorators/menu.jsp" name="menu" />
            </td>
            <td width="85%">
                <decorator:body />
            </td>         
        </tr>
 
       
<tr>
           
<td colspan="2">                               
               
<page:applyDecorator page="/decorators/footer.jsp" name="footer" />        
           
</td>
       
</tr>
 
</table>
  </div>
  </body>
</html>


menu.jsp
<html>
<head></head>

<body>
<div align="center">
    This is menu.jsp
</div>
</body>
</html>


banner.jsp
<html>
<head></head>

<body>
<div align="center">
    This is banner.jsp
</div>
</body>
</html>


footer.jsp
<html>
<head></head>

<body>
<div align="center">
    This is footer.jsp
</div>
</body>
</html>

6、在[web-app]下创建一个被装饰的页面

index.jsp

<html>
<head>
    <title>index.jsp<title>
</head>

<body>
<div align="center">
    This is index.jsp
</div>
</body>
</html>

7、在decorator.xml中添加:
<decorators defaultdir="/decorators">

    <decorator name="main" page="main.jsp">
        <pattern>/*</pattern>
    </decorator>
    <decorator name="banner" page="banner.jsp"/>
    <decorator name="menu" page="menu.jsp"/>
    <decorator name="footer" page="footer.jsp"/>

</decorators>

这样,就能把各个页面简单地组装到一起了,以后所有的页面都会被组装成类似的布局,对于不需要这种布局装饰的页面(如:login.jsp),只需在decorator中添加:

<excludes>
        <pattern>/login.jsp</pattern>
</excludes>


只有注册用户登录后才能发表评论。


网站导航: