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

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

级别： 初级

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

2004 年 3 月 01 日

关于 Java Server Faces 的这一系列文章由 5 部分组成，第 2 部分建立在第 1 部分之上，继续创建 JSF 提交表单，并展示一些可以用于可视化开发 J2EE Web 应用程序的动态控件。

引言

本文是这一系列文章（包括5 个部分）的第二部分，将说明 WebSphere® Studio V5.1.1提供的 Java™ Server Faces（JSF）技术预演的特征。本系列将包括以下文章：

• 第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 服务客户端。

这些练习将会展示 JSF 的快速应用程序开发（RapidApplication Development，RAD）特性。在第 1 部分中，我们创建了已启用 JSF 的 Web 项目和 JSF页面模板。页面模板帮助我们处理 Web 站点中的静态部分，不过J2EE 应用程序服务器是为运行动态 Web 页面而设计的。在第 2 部分，我们将继续完成第1 部分的内容，创建两个 JSF 提交表单并展示可视选项板上的一些动态控件。

您可以从本文的 下载部分下载第 1 部分的解决方案。如果您把 zip 文件解压到了 C：盘，那么您可以把来自 C:\JSFArticleSeries\Part2\SolutionPt1 的 StockSystemEAR 文件导入一个没有用过的工作区，然后选择 File => Import，再从 Import 向导（图 1）中选择 EAR file。

回页首

创建 accessStock JSF 表单

要创建我们的第一个 JSF 表单，首先应该从 第 1 部分中的最后一个练习打开您的工作区。

1. 在我们的Web 项目中创建新的 JSF 页面：
   1. 如果您不在 Web透视图中，现在就转到那里。展开 PersonalTradeJSFWeb项目，然后右键单击 WebContent文件夹并选择 New => Faces JSP File（图2）。
      图 2. 创建新的 JSP 文件
      
      
   2. 为 File Name输入 accessStock.jsp ，然后选取 Create from page template（图3）。 按一下 Next。

      图 3. 新的 Faces JSP 文件
      

   3. 选择 User-Defined Page Template和 StockPageTemplate.jtpl。如果没有列出该模板，请选择 Browse => Current Project next Location（图4）。选择 Finish。
      图 4. 页面模板文件的选择
      
      
   4. Faces JSP页面应该符合我们以前构建的模板（图 5）。您将会注意到“Default content ofbodyarea”。这是该页面上我们可以把组件拖放进去的惟一区域。对模板的任何修改都需要修改模板文件；只有内容区是动态的。
      图 5. Faces JSP 页面
      
      
2. 我们现在要把 JSF组件拖到内容区：
   1. 删除“Default content of body area”文本，然后在开始（start）和结束（end）画笔图标之间留出一些空间。从选项板（图6）的 Faces Components 部分，把 Output组件拖到内容区中。
      图 6. Faces Components 选项板
      
      
   2. 把组件拖到内容区后（图7），将会显示 Select Type对话框，要求您确定组件的类型（图 8）。选择 Text，然后选择 OK。
      图 7. 把组件拖到内容区
      
      
      图 8.选择类型
      
      
   3. 选择组件。为Value 输入 Access Stock ，然后选择 Properties选项卡（图9）。
      图 9.属性
      
      
   4. 把文本大小改为 18Point，然后选择 OK（图 10）。
      图 10. 添加格式
      
      
      图 11.特性
      
      
   5. 接下来，在JSP 页面的标签下添加一个空格。从选项板（图12），选择 Input组件并把它拖到 Access Stock输出组件的后面。
      图 12. Faces Components 选项板
      
      
   6. 再一次从Select Type 对话框选择 Text（图 13）。
      图 13. 选择类型
      
      
   7. JSP页面现在看起来将和图 14 相似。在输入框后面输入一些新行。
      图 14. 新 JSP页面的内容区
      
      
   8. 从选项板（图15）选择 Command - Button并把它拖到 JSP 页面（图16）。
      图 15. 选择 Command － Button
      
      
      图 16. 新的 JSP 页面
      
      
   9. 选择新的按钮，然后转到 Attributes视图。选择 Format选项卡并为 Label 输入 Submit Stock Request 。JSP上的按钮将会反映这个新的标签。
      图 17. 定义 Label
      
      
   10. 保存（save）该JSP 页面。
3. 既然我们已创建了我们的第一个JSF 表单，我们就将需要把控件绑定到页面数据。Page Data视图允许 Web 开发人员为任何容许的 JSP作用域级别创建脚本变量。
   1. 在 accessStock.jsp还保持打开的同时，转到位于工作台左侧中部的 Page Data视图。选择 JSP scripting，右键单击 requestScope，然后选择 Add Request Scope Variable（图18）。
      图 18. JSP scripting 菜单
      
      
   2. 在显示的 Add Request Scope Variable对话框，输入下列值：
      • Variable name： symbol
      • Type： java.lang.String
      然后选择 OK。
   3. 现在已定义了变量。任何支持 JSTL表达式语言的标记现在都可以利用 ${requestScope.symbol} 来访问symbol 变量了。JSF 标记支持 JSTL 表达式语言；JSP 2.0也将完全支持 JSTL 表达式语言。对于 Web 开发人员来说使用表达式语言比使用Java 中的 JSP 表达式简单得多。
      图 19. 访问 symbol 变量
      
      
