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 -->