使用 EJB、JPA 和 JavaServer Faces 通过 JDeveloper 10g 构建 Web 应用程序

目的

在本教程中，您将使用 Oracle JDeveloper（10.1.3.1.0 或 10.1.3.2.0）构建 Web 应用程序。EJB 3.0 和 Java 持久性 API (JPA) 用于构建数据模型。对于 Web 客户端，JSF (JavaServer Faces) 用于构建用户界面，该界面包括一个主从页面和一个编辑页面。

所需时间

1 小时

主题

本教程包括下列主题：

	概述
	情景
	前提条件
	创建数据库连接
	使用 EJB 3.0 构建数据模型
	创建页面流
	创建一个主从 JSF 页面
	创建编辑页面
	运行应用程序
	自定义布局
	总结

查看屏幕截图

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

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

概述

该应用程序反映了模型-视图-控制器体系结构。模型由 EJB 组件提供，视图和控制器由 JavaServer Faces 提供。我们将使用由 JSF 兼容组件构成的 ADF Faces 集来构建更丰富的 Web 用户界面。

您将先构建该应用程序的数据模型部分。 Java 持久性 API (JPA) 为对象关系映射提供了一个 POJO 持久性模型。Java 持久性 API 是由 EJB 3.0 软件专家组开发的，是 JSR 220 的一部分，但其使用并不仅限于 EJB 软件组件。它还可以直接供 Web 应用程序和应用程序客户端使用，甚至可以在 Java EE 平台外部（例如，在 Java SE 应用程序中）使用。

企业 JavaBeans (EJB) 技术是封装业务逻辑的 Java 平台企业版 (Java EE) 的服务器端组件体系结构。利用 EJB 技术可以加快并简化基于 Java 技术的分布式、事务性、安全、可移植应用程序的开发。

Java 持久性 API 是用于管理持久性和对象/关系映射的标准 API。它为使用 Java 域模型管理关系数据库的应用程序开发人员提供了一个对象/关系映射工具。Java 持久性 API 是 Java EE 平台的一部分。它还可以用于 Java SE 环境。

在本教程中，您将通过开发会话 bean 和实体 bean 实现一个持久性模型。这些 bean 使用 EJB 3.0 批注和 JPA 来实现模型的持久性。

• EJB 3.0 实体表示数据库中的持久性数据，如客户表中的一行或者员工表中的一条员工记录。实体还可以在多个客户端间共享。您将使用 Entity Manager API 来创建、更新、删除和查询持久性模型。
• 会话 bean 执行独立的、去耦合的任务，如检查客户的信用记录。

然后，您将创建一个用于查看部门和员工信息的主从表单。创建完这个基本的主从页面之后，您将为选定的员工创建一个编辑页面。

开发和测试应用程序时，您将使用 JDeveloper 的嵌入式 Java EE 应用服务器。

返回主题列表

情景

您需要为 DEPARTMENTS 和 EMPLOYEES 表构建持久性对象。这些持久性对象以实体 bean 的形式实现。默认情况下，为部门和员工数据创建 getter 和 setter 方法。这些方法将作为会话 bean 的一部分实现。然后，您将基于部门和相关员工创建一个主从 JSF 页面，并创建一个编辑 JSF 页面以便更新员工数据。

返回主题列表

前提条件

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

返回主题列表

创建数据库连接

Java 数据库连接 (JDBC) 是 Java 应用程序用于连接关系数据库的一种标准 API。JDeveloper 使用连接导航器维护应用程序的连接信息。连接导航器简化了数据库连接的创建、管理和测试。

如果您尚未建立数据库连接，请通过执行以下步骤建立连接：

返回主题列表

使用 EJB 3.0 构建数据模型

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

在以下几个步骤中，您将在 JDeveloper 中创建一个应用程序，并为该应用程序创建一个数据模型。

	创建新的应用程序和项目
	创建持久性模型
	创建数据模型

返回主题列表

创建新的应用程序和项目

在 JDeveloper 中，经常需要对包含在应用程序中的项目进行操作。应用程序是控制结构中的最高级别。

JDeveloper 项目是一个用于对相关文件进行逻辑分组的组织结构。您可以将多个项目添加到应用程序，以轻松地组织、访问、修改和重用源代码。在 Applications Navigator 中，项目作为层次结构的第二层显示在应用程序的下面。

