运用 WebSphere Studio V5.1.1 开发 JSF 应用程序: 第 3 部分

文档选项 未显示需要 JavaScript 的文档选项 样例代码

级别： 初级

Roland Barcia (barcia@us.ibm.com), IT 顾问专家, IBM Software Services for WebSphere

2004 年 4 月 01 日

这个系列由 5 部分组成，在第 2 部分中我们使用快速应用程序开发（Rapid Application Development，RAD）JSF 组件创建了 Java Server Faces 表单。在第 3 部分中，我们将看到 JSF 可以如何通过 Web Data Object（WDO）（很快就会成为 Service Data Object）技术来使用数据。

引言

本文是这一系列文章的第三部分，将展示 WebSphere Studio V5.1.1 提供的 Server Faces Technology Preview的特征。这一系列文章包括以下几个部分：

• 第 1 部分：创建 JSF Web 项目和页面模板。
• 第 2 部分：创建 JSF 提交表单。
• 第 3 部分：创建通过 Web Data Objects（WDO，很快就会成为 SDO：Service Data Objects）访问数据的 JSF 应用程序。
• 第 4部分：使用 Action Handlers 和 JavaBean Data 组件集成 JSF 应用程序与 Enterprise Java Bean。
• 第 5部分：使用 Web Service Proxy 组件创建 JSF Web 服务客户端。

在第 2部分中，我们看到了如何利用快速应用程序开发（Rapid Application Development，RAD）Java Server Faces（JSF）组件来创建 JSF 表单。在第 3 部分中，我们将看到 JSF 可以如何利用 Web Data Object（WDO）技术来访问数据。WDO是 IBM 针对新兴的 Service Data Object（SDO）标准先期推出的一种技术，当前在Sun Java Community Process 内，Service Data Object（SDO）正作为 JSR 235进行开发。JSF 和 SDO 构成了强大的组合，使得 Web 应用程序能够以可视化的方式与企业数据交互，并且这种交互是在兼顾了良好的设计的前提下进行的。

您将需要 下载本文所提供的材料以学习并完成本次练习。第2部分中的练习的答案包含在下载文件中，如果您没有完成练习的话，您可以打开这个文件看一看。您可以按照第2 部分中的说明导入此 EAR 文件。

要运行此示例，我们首先需要创建一个数据库。我们这里使用的是 DB2，但是包含了数据库脚本，这是考虑到您可能需要使用 DB2作为不同的数据库的模型。在创建了数据库之后，我们将使用 WebSphere Studio 来创建一个 WDO组件，并把它拖放到一个显示页面中。我们将使用内置单元测试环境（UTE）来测试该应用程序，于是在最后，您将看到 JSF 如何通过应用验证到 Stock History表单而拥有一个内置验证框架。

回页首

设置数据库

您在开始练习前需要创建一个数据库。要创建一个 DB2 数据库，请执行以下步骤：

1. 如果您还没有下载，那么请下载本文的 下载部分所提供的材料和数据库脚本。
2. 打开 DB2 命令窗口。您可以通过 Windows Explorer 来完成这一步（图 1）。
   图 1. 打开 DB2 命令窗口
   
   
3. 切换到您解压缩 ZIP 文件的目录并转到 <Extracted Dir>\JSFArticleSeries\Part3\DBScript 。
4. 输入命令 CreateWSTrade （图 2）。这样将创建所需的数据库表。（我们使用 db2admin/db2admin 作为 用户 ID/密码；如果您想要更改它，您可以编辑 CreateWSTrade.bat 文件。）
   图 2. 创建数据库表
   
   
5. 要检验是否正确地安装了数据库，请从 DB2 命令窗口连接到数据库，为此，您可以输入（图 3）： db2 connect to WSTRADE user db2admin using db2admin
   图 3. 连接到数据库
   
   
6. 输入命令： db2 select * from WSTRADE.STOCKHISTORY 。您将获得一些返回结果，类似于图 4。
   图 4. 数据库查询
   
   
