使用 ADF Faces 和 Oracle TopLink 构建端到端的 Web 应用程序

目的

在本教程中，您将使用 Oracle 应用开发框架 (ADF) 构建一个包含主从页面和相关编辑页面的 Web 应用程序。ADF Faces 用于构建客户端组件。Oracle TopLink 提供了数据模型。您还将并入一个 EJB 会话 bean 来提供模型的会话 fa?ade。

所需时间：

60 分钟

主题

本教程包括下列主题：

	概述
	前提条件
	创建数据库连接
	使用 TopLink 构建数据模型
	定义页面流
	创建一个 JavaServer Faces 主从页面
	创建一个员工编辑 JavaServer Faces 页面
	运行 JSF
	总结

查看屏幕截图

将鼠标置于此图标上 可以加载和查看本教程的所有屏幕截图。（警告：因为此操作会同时加载所有屏幕截图，所以网速较慢时，响应时间可能会比较长。）

注：此外，您还可以在下列步骤中将鼠标放在每个单独的图标上，从而仅加载和查看与该步骤相关的屏幕截图。可以通过单击各个屏幕截图来将其隐藏。

概述

您将创建一个主从表单来查看部门信息以及每个部门中的员工。然后，您将创建一个调用编辑页面的按钮，以便您更新员工的详细信息。最后，您将在 JDeveloper 的嵌入式服务器中测试该应用程序。

返回主题列表

前提条件

开始本教程之前，您应该：

返回主题列表

创建数据库连接

如果还没有创建到 HR 模式的 JDBC 连接，则执行下列步骤：

返回主题列表

使用 TopLink 构建数据模型

业务模型为应用程序提供数据访问和验证功能。当数据由业务模型管理时，无论客户端实现方式如何，数据始终由该模型验证。它将验证和业务规则与用户界面设计进行了清晰划分。

要在 JDeveloper 中创建应用程序，并为该应用程序创建 TopLink 模型，您将执行以下任务：

	创建新的应用程序和项目
	使用 Oracle Toplink 创建数据模型
	创建 EJB 会话 Bean 和 ADF 数据控件

返回主题列表

创建新的应用程序和项目

在 JDeveloper 中，一个应用程序通常包含多个项目。

应用程序是 JDeveloper 控制结构中的最高级别。它是您在工作时需要的所有相关对象的视图。在开发 Java 程序时，应用程序将跟踪项目。

JDeveloper 项目是一个按逻辑将相关文件分类的组织结构。可以将多个项目添加到应用程序中，以便轻松地组织、访问、修改以及重用源代码。在 Applications Navigator 中，项目作为层次结构的第二层显示为应用程序的子节点。

创建任何应用程序组件之前，必须首先创建应用程序和初始项目。为此，执行以下步骤：

1.	单击 Applications Navigator 选项卡，返回 Applications Navigator。 右键单击 Applications 节点，从上下文菜单中选择 New Application。
2.	在 Create Application 对话框中，输入应用程序名 MDToplink 。注意，当您输入应用程序名时，目录名将自动改变。 输入 oracle 作为 Application Package Prefix。 从 Application Template 下拉列表中选择值 Web Application [JSF, EJB, Toplink]。 单击 Manage Templates... 按钮。
3.	在 Application Templates 树中，为 Web Application [JSF, EJB, Toplink] 节点选择 View and Controller，然后在 View and Controller 窗格中，将 Project Name 设置为 UserInterface.jpr，并将 Default Package 设置为 view。
4.	在 Application Templates 树中，为 Web Application [JSF, EJB, Toplink] 节点选择 Data Model，然后在 Data Model 窗格中，将 Project Name 设置为 DataModel.jpr，并将 Default Package 设置为 datamodel。 单击 OK。
5.	返回 Create Application，并单击 OK 创建应用程序。
6.	单击工具栏上的 Save All 以保存您的工作。或者，您可以从菜单中选择 File | Save All。 Applications Navigator 应类似于下图所示。您现在准备为本教程创建应用程序组件。

返回主题

返回主题列表

使用 Oracle Toplink 创建数据模型

Oracle TopLink 提供了 Java 对象关系持久性，使您可以创建 Java 对象来访问和持久保存关系数据。Oracle 应用开发框架 (ADF) 使您可以通过 ADF 数据控件在用户界面中使用这些 TopLink 对象。这些数据控件使客户端应用程序可以使用数据，而不必关心所选择的基础技术（在本示例中为 Oracle TopLink）。

要为应用程序创建数据模型，请执行以下步骤：

