可以访问或已经安装了 Oracle JDeveloper (10.1.3.1.0)。可以从 Oracle 技术网下载它。

单击 这里将预先构建的 OrderEntry 应用程序以 zip 文件格式下载到您的系统上。

将 OrderEntry.zip 文件解压缩到 ( /jdev/mywork/ ) 目录中。

可以访问或已经安装了 Oracle 数据库 10g 随附的 Oracle 示例模式。

本教程使用 OE 模式。具体来说，页面使用了 EMPLOYEES 表。

可以在线获取有关在 JDeveloper 中安装 OE 模式并创建到其的连接的指导：

http://www.oracle.com/technology/obe/obe1013jdev/common/OBEConnection.htm

启动 JDeveloper。双击 JDeveloper 可执行文件 jdeveloper.exe ，该文件位于您解压缩它的根目录 ( <jdev_home> ) 中。

如果 Migrate User Settings 对话框打开，请单击 NO。

关闭 Tip of the Day 窗口。

现在应显示 JDeveloper IDE。

在 JDeveloper 中，选择 File | Open。在 Open 对话框中，选择 ( <jdev_home>/jdev/mywork/OrderEntry ) 目录中的文件 OrderEntry.jws，然后单击 Open。

在 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 的页面图标显示了一个黄色警告，因为还没有为其构建相应的页面。

在图上创建另外两个页面 /editCustomers 和 /browseCustomerOrders：

您将注意到这两个页面的文件扩展名是 .jsp。

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

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

要修改导航属性，选择您刚创建的 JSF Navigation Case，然后使用 Property Palette 将 From Outcome 属性更改为 customerOrders。您将注意到图上的导航流名称更改为 customerOrders。

创建一个从 browseCustomerOrders 到 browseCustomers 的返回导航示例。再次更改导航流的名称。这次通过选择流名称 直接在图上编辑它。调用导航示例 browseCustomers。

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

从 editCustomers 到 browseCustomers 创建接下来两个示例，分别将 From Outcome 属性设置为 cancel 和 commit。

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

单击 Save All ，或选择 File | Save All 来保存您的工作。

在页面流图中，双击 /browseCustomers 数据页。（该页尚不存在。）

Create JSF JSP 向导打开；如果您看到 Welcome 屏幕，单击 Next。

在向导的 JSP File 页面中，接受建议的页面名 browseCustomers.jsp。单击 Next 接受页面其他选项的默认设置。

在向导的 Component Binding 页面中，单击 Next 接受默认值。

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

单击 Next。

接受 HTML Options 页面上的默认值，单击 Next。

单击 Finish 创建该页面，在可视化编辑器中调用一个空白的 JSP。

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

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

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

选择 CustomersView1 并将它拖动到该页面中。将显示一个包括多个选项的菜单。选择 Tables | ADF Read-only Table。

在 Edit Table Columns 对话框中，选中 Enable Selection 和 Enable Sorting。（不要关闭编辑器）

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

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

单击 OK。

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

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

该只读 Web 页面在浏览器中运行并查询 Customers 表。注意，标签是您在前一个教程中为实体对象和视图对象指定的标签，排序顺序由该教程中为视图对象设置的 ORDER BY 子句实现。

可通过单击列标签对记录进行重排序。显示一个图标指示哪个列正在驱动排序以及是升序还是降序。确保您可以导航到最后一个记录并再次返回。完成后关闭浏览器。

如果您有时间，看一下创建页面之后发生了什么。返回 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 拖东项时，将在此处添加数据绑定。

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

找到 Delete 操作并将其拖动到 submit 按钮附近的页面上。从出现的上下文菜单中选择 ADF Command Button。

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

按照您在前面做的那样，运行该页面测试更改。

选择一条记录并删除它。回滚此更改。

在下一个教程中，您将创建新记录。

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

创建一个与页面流图中的 editCustomers 图标相对应的 JSP。

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

调用页面流图 (faces-config.xml) 并双击 /editCustomers 图标。

接受 editCustomer.jsp 作为页面名称。

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

单击 Data Control Palette。

展开 CustomerOrdersBusinessServicesDataControl，选择 CustomersView1 并 将其拖到该页面。从上下文菜单中选择 Forms | ADF Form。

选中 Include Submit Button 并单击 OK 接受所有表单域。

注意，该页面的布局与您创建的前一个页面有很大不同。您会看到同一数据控件可以多种方式显示。

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

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

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

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

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

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

接受 /browseCustomerOrders.jsp 作为页面名称。

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

在 Data Control Palette 中，展开 CustomerOrdersBusinessServicesDataControl、 CustomersView1 和 OrdersView2。

选择 OrderItemsView1 并将它拖动到该页面中。从上下文菜单中选择 Master-Details | ADF Master Form, Detail Table。

在该步骤中，将这两个部分的标题分别更改为 Orders 和 Order Items。

使用 Property Inspector，选择文本属性 OrdersView2 并用 Orders 替换该文本。对于详细记录，将标题从 OrderItemsView1 更改为 Order Items。注意，可视化编辑器中的文本进行了更新。

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

在主部分 (Orders) 中，不需要显示所有列。

删除 SalesRepId。

确保您从该页面删除了标签和数据。当您选择 SalesRepId 列时，查看 Structure 窗口中的链接，您应该选择了 af:inputText。可以从编辑器或 Structure 窗口（哪个容易就选哪个）删除项。

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

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

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

对于 Orders Items 中的两个 ProductId 实例，将每个示例中的属性 Rendered 设置为 False。页面现在应该如下面的屏幕截图所示。

如果有时间，将 ProductName 列移到 LineItemId 旁边。