建议您最好使用将模型代码和视图代码分离的项目。在本教程中，我们先创建一个 EJB 组件模型项目，随后再创建一个 JSF 视图项目。

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

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

返回主题

返回主题列表

创建持久性模型

在教程的这一部分中，您将使用 EJB 3.0 实体 bean 为部门和员工创建持久性模型。
要创建 EJB 3.0 实体 bean，执行以下步骤：

1.	在 Applications Navigator 中，右键单击 EJBModel 节点，选择 New 选项。
2.	在 New Gallery 对话框中，展开 Categories 中的 Business Tier 节点。单击 Items 列表中的 EJB，然后选择 Entities from Tables (JPA/EJB 3.0)。 单击 OK。
3.	在该向导的 Welcome 页面上，单击 Next 跳过该页。
4.	在 Create Entities from Tables 向导的 Step 1 of 4 中，选择 hrconn 作为连接名。 单击 Next。
5.	在 Step 2 of 4 中，针对 HR Schema 和 Tables Objects Types，单击 Query 按钮。然后从 Available 列表中选择 Departments 和 Employees 表，将它们移至 Selected 列表中。 单击 Next。
6.	在 Step 3 of 4 中，确保 package name 为 datamodel。注意，您可以选择 List、 Collection 或 Set 作为实现关系域的集合类型。选择 java.util.List。 单击 Next。
7.	在 Step 4 of 4 中单击 Next，然后单击 Finish 创建实体 bean。 单击 Save All 图标 保存您的工作。 Applications Navigator 应如下所示：
8.	在 Applications Navigator 中双击 Departments.java 节点，在 Source 编辑器中将其打开。 注： 使这些对象与其他 Java 文件不同的是将它们作为 EJB 实体标识的批注。EJB 3.0 和 JPA 的一个主要特性是能够创建包含对象关系映射的实体，方法是使用元数据批注，而不是象在以前的版本中那样使用部署描述符。
9.	命名查询使您可以在设计时定义查询，然后在运行时使用。默认创建了一个 NamedQuery 元数据语句。它检索 departments 表中的所有行。 @NamedQuery(name = "Departments.findAll", query = "select o from Departments o") 注：任何以 @ 开头的 Java 代码符号都称作批注。使用批注，您可以向对象添加元数据。批注示例如下所示： 批注 说明 @Entity 将文件识别为一个 EJB 3.0 实体 @NamedQuery 可以在运行时用来检索数据的查询 @Table 指定实体的主表 @Id 可以定义哪个属性是实体的标识符 @Column 为持久性属性或域指定映射列 @ManyToOne 指定表之间的一种外键关系 @JoinColumn 指定外健关系的连接列和引用列
10.	在 Applications Navigator 中右键单击 EJBModel 节点，选择 Make 选项编译您的 Java 类。
11.	确保 Message - Log 窗口没有报告任何错误。

返回主题

返回主题列表

创建数据模型

会话外观为客户端对象提供底层 EJB（企业 JavaBeans）的统一接口。客户端只与外观交互作用，外观驻留在服务器上，并调用相应的 EJB 方法。因此，客户端和 EJB 之间的依赖性和通信减少了。
如果您在没有会话外观的情况下执行远程访问，客户端需要进行大量的远程调用才能直接通过网络访问 EJB 3.0 实体。这会带来大量网络流量，对性能产生负面影响。此外，如果没有外观，客户端就会直接依赖业务对象的实现，因此如果 EJB 的界面发生更改，客户端对象也要进行相应的更改。

在本部分中，您将创建一个会话 bean，用于实现一个查找员工和部门记录的方法。