1.	在 Applications Navigator 中，右键单击 DataModel 项目，然后从上下文菜单中选择 New。
2.	在 New Gallery 的 Categories 树中展开 Business Tier 节点，然后选择 TopLink。在 Items 列表中选择 Java Objects from Tables，然后单击 OK。
3.	如果显示 Create Java Objects from Tables 向导的 Welcome 页面，则单击 Next。 TopLink 需要每个项目的 TopLink 映射文件。该文件包含有关类映射到数据库表的方式的信息。创建 TopLink 对象后，可以编辑此文件以对默认映射进行更改。该向导帮助您为项目创建一个新映射。 在该向导的 Select DB Connection 页面上，单击 TopLink Map 属性的 New 按钮。
4.	在 Create Object-Relational Map 对话框中，将 TopLink Map Name 设置为 HRMap，并确保将 Connection 设置为 hrconn。单击 OK。
5.	JDeveloper 在创建映射文件时显示进度指示器。当控制返回到该向导时，单击 Next。
6.	在该向导的 Select Tables 页面上，选择要表示为 TopLink 对象的表。单击 Query 显示可用表。 在 Available 列表中，选择 DEPARTMENTS 和 EMPLOYEES，然后单击 Add 将选定表移动到 Selected 列表中。 单击 Next。
7.	在该向导的 General Options 页面上，确保程序包名称为 oracle.datamodel。否则，请修改它。单击 Next。
8.	在该向导的 Specify Object Details 页面中，您可以编辑所生成的每个 Java 类的类名和源目录。接受默认选项，然后单击 Next。
9.	在该向导的 Summary 页面上，单击 Finish 创建 Java 对象。
10.	单击工具栏上的 Save All 以保存您的工作。或者，您可以从菜单中选择 File | Save All。 在 Applications Navigator 中，展开 Application Sources 及其子节点。您会看到该向导为您创建的 Java 文件和 TopLink 映射文件。 您已经为 HR 模式中的 Departments 和 Employees 表创建了 TopLink POJO（普通旧式 Java 对象）。 .java 文件包含属性定义、构造函数、getter 和 setter 的代码。

返回主题

返回主题列表

创建 EJB 会话 Bean 和 ADF 数据控件

在本部分中，您将创建 Enterprise JavaBean (EJB) 会话 bean，以用作该应用程序中的数据控件的基础。数据控件表示数据模型与任何客户端组件之间的管道连接。可以直接基于 TopLink 持久对象创建数据控件。但在本教程中，您使用 EJB 会话 facade 来访问 TopLink 对象，因此 EJB 会话 bean 提供了执行此管道连接所需的接口。

会话 bean 在公开必要接口的同时封装了业务逻辑和业务数据。因此，客户端层可以使用模型中的分布式服务，而不必关心它的复杂性。本教程中的会话 bean 由两个文件组成：

• HRPublicFacadeBean.java - 包含会话代码并实现本地接口
• HRPublicFacadeLocal.java - 一个包含查询和持久保存数据的代码的本地接口

要使用 TopLink POJO 和 HRPublicFacadeBean，请在创建会话 bean 后，为 TopLink 映射 (HRMap) 中定义的对象创建一个数据控件。

要在 oracle.datamodel 程序包中创建一个名为 HRPublicFacade 的会话 bean，请执行以下步骤：

