级别: 初级 Colin Yu (coliny@ca.ibm.com), 软件开发人员, IBM Toronto Lab Jane Fung (jcyfung@ca.ibm.com), 软件开发人员, IBM Toronto Lab
2004 年 1 月 01 日 Tiles 框架增强了基于组件的 Web UI 开发的设计,它和 Struts 框架的组合工作得很好。您可以很容易的协同 WebShpere Studio 使用 Tiles 和 Struts 框架以显著降低您的 Web 开发工程的开发时间和维护代价。
© Copyright International Business Machines Corporation 2003. All rights reserved.
引言
Struts 是有名的模型-视图-控制器(Model-View-Controller,MVC)框架方面的开放源码体现之一,它提供了一种便利的方式,可以用于将模块化应用程序清楚地分解成逻辑、表示和数据。Java 服务器页面(Java™Server Pages,JSP)在 MVC 框架中的作用通常是作为视图(View),它根据业务逻辑和数据生成动态的用户界面(UI)。
在另一方面,Tiles 框架增强了基于组件的设计和 Web UI 设计中的模板概念。它可以帮助开发人员解除 Web UI 组件之间的耦合并重用它们。另外,Tiles 模板及其继承特征使您能够以最小量的工作为 Web 应用程序设计出一致的外观。
IBM® WebSphere® Studio Application Developer Version 5(以下简称为 Application Developer)有内置的对 Struts 1.02 和 1.1(Beta 测试版 2)的工具和运行时支持。Tiles 可以独立于 Struts 使用,也可以与 Struts framework 集成以支持高级特征。
重用 Web UI 组件的需要
本文假定您具有 Struts 和 Application Developer 中的 Struts 工具的基本知识。如果您对本主题的一些基本信息感兴趣,请参阅
用WebSphere Studio V5 编写一个简单的 Struts 应用。
为了更好地理解可以如何重用 Web UI 组件,让我们先来看一下图 1 和 2 中的两个 Web 页面(JSP):
图 1. IBM 解决方案页面
图 2. IBM 新闻页面
您可以看到,这两个页面在页头、左侧的导航条和页脚中有很多组件是共有的。您可以不共享任何组件而为每一个页面创建单独的 JSP 来负责它的布局并且使用重复的页头、左侧导航条和页脚。当然,这种解决方案的效率是非常低的,因为对相同的 UI 组件(比如左侧导航条)的更改要求您改动每个相关的页面。
在上面的示例中,有大量的 HTML 和 JSP 代码是重复的,而 UI 组件是紧耦合的。众所周知,在软件工程中紧耦合的组件将导致高额的维护成本。一个更好的解决方案是解除 UI 组件(页头、导航、页脚和主体)之间的耦合并在不同的页面中重用它们。
<jsp:include> 标签为重用 Web UI 组件提供了一种解决方案。通过使用
<jsp:include> 标签,Solutions 页面和 News 页面可以分解成由四个 JSP 页面,如图 3 和 4 所示:
图 3. Solutions.jsp
图 4. News.jsp
Solutions 页面的 JSP 代码显示在示例 1 中,News 页面的 JSP 代码显示在示例 2 中:
示例 1. Solutions.jsp 使用了 JSP 包含标签(SimpleJSPWeb)
<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
</TR>
<TR>
<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top">
<jsp:include
page="/Fragment-Solutions.jsp" /></TD>
<TR>
<TD colspan="2"><jsp:include page="/Footer.jsp" /></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
|
示例 2. News.jsp 使用了 JSP 包含标签(SimpleJSPWeb)
<HTML>
<HEAD>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><jsp:include page="/Header.jsp" /></TD>
</TR>
<TR>
<TD width="20%" valign="top"><jsp:include page="/Navigation.jsp" /></TD>
<TD width="80%" valign="top">
<jsp:include
page="/Fragment-News.jsp" /></TD>
<TR>
<TD colspan="2"><jsp:include page="/Footer.jsp" /></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
|
Solutions.jsp and
News.jsp 的样本代码在
StrutsTiles.zip
下载文件
的
SimpleJSPWeb 项目中。下载并解压
StrutsTiles.zip 后将 EAR 文件导入到一个工作区中:
- 在 Workbench 菜单中选择
File => Import => EAR file。
- 单击
Browse选择 EAR 文件。
- 输入
StrutsTiles 作为项目名称。
要运行任何一个样本,可以遵循下列操作步骤:
- 右键单击
News.jsp和
Solutions.jsp,然后选择
Run on Server。
Tiles 插入标签提供和 JSP 包含标签相同的功能。下面的 JSP 代码反映包含使用 Tiles 插入标签的解决方案:
示例 3. Solutions.jsp 带有 Tiles 插入标签(SimpleTilesWeb)
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2">
<tiles:insert page="/Header.jsp" flush="true"/>
</TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert page="/Navigation.jsp" flush="true"/>
</TD>
<TD width="80%" valign="top">
<tiles:insert page="/Fragment-Solutions.jsp" flush="true" />
</TD>
</TR>
<TR>
<TD colspan="2">
<tiles:insert page="/Footer.jsp" flush="true"/>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
|
示例 4. News.jsp 带有 Tiles 插入标签(SimpleTilesWeb)
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2">
<tiles:insert page="/Header.jsp" flush="true"/>
</TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert page="/Navigation.jsp" flush="true"/>
</TD>
<TD width="80%" valign="top">
<tiles:insert page="/Fragment-News.jsp" flush="true" />
</TD>
</TR>
<TR>
<TD colspan="2">
<tiles:insert page="/Footer.jsp" flush="true"/>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
|
JSP 包含标签和 Tiles 插入标签都解除了 Web UI 组件的耦合。改变一个单独的 UI 组件只需要改变负责该页面的组件,例如
Header.jsp ,而其他页面并不需要改变。示例 3 和 4 的代码位于
SimpleTilesWeb 中。
然而,在以上示例中,如果 Web 应用的 UI 布局需要从图 5 改变到图 6,在后者中主体组件可能是
fragment-Solutions.jsp 或
fragment-News.jsp ,那么有多少页面需要修改呢?如果有 N 个页面有相同的布局,您将需要修改所有的 N 个页面。因此,如果仅仅使用一个 JSP 包含标签或 Tiles 插入标签,Web 应用 UI 的布局仍然是各 JSP 彼此紧耦合的。我们需要找到一个方法来将 JSP 进行更深层的解耦合。
使用 Tiles 创建模板
我们面临的新的挑战是找到一个便捷的方法将 Web UI 从一个布局转换到另一个布局。Tiles 模板的特征满足该要求。
什么是 Tiles 模板?
Tiles 模板是一个一般不包含任何实际内容的布局。它包含一些占位符属性使得页面 URI 和字符串可以在将来被插入。内容页面如
News.jsp 和
Solutions.jsp 可以引用该模板并通过这些占位符属性插入 URI。
为创建一个模板页面,您可以使用 Tiles 插入标签。不像示例 3 中的插入标签,在 Tiles 模板中使用的插入标签仅有一个名为
attribute 的属性,它将变成 JSP 页面 URI 插入的占位符。创建页头占位符的模板代码为
<tiles:insert attribute="header" /> 。
该模板定义了具体的页面可以引用的 Web UI 组件的共同布局。以下 JSP 代码就是使用 Tiles 的一个样本模板:
示例 5. Layout.jsp 是 Tiles 模板 (TemplatingTilesWeb)
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD width="20%" valign="top">
<tiles:insert attribute="navigation"/></TD>
<TD width="80%" valign="top">
<tiles:insert attribute="body"/></TD>
</TR>
<TR>
<TD colspan="2"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
|
在定义完一个模板之后,它本身是不可以使用的。实际的 JSP 页面必须引用该模板并且为其属性提供页面 URI。
<tiles:insert page="/Layout.jsp"flush="true"> 行可用于引用该模板。
具体的 JSP 页面将布局组合委托给模板
Layout.jsp 。它们需要为使用 Tiles
put 标签的
attribute 指定页面实现名称。代码
<tiles:put name="header" value="/Header.jsp"/> 将页面
/Header.jsp 插入名为
header 的属性。下面是使用 Tiles 模板特征的
Solutions.jsp 和
News.jsp 的 JSP 代码:
示例 6. 具有 Tiles 模板特征(TemplatingTilesWeb)的 Solutions.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body"
value="/Fragment-Solutions.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>
|
示例 7. 具有 Tiles 模板特征(TemplatingTilesWeb)的 News.jsp
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/Layout.jsp" flush="true">
<tiles:put name="header" value="/Header.jsp"/>
<tiles:put name="navigation" value="/Navigation.jsp"/>
<tiles:put name="body"
value="/Fragment-News.jsp"/>
<tiles:put name="footer" value="/Footer.jsp"/></tiles:insert>
|
示例 5、6 和 7 的代码在
TemplatingTilesWeb 中。
如果想将布局从图 5 改变到图 6,您所需要做的只是如示例 8 中所示修改模板
Layout.jsp ,而不需要改动具体页面,比如
Solutions.jsp 和
News.jsp 。相比较未使用模板时需要修改 N 个页面,使用了 Tiles 模板特征可以显著地降低维护成本。
示例 8. 修改模板以创建新的布局
<HTML>
<HEAD>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<TITLE>IBM Solutions</TITLE>
</HEAD>
<BODY>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD width="80%" valign="top">
<tiles:insert attribute="body"/></TD>
<TD width="20%" valign="top">
<tiles:insert attribute="navigation"/></TD>
</TR>
<TR>
<TD colspan="2"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
|
协同使用 Struts 与 Tiles
一个使用 Struts 框架的 Web 应用通常有多个
Action 类,其中每一个代表一些业务逻辑处理。
Action 类通过使用一个在
struts-config.xml 文件中定义的逻辑名称将响应委托给一个客户机。例如,下面代码显示了一个
Action 实例通过使用 JSP 的逻辑名称基于执行状态将响应
success 或
failure 委托给客户机。这个 MVC 设计模式将表示层从业务逻辑层中分离出来:
示例 9. 使用 Struts 动作 Forward
if (Status == OK)
ActionForward forward = mapping.findForward("success");
else
ActionForward forward = mapping.findForward("failure");
return (forward);
|
在 Struts 动作
Forward 中使用的逻辑名称为集成 Struts 和 Tiles 提供了一种可能性。通过使用 Tiles 模板特征,具体的 JSP 页面可以不包含任何 HTML 代码,而是用单纯的 Tiles 标签插入到模板,然后将逻辑视图组件映射到它们的实现中。Tiles 框架使得您可以通过定义名称来将具体页面分组到一个 XML 文件中,这些定义名称可以映射到 Struts 动作
Forward 使用的逻辑名称。以下六个步骤将帮助您理解这个过程。本文稍后有一个 Step-by-Step 教程
Tiles 继承和 Struts 实践详细介绍了协同使用 Tiles 与 Struts 的步骤。
- 将具体 Web 页面(
Solutions.jsp 和
News.jsp )分组到 Web 项目
forwardDefinition.xml 的
WEB-INF 文件夹中的一个 XML 文件。在分组之后,就不再存在任何具体页面(比如
Solutions.jsp 或
News.jsp )。取而代之的是,可以用逻辑名称(比如
solutionsDef 和
newsDef )定义它们,如示例 10 所示:
示例 10. forwardDefinition.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd">
<tiles-definitions>
<definition name="solutionsDef" path="/Layout.jsp">
<put name="header" value="/Header.jsp"/>
<put name="navigation" value="/Navigation.jsp"/>
<put name="body" value="/Fragment-Solutions.jsp"/>
<put name="footer" value="/Footer.jsp"/>
</definition>
<definition name="newsDef" path="/Layout.jsp">
<put name="header" value="/Header.jsp"/>
<put name="navigation" value="/Navigation.jsp"/>
<put name="body" value="/Fragment-News.jsp"/>
<put name="footer" value="/Footer.jsp"/>
</definition>
</tiles-definitions>
|
- 从 XML 源码修改
struts-config.xml 并添加以下代码,使得能够在 Struts 框架中使用 Tiles 插件。在启用插件之后,Application Developer 可能显示有效性检查错误,但是您可以忽略这些错误。
示例 11.struts-config.xml 中新的代码段
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config"
value="/WEB-INF/forwardDefinition.xml"/>
<set-property property="moduleAware" value="true" />
<set-property property="definitions-parser-validate" value="true" />
</plug-in>
|
- 修改
Web.xml 并为
ActionServlet 创建一个附加的初始化参数,如下图 7 所示。参数名为
definitions-config ,其值为在步骤 1 中定义的 XML 文件的位置
/WEB-INF/forwardDefinition.xml 。
图 7. 修改 Web Deployment Descriptor 以添加 definitions-config 作为初始化变量
如果您看一下 XML 源码
Web.xml ,您将会发现示例 12 中的 XML 代码段添加进去了:
示例 12. Web.xml 中新的代码段
<init-param> <param-name>definitions-config</param-name>
<param-value>/WEB-INF/forwardDefinition.xml</param-value>
</init-param>
|
- 通过以下代码创建一个
Action 类(例如
SolutionAction ):
示例 13. SolutionAction
package struts.tiles.sample;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionError;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class SolutionsAction extends Action {
public SolutionsAction() {
super();
}
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception {
ActionForward forward = mapping.findForward("success");
return (forward);
}
}
|
- 在编辑器中打开
struts-config.xml 文件,您将会看到一个名为
/solutions 的
Action Path 。将一个新的 Forward 添加到
/solutions Action Path。将其命名为
success 并将 Path 指定为在步骤 1 的
forwardDefinition.xml 中定义的 solutionsDef。
图 8. struts-config.xml
- 样本代码是在
StrutsTilesWeb 中实现的。您可以通过将浏览器定位到
http://localhost:9080/StrutsTilesWeb/solutions.do 来调用该解决方案的动作。其结果应该与
Solutions.jsp 一样。
本文后面的
Tiles 继承和 Struts 实践一节提供了一个详细的 Step-by-Step 的教程。
Tiles 继承
通过 Tiles 模板特征,布局从单个页面中分离出来了。但是还存在一个问题:如果页脚实现页面从
Footer.jsp 更改为
Footer-New.jsp ,您还得将单个页面(不使用 Struts)或 XML 定义(使用 Struts)中的页脚属性值更改为新的 JSP 名称。我们需要一个更高级的解耦,而 Tiles 继承特征提供了这样一个解决方案。
在定义配置文件
forwardDefinition.xml 时,
solutionsDef 和
newsDef 的定义看起来很像。它们都有指向一个固定的 JSP 的页头、导航条和页脚。Tiles 有一个高级特性使得定义之间可以继承。因此,可以定义一个基定义来指定通用的映射,然后让其他的定义(比如
solutionsDef 和
newsDef )从基定义继承并指定任意的自定义映射。以下代码显示了如何在定义配置文件
forwardDefinition.xml 中实现定义继承:
示例 14. 有继承的 forwardDefinition.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd">
<tiles-definitions>
<definition name="baseDef" path="/Layout.jsp">
<put name="header" value="/Header.jsp"/>
<put name="navigation" value="/Navigation.jsp"/>
<put name="body" value=""/>
<put name="footer" value="/Footer.jsp"/>
</definition>
<definition name="solutionsDef" extends="baseDef">
<put name="body" value="/Fragment-Solutions.jsp"/>
</definition>
<definition name="newsDef" extends="baseDef">
<put name="body" value="/Fragment-News.jsp"/>
</definition>
</tiles-definitions>
|
您可以使用与前一节中相同的 URL 来调用 Struts 动作。使用 Tiles 继承特征消除了定义文件中重复的 XML 代码。该解决方案节省时间,在一个 Web 应用中有很多页面共享相同的组件时尤其如此。此外,如果您想将页脚的实现从
Footer.jsp 更改成
Footer-New.jsp ,您只需要修改一个
baseDef 而不需要改动其他的定义,如示例 15 所示。Tiles 继承特征更进一步地将定义分离开来并降低维护成本。
示例 15. 更改页脚实现
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd">
<tiles-definitions>
<definition name="baseDef" path="/Layout.jsp">
<put name="header" value="/Header.jsp"/>
<put name="navigation" value="/Navigation.jsp"/>
<put name="body" value=""/>
<put name="footer"
value="/Footer-New.jsp"/>
</definition>
<definition name="solutionsDef" extends="baseDef">
<put name="body" value="/Fragment-Solutions.jsp"/>
</definition>
<definition name="newsDef" extends="baseDef">
<put name="body" value="/Fragment-News.jsp"/>
</definition>
</tiles-definitions>
|
该样本代码在
InheritanceTilesWeb 中。
Tiles 继承和 Struts 实践
本节将指导您创建和使用 Tiles 继承与 Struts。
启动 WebSphere Studio V5:
- 移动鼠标到 Windows® Start 菜单。
- 选择
Programs => IBM WebSphere Studio => Application Developer 5.0。
创佳一个不带 EJB 客户机或 Web 的 1.3 EAR 项目:
- 选择
File => New => Project => J2EE => Enterprise Application Project。 单击
Next。
- 选择
Create 1.3 J2EE Enterprise Application Project。单击
Next。
- 将三个子项目全部取消选定:
Application Client project、
EJB project和
Web project。
- 输入
StrutsTilesTutorialEAR 作为项目名。
- 单击
Finish。
创建一个 Web 项目并添加 Struts 支持:
- 选择
File => New => Projects => Web => Web Project。单击
Next。
- 输入
StrutsTilesTutorialWeb 作为
Web项目名。
- 选中
Add Struts support复选框。单击
Next。
- 选择
ExistingEnterprise Application Project。
- 找到新创建的 EAR 项目。单击
Next两次。
- 在 Struts Setting 页面,选择
Override default settings并为 Application Developer V5 GM 选择
1.1(Beta 测试版 2)或者为 V5.01 选择
1.1(Beta 测试版 3)。
- 单击
Finish。
创建以下 JSP 文件:
Header.jsp、Footer.jsp、Navigation.jsp、Fragment-News.jsp 和
Fragment-Solutions.jsp :
- 在 Web Perspective 中,右键单击 Web 项目下面的
/Web Content文件夹。
- 选择
New => JSP File。
- 输入
Header 作为文件名。单击
Finish。
- 编辑
Header.jsp 页面并将
"Place Header.jsp content here" 更改成
Header 以使版面更加简洁。保存并关闭文件。
- 为以下文件重复同样的步骤:
-
Footer.jsp
-
Navigation.jsp
-
Fragment-Solutions.jsp
-
Fragment-News.jsp
在打开
Fragment-News.jsp 的编辑器中,转到
Source页面并添加粗体代码到 <BODY>:
<BODY>
<P>Fragment-News</P>
<% String name = request.getParameter("name");
if (name != null) {%>
Welcome, <%=name%>
<% } %>
</BODY>
创建
Layout.jsp :
- 在 Web Perspective 中,右键单击
Web项目下的
/Web Content文件夹。
- 选择
New => JSP File。
- 输入
Layout 作为文件名。单击
Next。
- 单击
Add Tag Libraries。
- 选中
/WEB-INF/struts-tiles.tld的复选框。
- 输入
tiles 作为
Prefix。
- 单击
OK。
- 单击
Finish。
- 将以下代码复制到
Layout.jsp 的
<body> 中。保存并关闭文件。
<h1><tiles:insert attribute="title"/></h1>
<TABLE border="1" width="400" cellpadding="5" ID="Table31">
<TBODY>
<TR>
<TD colspan="2" align="center"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD valign="top" width="20%" bgcolor="00ff00" align="center">
<tiles:insert attribute="navigation"/></TD>
<TD valign="top" width="80%" bgcolor="ffff00" align="center">
<tiles:insert attribute="body"/>
</TD>
<TR>
<TD colspan="2" align="center"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
|
创建
forwardDefinition.xml :
- 在 Web Perspective 中,右键单击
Web项目下的
/Web Content/WEB-INF文件夹。
- 选择
New => Other => XML => XML。单击
Next。
- 选择
Create XML from scratch。单击
Next。
- 输入
forwardDefinition.xml 作为文件名。单击
Finish。
- 在 XML 编辑器中,切换到
Source选项卡。
- 将编辑器中的现有代码替换成以下代码。保存并关闭编辑器。
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd">
<tiles-definitions>
<definition name="baseDef" path="/Layout.jsp">
<put name="header" value="/Header.jsp"/>
<put name="navigation" value="/Navigation.jsp"/>
<put name="body" value=""/>
<put name="footer" value="/Footer.jsp"/>
</definition>
<definition name="solutionsDef" extends="baseDef">
<put name="title" value="Solutions" type="string"/>
<put name="body" value="/Fragment-Solutions.jsp"/>
</definition>
<definition name="newsDef" extends="baseDef">
<put name="title" value="News" type="string"/>
<put name="body" value="/Fragment-News.jsp"/>
</definition>
</tiles-definitions>
|
在
/Java Source 文件夹下创建名为
NewsAction 的 Action 类:
- 在 Web Perspective 中,右键单击
Web项目下的
/Java Source文件夹。
- 选择
New => Other => Web。展开
Web => Struts => Action Class。单击
Next。
- 输入
struts.tiles.sample 作为
Java Package名称。
- 输入
NewsAction 作为类名。单击
Next。
- 在 Forwards 节中,单击
Add添加 Name 为
success 和 Path 为
newsDef 的一个 forwards。
- 单击
Finish。忽略警告
newsDef 不是一个有效路径。
- 添加下面粗体代码到编辑器中。保存并关闭文件。
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception {
ActionErrors errors = new ActionErrors();
ActionForward forward = new ActionForward();
// return value
try {
// do something here
forward = mapping.findForward("success");
return (forward);
} catch (Except
ion e) {
// Report the error using the appropriate name and ID.
errors.add("name", new ActionError("id"));
}
|
在
/Java source 文件夹下创建另一个名为
SolutionsAction 的 Action 类:
- 在 Web Perspective 中, 右键单击
Web项目下面的
/Java Source文件夹。
- 选择
New => Other => Web。展开
Web => Struts => Action Class。单击
Next。
- 输入
struts.tiles.sample 作为
Java Package名称。
- 输入
SolutionsAction 作为类名。单击
Next。
- 在 Forwards 节中,单击
Add添加 Name 为
success 和 Path 为
solutions 的一个 forwards。
- 单击
Finish。忽略警告
newsDef 不是一个有效路径。
- 添加以下粗体代码到编辑器中。保存并关闭文件。
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception {
ActionErrors errors = new ActionErrors();
ActionForward forward = new ActionForward();
// return value
try {
// do something here
forward = mapping.findForward("success");
return (forward);
} catch (Exception e) {
// Report the error using the appropriate name and ID.
errors.add("name", new ActionError("id"));
}
|
允许 Struts Tiles plug-in:
- 在 Web perspective 中,展开
/Web Content/WEB-INF然后双击
struts-config.xml打开 Struts 配置编辑器。
- 切换到
XML Source页并添加以下代码段在
</struts-config> 结束标签前。
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config"
value="/WEB-INF/forwardDefinition.xml"/>
<set-property property="moduleAware" value="true" />
<set-property property="definitions-parser-validate" value="true" />
</plug-in>
|
- 保存并关闭文件。
- 双击
web.xml在 Web Deployment Descriptor 中打开它。
- 在 Servlet 页中,选择
action。
- 在 Initialization 节中,单击
Add。
- 输入
definitions-config作为 Name 和
/WEB-INF/forwardDefinition.xml作为 Value。
- 保存并关闭文件。
图 9. Web Deployment Descriptor web.xml
创建一个 WebSphere Test Environment 服务器:
- 在 Workbench 中,选择
File => New => Other => Server => Server and Server Configuration。单击
Next。
- 输入
server1 作为名称。
- 选择
WebSphere Version 5.0 => Test Environment。
- 单击
Finish。
添加 EAR 到服务器并启动服务器:
- 在 Server PerspectiveServer Configuration 视图中,一直展开直到看到
server1 。右键单击
server1并选择
Add => StrutsTilesTutorialEAR。
- 在 Server 视图中,右键单击
server1并选择
Start。
将浏览器指向
http://localhost:9080/StrutsTilesTutorialWeb/solutions.do 将会看到如下页面:
图 10. 运行 solutions.do
尝试
http://localhost:9080/StrutsTilesTutorialWeb/news.do?name=Jane :
图 11. 运行 news.do
如果您想切换到主体并进行导航,只要在
Layout.jsp 作简单修改如下:
<h1><tiles:insert attribute="title"/></h1>
<TABLE border="1" width="400" cellpadding="5" ID="Table31">
<TBODY>
<TR>
<TD colspan="2" align="center"><tiles:insert attribute="header"/></TD>
</TR>
<TR>
<TD valign="top" width="80%" bgcolor="ffff00" align="center">
<tiles:insert attribute="body"/></TD> <TD valign="top" width="20%" bgcolor="00ff00" align="center">
<tiles:insert attribute="navigation"/></TD>
<TR>
<TD colspan="2" align="center"><tiles:insert attribute="footer"/></TD>
</TR>
</TBODY>
</TABLE>
|
再次运行
solutions.do 和
news.do 。两个页面现在都使用新的布局:
图 12. 运行 news.do
结束语
Tiles 框架增强了 Web UI 开发中基于组件的设计,同时它和 Struts 框架组合起来的效果非常好。您可以很容易地将 Tiles 和 Struts 与 WebSphere Studio Application Developer 一起使用,以显著降低您的 Web 开发项目的开发时间和维护成本。
相关信息
Apache Struts Tiles User Guide
下载 | 名字 | 大小 | 下载方法 |
|---|
| StrutsTiles.zip | 4.9 MB | HTTP |
作者简介  | |  |
Colin Yu 是 IBM 多伦多实验室的一名 WebSphere Studio
Application Developer 软件开发人员。Colin 于 1995 年获得工程学士学位并于 2000 年获得 Waterloo,Ontario
大学的应用科学硕士学位。Colin 是一位 WebSphere Application Server 方面的 IBM Certified Enterprise Developer
和系统专家(Systems Expert),同时还是一位 WebSphere Studio Application Developer 和 VisualAge for Java 方面 IBM 认证的解决方案开发人员。您可以通过
coliny@ca.ibm.com与 Colin 联系。
|
 | |  |
Jane Fung 在 WebSphere Studio Application Developer Integration Edition
工具开发组工作。Jane 在位于加拿大安大略省的 University of Waterloo 大学获得应用科学学士学位,她还是一位 Sun Java 2 认证的程序员。您可以通过
jcyfung@ca.ibm.com
与 Jane 联系。
|
对本文的评价
|