>> 更多 Visual Web Pack 文档

执行插入、更新和删除操作

2007 年 5 月 [修订号：V5.5.1-1]

本教程介绍了如何使用 NetBeans Visual Web Pack 构建一个可以创建、检索、更新和删除数据库行的 Web 应用程序。该应用程序提供一个主数据的下拉列表以及一个同步的详细信息表。该应用程序的用户可以在详细信息表及其关联数据库中添加、更新和删除记录。 本教程使用了其他基础教程中介绍的一些概念。如果您不具备 IDE 及其设计组件的基本知识，请考虑首先阅读基础教程，如 NetBeans Visual Web Pack 入门指南和使用数据绑定组件访问数据库。

目录 -  创建项目 -  添加插入功能 -  修改页面以保存行集 -  添加删除功能 -  添加恢复功能 -  小结

本教程将使用以下技术和资源

JavaServer Faces 组件/ Java EE 平台	1.2/Java EE 5* 1.1/J2EE 1.4
Travel 数据库	必需
BluePrints AJAX 组件库	不是必需的

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程是针对使用 Sun Java Application Server PE 9.0 Update Release 1（或更高版本）和 Tomcat 5.5.17 进行定制的。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

创建项目

在本教程中，将创建包含一个页面的 Web 应用程序。您可以先从设计页面布局入手，该页面包含一个人名及其相应的行程，如下图所示。

图 1：初始页面布局

1. 创建一个新的 Visual Web 应用程序，并将其命名为 InsertUpdateDelete。
2. 将一个“下拉列表”组件从组件面板的“基本”类别拖动到该页的左上角。在“属性”窗口中，将其 id 属性更改为 personDD。

3. 将一个“消息组”组件从组件面板的“基本”类别拖放到下拉列表的右侧。

   “消息组”组件可用来显示验证错误和转换错误，并且可以显示由 info() 和 error() 方法写入到 Java Server Faces 上下文的消息。如果需要调试项目，这些消息将会非常有用。
4. 将一个“表”组件放在这两个组件的下方。

1. 打开“运行环境”窗口，展开“数据库”节点并检查是否已连接 TRAVEL 数据库。

   如果 TRAVEL 数据库的 jdbc 节点标记显示为连接中断 ，并且无法展开该节点，则表明 IDE 未连接到该数据库。要连接 TRAVEL 数据库，请右键单击 TRAVEL 数据库的 jdbc 节点，然后从弹出式菜单中选择“连接”。如果出现“连接”对话框，请输入 travel 作为口令，选中“在此会话期间记住口令”，然后单击“确定”。如果看不到 TRAVEL 数据库的 jdbc 节点，请参见 NetBeans Visual Web Pack 5.5 安装说明以了解如何为 IDE 提供可用的数据库。

   注意：如果您使用的是 Apache Tomcat，请将 derbyClient.jar 文件复制到 <tomcat_install>/common/lib 目录，然后再尝试连接到该数据库。

2. 展开 TRAVEL 数据库的 jdbc 节点，然后展开“表”节点。

   注意：在本教程的其余部分中，我们将 TRAVEL 数据库的 jdbc 节点称为 "Travel" 节点。

3. 将 "PERSON" 节点拖动到可视设计器的下拉列表上。

   “概要”窗口的 "Page1" 部分中将显示 "personDataProvider" 节点，"SessionBean1" 部分中将显示 "personRowSet" 节点。

4. 右键单击“下拉列表”组件，然后从弹出式菜单中选择“更改时自动提交”。

   此设置使得每当您从列表中选择新值时，就会将该页面发送到服务器。

5. 右键单击下拉列表，然后从弹出式菜单中选择“配置虚拟表单”。

   在出现的对话框中，请注意 personDD 显示在窗口的左上角中，这表明下拉列表已被选定。

6. 单击“新建”，然后在“名称”列中输入 person。双击“参与”列下面的字段，并将其设置为“是”，然后对“提交”列执行相同的操作，如下图所示。

   图 2：配置虚拟表单

   
   通过使用虚拟表单，应用程序可避免对表中的数据进行不必要的验证。
7. 单击“确定”。

8. 单击可视设计器工具栏中的“显示虚拟表单”按钮，如图 3 所示。

   通过查看虚拟表单，您可以看到可视设计器中的组件与您已经配置的任何虚拟表单之间的关系。

   图 3：显示虚拟表单

1. 将 "Travel" >“表”> "TRIP" 节点从“运行环境”窗口拖放到可视设计器中的“表”组件上。如果显示“选择目标”对话框，请确保选择 table1，然后单击“确定”。