1.	在 Applications Navigator 中，右键单击 DataModel 项目，然后从上下文菜单中选择 New。
2.	在 New Gallery 的 Categories 列表中展开 Business Tier，然后选择 EJB 节点。在 Items 列表中，选择 Session Bean 并单击 OK。
3.	如果显示了 Create Session Bean 向导的欢迎页面，则单击 Next。 在该向导的 EJB Name and Options 页面上，将值设置为如下所示的值。 域 值 EJB Name HRPublicFacade Session Type Stateless Transaction Type Container Generate Session Facade Methods 选中复选框（以便生成用于查询和持久保存数据的方法） Entity Implementation TopLink POJOs option selected（因为您将 TopLink POJO 用作数据模型的基础） 无状态会话 bean 没有内部状态。它们不记录从一个方法调用传递到另一个方法调用的信息。无状态业务方法的每个调用都独立于它的前一个调用。只有需要在方法调用之间维护会话状态的应用程序（如在线购物车）才需要有状态会话 bean。 通过指定一个事务类型的容器，您将启用容器来管理事务，因此不必编写事务机制的代码。仅当您要编写自己的事务机制时才需要更改此设置。 单击 Next。
4.	在该向导的 Session Facade 页面上，确保选中了所有复选框，因为您需要此会话 facade 并入所有方法和命名查询。单击 Next。
5.	在该向导的 Class Definitions 页面上，确保将 Bean Class 设置为 oracle.datamodel.HRPublicFacadeBean。默认目录是可接受的。单击 Next。
6.	在该向导的 EJB Component Interfaces 页面上： 取消选择 Implement a Remote Interface。（使用命令行测试客户端需要远程接口，但此处不需要）。 确保选择了 Implement a Local Interface。该选项使 Web 客户端可以在同一 Java 虚拟机 (JVM) 中运行。 单击 Next。 单击 Finish 完成该过程。
7.	新 HRPublicFacadeBean 类将在编辑器中打开。在 Structure 窗口中（从 JDeveloper 菜单中选择 View | Structure），展开 Methods 节点并双击 findAllDepartments()，以便在编辑器窗口显示的 HRPublicFacadeBean.java 文件中找到该方法。 在这个方法中，应用程序将编辑该方法的结果。
8.	在 Applications Navigator 中，展开 DataModel 项目，然后展开 Application Sources 和 oracle.datamodel 程序包。 右键单击 HRPublicFacadeBean.java，然后从上下文菜单中选择 Create Data Control 。 单击 JDeveloper 工具栏上的 Save All ，或从菜单中选择 File | Save All。

返回主题

返回主题列表

定义页面流

您在创建该应用程序时创建了两个项目：DataModel 和 UserInterface。DataModel 项目包含用作应用程序的业务模型的 TopLink 数据控件。UserInterface 项目用于应用程序的视图部分，视图部分定义了用户界面组件。

您现在将开始定义用户界面。您使用 JDeveloper 的 JSF 导航图设计和创建应用程序的页面，并定义页面之间的导航。

要创建应用程序的页面流图，请执行以下步骤：

1.	在 Applications Navigator 中，右键单击 UserInterface 项目并从上下文菜单中选择 Open JSF Navigation。
2.	确保从 Component Palette 的下拉列表中选择 JSF Navigation Diagram 选择 JSF Page 并单击该图上要显示该页面的位置。 注意，该页面显示了一个黄色的警告符号。这是因为您在该图上绘制了一个尚不存在的页面。以后在您创建页面时，此黄色警告将消失。
3.	键入 deptEmp 以对该页面进行重命名。 您只需键入名称，JDeveloper 将在您按 [Enter] 时自动添加一个前导斜线和 .jsp 扩展名。
4.	采用类似方法，将另一个 JSF 页面添加到该图表中的前一个 JSF 页面的旁边。将该页面重命名为 editEmp。
5.	在 Component Palette 中选择 JSF Navigation Case。 单击源页面 ( deptEmp)，然后单击目标页面 ( editEmp) 创建一个导航示例。
6.	修改默认标签“success”，方法是单击它，然后在其上键入 edit 。或者，您可以在 Property Inspector 中将 From Outcome 属性的值更改为 edit 。按 [Enter] 或在其他位置单击时，该图表中的值也会更改。 JDeveloper 自动向图表中添加一个前导连字符。
7.	单击编辑器底部的 Overview 选项卡。在左侧的列表中选择 Navigation Rules。注意，该表中列出了您刚刚在此图表中创建的规则。 单击 Source 选项卡。 &ltfrom-view-id> 标记标识源页面， &ltto-view-id> 标记标识目标页面。页面名称下面的下划线提醒您尚未创建页面。
8.	单击 Diagram 选项卡切换回图表视图。 在 Component Palette 中选择 JSF Navigation Case。单击源页面 ( editEmp)，然后单击目标页面 ( deptEmp) 以创建其他导航示例。
9.	将默认标签修改为 commit，方法是在 Property Inspector 中键入它或更改 From Outcome 属性。
10.	单击 Save All 保存您的工作。 您的图表现在应类似下图所示。

返回主题列表

创建一个 JavaServer Faces (JSF) 主从页面

在该部分中，您将使用 ADF Faces 组件创建一个显示部门及其相关员工的主从 JSF 页面。

Oracle ADF Faces 是一组基于 JavaServer Faces JSR (JSR 127) 的 功能齐全的用户界面组件。 这些组件是包含内置功能的各种用户界面元素，您可以在应用程序中自定义和重用这些元素。此类组件的示例包括数据表、层次表以及颜色和日期选择器。

要创建页面，执行以下步骤：

