Oracle Account

Manage your account and access personalized content. Sign up for an Oracle Account

Sign in to Cloud

Access your cloud dashboard, manage orders, and more. Sign up for a free trial

使用 ADF Faces 开发 JSF 用户界面

目的

在本教程中，您创建一个页面流图，然后创建 Web 页面以显示在预先构建的应用程序中为您创建的业务组件。要了解这些业务组件的创建方式，可以参考 使用 ADF 业务组件开发业务服务 OBE。

本教程还涉及链接到页面来完成页面导航，并且还包括对用户界面进行增强。

所需时间

大约 45 分钟

主题

本教程包括下列主题：

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

注： 您还可以在下面的步骤中将光标放在每个单独的图标上，仅加载和查看与该步骤相关的屏幕截图。

对应于在前面的教程（ 使用 ADF 业务组件开发业务服务 ）中构建的内容，您在其中构建了业务组件模型并实现了验证和业务规则，您现在要构建应用程序页面流。开始构建页面时，要知道在过程中您可能要一直对页面作出调整。本教程指导您完成页面的创建，然后您分别运行和测试每个页面。

定义页面流时，您定义指定可以从特定页访问的页面的命名导航示例。实现该页面流的方法是 将操作添加到与页面流中的导航示例同名的页面。导航示例在该名称事件在页面上发生时通知应用程序导航到何处。还可以添加此功能来创建和编辑客户，以及提交或回滚客户数据。还可通过将一些文本输入域更改为复选框、单选按钮和下拉列表，来增强用户界面。

返回主题列表

从您手绘的页面图开始，创建应用程序的页面流。您知道客户端要查看几个页面，因此决定构建一些用于查询客户表、编辑客户详细信息以及查询客户订单的页面。

当您构建的页面基本功能就绪后，就可以集中精力使之成为用户更满意的界面。添加一些额外功能来提交和回滚数据。此外，添加一些 GUI 控件可使数据项任务更为简单。而且，您希望所有示例的 CustomerID 域都是不可

JDeveloper 提供了一个可视化工具来绘制应用程序的页面流。可视化工具提供了比简单的绘图多得多的功能，这是因为在这种可视化工具的背后有一个很复杂的过程。不过，当前您将用它来获得您计划构建的应用程序的一个总体情况。

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

在 Applications Navigator 中，右键单击 ViewController 项目，然后从上下文菜单选择 Open JSF Navigation 。这会打开 Web Content | Web INF 节点中的 faces-config.xml 文件。

将在编辑器中打开页面流图。

在可视化页面流编辑器右边的 Component Palette 中，确保从顶部的下拉列表中选择了 JSF Navigation Diagram 。如果 Component Palette 没有出现，请选择 View | Component Palette 。 JSF Page ，然后单击图。键入新页面的名称： browseCustomers 。（您只需键入 browseCustomers ；系统为您添加“ / ”和扩展名 .jsp 。）

注意，/browseCustomers 的页面图标显示了一个黄色警告，因为还没有为其构建相应的页面。

接下来，在页面间创建 JSF 导航示例。这些示例的重要性稍后将显现；目前您可以将它们看作应用程序流的指示器。

要添加导航，单击 Component Palette 中的 JSF Navigation Case ，然后单击源 browseCustomers ，然后单击目的地 browseCustomerOrders 。您还可以选择任意中间点，线条将弯曲串联起它们。

现在在 browseCustomers 和 editCustomers 页面之间创建三个 JSF 导航示例，第一个从 browseCustomers 到 editCustomers ，将 From Outcome 属性设置为 editCustomers。 editCustomers 到 browseCustomers 创建接下来两个示例，分别将 From Outcome 属性设置为 cancel 和 commit 。

设置该属性的另一种方法是双击该流，调用此话框并编辑 From Outcome 属性。

在向导的 Tag Libraries 页面中，确保 Selected Libraries 列表中包括 ADF Faces 库。如果 ADF 库不在 Selected Libraries 列表中，则在 Available Libraries 列表中选择它们，然后单击 将其移动到 Selected Libraries 列表。 Next 。

使用 JDeveloper 和 Oracle ADF，可以轻松地向页面中添加支持数据的组件。两个选项卡应显示在空白页右侧。Components 选项卡显示所有非数据绑定组件，而 Data Controls 选项卡显示所有 ADF 数据绑定组件。

切换到 Data Controls 选项卡。（如果该面板没有出现，请从主菜单栏中选择 View | Data Control Palette 。）

可以查看 Data Control Palette 中显示的应用程序模块。展开 CustomerOrdersBusinessServicesDataControl 。展开 CustomersView1 节点。注意，所显示的项是在构建视图对象时选择的那些项。

尽管您需要编辑页面包括所有列，但您要创建浏览和查询页面，因此不必在此页面上显示此视图对象中的所有列。

按住 Shift 键并单击（或按住 Ctrl 键并单击选择单个列）选择除 CustomerId、CustFirstName、CustLastName 和 CustEmail 之外的列，然后单击 Delete 。