2. 右键单击该表，然后从弹出式菜单中选择“表布局”。

   该对话框显示了您刚创建的 tripDataProvider 中可用的字段，并允许您控制要在表中显示哪些字段。

3. 使用 "<" 按钮，从右侧的“选定”列表中删除 TRIP.TRIPID、TRIP.PERSONID 和 TRIP.LASTUPDATED，如下图所示。

   图 4：将表绑定到数据提供器

4. 单击“选项”标签，将标题改为 Trips Summary。

5. 单击“确定”。

   现在，可视设计器中的“表”组件应如下图所示。请注意，如果未按下图顺序显示各列，可通过重新打开“表布局”对话框，单击“列”标签并使用“上移”和“下移”按钮重新对其进行排列。

   图 5：Page1 表布局

6. 在“概要”窗口中，右键单击 "SessionBean1" 下的 "tripRowSet"，然后从弹出式菜单中选择“编辑 SQL 语句”。

   这将打开 SQL 查询编辑器。

7. 在窗口中心附近的网格区域，在 PERSONID 行中单击鼠标右键，然后选择“添加查询条件”，如下图所示。

   图 6：添加查询条件

8. 在对话框中，将“比较”下拉列表设置为“= 等于”并选中“参数”单选按钮，然后单击“确定”。

   图 7：“添加查询条件”对话框

   
   字符 "=?" 将出现在 PERSONID 的“条件”字段中，而条件 "WHERE TRAVEL.TRIP.PERSONID=?" 则出现在编辑器底部 SQL 窗格中的 SQL 语句结尾处。
9. 关闭 tripRowSet 的 SQL 编辑器。

更改列组件

1. 右键单击“表”组件，然后选择“表布局”。

   将打开“表布局”对话框。

2. 在“列”标签中，从右侧的“选定”列表中选择 "TRIP.DEPDATE"。在对话框底部的“列详细信息”区域中，将“组件类型”从“静态文本”更改为“文本字段”，如下图所示。

   图 8：更改列的外观

3. 对 TRIP.DEPCITY 和 TRIP.DESTCITY 执行相同的操作。
4. 在“选定”列表中选择 "TRIP.TRIPTYPEID"，然后将“组件类型”从“静态文本”更改为“下拉列表”。

5. 单击“确定”。

   注意：如果执行上述步骤后表列太宽，则可以通过选择每列中的第一个组件并拖动其选择句柄来调整列的大小。

6. 将 "Travel" >“表”> "TRIPTYPE" 节点拖动到“表”组件中的下拉列表上。如果打开“选择目标”对话框，请确保选择 dropDown1，然后单击“确定”。

   此操作将创建 triptypeDataProvider。

为表配置虚拟表单

1. 在可视设计器中，按住 Ctrl 键的同时在表中单击，以选择包含文本字段的三个列中的三个“文本字段”组件以及 TRIPTYPEID 列中的“下拉列表”组件。
2. 右键单击其中一个选定的组件，然后从弹出式菜单中选择“配置虚拟表单”。
3. 在“配置虚拟表单”对话框中，请确保窗口左上角列出了三个文本字段和一个下拉列表。如果未按下图所示的方式列出这些内容，请关闭对话框，重新选择它们，然后再试一次。如果已正确列出这些内容，则单击“新建”。

4. 将新虚拟表单的名称更改为 save，将“参与”设置更改为“是”（如下图所示），然后单击“确定”。

   图 9：为表元素配置虚拟表单

添加事件代码和初始化代码

1. 双击 personDD 下拉列表以创建值更改事件方法（将打开 Java 编辑器，并且插入点将位于该方法内）。

2. 在值更改事件方法中，找到注释行 // 待做事项：替换为您的代码。将此行替换为代码样例 1 中以粗体显示的文本，然后按 Ctrl-Shift-F 组合键以重新设置代码的格式。

   代码样例 1：下拉列表事件处理程序

   public void personDD_processValueChange(ValueChangeEvent event) { Object selectedPersonId = personDD.getSelected(); try { personDataProvider.setCursorRow( personDataProvider.findFirst("PERSON.PERSONID", selectedPersonId)); getSessionBean1().getTripRowSet().setObject(1, selectedPersonId); tripDataProvider.refresh(); form1.discardSubmittedValues("save"); } catch (Exception e) { error("Cannot switch to person " + selectedPersonId); log("Cannot switch to person " + selectedPersonId, e); } }

   
   位于 try 子句结尾处的 form1.discardSubmittedValues("save") 语句可确保每当用户从下拉列表中选择新的人员时，将使用与所选人员相关的新信息替换表中所显示的当前行程信息。请您回想一下，表中显示行程信息的用户界面元素都参与了名为 save 的虚拟表单。另请注意，事件处理程序不会抛出异常，而是在 server.log 文件中记录异常。事件处理程序还将调用 error 方法，当出现错误时就会将消息显示在“消息组”组件中。

