在 JDeveloper 11g 中使用绑定任务流、区域和路由器

目的

在本教程中，您将使用 Oracle JDeveloper 11g 创建一个包含视图、路由器和操作组件的任务流。创建完任务流的各个组件后，将任务流作为现有页面的一个区域绑定。数据模型使用业务组件。针对 Web 客户端使用 Java Server Faces (JSF)。用户界面包含一个浏览页面和一个编辑页面。

所需时间

50 分钟

主题

本教程包括下列主题：

	概述
	情景
	前提条件
	创建绑定任务流
	构建 BrowseEmployees 页面
	创建其他任务流组件
	将任务流作为一个区域绑定到 BrowseDepartments 页面
	运行 BrowseDepartments 页面
	总结

查看屏幕截图

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

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

概述

模型由业务组件提供，视图和控制器由 Java Server Faces 提供。

预定义的应用程序包含两个页面：一个浏览页面和一个编辑页面。浏览页面提供部门列表，允许您从列表中选择一个部门以编辑该部门详细信息。编辑页面显示部门详细信息。

可以通过将任务流作为一个区域添加到 BrowseDepartments 页面来增强该预定义应用程序的功能。任务流包含一个 BrowseEmployees 页面，允许您创建一个新的雇员或编辑一个现有的雇员。

返回主题列表

情景

创建一个包含各种组件的绑定任务流。使用路由器、视图和操作来设计可以支持浏览、编辑和创建功能的任务流。创建完任务流后，您应创建任务流的各个组件并最终将任务流作为一个区域绑定到 BrowseDepartments 页面。

返回主题列表

前提条件

如果您已经完成了 URL_Bookmark 实践操作，则可以继续使用该应用程序并跳过“前提条件”部分直接进入创建绑定任务流部分。

	下载所需的组件并启动 JDeveloper 11g
	上载启动应用程序
	创建数据库连接
	测试启动应用程序

返回主题列表

下载所需的组件并启动 JDeveloper 11g

在以下步骤中，您将下载 JDeveloper 11g 和本教程所需的其他文件。

返回主题

返回主题列表

上载启动应用程序

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

返回主题

返回主题列表

创建数据库连接

您需要创建一个到 HR 模式的数据库连接。为此，执行以下步骤：

1.	从菜单栏中选择 View | Database Navigator。
2.	在 Database Navigator 中，展开 TaskFlowHandsOn，右键单击 HRConn 项并从上下文菜单中选择 Properties。
3.	在 Edit Database Connection 对话框中，确保以下值设置为如下所示： Connection Name HRConn UserName hr Password hr Deploy Password 选中 Driver thin Host Name localhost JDBC Port 1521 SID 或 Service Name ORCL/XE
4.	单击 Test Connection 按钮。 如果数据库可用并且连接的详细信息正确，那么您将在 Status 窗口中看到 Success!，然后单击 OK。 如果发生错误，则验证设置，进行所有必要的更改，然后重新测试该连接。如果仍无法连接，则可能是数据库有问题或没有运行。
5.	在 Application Navigator 中，展开 Application Resources 面板中的 Connections 和 Database 节点以查看您刚刚创建的 HR 连接。您可以展开 HRConn 节点查看数据库对象。

返回主题

返回主题列表

测试启动应用程序

启动应用程序使用 Departments 和 Employees 实体对象和它们对应的视图对象。

1.	打开 Application Navigator 并展开 Model 项目节点。注意现有的实体、视图、链接对象和 AppModule。 Model 项目包含应用程序所需的所有必需组件。
2.	在业务组件测试器中测试模块前，右键单击 AppModule 节点并从上下文菜单中选择 Configurations。
3.	在 Manage Configurations 对话框中，选择 AppModuleLocal，然后单击 Edit。
4.	在 Edit Business Components Configuration 对话框中，选择 AppModuleLocal 的 Connection Type 为 JDBC URL，选择 Connection Name 为 HRConn。 单击 OK，然后再次单击 OK。
5.	在 Application Navigator 中，右键单击 AppModule 并选择 Run。
6.	在 Business Component Configuration 对话框中，单击 Connect。 等待 Browser 窗口打开。
7.	在 Oracle Business Component Browser 中，双击 DepartmentsView1。
8.	使用导航按钮浏览部门。
9.	关闭 Business Component Browser 窗口。
10.	展开 ViewController 项目节点。双击 Web Content | Page Flows | adfc-config 节点打开页面流图表。
11.	出现页面流，显示了两个页面。分别是 BrowseDepartments 页面和 EditDepartment 页面。
12.	关闭页面流图表。