7. 关闭 DB2 命令窗口

回页首

使用 JSF/WDO 组件创建 JSP

我们现在准备要创建我们的第一个 JSF 表单。应该从最后一个实验室打开您的 WebSphere Studio 工作区。

1. 首先，我们将要创建一个新的 JSF 页面，该页面将显示提交一个股票历史（Stock History）查询的结果。
   1. 从 Web 透视图，展开 PersonalTradeJSFWeb 项目，然后右键单击 WebContent文件夹，再选择 New => Faces JSP File（图 5）。
      图 5. 项目导航
      
      
   2. 将 JSP 文件命名为 viewStockHistory.jsp ，选取 Create from page template，然后按一下 Next。（图 6）
      图 6. 创建 Faces JSP 文件
      
      
   3. 在下一个对话框，确保选择了 StockPageTemplate.jtpl，然后选择 Finish。
      图7. 创建 Faces JSP 文件
      
      
2. accessStockHistory页面储存了在请求作用域输入的代码值。由于 accessStockHistory将转发到 viewStockHistory页面，后面的页面将能访问该输入页面并把代号传送给WDO 对象。
   1. 确保在编辑器中 viewStockHistory 是激活的 JSP。在 Page Data视图中，添加一个新的 requestScope 变量（图 8）。
      图 8.页面数据
      
      
   2. 变量名称是 symbol 而类型是 java.lang.String （图 9）。这应该与提交页面上的信息一致。选择 OK。
      图 9. 添加 Request Scope变量
      
      
      图 10. requestScope 结果
      
      
3. 接下来，我们将使用 WDO数据组件来构建结果页面。WebSphere Studio将自动连接到数据库并构建所需的数据组件。
   1. 首先，我们需要创建一个标题标签。从 JSF选用板选择 Output组件（图 11）。
      图 11. JSF 选用板
      
      
   2. 把组件拖到JSP 页面，位于开始和结束标记之间，然后选择 Text作为类型。
      图 12. JSF 选用板
      
      
   3. 在 Attribute视图中将文本的字体大小改为 18。
      图 13. Attribute 视图
      
      
   4. 在output 组件后面创建一个空行（图 13）。展开选用板的 Data（Beta）部分。选择 Relational Data List（图14）并把它拖到 JSP 页面，如图 15 所示。
      图 14. 可视选用板
      
      
      图 15. Stock History 页面
      
      
   5. 系统将显示Data 向导（图 16）。请输入或选择如下值：
      • Name： stockHistory
      • Scope： request
      • ActionType： Display existing data list
      选择 Connection name字段旁边的 New。
      图 16. Data 向导
      
      
   6. 在New Connection 对话框，为 Connection name 输入 WSTRADE ，然后选择 New Connection。按一下 Next。
      图 17. 连接到数据库
      
      
   7. 在Database Connection 对话框（图 18），输入或选择如下值：
      • Connection Name： WSTRADE
      • Database： WSTRADE
      • UserID： db2admin
      • Password： db2admin
      • Database vendortype： DB2 Universal Database V8.1
      • JDBC Driver： IBM DB2 APP DRIVER
      • Classlocation：应该已包含适当的路径。
      Press Finish.
      图 18. 建立 JDBC 连接
      
      
   8. 在Add Data List 对话框（图 19），选择表 WSTRADE.STOCKHISTORY然后选择 Next。
      图 19. 数据清单特性
      
      
   9. 在下一个对话框（图20），保留所有的字段被选中，然后选择 Next。
      图 20. 列选择和高级任务
      
      
   10. 在下一个对话框（图21），选择 +按钮来添加一个条件。
       图 21. 添加条件和顺序
       
       
   11. 为Condition 选择 By columns，为 Column 选择 SYMBOL和 =。按一下 Value部分后面的 ...按钮。
       图 22. 条件
       
       
   12. 从 requestScope选择 symbol变量（图 23），然后选择 OK。
       图 23. 选择页面数据对象
       
       
   13. 该条件允许通过在请求作用域（requestscope）输入代码来检索数据。按下 OK（图 24）然后选择 Finish（图25）。
       图 24. 条件
       
       
       图 25. 添加条件和顺序
       
       
   14. JSP页面现在应该包含了基于表的数据网格组件，如图 26所示。
       图 26.带有数据网格的 JSP 页面
       
       
   15. 页面数据（PageData）将定义好 stockHistory 对象（图 27）。
       图 27. stockHistory 对象已定义
       
       
   16. 如果打开 faces-config.xml 文件，您将会注意到该数据组件是作为受管 Bean（managed Bean）来定义的。您可以在 WEB-INF/wdo 目录中找到 faces-config.xml 文件。以下列出该文件。

       <managed-bean> <managed-bean-name>stockHistory</managed-bean-name> <managed-bean-class>com.ibm.etools.webtools.wdo.rdb.internal.DataListAccessBeanImpl </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>connectionName</property-name> <value>WSTRADE1</value> </managed-property> <managed-property> <property-name>inputPath</property-name> <value>/WEB-INF/wdo/stockHistory.xml</value> </managed-property> <managed-property> <property-name>servletContext</property-name> <value-ref>${facesContext.externalContext.context}</value-ref> </managed-property> <managed-property> <property-name>servletRequest</property-name> <value-ref>${facesContext.externalContext.request}</value-ref> </managed-property> <managed-property> <property-name>action</property-name> <value>fill</value> </managed-property> <managed-property> <property-name>params</property-name> <map-entries> <map-entry> <key>requestScopesymbol</key> <value-ref>${requestScope.symbol}</value-ref> </map-entry> </map-entries> </managed-property> <managed-property> <property-name>targetPageSize</property-name> <value>0</value> </managed-property> </managed-bean>

       
       