3. 在 Java 源代码中滚动至 prerender 方法，或者，如果愿意，请按 Ctrl-F 组合键打开“查找”对话框并搜索 prerender。将下面以粗体显示的代码添加到该方法中。

   代码样例 2：Prerender 方法

   public void prerender() { if ( personDD.getSelected() == null ) { Object firstPersonId = null; try { personDataProvider.cursorFirst(); firstPersonId = personDataProvider.getValue("PERSON.PERSONID"); personDD.setSelected(firstPersonId); getSessionBean1().getTripRowSet().setObject( 1, firstPersonId); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + firstPersonId); log("Cannot switch to person " + firstPersonId, e); } } }

4. 在 Java 编辑器中单击鼠标右键，然后选择“重新设置代码格式”以便对代码进行适当的排列。

测试应用程序 - 第 1 部分

在主工具栏上单击“运行主项目”按钮 以生成、部署和运行项目。当 Web 浏览器呈现此页面时，您会看到一些名字填充了下拉列表，并且表也由一些数据进行了填充。当您从列表中选择某个名字时，将会在表中显示与该名字关联的行程信息。

图 10：部署的应用程序，测试 1

添加插入功能

1. 单击“设计”按钮以便在可视设计器中查看 Page1。
2. 在组件面板的“基本”类别中，将“消息”组件分别拖动到表的前三列中位于最上面的文本字段上。
3. 选择第一个“消息”组件。在“属性”窗口，滚动至 for 属性，然后从下拉列表中选择 textField1。只有当消息与文本字段正确关联时，消息文本才会显示关联信息，如图 11 所示。
4. 将第二个“消息”组件的 for 属性设置为 textField2。

5. 将第三个“消息”组件的 for 属性设置为 textField3。

   图 11：将“消息”组件与文本字段关联

6. 在组件面板的“基本”类别中，将一个“按钮”组件拖动到 Page1 上，并将它放置在“表”组件上方靠近第二列的顶部，如图 12 所示。
7. 将其 text 属性由“按钮”更改为 "Add Trip"。
8. 在“属性”窗口中，将按钮的 id 属性更改为 add。
9. 在可视设计器中，双击该按钮以打开 Java 编辑器，插入点将位于该按钮的 add_action 事件处理程序方法中。

10. 将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：

    代码样例 3：添加行程操作的代码

    public String add_action() { try { RowKey rk = tripDataProvider.appendRow(); tripDataProvider.setCursorRow(rk); tripDataProvider.setValue("TRIP.TRIPID", new Integer(0)); tripDataProvider.setValue("TRIP.PERSONID", personDD.getSelected()); tripDataProvider.setValue("TRIP.TRIPTYPEID", new Integer(1)); } catch (Exception ex) { log("Error Description", ex); error(ex.getMessage()); } return null; }

11. 在 Java 编辑器中单击鼠标右键，然后选择“修复导入”以解决“找不到 RowKey”的错误。

    IDE 将在 Page1.java 的 import 语句块中添加下列包：

    import com.sun.data.provider.RowKey;

测试应用程序 - 第 2 部分

通过单击“运行主项目”按钮以生成、部署和运行项目。当 Web 浏览器呈现此页面时，将显示 "Add Trip" 按钮，如下图所示。每次单击该按钮时，都会在表的底部附加一个新的空行。您可以编辑行中的信息，但由于尚未提供行集的保存机制，因此，从下拉列表中选择其他名字时，所做的更改将会丢失。

图 12：部署的应用程序，测试 2

修改页面以保存行集

1. 在编辑器窗口中单击 "Design" 以返回到可视设计器中的 Page1。

2. 从“运行环境”窗口中选择“数据库”> "Travel" >“表”> "TRIP" 表，然后将它拖动到“概要”窗口中的 "SessionBean1" 节点上。

   图 13：将 TRIP 表拖动到 SessionBean1 上

   
   此操作将会打开“添加新的数据提供器”对话框。

3. 单击“创建 SessionBean1/tripRowSet1”单选按钮，将数据提供器的名称更改为 maxTripRowSet，然后单击“确定”。

   注意：行集在对话框中出现了两次。这是一个已知问题，请予以忽略。它不会影响本教程中的应用程序。

   图 14：将新的数据提供器添加到 SessionBean1 中

   
   此操作将在 SessionBean1 中创建 maxTripDataProvider 和 maxTripRowSet。
