上机操作教程 1.5 -- 创建页面

Home
Skip to Content
Skip to Search

Oracle

Sign In Account
Oracle Account

Account

Help

Sign Out
Oracle Account

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

Sign in to my Account

Sign in to Cloud

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

Sign in to Cloud
Country/Region
Contact

上机操作教程 1.5 — 创建页面

目的

本教程介绍了如何创建用于显示前面的教程中创建的业务组件的网页。

所需时间

大约 30 分钟

主题

本教程包括下列主题：

	概述
	方案
	前提条件
	构建一个用于查询的数据绑定网页
	构建一个用于输入的数据绑定网页
	构建一个“删除确认”网页
	构建一个主/从网页
	总结

查看屏幕截图

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

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

概述

应用程序开发有多种方法。您可能已经了解了应用程序的整个流程，数据库模式也已经完成了，因此您的要求是为该流程构建页面。您可以根据需要为页面构建业务服务，或者先构建所有业务服务，然后将页面连接在一起。这正是本专题教程使用的方法。

完成了数据库模式后，你可以构建应用程序的页面流；了解了页面的外观后，你可以构建业务组件。开始构建页面时，要知道在过程中你可能要一直对页面作出调整。

在本部分中，您将构建几个页面以示范完成整个应用程序。由于没有足够的时间构建所有页面，请量力而行。本专题教程会引导您逐步创建页面。在本教程中，您将单独运行并测试每个页面；在后面的教程中，您将连接这些页面。

返回主题列表

方案

您已经构建了应用程序的完整页面流。您知道客户端要查看几个页面，因此决定构建一些用于查询客户表、编辑客户详细信息以及查询客户订单的页面。

返回主题列表

前提条件

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

满足上一个上机操作教程中说明的前提条件。

完成了本专题教程的前几个上机操作教程。

返回主题列表

构建一个用于查询的数据绑定网页

在本研讨会的前面几个部分中，您构建了页面流和业务服务以支持该应用程序。在本部分中，您要添加各种页面，随后将这些页面绑定到数据。

在本部分（第一部分）中，您将重复某些已在第一个教程中执行的操作，构建一个用于从数据库表中查询数据的网页。要构建一个用于查询的数据绑定网页，请执行以下步骤：

1.	在当前你所编写的 OrderEntry 应用程序的 Application Navigator 中，右键单击 ViewController 工程，然后从右键菜单中选择 Open Struts Page Flow Diagram。
2.	在页面流图中，双击 /browseCustomers 数据页。由于该页尚不存在，因此将出现 Select 或 Create Page 对话框；接受提供的页面名称 /browseCustomers.jsp。从下拉 Page Name 列表中可以看到，您还可以创建 HTML 或 UIX 页面。确定选中“ Edit this page now”。单击 OK 创建该页面，在可视化编辑器中调用一个空白的 JSP。
3.	使用 JDeveloper 和 Oracle ADF，可以轻松地向页面中添加支持数据的组件。随后应该出现 Data Control Palette 面板，在其底部可以看到两个选项卡： Components 选项卡和 Data Controls 选项卡。Components 选项卡显示所有非数据绑定组件，而 Data Controls 选项卡显示所有 ADF 数据绑定组件。（如果该面板没有出现，请从主菜单栏中选择 View \| Data Control Palette。）可以查看 Data Control Palette 中显示的应用程序模块。展开 CustomersOrdersAMDataControl。展开 CustomersVO1 节点。注意，所显示的项是在构建 VO 时选择的那些项。选择 CustomersVO1。注意该面板底部的 Drag and Drop As 下拉列表。该列表提供了可用于选定组件的各种类型。从 Drag and Drop As 列表中选择 Read-Only Table。将 CustomersVO1 组件拖动到 browseCustomers.jsp 编辑器窗口。
4.	在 Data Control Palette 中，展开 CustomersVO1 节点下的 Operations 节点。 ADF 提供了指向所有要使用的操作的异常指令。选择 Previous 组件。从 Drag and Drop As 下拉列表中选择 Button with Form。将 Previous 组件拖动到 /browseCustomers.jsp 编辑器窗口中，并紧靠在数据表的下方。
5.	现在，选择 Button 作为 Drag and Drop As 值，并重复这些步骤以创建 Next、 Previous Set、 Next Set、 First 和 Last 按钮。确保将这些按钮中的每一个拖动到前面所创建的窗体中（由红色点划线显示）。
6.	尽管编辑页面要包括所有列，但您不必在此页面上显示此视图对象中的所有列。可以从此页面中删除除 CustomerId、CustFirstName 和 CustLastName 以外的所有列。要删除列，请右键单击该列并从右键菜单中选择 Table \| Delete Column。从最右侧的列 CustURL 开始，删除每一列，直到 CustLastName。
7.	在位于 JDeveloper 窗口左下角的 Structure 窗口中，右键单击 html:form 节点（如果看不到 Structure 窗口，请从菜单中选择 View \| Structure）。从右键菜单中选择 Edit Tag。在 JavaServer Page Tag Editor 中，确保将 action 属性设置为 /browseCustomers.do。标记的该属性指明 Struts 在提交窗体时要运行的页面。在本示例中（与在大多数示例中一样），您要调用的是包含按钮的页面。每个页面都包含内置的方法和事件。如果单击窗体中的按钮导致意外的行为，则可能是由于将窗体的 action 属性设置为错误的页面，因此无法定位正确的方法或事件。为便于以后排错，您需要检查按钮是否正常工作。
8.	尽管您已经将数据组件和导航按钮添加到 JSP，但该页面的起点是 Struts DataAction。 Struts DataAction 使用业务服务层准备模型数据，因此当呈现 JSP 时，绑定对象可使用数据进行迭代。要测试已经构建的页面，请返回到 Struts 页面流图。注意，/browseCustomers 数据页面上已不再显示不完整警告（惊叹号图标）。右键单击该图上的 /browseCustomers 页面，然后从右键菜单中选择 Run 以启动运行页面的内部服务器。
9.	该只读网页在浏览器中运行并查询 Customers 表。注意，标签是您在前一个教程中为实体对象和视图对象指定的标签，排序顺序由前一个教程中为视图对象设置的 ORDER BY 子句实现。测试导航按钮是否操作正常，然后关闭该浏览器。