1.	在 Applications Navigator 中右键单击 EJBModel 节点，然后从上下文菜单中选择 New 选项。 打开 Business Tier | EJB 类别，选择 Session Bean 项。 单击 OK。
2.	在 Create Enterprise JavaBean 向导的 Welcome 页面上，单击 Next。在 step 1 of 4 中，输入 HRFacade 作为 EJB Name。保留选项不变，然后单击 Next。
3.	在 Step 2 of 4 中，确保选中所有实体方法，然后单击 Next。 该项目中的任何实体都会在树控件中显示为节点。可以选择该复选框来包括该实体公开的所有实体方法，或者扩展这些节点并选择一个方法子集。请注意，命名的查询显示为可公开的方法。
4.	在 Step 3 of 4 中，确保 Bean Class 的完整名称为 oracle.datamodel.HRFacadeBean，然后单击 Next。
5.	在 Step 4 of 4 中，选择 Remote 和 Local 接口实现。单击 Next，然后单击 Finish。 该远程接口用于运行在单独虚拟机（如 Java 客户端）上的客户端应用程序，而本地接口用于运行在相同虚拟机（如 Web 客户端）上的客户端应用程序。
6.	Applications Navigator 应如下所示： 如果不同，则选择 EJBModel 节点，然后从 View 菜单选项中选择 Refresh ( View | Refresh) 选项。
7.	该会话 bean 由两个文件组成：HRFacadeBean — 包含会话 bean 代码。HRAppFacade — 描述远程客户端的 Bean 的功能。 打开 Structure 窗格 ( View | Structure) 并在 Applications Navigator 中选择 buslogic.HRAppFacadeBean。在 Structure 窗格中展开 Sources 节点。Structure 窗格应如下所示： 注意，JDeveloper 提供了一种通过示例客户端测试 EJB 的方法（为此，右键单击 HRFacadeBean，然后从上下文菜单中选择 New Sample Java Client），然后您可以运行该 EJB。
8.	现在，我们要将 EJB 作为 Oracle ADF 框架的数据控件公开。这将简化我们将用户界面绑定到 EJB 的方式。要了解有关 ADF 框架的更多信息，请访问： http://oracle.com/technology/products/adf 在 Applications Navigator 中，右键单击 HRFacadeBean 节点，然后从上下文菜单中选择 Create Data Controls。
9.	在 Choose EJB Interface 对话框中，选择 Local 并单击 OK。 单击 Save All 图标 保存您的工作。
10.	右键单击 EJBModel 项目，选择 Make 选项编译该项目。确认 Messages - Log 窗口没有报告任何错误。
11.	Applications Navigator 应如下所示：

返回主题

返回主题列表

创建页面流

您将使用 JDeveloper 的 JSF 导航建模器以图表方式设计和创建应用程序的页面以及页面之间的导航。

1.	创建本教程的应用程序时，您使用了两个项目：EJBModel 和 UserInterface。EJBModel 项目包含用作应用程序的业务模型的数据控件。UserInterface 项目将包括应用程序的 View 部分，它定义了用户界面组件。 折叠 EJBModel 项目节点，展开 UserInterface 项目：
2.	在 Applications Navigator 中，右键单击 UserInterface 节点，然后从上下文菜单中选择 Open JSF Navigation。
3.	空的图表打开。注意 Diagram 编辑器右边的 Component Palette。您将使用它为 JSF 导航模型创建组件。
4.	在 Component Palette 的 JSF Navigation Diagram 页面中，选择 JSF Page，单击希望页面在图表上显示的位置。将页面重命名为 deptEmployees。
5.	在 Component Palette 中，将 JSF Page 拖放到以前的 JSF 页面旁边。将页面重命名为 editEmployee。
6.	在 Component Palette 中选择 JSF Navigation Case。单击源 JSF 页面 ( deptEmployees) 的图标，然后单击该导航示例的目标 JSF 页面 ( editEmployee) 的图标。
7.	修改默认标签“success”，方法是单击它，然后在其上键入 edit 。
8.	JDeveloper 为您提供了 jsf-config.xml 文件的三种视图。我们使用了图表视图，但是相同的信息也可通过声明式对话框以及源直接访问。 单击屏幕底部的 Overview 选项卡。单击左侧表中的 Navigation Rules。注意，该表中列出了您刚刚在此图表中创建的规则。 现在，单击屏幕底部的 Source 选项卡。 <from-view-id> 标记标识源页面， <to-view-id> 标记标识目标页面。页面名称下面的下划线提醒您尚未创建页面。
9.	切换回图表视图，在 Component Palette 中选择 JSF Navigation Case。单击源 JSF 页面 ( editEmployee) 的图标，然后单击该导航示例的目标 JSF 页面 ( deptEmployees) 的图标。
10.	修改默认标签“success”，方法是单击它，然后在其上键入 commit 。
11.	您的图表现在应类似下图所示。
12.	保存该图表。

返回主题列表

创建一个 JavaServer Faces 主从页面

在接下来的几个步骤中，您将为 Department Employees 主从页面创建一个 ADF Faces。