4. 在页面上我们已有了数据控件，但是我们需要修改表的可视化结构来满足需求。我们可以使用 Attributes视图来更新表的特性。
   1. 选中表中的一列，然后在 Attribute 视图中，选择 HX:DATAGRID。这将使我们可以在 JSP页面上更新数据网格表（图 28）。（在 Attributes视图的 Basics 选项卡中有几个有用的项。您可以添加不同的元素，例如表头或页脚，添加一个行选择复选框，而且您还可以支持数据清单的分页。）
      图28. Attribute 视图
      
      
   2. 选择 Columns选项卡，以如图 30 所示的顺序对列进行排序。
      图30. 排序列
      
      
   3. 选择 Columns选项卡并把 border 设为 0。
      图31. 数据网格属性
      
      
   4. 屏幕看起来如图32 所示。您也可以预览此页面。
      图32. 页面预览
      
      

回页首

设置JSF 导航

我们现在已经创建了 Stock History页面，现在需要从 accessStockHistory.jsp 定义导航规则。WebSphere Studio 使用 Attribute 视图来完成这一工作。

1. 首先，我们将定义导航：
   1. 从 ProjectNavigator 中，打开 accessStockHistory.jsp。
      图 33. 项目导航
      
      
   2. 选择 Access Stock History按钮。
      图34. 指定导航
      
      
   3. 转到Attribute 视图，选择 Navigation选项卡，然后按下 Add按钮。
      图 35. 导航属性
      
      
   4. 从 Page 下拉框中选择 viewStockHistory.jsp（图 36）。Page定义了此控件将转到的页面。为 Alias 选择 success。确保选取了 This page only，然后按下 OK。只要遇到了 success，此 faces Servlet 都将转到 viewStockHistory.jsp 。此 success 字符串可以作为操作的结果返回，或者在提交时隐式设置为一个缺省值。

      图 36. 添加导航规则
      

   5. 该导航应该如图37 这样定义。这也将把导航条目添加到 faces-config.xml 文件中。
      图 37. 导航条目
      
      