1.	在 JSF Navigation Diagram 上，双击 deptEmp.jsp 启动 Create JSF JSP 向导。 如果显示该向导的 Welcome 页面，请单击 Next。 在该向导的 JSP File 页面上，选择 JSP Document 选项。这将创建 JSP 页面的 XML 表示，以确保该页面使用格式良好的 XML 语法。 单击 Next 继续。
2.	在 Component Binding 页面上，选择 Automatically Expose UI Components in a New Managed Bean 选项。保留其他值的默认值，然后单击 Next。
3.	确保 Selected Libraries 列表中显示如下所示的库。 JSF Core 1.0 ADF Faces Components ADF Faces HTML 否则，请在 Available Libraries 列表中选择它们，然后单击 Add 将其加入 Selected Libraries 列表。注意，库版本号可能与以上所示的版本号不同。 单击 Next 接受这些所需的库，以便在页面上创建 ADF Faces 组件。
4.	单击 Next 接受默认 HTML 选项，然后单击 Finish 创建新 JSF JSP。 将在编辑器中打开空的 deptEmp.jspx 页面。在随后的步骤中，您将在该页面上添加一个 ADF Faces 数据绑定组件。该组件显示一个部门及其员工。
5.	在 Component Palette 中，从下拉列表中选择 ADF Faces Core，然后选择 panelPage 组件以将其添加到页面中。 注：如果编辑器窗口右侧未显示 Component Palette，请从 JDeveloper 菜单中选择 View | Component Palette。
6.	panelPage 组件是整个页面的布局。它为您可能要在应用程序中使用的各种 facet 提供了占位符。在此应用程序中，您只需要标题。其他未定义的 facet 将不会在运行时显示。 在 Property Inspector 中，将 panelPage 的 Title 值更改为 Department/Employees。按 [Enter] 或在其他位置单击时，图表上的标题将更改。
7.	单击 Data Control Palette 选项卡（如果在 Components 选项卡旁边未看到此选项卡，请从菜单中选择 View | Data Control Palette）。 展开 HRPublicFacadeLocal、 findAllDepartments() 和 Departments 节点。 选择 departmentCollection 节点。这表示部门员工的嵌套集合。 将 departmentCollection 拖放到 panelPage 上，然后从动态菜单中选择 Create Master-Details | ADF Master Form, Detail Table。 单击 OK 确认 Client Project Libraries Added 对话框中的消息。
8.	JDeveloper 将 ADF Master Detail 组件添加到 JSF 页面上。页面现在看起来应与下图类似： 主表单有默认的导航按钮，详细信息表有默认的 Submit 按钮。
9.	选择该页面上的 Submit 按钮。在 Property Inspector 中，将 Text 属性的值更改为 Edit 。注意，当您按 [Enter] 或在其他位置单击时按钮上的标签将更改。 从 Action 属性的下拉列表中，选择 edit。注意，该操作对应于导航示例（从该页面导航到您前面在 JSF 导航图表中定义的 editEmp 页面）中的 From Outcome 的名称。这可以确保当用户单击该按钮时使用此导航示例，以便可以从该页面导航到 editEmp 页面。
10.	在 Structure 窗口中，展开 af:panelGroup 节点。 选择 af:panelHeader - oracle.datamodel.Departments component ，并在 Property Inspector 中将 Text 属性设置为 Departments。该面板的标题将在页面上更改。
11.	采用类似方法，将 af:panelHeader - departmentCollection 组件的 Text 属性设置为 Employees，从而更改该面板的标题。 单击 Save All 保存您的工作。您现在创建了一个数据绑定到 TopLink 业务服务的完整 JSF JSP。

返回主题列表

创建一个员工编辑 JavaServer Faces 页面

在本部分中，您将使用 ADF Faces 组件创建一个可以编辑员工详细信息的页面。要创建页面，执行以下步骤：