返回主题列表

创建绑定任务流

将 TaskFlowHandsOn 应用程序加载到 JDeveloper 后，就可以创建包含视图、路由器和操作的绑定任务流图表了。为此，执行以下步骤：

1.	在 Application Navigator 中，右键单击 ViewController 节点并从上下文菜单中选择 New。
2.	在 New Gallery 中，单击 Web Tier | JSF 节点并选择 ADF Task Flow。 单击 OK。
3.	在 Create Task Flow 对话框中，键入 employees-flow-definition.xml 作为 File Name。选中 Create as Bounded Task Flow 和 Create with Page Fragments 复选框。
4.	将显示一个新的空的任务流图表。从 Component Palette 中选择 View 组件 ，然后将其拖放到图面。
5.	将默认名称更改为 BrowseEmployees。
6.	在图表上创建一个新的视图。 将其重命名为 EditEmployees。
7.	从 Component Palette 中选择 Router 组件 ，然后将其拖放到图面。 将其重命名为 CreateEdit。
8.	打开 Data Controls 折叠面板，然后从 AppModuleDataControl | DepartmentsView1 | EmployeesView3 | Operations 节点中选择 CreateInsert，并将其拖放到页面。
9.	从 Component Palette 中选择 Control Flow Case 组件 ，然后单击 BrowseEmployees 视图并将其拖放到 CreateEdit 路由器。 将控制流命名为 createEdit。
10.	重复执行上一步骤以创建以下控制流： 源 目标 名称 CreateEdit (Router) CreateInsert (Operation) create CreateEdit (Router) EditEmployees (View) edit CreateEdit (Router) BrowseEmployees unknown CreateInsert (Operation) EditEmployees (View) CreateInsert
11.	您的图表应如下所示：
12.	从 Data Controls 窗格中选择 Execute 操作并将其拖放到图表。
13.	从 Data Controls 窗格中选择 setCurrentRowWithKey 操作并将其拖放到图表。
14.	从 Component Palette 中选择 Control Flow Case 组件 ，然后创建以下控制流： 源 目标 名称 EditEmployees (View) Execute (Operation) execute Execute (Operation) SetCurrentRowWithKey (Operation) Execute SetCurrentRowWithKey (Operation) BrowseEmployees (View) SetCurrentRowWithKey
15.	完整的图表现在应如下所示：

返回主题列表

构建 BrowseEmployees 页面

BrowseEmployees 页面是该任务流的入口点，您将了解如何将页面链接到路由器组件。为此，执行以下步骤：

