使用 JSF 选择组件

作者：Chris Schalk，甲骨文公司

2005 年 1 月

简介

一个很常见的 Web 应用程序开发任务是装配用户界面 (UI) 组件，这些组件显示静态源或动态源（如数据库或 Web 服务中的源）中的选择。很明显，基本 HTML 窗体元素可以轻松地处理静态源，但当需要动态内容时，诸如用于用户界面表示的 JavaServer Faces 技术和中间层技术（如 Oracle TopLink）提供了一个综合的解决方案。

本方法文档详细介绍了如何装配静态 JSF 和动态选择组件（它们通过 Oracle JDeveloper 10.1.3 预览版绑定到 Oracle TopLink 中间层中提供的数据）。

OTN 上还提供了相关的补充方法文档“使用 ADF Faces JSF 选择组件”。该文档演示了同一选择示例，但却使用了 Oracle 的 ADF Faces JSF 组件。读者也完全可以查看该文档。

使用入门 - 构建 Oracle TopLink 中间层


在开始使用之前，请首先确保从 OTN 中下载 JDeveloper 10.1.3 预览版并将它安装到您的计算机中。您还需要设置一个数据库连接。（本方法文档使用 HR 通用模式连接，但任何模式都将满足需要。）

  1. 要开始构建示例应用程序，我们将使用应用程序工作区向导，该向导将为中间层可持续性代码生成 Model 项目，并为应用程序的视图（和控制器）组件生成 ViewController 项目。File->New->General->Application。

    对于 Application Package Prefix，我们将使用“selectfun”，对于 Application Template，我们将使用“No Template [All Technologies]”。


  2. 单击 OK 生成工作区。
  3. 可以将这个新项目命名为 selectexamples。


  4. 为 HR.Employees 表构建一组 TopLink 中间层类。（注意：任何数据库表均适用。）
  5. 在具备 Toplink 中间层以及 TopLink 部署描述符后，生成一个简单的 java 客户端。生成的某些代码稍后将复制到 JSF 应用程序的托管 bean 中。
    • 选择 Employees.java 类并右键单击“New Sample Java Client”。


  6. 可选：此时，您可以运行这个新示例客户端以确保 TopLink 可持续性代码能够正常运行。您将在控制台中看到一个雇员列表。
  7. 创建一个新的 Java 类“ModelBean”。该类将包含两个字段以及一个用于从 TopLink 中间层中提取数据的方法。


  8. 使用类编辑器向 ModelBean 中添加两个
    java.lang.String     类型的字段“selectedcountry”和“selectedempno”。（单击编辑器底部的“Class”选项卡，然后单击顶部的“Add”按钮。）


  9. 使用类编辑器添加一个 java.util.List 类型的雇员字段。
  10. 现在我们将修改雇员字段的 getter（“getEmployees”），它从 TopLink EmployeesClient 类的 main 方法中进行编码。
    • 在单个“return employees;”行之前的 ModelBean 的 getEmployees 方法中， 复制并粘贴 EmployeesClient 类中生成的“main()”方法的内容。（稍后，我们将在创建视图时将 JSF 选择组件绑定到该方法。） 以下是粘贴后的新 getEmployees 方法的代码示例：（注意：您不应复制并粘贴该代码，这是因为您将需要您自己的 toplink 部署描述符路径。）
    •   public List getEmployees()
  {
    EmployeesClient employeesClient = new EmployeesClient();
    // To use sessions.xml uncomment the following three lines of code, fill in the appropriate resource locations and add sessions.xml to the classpath.
    // oracle.toplink.tools.sessionconfiguration.XMLLoader xmlLoader = new oracle.toplink.tools.sessionconfiguration.XMLLoader("META-INF/sessions.xml");
    // oracle.toplink.tools.sessionmanagement.SessionManager sessionManager = oracle.toplink.tools.sessionmanagement.SessionManager.getManager();
    // DatabaseSession session = (DatabaseSession)sessionManager.getSession(xmlLoader, "MySessionName", employeesClient.getClass().getClassLoader());
    // To use sessions.xml as defined above, comment out the following three lines of code.
    oracle.toplink.sessions.Project project = XMLProjectReader.read("path_to_your/toplink-deployment-descriptor.xml");
DatabaseSession session = project.createDatabaseSession();
    session.login();
    Vector objects = session.readAllObjects(selectfun.Employees.class);
    for (Iterator itr = objects.iterator();itr.hasNext();)
    {
      employeesClient.printObjectAttributes(itr.next());

    }
}
    • 现在我们将修改该代码以便使用 JSF 选择组件。用填充雇员列表的代码替换 for 循环中的 employeesClient.printObjectAttributes(..); 语句。如下所示：
      public List getEmployees()
                        


  {
EmployeesClient employeesClient = new EmployeesClient();
// 要使用 sessions.xml，请取消注释以下三行代码，填写相应的资源位置并向 classpath 中添加 sessions.xml。
// oracle.toplink.tools.sessionconfiguration.XMLLoader xmlLoader = new oracle.toplink.tools.sessionconfiguration.XMLLoader("META-INF/sessions.xml");
// oracle.toplink.tools.sessionmanagement.SessionManager sessionManager = oracle.toplink.tools.sessionmanagement.SessionManager.getManager();
// DatabaseSession session = (DatabaseSession)sessionManager.getSession(xmlLoader, "MySessionName", employeesClient.getClass().getClassLoader());
// 要使用上面定义的 sessions.xml，请取消注释以下三行代码。
oracle.toplink.sessions.Project project = XMLProjectReader.read("
                        
    path_to_your    /toplink-deployment-descriptor.xml");
DatabaseSession session = project.createDatabaseSession();
session.login();
Vector objects = session.readAllObjects(selectfun.Employees.class);
for (Iterator itr = objects.iterator();itr.hasNext();)
    {
  
                        
    try 
         {
    Field field = itr.next().getClass().getDeclaredField("email");
    Field field = itr.next().getClass().getDeclaredField("email");
    field.setAccessible(true);
    valfield.setAccessible(true);
    employees.add(new SelectItem( valfield.get(itr.next()).toString(),  field.get(itr.next()).toString()));

    } catch (Exception ex) 
         {
    ex.printStackTrace();
         }    
    }
}
  11. 添加代码时，JDeveloper 将提示您将所需的程序包导入到类中。接受建议做法。注意：您还必须确保将“JSF”库添加到该项目中。（在导航器中双击该项目，选择 Libraries 节点并单击“Add Library”。）
  12. 保存并编译所有内容。您的项目将成功编译。

使用 JSF 组件构建视图

我们现在将使用原始的 JSF 引用实现 (RI) 用户界面组件构建一个简单的视图。在相关的后续方法文档中，您将学习如何使用 Oracle 的 ADF Faces JSF 组件构建一个相似的视图。

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


有关详细信息，请参阅我的网志条目，网址是：http://radio.weblogs.com/0130966/2005/01/05.html#a28

  1. 在同一项目中构建一个支持 JSF 的 JSP 页面，方法是选择 File->New->Web-Tier->JSF->JSF JSP。
    重要声明：创建 JSF-JSP 以及随后拖放的 JSF 组件


  2. 调用 JSF JSP 向导时，您可以将该页面命名为“selectfun.jsp”。您还可以保留类型和错误页面设置的缺省值，并单击“完成”生成您的页面。（要进一步定制该页面，您可以选择性地单击 JSP 向导中的“Next”。）
  3. 生成该页面后，可以添加一个格式设置为 <h2> 的标题，如“JSF Select Fun”。还可以添加单独的行：“Static Example”和“Dynamic Example Using Oracle TopLink”。将这两行的格式设置为 <H3>。然后，可以从 CSS 面板页面中拖放一个层叠样式表（如 jdeveloper）。


  4. 继续操作前，我们需要将在 Model 中作为托管 bean 创建的 ModelBean 类添加到 Faces-Config.xml 文件中。为此，请在导航器中找到 faces-config.xml 文件 (Web Content->WEB-INF->faces-config.xml)，然后双击它以编辑它的内容。
  5. faces-config.xml 文件的缺省编辑器是页面流建模器，但对于这个简单的应用程序，我们将不引入任何导航规则，因此单击页面底部的“Overview”选项卡以调用 faces-config 编辑控制台。
  6. 添加一个新的托管 Bean，方法是先单击该控制台左侧的 Managed Beans 节点，然后单击“New”。
    指定以下设置并单击“OK”：
    • Name:Model
    • Class: selectfun.ModelBean
    • Scope: request


  7. 现在，我们将构建一个简单的静态示例选择列表，该列表将显示一个国家列表并显示选定的国家代码。在“Static Example”下，输入一个包含文本“Select a Country:”的新段落 <p>。
  8. 从 Component Palette 中，将“ Menu”项拖放到页面上的新段落之后。该面板上的 Menu 项实际上是 JSF HTML h:selectOneMenu 用户界面组件。注意，拖放后将显示一个简单的向导，通过该向导您可以将该项绑定到一个列表或直接绑定到静态值。我们将使用该向导创建一个静态的国家列表。

    9. 单击 OK 后，该向导将插入父标记 h:selectOneMenu 以及子标记（用户界面组件） <f:selectItem>，且该向导中定义了静态值。

  9. 此时，我们可以运行该页面，随即它将显示这些值，但为了保存选定值，我们必须将 h:selectOneMenu 父标记绑定到 ModelBean 的 selectedcountry 字段。

    要绑定 List Menu，首先在可视化编辑器中选择它，单击 Property Inspector 中的“Value”属性，单击数据绑定图标 ，然后再次单击 Value 属性。这将添加一个空的 JSF 表达式以及一个按钮来调用 JSF 值绑定程序对话框 。单击这个新按钮以调用该对话框。然后，可以将 Value 属性绑定到 #{Model.selectedcountry}。





    单击“OK”后，“selectedcountry”字段将在窗体提交发生时从选定的 List Menu 项中收到该值。
  10. 要在窗体提交发生后显示页面上的选定值，我们将使用 outputText JSF 用户界面。
    在该页面中的选择菜单下，输入一个新的段落并添加文本 “You selected:”。然后将 “Output Text”(h:outputText) JSF 用户界面组件拖放到该页面上。使用 Value 绑定对话框将 Value 属性绑定到 #{Model.selectedcountry}。
  11. 运行静态示例之前，我们需要插入一个将用于提交窗体的 CommandButton。从 Component Palette 中，将 “Command Button”拖放到页面底部。将 Value 设置为“Update Model”。
  12. 保存所有设置并运行 selectfun.jsp 页面（右键单击并选择“Run”。）。您将看到选定国家的选定国家代码。


  13. 现在，我们将基于 TopLink 中的数据创建一个动态绑定列表项。在页面中的静态示例下面，添加一个新段落并输入文本“Select an Employee:”。
  14. 拖放一个新的 JSF Menu 用户界面组件，并将其绑定到 TopLink 提供的列表中。在该向导显示时，单击 Bind 选项并调用 JSF 值绑定程序对话框，然后将该列表绑定到 #{Model.employees}。

    15. 单击 OK 将把子标记 f:selectItems 绑定到 getEmployees 方法（返回从 TopLink 中生成的列表）。

  15. 我们必须再次将父选择标记绑定到 ModelBean 类的 selectedempno 字段。选择新的 List Menu（“h:SelectOneMenu”），然后使用 JSF 值绑定程序对话框将 Value 属性绑定到 #{Model.selectedempno}。
  16. 要显示我们所选择的内容，请输入一个包含文本“You selected Employee #:”的新段落，然后拖动该文本旁边的“Output Text” (h:outputText) JSF 组件并将其绑定到相同的 #{Model.selectedempno} 字段。（您还可以使用粗体 <b> 标记包装它。）
  17. 重新运行该 JSP 页面，选择一个国家和雇员并查看结果！


  18. 真的很酷！


总结

在本方法文档中您可以看到，将 JSF 选择组件用于静态或动态源是一个非常简单直接的过程。该示例只介绍了如何使用多个 JSF 选择组件之一，您可以随意试用各种其他 JSF 选择组件。

Oracle ADF Faces 视图选项

除了使用提供的 JSF RI 组件以外，还可以使用 Oracle 的 ADF Faces JSF 组件。OTN 上还提供了一篇后续方法文档使用 ADF Faces JSF 选择组件，该文档介绍了如何使用 ADF Faces JSF 组件构建一个具有静态和动态选择组件的相似视图。建议读者查看该文档！

 

Left Curve
热门下载
 Right Curve