4. 在“概要”窗口中，双击 "SessionBean1" > "maxTripRowSet" 以打开查询编辑器。在源代码窗格（上数第三个窗格）中单击鼠标左键。删除此处现有的 SQL 查询，然后输入以下查询：

    SELECT MAX(TRAVEL.TRIP.TRIPID)+1 AS MAXTRIPID FROM TRAVEL.TRIP

   MAXTRIPID 值将用在 "Save" 按钮（接下来，将添加此按钮）的操作处理程序中。

5. 关闭查询编辑器。

   注意：查询编辑器的图形编辑器不支持此查询。如果您看到一个提示出现语法错误的警报对话框，则通过单击“继续”可以安全地将其关闭。

1. 将一个“按钮”组件放在靠近第一列顶部“表”组件的上方。要了解组件的位置，请参见图 15 中的 "Save Changes" 按钮。
2. 将按钮的 text 属性由“按钮”更改为 Save Changes。
3. 在“属性”窗口中，将其 id 属性更改为 save。
4. 右键单击 "Save Changes" 按钮，然后从弹出式菜单中选择“配置虚拟表单”。
5. 在“配置虚拟表单”对话框中，确保左上角的列表中显示的是 save，以便此窗口中的更改可以应用于 "Save Changes" 按钮。然后，选择 save 虚拟表单，将“提交”值更改为“是”并单击“确定”。
6. 在可视设计器中，双击 "Save Changes" 按钮以打开 Java 编辑器。在 Java 编辑器中，插入点将位于该按钮的 save_action 事件处理程序方法中。