1.	单击编辑器中的 faces-config.xml 选项卡切换回 JSF Navigation Diagram。如果已关闭该图表，可以右键单击 UserInterface 项目然后从上下文菜单中选择 Open JSF Navigation 重新打开它。 单击编辑器底部的 Diagram 选项卡，然后双击 editEmp.jsp 开始创建该页面。
2.	如果显示了 Create JSF JSP 向导的欢迎页面，则单击 Next。 在该向导的 JSP File 页面上，对于 Type 选择 JSP Document 选项。然后，单击 Next 继续。
3.	在 Component Binding 页面上，选择 Automatically Expose UI Components in a New Managed Bean 选项。保留其他默认值，然后单击 Next。
4.	确保 Selected Libraries 列表中显示如下所示的库。 JSF Core 1.0 ADF Faces Components ADF Faces HTML 否则，请在 Available Libraries 列表中选择它们，然后单击 Add 将其加入 Selected Libraries 列表。注意，库版本号可能与以上显示的版本号不同。 单击 Next 接受这些库。
5.	单击 Next 接受默认 HTML 选项，然后单击 Finish 创建新 JSF JSP。 将在编辑器中打开空的 editEmp.jspx 页面。
6.	单击 Components（或 Component Palette）选项卡。 在 Component Palette 中，确保在下拉列表中选择 ADF Faces Core。选择 panelPage 组件，将其添加到页面中。
7.	在 Property Inspector 中，将 panelPage 的 Title 值更改为 Employee Details 。
8.	单击 Data Controls 选项卡。 选择 findallDepartments | Departments 下的 departmentCollection 节点，然后将其拖动到 Panel Page ... ，然后从动态菜单中选择 Create Forms | ADF Form。
9.	在 Edit Form Fields 对话框中，选择 Include Submit Button 选项，然后单击 OK。 编辑表现在用默认值和 Submit 按钮填充。
10.	现在，您将添加一个方法以使用户可以提交更改。TopLink 在 mergeEntity() 方法中实现提交。 将 mergeEntity(Object) 方法从 Data Control Palette 拖动到编辑器中的 Submit 按钮 ... ，然后从动态菜单中选择 Bind Existing CommandButton。
11.	在 Action Binding Editor 对话框中，双击 Parameters:Value 域，然后单击 Parameter Value 旁边的 Edit 。 在 Variables 对话框中，展开 ADF Bindings、 bindings、 departmentCollectionIterator 和 currentRow。 选择 dataProvider 并单击向右箭头 将它加入 Expression 域。然后单击 OK。 单击 OK 关闭 Action Binding Editor 对话框。
12.	选择编辑器中的 mergeEntity 按钮。 在 Property Inspector 中，将 Text 属性设置为 Save Changes ，然后从 Action 下拉列表中选择 commit 。 注意，该操作对应于导航示例（从该页面导航到前面在 JSF Navigation 图表中定义的 deptEmp 页面）中的 From Outcome 的名称。这可以确保当用户单击该按钮时使用此导航示例，以便可以从该页面导航到 editEmp 页面。 单击 Save All 保存您的工作。

返回主题列表

运行应用程序

至此，您已经构建了新的 ADF Faces 应用程序，下面需要对其进行测试。JDeveloper 使您可以轻松地通过内置 J2EE 服务器来测试 JSF 应用程序。当您从 JDeveloper 中测试页面时，OC4J 服务器将自动启动。

要完成测试过程，执行以下步骤。

1.	在 Applications Navigator、该页面的编辑器或 JSF Navigation Diagram 中右键单击 deptEmp.jspx，然后从上下文菜单中选择 Run。 嵌套式 OC4J 服务器随即启动并初始化，同时浏览器中将显示该页面。
2.	在主表单级别测试导航按钮，然后导航到包含多个员工的部门。
3.	在 Employee 表中，选择一个员工，然后单击 Edit。
4.	按照在 JSF Navigation Diagram 中定义的导航示例所指定的，现在将显示标记为 Employee Details 的 editEmp.jspx 页面。 修改员工的电子邮件地址（例如，从 PFAY 更改为 PATFAY ），然后单击 Save Changes。
5.	按照在 JSF Navigation Diagram 中定义的导航示例所指定的，现在将显示标记为 Department/Employees 的 deptEmp.jspx 页面。 注意，详细信息表中现在已反映了员工的新值。
6.	现在，检查是否对数据库执行了更新。 在 JDeveloper 中，单击 Connections 选项卡。 展开 Database、 hrconn, HR 和 Tables 节点。 双击 EMPLOYEES 表以在编辑器中打开它。单击 Data 选项卡，然后找到已更新其数据的员工记录，以确认已将更新提交给数据库。

返回主题列表

总结

在本教程中，您使用 JDeveloper、Oracle TopLink 和 ADF Faces 创建了一个简单的端到端应用程序。您学习了如何：

	使用 TopLink 和 EJB 创建业务模型和会话 facade
	创建一个 JSF Navigation Diagram 以指定页面和导航
	创建一个使用 ADF Faces 组件显示部门和相关员工的主从页面
	创建一个相关页面来编辑员工详细信息并提交更改
	测试应用程序。

返回主题列表

将鼠标置于该图标上可以隐藏所有的屏幕截图。