使用 ADF Faces JSF 选择组件

作者：Chris Schalk，Oracle Corporation

2005 年 1 月

简介

本方法文档介绍了如何在 JDeveloper 10.1.3 预览版的环境中使用 Oracle 的 ADF Faces JSF 组件。它将演示如何构建静态 HTML 选择组件以及与 Oracle TopLink 中间层提供的数据绑定的动态选择组件。

前提条件：

  • 本方法文档使用以下相关方法文档中介绍的同一 TopLink 中间层：使用 JSF 选择组件。 稍后在以下步骤中，您将需要参考此相关方法文档以构建您的 TopLink 中间层。
  • 本方法文档使用 Oracle ADF Faces 扩展版本 EA11- 但您应使用最新的可用版本。有关如何安装 Oracle ADF Faces 扩展的信息，请参阅这里。

开始 - 构建 Oracle TopLink 中间层

在为此示例构建视图之前，您需要首先构建一个中间层模型，它使用 Oracle TopLink 持久保存 Oracle 数据库中的数据。有一个相关的方法文档详细介绍了如何构建 Oracle TopLink 中间层项目以及如何构建非 Oracle ADF Faces 视图。

对于此 ADF Faces 示例，您应按照有关如何构建 TopLink 中间层的说明进行操作，然后继续构建本方法文档中详细介绍的 ADF Faces 视图。

  1. 使用以下相关方法文档中的“开始 - 构建 Oracle TopLink 中间层”一节中的步骤 1-12 构建一个 TopLink 中间层：使用 JSF 选择组件。

使用 Oracle ADF Faces JSF 组件构建视图

成功构建并测试了另一个方法文档中详细介绍的 Oracle TopLink 中间层后，便可以使用 Oracle 的 ADF Faces JSF 组件构建一个视图了。

重要声明：请注意，此应用程序将在 JSF 自动绑定处于关闭状态下构建。该选项自动绑定页面和您拖放到 JSF 页面的任何 JSF 组件，但本方法文档演示了如何手动绑定 JSF 页面。继续前，请确保取消选中 JSP 和 HTML 可视化编辑器首选中的“Autobind JSF..”设置以关闭 JSF 自动绑定选项。