1.	在页面流图表上，双击 deptEmployees 图标启动 Create JSF JSP 向导。
2.	单击 Next 跳过 Welcome 页面，在 Step 1 中选择 JSP Document (*.jspx) 按钮。 单击 Next 继续。
3.	在下一个页面 Component Binding 上，选择 Automatically Expose UI Components 选项，保留其他默认值，然后单击 Next。
4.	如果有必要，从 Available Libraries 窗口中选择一些库，使用右箭头按钮将它们移至 Selected Libraries 部分中，确保包括以下库： JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML 单击 Next 接受这些库。
5.	单击 Next 接受默认 HTML 选项，然后单击 Finish 创建新 JSF JSP。 您现在就创建了一个空的 deptEmployees.jsp 页面。在随后的步骤中，您将在该页面上添加一个 ADF Faces 数据绑定组件。 该组件显示一个部门以及属于该部门的员工。
6.	在 Component Palette 中，将 ADF Faces Core 库中的 panelPage 组件拖放到页面设计上。 panelPage 是一个页面的模板布局，包含不同部分的占位符。例如，它包含公司品牌和菜单的占位符。
7.	在 Structure 窗格中，将 panelPage 的 Title 值更改为 Department/Employees
8.	打开 Data Control Palette ( View | Data Control Palette)，展开 HRFacadeLocal | queryDepartmentsFindAll() | Departments，然后选择 employeesList 节点。 employeesList 节点代表各部门主从关系中记录的集合。数据绑定自动同步在特定部门中工作的员工。
9.	将 departmentCollection 拖放到页面上，然后从动态菜单中选择 Create Master-Details | ADF Master Form, Detail Table。 在 Client Project Libraries Added 对话框中，单击 OK。页面现在看起来应与下图类似： 主表单由默认的导航按钮填充，详细信息表有默认的 Submit 按钮。
10.	选择 Submit 按钮，然后在 Property 窗格中，将 Text 值更改为 Edit 。使用 Action 的下拉列表，选择 edit。
11.	在 Structure 窗格的 af:panelGroup 下面，选择第一个 af:panelHeader 组件，然后在 Property 窗格中，将 Text 属性设置为 Department。重复该操作，方法是：选择第二个 af:panelHeader 组件，在 Property 窗格中，将 Text 属性设置为 Department Employees List。
12.	您现在拥有了一个完整的 JSF 页面，它数据绑定到您的 FacadeBean。返回到页面流图，右键单击 deptEmployees.jspx 图表，然后从上下文菜单中选择 Run。
13.	主从布局显示在您的默认浏览器中。
14.	试用导航按钮导航到不同行。然后关闭浏览器窗口。

返回主题列表

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

在接下来的几个步骤中，您将使用 ADF Faces 来构建员工编辑页面。

1.	切换回页面流图，双击 editEmployee 图标启动页面向导。
2.	单击 Next 跳过 Welcome 页面，在 Step 1 中选择 JSP Document 按钮。
3.	在 Component Binding 页面上，选择 Automatically Expose UI Components 选项。保留其他默认值，然后单击 Next。
4.	在 Selected Libraries 部分中，确保包括以下库： JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML 单击 Next 接受这些库。
5.	单击 Next 接受默认 HTML 选项，然后单击 Finish 创建新的 JSPX。 您现在创建了一个空的 editEmployee.jspx 页面，显示在 Design 编辑器中。 .
6.	在 Component Palette 中，将 ADF Faces Core 库中的 panelPage 组件拖放到页面设计上。
7.	在属性窗格中，将 panelPage 的 Title 值更改为 Employee Details。
8.	打开 Data Control Palette ( View | Data Control Palette)，展开 HRFacadeLocal | queryDepartmentsFindAll() | Departments，然后选择 employeesList 节点。
9.	将 employeesList 拖放到该页面上，然后从动态菜单中选择 Create Forms | ADF Form。 在 Edit Form Fields 对话框中，单击 Include Submit Button 复选框，然后单击 OK。注意，在该阶段，您可以自定义您的表单，删除/添加域以及定义外观顺序。
10.	您的页面应如下所示： 详细信息表有一个默认的 Submit 按钮，您必须将其用作一个提交操作。
11.	在 Data Controls 面板中，选择与在更新的一行上执行的提交操作对应的 mergeEntity(Object) 节点。 注意，mergeEntity(Object) 方法对应于在更新的一行上执行的提交操作。它接受要执行该操作的行作为参数。我们将该方法绑定到当前页面上的 Submit 按钮。 将 mergeEntity 拖放到 Submit 按钮上，在对话框中选择 Bind Existing CommandButton 选项。
12.	在 Action Binding Editor 中，双击 Value 域显示编辑按钮。 单击编辑按钮，打开 Variables 对话框。
13.	在 Variables 对话框中，展开 ADF Bindings | bindings | employeesListIterator | currentRow，然后选择 dataProvider。然后使用箭头将其移至 Expression 窗格中。 单击 OK。 返回 Action Binding Editor，单击 OK。
14.	返回到页面，在 Property 窗格中选择该按钮，将 Text 更改为 Commit，将 Action 更改为下拉列表中的 commit。
15.	您的页面应如下所示：