4. 我们现在可以利用某个组件的 Attribute视图来把我们已经定义的页面数据绑定到一个控件。在此，我们将把input 控件绑定到在 requestScope 中定义的 symbol 变量：
   1. 突出显示 accessStock.jsp 上的 input控件（图 20）。
      图 20. accessStock.jsp
      
      
   2. 从Attribute 视图，选择 Bind to文本框旁边的按钮（图21）。
      图 21. Attributes 视图
      
      
   3. 选择requestScope 下面的 symbol变量，然后按一下 OK（图22）。
      图 22. 选择页面数据对象
      
      
   4. JSP将会在输入框中显示 {symbol} 变量（图 23）。
      图23. 带有 symbol 变量的 JSP
      
      
   5. 保存这个JSP。
   6. 在 JSP 页面，选择 Preview选项卡来观察结果。
      图 24. JSP 预览
      
      

回页首

在 WebSphere Application Server V5.1 测试环境中测试 JSF 表单

我们现在将利用 WebSphere Studio 包括的 WebSphere Application Server V5.1 Unit Test Environment（UTE）来测试该页面。

1. 在Project Navigator 视图，右键单击 accessStock.jsp，然后选择 Run on Server（图25）。
   图 25. 测试 JSP
   
   
2. 系统将会显示 Server Configuration向导。应选择 WebSphere version 5.1下面的 Test Environment选项。选取 Set server as project default选项，然后选择 Finish（图26）。
   图 26. 服务器的选择
   
   
3. 一旦服务器完全启动，浏览器也应该启动了。注意 URL 通过了 Faces Servlet。如果没有通过 Faces Servlet，Faces 上下文将不会建立并且 JSP提交将会失败。WebSphere Studio 自动知道通过 Faces Servlet来访问 JSP，这是因为我们在创建 Web 项目的时候添加了Faces 支持。
   图 27. Universal Test Client启动
   
   
   图 28. 测试 JSP
   
   
4. 在JSP，输入值 IBM ，然后单击 Submit Stock Request（图29）。注意页面被重新呈现，而文本框依然填充着。控件被绑定到输入和输出的请求变量。同样，如果没有设置导航或没有找到导航结果，那么JSF的缺省导航将重新呈现同样的页面。对于希望在同一个页面上同时使用输入和输出控件的页面，开发不带导航的JSF 页面是很容易的。
   图 29. 测试 JSP
   
   

回页首

创建并测试 accessStockHistory.jsp

在以上部分，我们大致创建了一个 JSF 表单。我们现在将创建第二个 JSF 表单来访问股票历史纪录，不过我们将只介绍创建过程中的基本步骤。本系列文章的第 3 部分将使用这个新的页面。

1. 新的表单看起来如下面的图30 页面所示。
   图 30. 新的 JSF 表单
   
   
2. 确保创建了 symbol变量，并把输入框绑定到 symbol 变量。
   图 31. 创建 symbol 变量
   
   
   图 32. 把输入框绑定到 symbol 变量
   
   
3. 完成表单后预览并测试该页面。您将需要重新启动应用程序服务器。
   图 33. 重新启动应用程序服务器
   
   
4. 除标题之外，新页面看起来与先前创建的页面相似。
   图 34. 新的应用程序页面
   
   
5. 保存并关闭文件。
6. 转到Project Navigator 视图，然后展开 Java Resources文件夹。在 codebehind包下面，您将看到生成的与 JSP 页面相应的 Java 代码。
   图 35. Codebehind 包
   
   
7. 另外，生成的每个Java 类是作为 JSF 管理的 Bean被添加的。打开 WEB-INF 文件夹中的 faces-config.xml文件来检查文件，该文件的内容如清单 1 所示。
   图 36.定位 faces-config.xml 文件
   
   清单1. faces-config.xml

   <managed-bean> <managed-bean-name>cb_StockPageTemplate</managed-bean-name> <managed-bean-class>codebehind.StockPageTemplate</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <managed-bean> <managed-bean-name>cb_accessStock</managed-bean-name> <managed-bean-class>codebehind.accessStock</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <managed-bean> <managed-bean-name>cb_accessStockHistory</managed-bean-name> <managed-bean-class>codebehind.accessStockHistory</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>

   
   
8. 完成后停止服务器。
   图 37. 停止服务器
   
   

回页首

结束语

在本系列文章的第 2 部分，我们已经成功地构建了两个 JSF 表单。在此过程中，我们也看到了 JSF 可视选项板如何方便地提供了用于构建开放且功能强大的 Web 站点的 JSF 组件。在第 3 部分，我们将利用 Web Data Object（WDO）技术（它是 WebSphere Studio V5.1.1 的另一项预览技术。）来继续构建 Stock History 页面的结果。

回页首

下载

	关于下载方法的信息

参考资料

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文.
  
  
• JavaServer Faces Sun Web 站点
  
  
  
  
• JSF Central
  
  
  

关于作者

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

对本文的评价

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

回页首