有关详细信息，请参见我的网志文章：
http://radio.weblogs.com/0130966/2005/01/05.html#a28

  1. 在与 TopLink 代码相同的项目中，通过选择 File->New->Web-Tier->JSF->JSF JSP 构建支持 JSF 的 JSP 页面。

  2. 调用 JSF JSP 向导时，可以将页面命名为“selectfun_adf_faces”。将页面类型更改为 document (jspx)。接受默认的错误页面设置，然后单击“Next”。

  3. 此向导中的下一页允许您选择 JSP 标记库。选中两个 ADF Faces 库。
    注意：仅当您安装了 ADF Faces 扩展后，ADF Faces 库才显示为可用。
  4. 生成页面后，将位于“ADF Faces Layout”面板页面上的 ADF Faces PanelPage 组件拖放到新页面中。将 Title 属性设置为：“JSF Select Fun with ADF Faces”。

    ADF Faces PanelPage 是一个复合组件，尽管它并非必需的，但它是一个有用的父容器组件，能为页面内容提供出色的可视化格式。
  5. 继续前，我们需要确保将已在相关 TopLink 方法文档中构建的 ModelBean 类添加到 Faces-Config.xml 中。如果尚未执行此操作，请将 ModelBean 类作为托管的 bean 添加到 Faces-Config.xml 文件中。为此，请在导航器中找到 faces-config.xml 文件 (Web Content->WEB-INF->faces-config.xml)，然后双击它，编辑它的内容。
  6. faces-config.xml 文件的默认编辑器是页面流建模器，但对于这个简单的应用程序，我们将不引入任何导航规则，因此单击页面底部的“Overview”选项卡，调用 faces-config 编辑控制台。
  7. 添加一个新的托管 Bean，方法是先单击该控制台左侧的 Managed Beans 节点，然后单击“New”。
    指定以下设置并单击 OK：
    • Name:Model
    • Class:selectfun.ModelBean
    • Scope:request

  8. 继续构建 ADF Faces 视图，我们现在将构建一个简单的静态选择列表，此列表将显示一个国家列表并显示选择的国家代码。在新的选择列表上方，我们将首先添加一个小的标题“Static Example”。可以添加一个用封装到 JSF Verbatim 标记中的 <h3> 格式化的 HTML 标题来实现这一目的。为此，将一个 (JSF Core) Verbatim 标记拖放到 PanelPage 的中心。然后，将“ <h3>Static Example</h3>”添加到此标记的主体中。
    请注意，您将能够直接键入到可视化编辑器中的 Verbatim 主体中。

  9. 现在，将 ADF Faces SelectOneChoice 标记拖放到此标题下方。放下它之后，将 Label 设置为“Select a country:”。（请注意，ADF Faces 为该选择列表提供了一个有用的内置标签。）

  10. 为捕获用户的选择，必须将 SelectOneChoice 组件绑定到 ModelBean 的“selectedcountry”字段。单击属性检查器中的 Value 属性，然后单击属性检查器中的绑定按钮 。单击回 Value 属性，您将看到一个空的 JSF Value 表达式和一个新的按钮 ，此按钮将调用 JSF 值绑定器对话框。单击此按钮以调用对话框，然后绑定到 #{Model.selectedcountry}。

  11. 要显示选择列表中的实际项，可以使用通用的 JSF SelectItem 标记，并将它嵌入到 ADF Faces 选择组件的内部。要插入一个 SelectItem 标记，只需从组件面板中拖动它并将它放到 ADF Faces 选择组件中。还可以在放置组件时使用结构窗格查看其确切位置。放置后，将 itemLabel 设置为“United States”并将 itemValue 设置为“us”。

  12. 继续添加静态选择项的最简单方法是将 selectItem 项标记复制到代码编辑器中，然后多次粘贴它。将复制的 itemLabels 和 itemValues 分别设置为：United Kingdom - uk、France - fr、Spain - sp。
  13. 现在已经完成了静态选择控件，但要测试选择组件是否正常工作，我们将需要显示“Model.selectedcountry”字段更新后的值。为此，我们将添加封装在 ADF Faces panelGroup 组件中的 ADF Faces outputLabel 和 outputText 组件。（通过 panelGroup，我们可以为标签文本域定义一个水平布局而非垂直布局。）
    拖放一个（ADF Faces 布局）PanelGroup 组件，并将 type 属性设置为“horizontal”。然后，将一个（ADF Faces 输出）outputLabel 拖放到新面板组中，并将它的 value 设置为“You selected:”。
  14. 最后，拖放一个 outputText，并使用与前面相同的 JSF 值绑定器将它的 value 绑定到 #{Model.selectedcountry}。

  15. 运行该静态示例前，需要向页面中添加一个按钮以便提交表单。将一个（ADF Faces 导航）CommandButton 拖放到面板页面的底部。将 Text 属性设置为 “Update Model”。
    可选：您可能需要在 Commandbutton 和选择组件之间使用一个（ADF Faces 输出） ObjectSeparator。对象分隔符在组件之间提供了一个水平分隔符。
  16. 保存并编译所有内容。
  17. 右键单击并运行 jspx 页面以测试该静态示例。验证选择组件是否正常工作：选择一个国家，然后单击“Update Model”。

  18. 现在，我们将添加一个基于 TopLink 中间层返回的 List 对象的动态选择示例。
  19. 使用 JSF Verbatim 标记（其内部包含 <h3>.Dynamic Example using Oracle TopLink</h3>）添加另一个标记来取代原来的标题。
    可选：添加新标题前，还可以再添加一个 ObjectSeparator，以便直观分隔静态列表和新的动态列表。
  20. 与前面一样，拖放一个新的 SelectOneChoice 组件并将它的标签设置为“Select an employee:”
  21. 将 SelectOneCoice 组件的 value 设置为 #{Model.selectedempno}。（像以前那样使用 JSF 值绑定器。）
  22. 将一个 (JSF Core) SelectItems 组件插入到 SelectOneChoice 组件中，并将它的 value 属性绑定到 #{Model.employees}。这将把从 TopLink 返回的 List 对象关联到 SelectItems 组件。
  23. 再添加一个 PanelGroup，将它的类型设置为“horizontal”，然后再插入一个 outputText 和 outputLabel 组件对。
  24. 对于 Outputlabel，请将值设置为 “You selected employee #:”。
  25. 将 OutputText 的值设置为 #{Model.selectedempno}。

  26. 就这样了。您现在可以保存并再次运行页面以查看静态和动态选择示例！

总结

衷心希望本方法文档能够成为一个介绍有关如何开始使用新的 ADF Faces 组件库（使用广泛使用的有关组装静态和动态选择控件的示例）的用户友好的示例。

与核心 JSF 引用实现 (RI) 组件一样，ADF Faces 还提供了各种备用选择组件，其中包括一些很酷的组件，如 SelectManyShuttle 等。鼓励读者采用此示例并使用其他 ADF Faces 组件对其进行扩展。

JSF RI 视图

您可能已经注意到，相关的方法文档介绍了如何构建 Oracle TopLink 中间层，此外还逐步介绍了如何只使用 JSF RI 组件绑定视图。您可以随意尝试此文档以感受不同的开发体验。请参阅
使用 JSF 选择组件的“构建视图”部分。




false ,,,,,,,,,,,,,,,,