在以前的开发过程中,我常常遭遇这样的经历,要完成某个任务,首先由页面设计人员来设计页面原型,再交给程序员进行处理。很多情况下,我们总是要整理一个完整的页面。事实上,我们做了太多的重复工作。很多页面的结构是完全相同的,页面的头,尾,导航菜单都是相同的,只是主体内容部分不同而已。重复整理这些相同的部分是一个不小的负担,我们很自然的想到,要是这些页面元素能够复用就会省下很多事。
Struts 内置了Tiles,利用它可以很好复用页面,使用起来就像我们复用类一样。
使用Tiles
在以前的开发过程中,我常常遭遇这样的经历,要完成某个任务,首先由页面设计人员来设计页面原型,再交给程序员进行处理。很多情况下,我们总是要整理一个完整的页面。事实上,我们做了太多的重复工作。很多页面的结构是完全相同的,页面的头,尾,导航菜单都是相同的,只是主体内容部分不同而已。重复整理这些相同的部分是一个不小的负担,我们很自然的想到,要是这些页面元素能够复用就会省下很多事。
Struts 内置了Tiles,利用它可以很好复用页面,使用起来就像我们复用类一样。
使用Tiles
1.如果页面内容对页面进行划分,一个页面可以分成很多块,如header , footer , menu, content,等,如果新闻门户网站,content可以进一步细分,footall, entertainment, 等。
这里仅仅作演示,我将页面分header , footer ,content。
展开Configuration Files,打开tile-defs.xml,定义一个最本的页面模板,其它页面在这个基础上进行扩充(这有点像定义一个基类,其它则子类继承基类,以获得基类的特性)。
复制
﹤definition name=".mainLayout" path="/layouts/default.jsp">
﹤put name="title" value="Struts Demo Application" />
﹤put name="header" value="/layouts/header.jsp" />
﹤put name="footer" value="/layouts/footer.jsp" />
﹤put name="body" value=".portal.body" />
﹤/definition>
|
其它页面以这个为基础,继承这个模板内容,可以重新定义title和body内容。
复制
﹤definition name="logonPage" extends=".mainLayout">
﹤put name="title" value="Logon Page" />
﹤put name="body" value="/layouts/logonBody.jsp" />
﹤/definition>
﹤definition name="registerPage" extends=".mainLayout">
﹤put name="title" value="New Registeration " />
﹤put name="body" value="/layouts/registerBody.jsp" />
﹤/definition>
﹤definition name="indexPage" extends=".mainLayout">
﹤put name="title" value="Home Page " />
﹤put name="body" value="/layouts/indexBody.jsp" />
﹤/definition>
﹤definition name="registeredSuccessPage" extends=".mainLayout">
﹤put name="title" value="Registered Successfully" />
﹤put name="body" value="/layouts/registerSuccessBody.jsp" />
﹤/definition>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31.
|
事实,这和Java中类的继承非常类似。
2.相应的jsp页面,在Web pages下新建一个layouts目录。默认模板(即default.jsp)内容如下。
复制
﹤html>
﹤head>
﹤meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
﹤title>﹤tiles:getAsString name="title"/>﹤/title>
﹤/head>
﹤body>
﹤div id="header">﹤tiles:insert attribute="header"/>﹤/div>
﹤div id="content">﹤tiles:insert attribute="body"/>﹤/div>
﹤div id="footer">﹤tiles:insert attribute="footer"/>﹤/div>
﹤/body>
﹤/html>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.
|
其中,getAsString表示title以一个字符串的形式插入模板。
header.jsp中定义了页面标题。
复制
﹤%@page contentType="text/html"%>
﹤%@page pageEncoding="UTF-8"%>
﹤div>﹤h1>Struts Demo Application﹤/h1>﹤/div>
|
footer.jsp内容版本声明,如下:
复制
﹤%@page contentType="text/html"%>
﹤%@page pageEncoding="UTF-8"%>
﹤div>Copyright 2007© hantsy<hantsy@tom.com>﹤/div>
|
其它页面,各复制一份到layouts目录中,页面只留body之间的内容。
如indexBody.jsp内容如下:
复制
﹤%@page contentType="text/html"%>
﹤%@page pageEncoding="UTF-8"%>
﹤%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
﹤%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
﹤%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
﹤h1>Home Page﹤/h1>
Welcome,
﹤logic:notPresent name="username" scope="session">
Guest !﹤html:link forward="newLogon">Logon ﹤/html:link> or
﹤html:link forward="newRegister">Register Now...﹤/html:link>
﹤/logic:notPresent>
﹤logic:present name="username" scope="session">
﹤bean:write name="username" scope="session"/>,
﹤html:link forward="logout">Log Out..﹤/html:link>
﹤/logic:present>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29.
|
3.修改Struts配置文件,将所有jsp文件路径替换成tile配置文件中定义的名称。
复制
﹤action-mappings>
﹤action path="/logout" type="com.myapp.web.LogoutAction"/>
﹤action input="registerPage" name="UserForm" path="/register" scope="session" type="com.myapp.web.RegisterAction">
﹤forward name="success" path="registeredSuccessPage"/>
﹤/action>
﹤action input="logonPage" name="UserForm" path="/logon" scope="session" type="com.myapp.web.LogonAction"/>
﹤action path="/index" forward="indexPage"/>
﹤action path="/newLogon" forward="logonPage"/>
﹤action path="/newRegister" forward="registerPage"/>
﹤/action-mappings>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
|
值得注意的是,使用Tile必须的两个最重要的配置,NetBeans在创建项目时已经帮我们自动完成了。
一个是注册Tile插件,打开Struts配置文件struts-config.xml我们就可以看到。
复制
﹤plug-in className="org.apache.struts.tiles.TilesPlugin" >
﹤set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" />
﹤set-property property="moduleAware" value="true" />
﹤/plug-in>
|
另外一个是,重新定义controller,将processorClass改成使用 org.apache.struts.tiles.TilesRequestProcessor。
﹤controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>
4.运行项目进行测试。
使用Sitemesh
Sitemesh是www.opensymphony.org带来的另一款优秀的页面布局工具。它不专门针对Struts ,甚至其它语言的web程序也可以使用它。
它使用Decorator模式达到预期效果。这里可以将页面分为两类,decorator(修饰)和decoratored(被修饰)。这就好比有一个相框和各种不同可以用来变换的相片,当相框中放入不同的相片,就得到不同的视觉效果。
1.下载并安装Sitemesh。
从www.opensymphony.org下载最新的sitemesh 2.3,解压到硬盘。
将﹤sitemesh>/lib下的common- collections.jar,freemarker.jar, velocity-deps-1.3.1.jar,velocity-tools-view-1.3.1.jar 和﹤sitemesh>/dist下sitemesh-2.3.jar添加到项目Libraries中。
将﹤sitemesh>\src\etc\tld\jsp1.2的sitemesh-decorator.tld和sitemesh-page.tld复制一份到项目的web/WEB-INF/下面。
2.配置sitemesh。
从configurations中打开web.xml,定义Sitemesh Filter。
复制
﹤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>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
|
复制
在下面的jsp-config中添加sitemesh的taglib定义,在最新的jsp 2.0标准,这不是必须的。
复制
﹤taglib>
﹤taglib-uri>sitemesh-page﹤/taglib-uri>
﹤taglib-location>
/WEB-INF/lib/sitemesh-page.tld
﹤/taglib-location>
﹤/taglib>
﹤taglib>
﹤taglib-uri>sitemesh-decorator﹤/taglib-uri>
﹤taglib-location>
/WEB-INF/lib/sitemesh-decorator.tld
﹤/taglib-location>
﹤/taglib>
1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.
在web/WEB-INF在定义两个基本的sitemesh配置文件,这两个文件可以sitemesh包复制过来。
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
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" />
﹤/page-parsers>
﹤decorator-mappers>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper">
﹤param name="property.1" value="meta.decorator" />
﹤param name="property.2" value="decorator" />
﹤/mapper>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">
﹤/mapper>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">
﹤param name="match.MSIE" value="ie" />
﹤param name="match.Mozilla [" value="ns" />
﹤param name="match.Opera" value="opera" />
﹤param name="match.Lynx" value="lynx" />
﹤/mapper>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">
﹤param name="decorator" value="printable" />
﹤param name="parameter.name" value="printable" />
﹤param name="parameter.value" value="true" />
﹤/mapper>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">
﹤param name="decorator" value="robot" />
﹤/mapper>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">
﹤param name="decorator.parameter" value="decorator" />
﹤param name="parameter.name" value="confirm" />
﹤param name="parameter.value" value="true" />
﹤/mapper>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper">
﹤/mapper>
﹤mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
﹤param name="config" value="${decorators-file}" />
﹤/mapper>
﹤/decorator-mappers>
﹤/sitemesh>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77.
|
decorators.xml中定义具体的decortor应用规则。
复制
﹤?xml version="1.0" encoding="ISO-8859-1"?>
﹤decorators defaultdir="/decorators">
﹤!-- Any urls that are excluded will never be decorated by Sitemesh -->
﹤excludes>
﹤pattern>/exclude.jsp﹤/pattern>
﹤pattern>/exclude/*﹤/pattern>
﹤/excludes>
﹤decorator name="main" page="main.jsp">
﹤pattern>/*﹤/pattern>
﹤/decorator>
﹤decorator name="panel" page="panel.jsp"/>
﹤/decorators>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
|
3.定义Decorator。
在Web Pages下新建一个目录,命名为decorators,在这个新建的目录中新建main.jsp,作为主要的decorator。
复制
﹤%@page contentType="text/html"%>
﹤%@page pageEncoding="UTF-8"%>
﹤%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
﹤%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>
﹤html>
﹤head>
﹤title>Demo-﹤decorator:title default="Struts Sitemesh Demo..." />﹤/title>
﹤!--link href="﹤%= request.getContextPath() %>/decorators/main.css" rel="stylesheet" type="text/css"-->
﹤decorator:head />
﹤/head>
﹤body>
﹤div>
﹤table width="100%">
﹤tr>
﹤td id="pageTitle">
﹤h1> ﹤decorator:title />﹤/h1>
﹤/td>
﹤/tr>
﹤tr>
﹤td valign="top" height="100%">
﹤decorator:body />
﹤/td>
﹤/tr>
﹤tr>
﹤td id="footer">
﹤page:applyDecorator page="/footer.html" name="panel" />
﹤/td>
﹤/tr>
﹤/table>
﹤/div>
﹤/body>
﹤/html>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63.
|
另外再定义一个panel。
复制
﹤%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
﹤p>
﹤table width="100%" border=0 cellpadding=0 cellspacing=0>
﹤tr>
﹤td class="panelBody">
﹤decorator:body />
﹤/td>
﹤/tr>
﹤/table>
﹤/p>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
|
文件中,decorator:title和decorator:body定义要被替换的内容位置,应用之后,分别替换成decoratored页面的title和body标签中间的内容。
下面将Web Pages下的页面恢复成原貌。如index.jsp内容如下。
复制
﹤%@page contentType="text/html"%>
﹤%@page pageEncoding="UTF-8"%>
﹤%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
﹤%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
﹤%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
﹤html>
﹤head>﹤title>HomePage ﹤/title>﹤/head>
﹤body>
Welcome,
﹤logic:notPresent name="username" scope="session">
Guest !﹤html:link forward="newLogon">Logon ﹤/html:link> or
﹤html:link forward="newRegister">Register Now...﹤/html:link>
﹤/logic:notPresent>
﹤logic:present name="username" scope="session">
﹤bean:write name="username" scope="session"/>,
﹤html:link forward="logout">Log Out..﹤/html:link>
﹤/logic:present>
﹤/body>
﹤/html>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37.
|
同时还要修改Struts定义文件,将上一节中tiles定义的page名称全部还要成具体的页面路径。
复制
﹤action-mappings>
﹤action path="/logout" type="com.myapp.web.LogoutAction"/>
﹤action input="/register.jsp"
name="UserForm"
path="/register"
scope="session"
type="com.myapp.web.RegisterAction">
﹤forward name="success" path="/registerSuccess.jsp"/>
﹤/action>
﹤action input="/logon.jsp"
name="UserForm"
path="/logon"
scope="session"
type="com.myapp.web.LogonAction"/>
﹤action path="/Welcome" forward="/welcomeStruts.jsp"/>
﹤action path="/index" forward="/index.jsp"/>
﹤action path="/newLogon" forward="/logon.jsp"/>
﹤action path="/newRegister" forward="/register.jsp"/>
﹤/action-mappings>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37.
|
另外还要禁用tiles,以免和sitemesh发生冲突。注释掉controller定义,让Struts使用默认的requestProcessor。
【编辑推荐】
NetBeans 6.7 RC2发布 正式版月底出炉
Eclipse还是Netbeans
使用Netbeans操作MySQL数据库
Ubuntu9.04下的Netbeans6.5.1字体无法抗锯齿的解决办法
Netbeans6.7平台Scala插件V1版发布