返回主题列表

构建一个用于输入的数据绑定网页

在本教程的这一部分中，您要创建数据组件并将其添加到 editCustomers 页面中。 browseCustomers 页面与该页面的唯一差别是所使用的数据组件类型。在 browseCustomers 页面上，您使用了 Read Only Table；而在此页面中，您使用了 Input Form 组件。

要构建一个输入网页，请执行以下步骤：

创建一个与 Struts 页面流图中的 editCustomer 节点相对应的 JSP。创建此 JSP 与为 browseCustomers 页面创建 JSP 的过程完全相同：双击 /editCustomer 节点并接受 /editCustomer.jsp 作为页面名称。

这将打开编辑器窗口以编辑 editCustomer JSP。

您需要插入和更新客户信息，因此需要创建一个输入窗体数据组件。

选择 CustomersVO1，从 Drag and Drop As 下拉列表中选择 Input Form，然后将 CustomersVO1 拖动到编辑器中的页面上。

使用之前测试 browseCustomers 页面的方法测试该页面右键单击 Struts 页面流图上的 editCustomer 节点，然后从右键菜单中选择 Run。

注意，因为只有一行项目，所以没有提供滚动浏览客户行项目的工具。这样做是预先设计好的。

完成操作时，关闭此浏览器。

返回主题列表

构建一个删除确认网页

大多数应用程序都要求在永久删除行之前由用户对删除操作进行确认。在删除确认页面上，您将再次显示客户信息并询问用户确认是否要删除此客户。

要创建删除确认页面，请执行以下步骤：

1.	创建一个与 Struts 页面流图中的 confirmCustomerDelete 节点相对应的 JSP。创建此 JSP 与为 browseCustomers 页面创建 JSP 的过程完全相同：双击 /confirmCustomerDelete 节点，并接受 /confirmCustomerDelete.jsp 作为页面名称。这将打开编辑器窗口以编辑 confirmCustomerDelete JSP 。
2.	在 Data Control Palette 中，选择 CustomersVO1，然后从 Drag and Drop As 下拉列表中选择 Read-Only Form。将 CustomersVO1 拖动到该页面。
3.	在创建的表上的任意位置右击，然后从右键菜单中选择 Table \| Select Table。
4.	在 Property Inspector 中，将 border 更改为 0。
5.	实际上您只需要显示 CustomerId、 CustFirstName 和 CustLastName，因此可以删除其他所有行。要删除行，右键单击该行，然后从右键菜单中选择 Table \| Delete Row。
6.	将光标置于表的右侧，然后按 [Enter] 在窗体中插入一个空白行。在窗体内输入文本： Are you sure you want to delete this customer?，然后从该页面编辑器左上角的块格式下拉列表中选择 Heading 4。
7.	使用之前测试 browseCustomers 页面的方法测试该页面右键单击 Struts 页面流图上的 confirmCustomerDelete 节点，然后从右键菜单中选择 Run。完成操作时，关闭此浏览器。

返回主题列表

构建一个主/从网页

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

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

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

1.	创建一个与 Struts 页面流图中的 browseCustomerOrders 节点相对应的 JSP。创建此 JSP 与为 browseCustomers 页面创建 JSP 的过程完全相同：双击 /browseCustomerOrders 节点并接受 /browseCustomerOrders.jsp 作为页面名称。
2.	在 Components Palette 中，单击 Data Controls 选项卡。展开 CustomerOrdersAMDataControl 和 CustomersVO1。选择 CustomerId 并确保在 Drag and Drop As 列表中选择 Value。将 CustomerId 拖动到该页面的窗体上。在该页面上插入一个空白行，并将 CustFirstName 和 CustLastName 拖动到窗体中（由空格分隔）。
3.	在 CustomerId 字段的左侧，输入一个空白行，然后输入文本 ID: 并使用 Bold 工具使它以粗体形式显示。在名称字段的左侧输入粗体文本 Name:
4.	在 Data Control Palette 中选择 CustomerOrdersVO1，然后从 Drag and Drop As 下拉列表中选择 Read-Only Table。将 CustomerOrdersVO1 拖动到该页面上的客户字段下方的某个位置。
5.	不必在订单表中重复此客户 ID，这是因为您要将在客户字段的上方显示它。右键单击表中包含 CustomerId 字段的列，然后从右键菜单中选择 Table \| Delete Column。
6.	测试该页面的方法与测试前面的 browseCustomers 页面完全相同。右键单击 Struts 页面流图上的 browseCustomerOrders 节点，然后从右键菜单中选择 Run。如果在 Orders 表中只看到标签，则表示您显示的客户没有订单。完成操作时，关闭此浏览器。