高雅的处理web布局的问题ITeye - 超凡娱乐

高雅的处理web布局的问题ITeye

2019年02月23日13时30分06秒 | 作者: 运凡 | 标签: 页面,布局,新建 | 浏览: 303

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 style2s header /font /p
  hr
  decorator:body /
  hr
  p font color="red" this is style1s 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 style2s header /font /p
  hr
  decorator:body /
  hr
  p font color="green" this is style2s 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 style3s header /font /p
  hr
  decorator:body /
  hr
  p font color="blue" this is style3s 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分种就搞定了
版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表超凡娱乐立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章