1.	在 employees-flow-definition 图表上双击 BrowseEmployees 视图。
2.	在 Create New JSF Page Fragment 对话框中，单击 OK 接受默认值。
3.	从 Data Controls 折叠面板中选择 AppModuleDataControl | DepartmentView1 | EmployeesView3 节点，然后将其拖放到页面。从上下文菜单中选择 Tables --> ADF Read-only Table。
4.	在 Edit Table Columns 中，选择 Row Selection 选项，然后使用 Ctrl 键多选 PhoneNumber、JobId、CommissionPct、ManagerId 和 DepartmentId，然后单击 Delete 按钮 。 单击 OK。
5.	从 Component Palette 的 ADF Faces Common Components 组中选择 Button 组件，然后将其拖放到 Structure 窗格中 af:table 节点的下方。
6.	重复前一操作将 Button 拖放到前一节点的下方。
7.	选择 commandButton1 并在 Property Inspector 的 Text 域中键入 Edit Employee，然后选择 createEdit 作为 Action 属性。
8.	选择 commandButton2 并在 Property Inspector 的 Text 域中键入 Create Employee，然后选择 createEdit 作为 Action 属性。
9.	现在，使用 Ctrl 键多选两个 commanButtons，然后右键单击并从上下文菜单中选择 Surround With。
10.	在 Surround With 对话框中，选择 Panel Group Layout，然后单击OK。
11.	在 Property Inspector 中，将 Layout 属性设置为 horizontal。
12.	现在，使用 Ctrl 键多选 af:table 和 af:panelGroupLayout，然后右键单击并从上下文菜单中选择 Surround With。
13.	在 Surround With 对话框中，选择 Panel Group Layout，然后单击OK。
14.	在 Property Inspector 中，将 Layout 属性设置为 scroll。
15.	在 Component Palette 中，从 ADF Faces | Common Components | Operations 中将 Set Action Listener 拖放到 Edit Employee 按钮。
16.	在 Insert Set Action Listener 对话框的 From 域中键入 #{'edit'}，在 To 域中键入 #{pageFlowScope.action}。使用 Crtl + C 键将 To 域中的内容复制到剪贴板以便以后使用。 单击 OK。
17.	在 Component Palette 中，从 ADF Faces | Common Components | Operations 中将 Set Action Listener 拖放到 Create Employee 按钮。
18.	在 Insert Set Action Listener 对话框的 From 域中键入 #{'create'}，在 To 域中粘贴剪贴板中的内容。 单击 OK。
19.	单击 save all 图标，保存应用程序。现在已经定义了 BrowseEmployees 页面。

返回主题列表

创建其他任务流组件

要创建路由器和其他绑定组件，请执行以下步骤：

1.	单击 employees-flow-definition 选项卡重新打开任务流图表。
2.	双击 CreateEdit 路由器打开其属性。
3.	在 Property Inspector 中，从下拉列表中将 default-outcome 设置为 unknown。如果发生意外事件，这将返回 BrowseEmployees 页面。
4.	要将其他情况添加到路由器，在 Cases 部分中单击 Add 按钮 创建一个新的情况条件。
5.	在表达式列中，键入以下语法 #{pageFlowScope.action eq 'edit'}。针对 outcome，从列表中选择 edit。
6.	在 Cases 部分中单击 Add 按钮 创建一个新的情况条件。在表达式列中，键入以下语法 #{pageFlowScope.action eq 'create'}。针对 outcome，从列表中选择 create。 路由器将根据所按按钮的关联值分派到 create 或 edit 流。
7.	返回任务流图表，双击 EditEmployees 视图图标创建页面。
8.	在 Create New JSF Page Fragment 对话框中，单击 OK 接受默认值。
9.	从 Data Controls 折叠面板中选择 EmployeesView3，然后将其拖放到空白页面。从上下文菜单中选择 Forms --> ADF Form。
10.	在 Edit Form 对话框中，选择 Include Submit Button，然后单击 OK。
11.	在 EditEmployees 页面中，选择 Submit 按钮，然后在 Property Inspector 中，将 Action 设置为 execute。
12.	从 Components Palette 中将 Set Action Listener 拖放到 Submit 按钮。
13.	在 Insert Set Action Listener 对话框中，选择 From 域旁边的 Expression Builder。
14.	在 Expression Builder 对话框中，选择 ADF Bindings | bindings | EmployeesView3Iterator | currentRowKeyString 将移入 Expression 窗格。 单击 OK。
15.	返回 Insert Set Action Listener 对话框，在 To 域中键入 #{pageFlowScope.rowKey}。 单击 OK。
16.	返回任务流图表。右键单击 SetCurrentRowWithKey 操作，然后选择 Go To Page Definition。
17.	在 SetCurrentRowWithKey 操作的 Structure 窗格中展开 bindings | setCurrentRowWithKey 节点，然后选择 rowKey。在 Property Inspector 的 NDValue 域中键入 #{pageFlowScope.rowKey}。
18.	关闭 Page Definition 选项卡返回任务流图表。

返回主题列表

将任务流作为一个区域绑定到 BrowseDepartments 页面

现在将创建的任务流作为 BrowseDepartments 页面中的一个区域使用。为此，执行以下步骤：