选择 ProductName 列。注意，该操作在 Structure 窗口中突出显示该列。使用 Structure 窗口将 ProductName 列向上拖到 LineItemId 列下方。

运行该页面对其进行测试，就像您在前面测试其他页面一样；右键单击 browseCustomerOrders 页面并从上下文菜单中选择 Run。

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

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

在可视编辑器中打开 browseCustomers，选择 Submit 按钮。

使用 Property Inspector，输入 Edit Customers 作为 Text 属性的值。选择 Action 属性， 然后使用下拉列表选择 editCustomers。

测试此页，方法是选择 browseCustomers，右键单击并从上下文菜单中选择 Run。

在浏览器中，使用单选按钮组选择一个客户，然后单击 Edit Customers。

注意，新页面已经返回您在 browseCustomers 页面上选择的 CustomerId。

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

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

选择 CommandButton 并将其拖到该页面上 Delete 按钮旁边。

选择您刚创建的按钮。

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

单击 Save All ，或选择 File | Save All 来保存您的工作。

运行 browseCustomers 页面测试更改。

找到并选择 CustomerId 101（记住，可以单击列标题对 CustomerId 重新排序）

单击 Show Orders。

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

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

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

该操作删除了 Gender 的文本域。

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

返回 Data Control Palette，展开 CustomersView1。

选择 Gender，将其拖到 Structure 窗口上并放在 DateOfBirth 下方。系统提示后，从上下文菜单中选择 Single Selections | ADF Select One Radio。

这将打开 List Binding Editor。选择 Fixed List 选项。

选择 Gender 作为 Base Data Source Attribute。

在 Set of Values 下的不同行分别输入 M 和 F。从 "No Selection" Item 下拉列表中选择 Selection Required。

单击 OK。

editCustomers 页面现在包括一个单选按钮图标。

运行 editCustomers 页面对其进行测试。您会看到 Gender 显示为一个单选按钮组。

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

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

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

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

这将打开 Boolean Binding Editor。

对于 Data Collection，确保选择了 CustomersView1 并为 Attribute 选择了 MaritalStatus。

对于所选的 State Value 和 Unselected State Value，分别添加 married 和 single，然后单击 OK。

单击 Save All ，或选择 File | Save All 来保存您的工作。

运行 editCustomers 页面对其进行测试，并注意所选客户的 Marital Status。

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

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

在 Data Control Palette 中选择 并展开 CustomersView1，选择 IncomeLevel 并将其拖到 Structure 窗口上。将其放到 MaritalStatus 后，并在系统提示时选择 Single Selections | ADF Select One Choice。

这将调用 List Binding Editor。选择 Fixed List。

选择 IncomeLevel 作为 Base Data Source Attribute。

从 "No Selection" Item 下拉列表中选择 Selection Required。

对于 Set of Values，在不同的行输入以下内容：

A:Below 30,000
B:30,000 - 49,999
C:50,000 - 69,999
D:70,000 - 89,999
E:90,000 - 109,999
F:110,000 - 129,999
G:130,000 - 149,999
H:150,000 - 169,999
I:170,000 - 189,999
J:190,000 - 249,999
K:250,000 - 299,999
L:300,000 and above

单击 OK。

注：如果您联机使用这些注释，使用 Copy 和 Paste 即可使用上述列表。

运行 editCustomers 页面测试该应用程序。您会看到 IncomeLevel 显示为下拉列表。

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

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

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

将 Create 操作拖到该页面上的 Submit 按钮前面。系统提示时，从上下文菜单中选择 ADF Command Button。

返回 Data Control Palette，折叠 CustomersView1 并展开 Operations 节点（与 CustomersView1 出现在同一级别）。

选择 Commit 并将其拖到此页面上的 Submit 按钮后面。系统提示时，从上下文菜单中选择 ADF Command Button。

对于 Rollback 按钮重复此步骤，将其放在 Commit 按钮后面。

单击 Save All 保存您的工作。

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

运行 editCustomers 页面测试该应用程序。

更改一个员工的名称，然后单击 Rollback 撤销更改。

创建新用户，单击 Apply Changes 将更改提交到数据库。单击 Commit 在数据库中更新此记录。

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

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

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

验证您有从 editCustomer 页面到 browseCustomers 页面的 cancel 和 commit 导航流。

返回到可视化编辑器中的 editCustomers 页面。在 Component Palette 中，确保在下拉列表中选择 ADF Faces Core。

选择 Command Button 并将其拖到该页面上 Rollback 按钮旁边。

确保选择了新按钮。在 Property Inspector 中，输入 Cancel 作为 Text 属性的值。

选择 Action 属性并从下拉列表中选择 cancel。

在可视化编辑器中选择 Commit (Apply Changes) 按钮，并验证 Property Inspector 中的 Action 属性的值与您的导航流匹配。下拉列表中的值是来自导航流的值。要提交此数据并返回到 browseCustomers 页面，您必须选择流值。

从该页面流图运行 browseCustomers 页面以测试该应用程序。

选择一个客户并单击 Edit Customers。更改员工名称并单击 Cancel。返回 customers 页面，没有进行任何更改。

再次编辑客户，这次单击 Apply Changes，然后单击 Commit。提交数据，控制返回到 customers 页面。

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

双击 Customers 实体对象显示 Entity Object Editor。

展开 Attributes 树，选择 CustomerId。

将 Updatable 域设置为 While New，单击 OK。

单击 Save All ，或选择 File | Save All 来保存您的工作。

运行 browseCustomers 页面测试该应用程序。

选择一个客户并单击 Edit Customers。

在 editCustomers 页面中，注意 CustomerID 域不可编辑。

单击 Create 添加新客户记录。注意 CustomerID 对新记录是可编辑的。

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