1. 将 "Travel" >“表”> "TRIP" 节点从“运行环境”窗口拖放到可视设计器中的“表”组件上。

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

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

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

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

   <!-- END FIGURE COMPONENT -->
4. 单击“选项”标签，并将标题更改为 Trips Summary 。

5. 单击“确定”。

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

   <!-- BEGIN FIGURE COMPONENT -->

   图 5 ：Page1 表布局

   <!-- END FIGURE COMPONENT -->

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

   SQL 查询编辑器将显示在编辑区域中。

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

   <!-- BEGIN FIGURE COMPONENT -->

   图 6 ：添加查询条件

   <!-- END FIGURE COMPONENT -->

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

   <!-- BEGIN FIGURE COMPONENT -->

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

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

更改列组件

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

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

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

   <!-- BEGIN FIGURE COMPONENT -->

   图 8 ：更改列的外观

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

5. 单击“确定”。

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

6. 将 "Travel" >“表”> "TRIPTYPE" 节点拖动到“表”组件中的下拉列表上。

   此操作将创建 triptypeDataProvider 。

为表配置虚拟表单

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

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

   <!-- BEGIN FIGURE COMPONENT -->

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

   <!-- END FIGURE COMPONENT -->

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

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

2. 在值更改事件方法中，找到注释行 // 待做事项：替换为您的代码 。使用代码样例 1 中的粗体文本替换此行。

   <!-- BEGIN CODE SAMPLE COMPONENT -->

   代码样例 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); } }

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

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

   <!-- BEGIN CODE SAMPLE COMPONENT -->

   代码样例 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); } } }

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

测试应用程序 - 第 1 部分

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

添加插入功能

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

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

   <!-- BEGIN FIGURE COMPONENT -->

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

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

10. 修改按钮的事件代码（ add_action() 方法），使其如下所示：

    <!-- BEGIN CODE SAMPLE COMPONENT -->

    代码样例 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; }

    <!-- END CODE SAMPLE COMPONENT -->

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

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

    import com.sun.data.provider.RowKey;

测试应用程序 - 第 2 部分

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

修改页面以保存行集

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

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

   <!-- BEGIN FIGURE COMPONENT -->

   图 13 ：将 TRIP 表拖动到 SessionBean1 上

   <!-- END FIGURE COMPONENT -->
   此操作将会打开“添加新的数据提供器”对话框。

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

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

   <!-- BEGIN FIGURE COMPONENT -->

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

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

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

   MAXTRIPID 值将用在 "Save" 按钮（接下来，将添加此按钮）的操作处理程序中。
5. 关闭查询编辑器。请注意，查询编辑器的图形编辑器不支持此查询。如果您看到一个提示出现语法错误的警报对话框，可通过单击“继续”安全地将其关闭。

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

7. 修改该按钮的事件代码（ save_action() 方法），使其如下所示：

   <!-- BEGIN CODE SAMPLE COMPONENT -->

   代码样例 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; }

   <!-- END CODE SAMPLE COMPONENT -->