2. 我们现在需要提交来触发此成功（success）动作，以使转发能够成功。在本练习中我们不需要单独的动作。请求变量是绑定的。另外， viewStockHistory.jsp 还将需要一个拉的 MVC 形式；只有输入（代码变量）需要推。
   1. 当 accessStockHistory.jsp 在编辑器中还处于活动状态时，在 Attributes视图中选择 All选项卡输入 success作为 action。
      图 38. 指定 success 动作
      
      
   2. 保存这两个 JSF页面。如果您想要检查导航规则，请打开 faces-config.xml ，如下所示：

      <navigation-rule> <from-tree-id>/accessStockHistory.jsp</from-tree-id> <navigation-case> <from-outcome>success</from-outcome> <to-tree-id>/viewStockHistory.jsp</to-tree-id> </navigation-case> </navigation-rule>

      
      

回页首

测试 JSF 组件

通过添加 WDO 数据组件，WebSphere Studio 会自动把数据源添加到 WebSphere Unit 测试环境，这样我们就能够自动地直接测试应用程序。要测试此应用程序，请执行以下步骤：

1. 在 ProjectNavigator 中右键单击 accessStockHistory.jsp文件，然后选择 Run on Server。
   图 39. 运行应用程序
   
   
2. 在服务器启动并且浏览器呈现表单时，在空白区输入 IBM ，然后按下 Access Stock History（图 40）。将显示股票历史数据（图 41）。
   图 40. 新 JSP 页面
   
   
   图41. 成功的结果
   
   

回页首

设置页面验证

您能够从JSF 内置的验证框架很容易地应用某个级别的缺省验证。我们将以必需字段的形式将验证添加到 accessStockHistory.jsp 页面中；我们将把 symbol 字段作为必需条目，这样一来。如果它保留为空，系统将会显示一个错误消息：

1. 打开 accessStockHistory.jsp然后选择 symbol输入控件（图 42）。
   图 42. accessStockHistory.jsp
   
   
2. 在Attributes 视图中（图 43），选取 Value is required和 Add Display Error control。
3. 在JSP 页面中再次单击 symbol输入控件，以把该控件与属性关联起来（图42）。
4. 在 Attributes 视图中，选择 Set Custom Message按钮（图43）。
   图 43. Attributes 视图
   
   
5. 在Set custom message 对话框中，将文本 Symbol is required 添加到Message text 框中（图 44）。
   图 44. 设置顾客消息
   
   
6. 在JSP 中将显示错误消息的占位符（图 45）。
   图 45. 带有错误消息占位符的 JSP
   
   
7. 要测试验证，请在Server 视图右键单击服务器，然后选择 Restart Project => StockSystemEAR（图46）。
   图 46. 重新启动项目
   
   
8. 再次右键单击 accessStockHistory.jsp并选择 Run on Server。
9. 浏览器出现时，不输入任何文本就按下 Access Stock History按钮。系统将会显示验证错误消息。
   图 48. 验证错误消息
   
   
10. 为了关闭服务器，请转到 Servers视图，然后右键单击服务器并按下 Stop。
    图 49. 关闭服务器
    
    

回页首

结束语

在本系列文章的这一部分，我们展示了JSF 和 WDO（很快会成为SDO）如何构成一个强大的组合来快速并且有效地构建动态Web 页面。我们还演示了 JSF 如何以简单和“可工具化（toolable）”的方式支持验证。

在第4 部分中，我们将看到 JSF 如何能够像其他的 J2EE技术一样容易使用。特别地，我们将使用 JavaBean组件来把我们的 JSF 页面连接到现有的 EJB 应用程序上。

回页首

下载

	关于下载方法的信息

关于作者

		Roland Barcia 是位于纽约／新泽西州 Metro 区的 IBM Software Services for WebSphere 的 IT 顾问专家。

对本文的评价

太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 建议？

回页首