JSP页面的统一布局（Layout）与外观（Look and Feel）

来源：互联网发布：www.js lottery.com 编辑：程序博客网时间：2024/05/16 05:46

有两个页面first.jsp和second.jsp。

first.jsp

<html:html><body><table><tr><td><P align=”center”><B>Welcome</B></P></td></tr><tr><td><B>Body for First JSP</B></td></tr><tr><td><P align=”center”>Copyright © 2005-06</P></td></tr></table><body></html:html>

second.jsp

<html:html><body><table><tr><td><P align=”center”><B>Welcome</B></P></td></tr><tr><td><B>Body for Second JSP</B></td></tr><tr><td><P align=”center”>Copyright © 2005-06</P></td></tr></table><body></html:html>

可以看出其中header和footer部分明显重复编码了，而且不好维护，一旦要发生改变，两个页面都需要改。现在用jsp的include来改进：

把header和footer部分抽象出来，放进两个文件：

header.jsp

<P align=”center”>Welcome</P>

footer.jsp

<P align=”center”>Copyright © 2005-06</P>

然后在first.jsp和second.jsp中用include来静态（<%@include/>）/动态<jsp:include/>导入header和footer的内容：

first.jsp

<html:html><body><table><tr><td><jsp:include page="/Header.jsp" /></td></tr><tr><td><B>Body for First JSP</B></td></tr><tr><td><jsp:include page="/Footer.jsp" /></td></tr></table><body></html:html>

second.jsp

<html:html><body><table><tr><td><jsp:include page="/Header.jsp" /></td></tr><tr><td><B>Body for Second JSP</B></td></tr><tr><td><jsp:include page="/Footer.jsp" /></td></tr></table><body></html:html>

这样还存在一个问题，就是两个页面的layout重复编码了，不好维护。于是引入jsp template来解决这个问题，这里用Apache Titles作为示例：

layout.jsp

<html:html><body><table><tr><td><tiles:insert attribute="header" /></td></tr><tr><td><tiles:insert attribute="body" /></td></tr><tr><td><tiles:insert attribute="footer" /></td></tr></table><body></html:html>

然后所有的页面都共享这一个layout.jsp作为布局和外观的模板。

这种解决方案有很多，

除了Titles之外，JSP2.0本身也提供这样的模板功能，参考http://stackoverflow.com/questions/1296235/jsp-tricks-to-make-templating-easier
另外SiteMesh也是一个很好的装饰框架，参考http://www.allapplabs.com/tiles/tiles_web_page_layouts.htm
另外JSF的facelets/xhtml也提供了一种类似的模板机制，使得JSF2.0的用户可以不用借助第三方框架就可以统一布局和外观。
其他的框架？？？

这篇文章很好的阐述了本文的思路：http://www.allapplabs.com/tiles/tiles_web_page_layouts.htm

注：Layout可以借助HTML中的Frame/iFrame，Table，Div等方法来创建。