7. 将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：

   代码样例 4：保存操作的代码

   public String save_action() { try { // Get the next key, using result of query on MaxTrip data provider CachedRowSetDataProvider maxTrip = getSessionBean1().getMaxTripDataProvider(); maxTrip.refresh(); maxTrip.cursorFirst(); int newTripId = ((Integer) maxTrip.getValue("MAXTRIPID")).intValue(); // Navigate through rows with data provider if (tripDataProvider.getRowCount() > 0) { tripDataProvider.cursorFirst(); do { if (tripDataProvider.getValue("TRIP.TRIPID").equals (new Integer(0))) { tripDataProvider.setValue("TRIP.TRIPID", new Integer(newTripId)); newTripId++; } } while (tripDataProvider.cursorNext()); }; tripDataProvider.commitChanges(); } catch (Exception ex) { log("Error Description", ex); error("Error :"+ex.getMessage()); } return null; }

测试应用程序 - 第 3 部分

通过单击“运行主项目”按钮以生成、部署和运行项目。应用程序将可以实现以下功能：

• 可以添加行程并进行保存。然后，该行程将显示在表中并持续存在。如果选择其他人员，然后返回到此人员，则会看到所添加的行程。
• 可以编辑现有的行程信息，并保存所做的更改。
• 如果在 "Date" 字段中输入除日期之外的内容，应用程序将提供一条错误消息。
• 在保存之前可以多处单击 "Add Trip"，这是一次添加多行的简便方法。如果在保存更改时任何行仍然为空，则会将其保存为空行。
• 如果在单击 "Save Changes" 之前切换到其他人员，则会丢失所有更新。
• 如果修改了某些值，然后单击某个列标题以按该列进行排序，则“表”组件会记住这些暂挂的更改，随后可以保存这些更改。

添加删除功能

在此部分，您将在表中添加删除功能。利用此功能，用户能够通过从数据库中删除某行来删除行程。在本教程中，"Delete" 按钮的操作是即时的，并且从数据库中删除行时并不需要使用 "Save Changes" 按钮。实际上，由于 "Delete" 按钮的事件处理程序使用 commitChanges 方法，因此它也像 "Save Changes" 按钮一样保存所有暂挂的更改。

1. 单击编辑器窗口中的“设计”以返回到可视设计器中的 Page1，然后右键单击 "Trips Summary" 表并从弹出式菜单中选择“表布局”。

   将打开“表布局”对话框。
2. 如有必要，单击“列”标签，然后单击“新建”，将一个新列添加到表中。

3. 在“选定”列表中选择新列的名称后，在“列详细信息”区域中进行如下更改：

   1. 表头文本和页脚文本：请删除“表头文本”字段和“页脚文本”字段中的任何缺省文本，使其保持空白
   2. 组件类型：按钮
   3. 值表达式：Delete
   4. 宽度：请删除任何缺省值，使其保持空白
   5. 水平对齐：居中
   6. 垂直对齐：中部
   7. 单击“确定”。
4. 选择位于表中最上面的 "Delete" 按钮，并在“属性”窗口中将 id 属性设置为 delete。

1. 双击 "Delete" 列中的第一个按钮，将打开 Java 编辑器，且插入点位于 delete_action 事件处理程序方法中。

2. 将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：

   代码样例 5：删除操作的代码

   public String delete_action() { form1.discardSubmittedValues("save"); try { RowKey rk = tableRowGroup1.getRowKey(); if (rk != null) { tripDataProvider.removeRow(rk); tripDataProvider.commitChanges(); tripDataProvider.refresh();} } catch (Exception ex) { log("ErrorDescription", ex); error(ex.getMessage()); } return null; }

测试应用程序 - 第 4 部分

通过单击“运行主项目”按钮以生成、部署和运行项目。下图显示了运行的应用程序。

部署后，您应该可以从表中删除行，进而将其从数据库中删除。删除操作还会将所有暂挂的更改提交到数据库中。

图 15：测试应用程序，第 4 部分

添加恢复功能

现在，将恢复功能添加到页面中。使用此功能，用户可以放弃其编辑的内容，恢复为以前保存的数据。请注意，恢复功能并不能恢复已保存或已删除的行；因为 "Save Changes" 和 "Delete" 按钮会将更改提交到数据库中。

1. 单击编辑器窗口的“设计”标签以返回到可视设计器中的 Page1，然后将一个“按钮”组件从组件面板拖到 Page1 上。将新的按钮放在 "Add Trip" 按钮的右侧。
2. 将按钮的 text 属性更改为 Revert Changes。
3. 在“属性”窗口中，将“按钮”组件的 id 属性更改为 revert。
4. 双击 "Revert Changes" 按钮，将打开 Java 编辑器，且插入点位于 revert_action 方法中。

5. 将下面代码样例中以粗体显示的代码添加到 revert_action 方法中。

   代码样例 6：恢复操作的代码

   public String revert_action() { form1.discardSubmittedValues("save"); try { tripDataProvider.refresh(); } catch (Exception ex) { log("Error Description", ex); error(ex.getMessage()); } return null; }

配置虚拟表单

如果应用程序使用目前的配置，则会出现一些不理想的行为。例如，如果用户在现有行的第一列中输入无效日期，然后单击 "Add" 按钮，操作将会失败，由于日期转换错误而拒绝提交表单。用户单击 "Add" 按钮时的理想行为是：放弃处理表中的输入字段，以便在忽略现有行的暂挂编辑内容的情况下添加新行。

同样地，当用户单击 "Revert" 按钮时（其目的是放弃所有编辑内容），也应该忽略以上情况的编辑内容。但是，当用户单击 "Delete" 按钮时，您仍然希望进行验证，因为此按钮不仅删除某个行，而且还会提交所有暂挂的更改，这要求先处理输入字段。

1. 在可视设计器中，按 Ctrl 键的同时单击以选择 "Add" 和 "Revert" 按钮，单击鼠标右键，然后从弹出式菜单中选择“配置虚拟表单”。

   在“配置虚拟表单”窗口中，add 和 revert 应出现在左上角，表明这些按钮处于选定状态。

2. 在“配置虚拟表单”窗口中，单击“新建”，将新的虚拟表单命名为 add/revert，然后将“提交”设置为“是”。单击“确定”。

   图 16：为 "Add"、"Revert" 和 "Delete" 按钮配置虚拟表单

测试应用程序 - 第 5 部分

通过单击“运行主项目”按钮以生成、部署和运行项目。下面的图 17 显示了正在运行的应用程序。

部署后，程序可执行以下功能：

• 从下拉列表中选择一个名字，并显示此人的行程摘要。
• 编辑现有的行程信息，并将更改保存到数据库中。
• 编辑具有不正确的日期格式的现有行程信息，然后单击 "Add Trip" 添加一个新行，或者单击 "Revert Changes" 放弃编辑。
• 在表中添加行，填写行程字段，并将更改保存到数据库中。
• 从表中（同时从数据库中）删除行。

• 放弃编辑内容，并恢复为数据库中最近保存的数据。

图 17：测试应用程序，第 5 部分

小结

在本教程中，您将表组件、文本字段组件和下拉列表组件与数据库中的信息进行了关联；此外，还为组件设置了属性，添加了 prerender 和事件代码，从而可以插入、更新和删除数据库中的数据，并恢复在表单上输入的更改。您还使用了虚拟表单，这使得应用程序使用一个页面即可，并且在添加行或恢复更改时提交的数据可以绕过有效性检查。

另请参见：

• 使用数据绑定组件访问数据库
• NetBeans Visual Web Pack 入门指南

---

请将您的意见和建议发送给我们