`
seniu8
  • 浏览: 8247 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

优雅的解决web布局的问题 -- sitemesh的使用

阅读更多
webwork的开发团队opensymphony提供了一种优雅的解决页面布局的方法sitemesh。
sitemesh应用Decorator模式,用filter截取request和response,把页面组件head,content,banner
结合为一个完整的视图。通常我们都是用include标签在每个jsp页面中来不断的包含各种header,
stylesheet, scripts and footer,现在,在sitemesh的帮助下,我们可以开心的删掉他们了

下边是创建一个简单实例的步骤:
1,新建一个标准的web工程叫sitemesh
在WebRoot下新建一个index.jsp,内容如下

1  <% @ page contentType = " text/html; charset=utf-8 " %>
2  this  is index.jsp.
3 it ' s a simple page
接着在webRoot下新建几个目录
style2
login
shared
在login下建立目录style3
然後把index.jsp分别复制到style2,login/style3,shared下
现在访问下边的链接:
http://localhost:8080/sitemesh/index.jsp
http://localhost:8080/sitemesh/style2/index.jsp
http://localhost:8080/sitemesh/login/style3/index.jsp
http://localhost:8080/sitemesh/shared/index.jsp
得到的结果是一样的,那我们如何让这四个相同的index.jsp有不同的样式呢。除了每个里边加入include
还有个解决办法,就是sitemesh
2,在opensymphony.sourceforge.net下载sitemesh.jar ,sitemesh-decorator.tld,sitemesh-page.tld
三个文件。
复制sitemesh.jar到WEB-INF/lib下,
复制sitemesh-decorator.tld,sitemesh-page.tld到WEB-INF下
把下边这部分加入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>

<taglib>
  <taglib-uri>sitemesh-decorator</taglib-uri>
  <taglib-location>/WEB-INF/sitemesh-decorator.tld</taglib-location>
</taglib>

<taglib>
  <taglib-uri>sitemesh-page</taglib-uri>
  <taglib-location>/WEB-INF/sitemesh-page.tld</taglib-location>
</taglib>
--------------------------------------------------------------------------------
在WEB-INF下建立一个decorators.xml,内容如下
excludes代表不使用的部分
其它三个是匹配url,使用style
--------------------------------------------------------------------------
<decorators defaultdir="/decorators">
    <excludes>
        <pattern>/shared/*</pattern>   
    </excludes>
    <decorator name="style1" page="style1.jsp">
        <pattern>/*</pattern>
    </decorator>
    <decorator name="style2" page="style2.jsp">
        <pattern>/style2/*</pattern>
    </decorator>
   
    <decorator name="style3" page="style3.jsp">
        <pattern>/*/style3/*</pattern>
    </decorator>
</decorators>
--------------------------------------------------------------------------
在WebRoot下新建一个目录decorators
然後在下边建立三个jsp文件,内容如下
------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>
<html>
  <head>
    <title><decorator:title default="装饰器页面..." /></title>
    <decorator:head />
  </head>
  <body>
    <p><font color="red">this is style2's header</font></p>
    <hr>
    <decorator:body />
    <hr>
    <p><font color="red">this is style1's footer</font></p>
  </body>
</html>
------------------------------------------------------------------

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>

<html>
  <head>
    <title><decorator:title default="装饰器页面..." /></title>
    <decorator:head />
  </head>
  <body>
    <p><font color="green">this is style2's header</font></p>
    <hr>
    <decorator:body />
    <hr>
    <p><font color="green">this is style2's footer</font></p>
  </body>
</html>

------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="sitemesh-decorator" prefix="decorator" %>

<html>
  <head>
    <title><decorator:title default="装饰器页面..." /></title>
    <decorator:head />
  </head>
  <body>
    <p><font color="blue">this is style3's header</font></p>
    <hr>
    <decorator:body />
    <hr>
    <p><font color="blue">this is style3's footer</font></p>
  </body>
</html>
------------------------------------------------------------------
再次访问
http://localhost:8080/sitemesh/index.jsp
http://localhost:8080/sitemesh/style2/index.jsp
http://localhost:8080/sitemesh/login/style3/index.jsp
http://localhost:8080/sitemesh/shared/index.jsp
看到变化了吧。这只是个简单的展示,仔细思考一下你的需求,你能作出更好的布局方式。
sitemesh真不错。重要是学习简单20分种就搞定了
分享到:
评论

相关推荐

    sitemesh入门demo

    - 在`sitemesh-demo01`项目中,可以看到一个简单的例子,包括装饰器模板、被装饰的页面和Web应用的配置。通过运行这个示例,你可以直观地了解Sitemesh如何工作。 7. **扩展与优化** - Sitemesh支持自定义装饰策略...

    sitemesh简单demo

    **正文** `sitemesh` 是一个开源的网页布局和装饰框架,主要用来帮助开发者实现网站的页面统一布局,提升网站...这将有助于你在实际项目中更加熟练地运用 sitemesh,为你的 Web 应用提供统一的页面布局和优雅的设计。

    sitemesh

    5. **与Web框架的集成**:sitemesh可以方便地与常见的Java Web框架(如Spring MVC、Struts等)集成,提供统一的页面装饰解决方案。 6. **自定义装饰逻辑**:开发者可以通过实现自定义的Decorator类,添加特定的装饰...

    SiteMesh-SpringMVC-Mybatis

    SiteMesh、SpringMVC 和 Mybatis 是三个在Java Web开发中广泛应用的技术框架,它们共同构建了一个高效、可...同时,由于这三个框架都有活跃的社区支持,遇到问题时也更容易找到解决方案,进一步降低了项目的维护成本。

    struts2与sitemesh整合所需架包

    1. **引入依赖**:首先,在项目中添加Sitemesh和Struts2-Sitemesh-plugin的库。如果是Maven项目,可以在pom.xml中添加对应的依赖;如果是非Maven项目,需要将jar包添加到项目的类路径中。 2. **配置web.xml**:在...

    SiteMesh入门示例

    SiteMesh 是一个开源的 Web 应用程序框架,主要用于页面布局和装饰,它可以帮助开发者统一网站的外观和感觉,提供了一种优雅的方式来管理和装饰(或模板化)Web 应用程序的页面。在这个"SiteMesh入门示例"中,我们将...

    sitemesh-2.2.1.rar

    解压缩`sitemesh-2.2.1.rar`后,你将找到包含库文件、文档和其他资源的目录结构,按照官方文档的指引进行配置和部署即可开始使用。 总的来说,Sitemesh 2.2.1是一个强大的工具,可以帮助开发者提高Web应用程序的...

    sitemesh学习资料

    SiteMesh 是一个开源的网页布局和装饰框架,主要用于Java Web应用程序,它可以帮助开发者实现页面的统一外观和感觉,以及提供了一种优雅的方式来管理和装饰应用程序的各个页面。在本篇文章中,我们将深入探讨...

    struts2sitemesh-freemarker 源码

    在"struts2sitemesh-freemarker"源码中,我们可以深入理解它们是如何协同工作的: 1. **Struts2框架**:Struts2的核心是Action,它负责处理用户的请求。源码中包含了Action的实现,这些Action会处理HTTP请求,并...

    Struts2.0 与 sitemesh的例子

    Sitemesh则是一个网页布局和装饰框架,用于统一网站的外观和感觉,提供了一种优雅的方式来管理和装饰页面。将Struts2.0与Sitemesh结合,可以实现更高效的Web应用开发,提升用户体验。 Struts2.0 的核心特性包括: 1...

    Grails入门指南

    3. **ORM问题与解决方案**:针对ORM常见的性能瓶颈,如N+1查询问题,Grails提供了缓存策略和批量加载机制。 七、Grails的持续发展与更新 1. **Grails升级**:定期跟踪Grails框架的更新,利用官方文档或社区资源,...

Global site tag (gtag.js) - Google Analytics