要测试生成的页面，从 Applications Navigator 或页面本身运行它。在本例中，返回页面流图。注意， /browseCustomers 数据页面上已不再显示不完整警告（惊叹号图标）。

右键单击该图上的 /browseCustomers 页面，然后从上下文菜单中选择 Run 以启动运行页面的内部服务器。

如果您有时间，看一下创建页面之后发生了什么。返回 JDeveloper，在 Applications Navigator 中展开 ViewController | Application Sources 。有许多程序包可用。 view.pageDefs ，然后选择 browseCustomersPageDef.xml 。

在下面的 Structure 窗口中，选择 executables | CustomersView1Iterator 。该行迭代器将当前行发送到单个控件绑定以显示当前数据。迭代器绑定可以指定在 Web 页面中显示的行数。注意，如果选择 CustomersView1Iterator 并查看 Property Inspector ，可以看到为 RangeSize 设置的值返回的记录数。 bindings | CustomersView1 。此处您将看到您创建的 View Object 中的列的所有属性名。从 Data Control Palette 拖东项时，将在此处添加数据绑定。

返回主题列表

将 Delete、Commit 和 Rollback 按钮添加到页面

大多数应用程序都要求在永久删除行之前由用户对删除操作进行确认。在本教程中，您没有时间创建单独页面。您只需将 delete、commit 和 rollback 按钮添加到此页面。

要将 operations 按钮添加到该页面，执行以下步骤：

browseCustomers 页面的可视化编辑器。展开 Data Controls 面板中的 CustomersView1 节点。展开 OrdersView2 下面的 Operations 。

在 Data Controls Palette 中，折叠 CustomersView1 节点。有一个与 CustomersView1 同级别的 Operations 节点。展开此节点以公开 Commit 和 Rollback 操作。将每个操作拖到此页面上（Delete 按钮旁边），在每个示例中创建一个 ADF Command Button 。

创建此 JSP 与为 browseCustomers 页面创建 JSP 的过程完全相同：

调用页面流图 (faces-config.xml) 并双击 /editCustomers 图标。 editCustomer.jsp 作为页面名称。

接受向导提供的其他所有默认设置。

下一部分中，您将添加导航并增强页面 UI，然后将彻底测试该页面。在此期间，运行该页面以确保其正常工作。

要运行该页面，执行测试 browseCustomers 页面时执行的步骤，方法是选择 editCustomers 页面，右键单击并从上下文菜单中选择 Run 。

完成操作后关闭此浏览器。

构建一个主/从 Web 页面

基于您构建业务模型的方式，此应用程序模块将负责主/从协调。

您可能记得在使用向导创建视图对象时，您包括了成为视图对象间视图链接的外键关联。在构建应用程序模块时，您通过视图链接将每个视图对象置于数据模型中，以作为前一个视图对象的子级。换言之，应用程序模块中的 Orders 视图对象是 Customers 的子级。这意味着只显示所选客户的订单。同样，此应用程序模块中的 OrderItems 视图对象是 Orders 的子级，因此只显示选定订单的订单项。

由于此应用程序模块执行主/从协调，因此构建主/从 Web 页面不需要特殊对象。要构建一个为客户显示关联订单的 Web 页面，执行以下步骤：

创建一个对应于页面流关系图上 browseCustomerOrders 图标的 JSP。

方法与对 browseCustomers 页的方法相同：

调用页面流关系图 (faces-config.xml) 并双击 /browseCustomerOrders 图标。 /browseCustomerOrders.jsp 作为页面名称。

接受向导提供的其他所有默认设置。

Order Items 。注意，可视化编辑器中的文本进行了更新。

注： 如果您无法为文本属性轻松选择 Property Inspector，转至 Structure 窗口，为每个标题选择 af:panelHeader 。然后，可以在 Property Inspector 中选择和更改文本属性。

有一些列需要显示在该页面的细节部分中。联接语法需要它们，因此不要删除它们。

在 Order Items 细节部分中，选择 OrderId ，使用 Property Inspector 将 Rendered 属性设置为 False 。

和本教程前面介绍的一样，要选择整列而不仅仅是列标题。可通过在 Structure 窗口中注意此选择来进行验证。

如果 发生该情况，可以针对特定 CustomerId 运行此页面。为此，返回 OrderEntry | Model 项目中的 CustomersView 。在 model.queries 程序包中双击 CustomersView 调用 Properties 对话框。将 Customers.CUSTOMER_ID = 102 添加到 SQL 语句的 Where 子句。当您在下一个教程中从 browseCustomers 页面调用 browseCustomerOrders 时，这不是必需的。测试完页面后，一定要删除限制。

完成操作后关闭此浏览器。

添加 Show Orders 按钮启动主从页面

现在在此页面上添加 Show Orders 按钮调用 browseCustomerOrders 页面，显示所选客户的订单。要添加带有导航属性的按钮，执行以下步骤：

确保在可视编辑器中打开了 browseCustomers 页面。切换到 Component Palette 选项卡，然后从下拉列表中选择 ADF Faces Core 。（如果 Component Palette 没有出现，请选择 View | Component Palette。）