1.	在 Application Navigator 中，双击 BrowseDepartments.jspx 节点在编辑器中打开页面。
2.	返回 Application Navigator，选择 employees-flow-definition.xml。 将其拖到 BrowseDepartments 页面的最右边将其释放，从上下文菜单中选择 Region 选项。
3.	在 Structure 窗格中，选择 af:region 并将其移动到 main 和 af:panelGroupLayout 组件之间。
4.	右键单击 region 上方的 group 组件，然后从上下文菜单中选择 Convert。 在 Convert Group 对话框中，选择 Panel Group Layout，然后单击 OK。
5.	针对 Property Inspector 中的 Panel Group Layout，将 Layout 域设置为 scroll。
6.	在 Structure 窗格中，选择 panelGroupLayout 并将其移动到 region 组件的上方。
7.	Structure 窗格应如下所示：
8.	展开 panelGroupLayout | panelCollection 组件，然后选择 table。在 Property Inspector 的 Behavior 选项卡中，将 RowSelection 设置为 single。
9.	在 BrowseDepartments 页面中右键单击，然后从上下文菜单中选择 Go To Page Definition。
10.	在 Structure 窗格中展开 executables 节点，选择 taskFlow - employeesflowdefinition1，然后在 Property Inspector 中将 Refresh 域设置为 ifNeeded。
11.	右键单击 taskFlow — employeesflowdefinition1，然后从上下文菜单中选择 Insert inside task flow --> parameters。
12.	右键单击 parameters 节点，然后从上下文菜单中选择 Insert inside parameters --> parameter。
13.	在 Insert Parameter 对话框中，在 id 域中键入 currency。
14.	页面定义现在应如下所示：
15.	选择 currency 参数后，在 Property Inspector 中单击 value 域旁边的向下箭头，然后选择 Edit。
16.	在 Edit Property 对话框中，展开 ADF Bindings | bindings | DepartmentsView1Iterator，然后选择 currentRowKeyString。 单击 OK。
17.	在 Application Navigator 中，双击 BrowseDepartments.jspx 节点重新打开页面的 Structure 窗格，选择 region 组件，然后在 Property Inspector 中使用 Behavior 选项卡选择 PartialTriggers 域旁边的 Edit 选项：
18.	在 Edit Property 对话框中，选择 panelCollection*，键入 p1 作为 Id 并按 Return。
19.	在 Edit Property 对话框中，选择 table*，键入 t1 作为 Id 并按 Return。 然后选择 table* -t1 组件并使用向右箭头按钮 在选中的窗格中移动所选组件。 单击 OK。
20.	Partial Triggers 现在应如下所示：
21.	单击 save all 图标，保存应用程序。

返回主题列表

运行 BrowseDepartments 页面

现在，已将任务流作为一个区域集成到 BrowseDepartments 页面，您可以运行该页面了。为此，执行以下步骤：

1.	在 BrowseDepartments 页面的编辑器中，右键单击并从上下文菜单中选择 Run。
2.	该页面在您的浏览器中加载，在上方显示部门列表，在底部显示相关雇员。
3.	选择列表中的其他部门，会在 BrowseEmployees 区域中同步显示相关雇员。
4.	向下滚动到页面底部查看 Employee 的 Edit 和 Create 按钮。在列表中选择一个雇员，然后单击 Edit Employee 按钮。
5.	在 Edit Employee 部分中，更改一个值（例如，更新 salary）并单击 Submit。
6.	返回 BrowseEmployees 部分，单击 Create Employee 按钮。
7.	在 Create 表单中，添加一个新雇员并单击 Submit 按钮。
8.	返回 BrowseEmployees 部分，该新雇员现在显示在列表中。
9.	单击新创建雇员的 Edit Employee 按钮查看其详细信息。
10.	根据需要更新某些属性，然后单击 Submit 按钮返回 BrowseEmployees 页面。
11.	关闭浏览器窗口。

返回主题列表

总结

在本教程中，您创建了一个任务流，其中包含了视图、路由器和操作，并将其作为一个区域添加到一个现有的页面中。您学习了如何：

	创建任务流图表
	创建任务流的组件
	将任务流绑定到页面

返回主题列表

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