返回主题列表

运行 JSF 页面

既然您已经构建了应用程序，您就需要对其进行测试。JDeveloper 使您可以轻松地通过内置应用服务器来测试 JSF。在 JDeveloper 中测试页面时，将自动启动该服务器。

以下几个步骤引导您完成该测试过程。

1.	要测试页面，在 Applications Navigator 中右键单击 detEmployees.jspx，从上下文菜单中选择 Run。（也可以在可视化编辑器中单击右键，从上下文菜单中选择 Run。）
2.	您的页面加载到默认的浏览器中，应如下所示：
3.	在主表单级别测试导航按钮，然后选择一个包含多个员工的部门。
4.	在 Employees 列表中， 选择一个员工，然后单击 Edit 按钮。
5.	现在应该显示 Employee Details 页面。修改员工的某个属性，然后单击 Commit 按钮。
6.	返回到主从页面，该员工的新值现在反映在主从视图中。
7.	完成操作后 关闭此浏览器。

返回主题列表

自定义布局

您的 JSF 页面是使用“默认”选项生成的。现在，您使用某些选项自定义页面的布局。

以下几个步骤引导您完成该布局自定义过程。

1.	在 Applications Navigator 中双击 detEmployees.jspx 节点，打开该页面。
2.	在 Structure 窗格中，展开 h:form | af:panelPage | af:panelGroup | af:panelHeader Department Employees List，右键单击 af:table - table1 节点，然后从上下文菜单中选择 Properties。
3.	在 Table Properties 对话框中，单击 Column Summary 选项卡。删除 {row.commissionPct} 列，使用 Top、Up、Down 和 Bottom 按钮按以下顺序重新排列其余的列： employeeId、 firstName、 lastName、 email、 salary、 hireDate、 jobId、 phoneNumber。
4.	将每列的标题更改为以下值： Employee Id、 First Name、 Last Name、 Email、 Salary、 Hire Date、 Job Id、 Phone。 您还可以单击 Edit 按钮，填充 Header Text 域以指定标题标签。
5.	单击 Column Details 选项卡。注意，您可能已经使用该选项卡更改了列标题。设置 Last Name 和 Salary 的 Is Sortable 选项。
6.	单击 Formatting 选项卡。选中 Include Range Navigation 复选框，指定 4 作为 Rows 的值。 Include Selection Column 应设置为 Single Selection， Include Table Banding 应设置为 Rows， Banding Interval 设置为 1。 单击 OK。
7.	在 Structure 窗格中，展开 af:panelHeader | af:panelForm，然后选择第一个 af:inputText。在 Property Inspector 中，将 Label 设置为 Department。对其他两个 inputText 重复该操作，将 Label 分别设置为 Name 和 Location。
8.	deptEmployees 页面现在应如 Design 编辑器中所示。
9.	右键单击该页面，然后从上下文菜单中选择 Run。
10.	在浏览器中，单击 Next 直到一个部门超过 4 名员工。 注意，显示 4 行员工数据。您还将注意到每隔一个员工行高亮显示。
11.	在 Last Name 列标题内单击，试着根据该列进行升序和降序排序。
12.	在 Salary 列标题内单击，试着根据该列进行升序和降序排序。
13.	关闭浏览器窗口。您已经成功完成了此 OBE。

返回主题列表

总结

在本教程中，您使用 Oracle JDeveloper、EJB 3.0、JPA 和 JSF 页面构建了一个端到端应用程序。您 学习了如何：

	创建数据库连接
	使用 EJB 3.0 构建数据模型
	创建页面流
	创建一个主从 JSF 页面
	创建一个编辑页面
	运行应用程序
	自定义页面布局

返回主题列表

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