在 Property Inspector 中，将 Text 属性设置为 Show Orders 。选择 Action 属性，然后使用下拉列表选择 customerOrders 。和以前一样，Action 属性的文本必须与您在页面流图中为导航控件输入的文本匹配。 Save All File | Save All 来保存您的工作。

添加单选按钮组

单选按钮组将用户限制到一组有限的可输入域中的值，防止任何数据错误。editCustomers 页面中的 Gender 域只接受值 M 和 F，因此是转换为单选按钮组的理想候选。

要将 MaritalStatus 域更改为单选按钮组，执行以下步骤：

在可视化编辑器中打开 editCustomers 页面。

您在可视化页面编辑器中选择的每个项的快速提示也在 Structure 窗口中选择。在可视化页面编辑器中选择 DateOfBirth ；这将在 Structure 窗口中突出显示它。

返回 Data Control Palette，展开 CustomersView1 。 Gender ，将其拖到 Structure 窗口上并放在 DateOfBirth 下方。系统提示后，从上下文菜单中选择 Single Selections | ADF Select One Radio 。 添加复选框

复选框将用户限制为一个简单的布尔选择。editCustomers 页面中的 MaritalStatus 域指示已婚或未婚（单身）的布尔状态，因此是转换为复选框的理想候选。

要将 MaritalStatus 域更改为复选框，执行以下步骤：

返回到可视化编辑器中的 editCustomers 页面。

在可视化编辑器中选择 MaritalStatus 域。右键单击并选择 Delete 。

在 Data Control Palette 中，展开 CustomersView1 。选择 MaritalStatus ，将其拖到 Structure 窗口上并放在 Gender 单选项下方。系统提示后，从上下文菜单中选择 Single Selections | ADF Select Boolean Checkbox 。 添加下拉列表

当用户有一些可供选择的可能值时，下拉列表很有用。以 IncomeLevel 为例，有一组定义的可能值。由于键入这些值很麻烦，因此从值下拉列表中选择或更新是个理想的选择。在本例中，您根据硬编码值创建列表。

要将 IncomeLevel 域更改为下拉列表，执行以下步骤：

返回到可视化编辑器中的 editCustomers 页面。在可视化编辑器中删除 IncomeLevel 域，正如您对前两个域的操作一样。

在 Data Control Palette 中选择 CustomersView1 ，选择 IncomeLevel 并将其拖到 Structure 窗口上。将其放到 MaritalStatus 后，并在系统提示时选择 Single Selections | ADF Select One Choice 。 添加 Create、Commit 和 Rollback 按钮

创建 editCustomers 页面之后，您未创建任何默认按钮。在这部分练习中，现在您将添加其他按钮以增强页面功能，尤其是 Create 按钮。为了完整起见，您按照在前面部分的做法添加 Commit 和 Rollback 按钮。

要将 Create 按钮添加到该页面，执行以下步骤：

返回到可视化编辑器中的 editCustomers 页面。

在 Data Control Palette 中，选择并展开 CustomersView1 。展开 Operations 节点（显示为 CustomerView1 的子级）。选择 Create 操作。

您的用户比起“Submit”来更喜欢“Apply Changes”，因此更改 Submit 按钮的文本。为此，选择 Submit 按钮，并在 Property Inspector 中将 Text 属性更改为 Apply Changes 。 启用返回导航

现在已通过添加新控件和按钮增强了 editCustomers 页面。用户使用完此屏幕后，您希望他们能导航回到 browseCustomers 页面。这可以通过添加 Cancel 按钮或者将导航操作添加到 Commit 按钮来完成，这样它提交然后导航回来。

要启用导航回到 browseCustomers 页面，执行以下步骤：

从本教程的前几部分，您可能会想起一个按钮的 Action 属性必须与页面流中导航示例的文本匹配。

打开 faces-config.xml 文件 — 页面流图。（右键单击 ViewController ，然后从上下文菜单中选择 Open JSF Navigation 。 )

验证您有从 editCustomer 页面到 browseCustomers 页面的 cancel 和 commit 导航流。 使域不可编辑（可选）

您可能已经注意到，当编辑客户时，CustomerID 是可编辑的。一般来说，您只希望该域对新记录是可编辑的。这可在我们应用程序的模型中设置，用户界面将自动反映它。

要使 CustomerID 仅对新记录可编辑，执行以下步骤：

在您一直使用的 OrderEntry 应用程序中，展开 Model 项目就会看到实体对象。

返回主题列表

在本教程中，您在应用程序中构建了一些 Web 页面，并向其中添加了支持数据的组件。基于您在上一个教程中构建的数据模型，构建主/从 Web 页面变得很容易。但此时这些页面只具有有限的功能。

然后，您增强了用户界面。您 学会了如何将操作链接到导航事件以及如何使用控件（如复选框、单选按钮组和下拉列表）增强用户界面。

您现在还完成了允许您编辑、更新和向数据库提交更改的小型 Web 应用程序的构建。您还可以在页面间轻松导航，为所选的特定记录传递参数。

返回主题列表 将鼠标置于该图标上可以隐藏所有的屏幕截图。