在使用本教程之前，您需要在系統上安裝含有 Web 和 Java EE 支持的 NetBeans IDE 6.0。熟悉 IDE 的各個基本部分並閱讀 NetBeans 可視化 Web JSF 開發 了解 NetBeans IDE 開發環境的簡要介紹。
本教程將涉及以下技術和資源：
JavaServer Faces 組件Java EE 平台
1.2 與 Java EE 5*
1.1 與 J2EE 1.4
必 需
* 到本文發布之日時止，只有 Sun Java System Application Server 支持 Java EE 5。
本教程適用於 GlassFish V2 應用服務器。如果使用的是不同的服務器，請參閱 發行說明 和 常見問 題解答 了解各類問題和解決途徑。有關所支持的服務器和 Java EE 平台的詳細信息，請參閱 發行說明 。
創建含有下拉列表組件的頁面
在本教程中，我們將構建一個 Travel Center 應用程序，如下圖中部署的應用程序所示。
圖 1：已部署的 Travel Center Web 應用程序
首先，我們將在新項目創建的默認的 Page 1.jsp 頁面中添加一個 Table 組件和一個 Drop Down List 組件。
創建一個新 Web 應用程序項目，將它命名為 DataboundComponents，該應用程序使用 GlassFish V2 應用服務器和 Visual Web JavaServer Faces 框架。
IDE 將創建第一個頁面，其名稱為 Page1，並在 Visual Designer 中顯示該頁面。
展開 Palette 中的 Basic 節點，然後拖動一個 Label 組件到頁面左側。鍵入 Select Name： 並按 下回車鍵。
拖動一個 Drop Down List 組件到 Label 組件右側。
在 Properties 窗口中，將 id 屬性修改為 personIdDD。
按住 Ctrl-Shift 鍵的同時拖動 Drop Down List 組件到 Label 組件，將這兩個組件關聯到一起。
Label 組件的 for 屬性現在已設置為 personIdDD。
從 Palette 窗口拖動一個 Message Group 組件到頁面某角落中，比如說頁面的右上角。
該組件可用於診斷編程錯誤。我們可以讓診斷消息出現在該組件中，方法是調用 info(String)、 error(String)、 warn(String)和 fatal(String) 方法。Message Group 組件將顯示 String 參數的值 。此外，關於運行時錯誤、驗證錯誤和轉換錯誤的消息將默認出現在該組件中。
將組件連接到數據庫
Services 窗口位於 IDE 工作空間的左側，其中含有一個 Databases 節點。Databases 節點將顯示已 添加到 IDE 中的所有數據庫驅動程序和連接。
NetBeans IDE 附帶的 示例 Travel 數據庫 出現在 Databases 節點下面。
將數據庫綁到組件時，我們將在組件和數據庫表之間創建兩個層：RowSet 層和 Data Provider 層。 RowSet 層負責連接數據庫、執行查詢和管理結果集。Data Provider 層提供了一個公共接口用於訪問許 多類型的數據，包括 rowsets、Array 對象和 Enterprise JavaBeans 對象。
通常，我們只有在需要設置查詢參數時才會用到 RowSet 對象。在大多數其他情況下，我們應該使用 Data Provider 對象訪問和操作數據。我們可以通過使用 Data Provider API 來降低學習門檻，因為相 同的 API 適用於封裝任何類型的數據（也就是所使用的 Data Provider 實現）。
在本節中，我們將使用 Travel 數據庫中的 PERSON 表為 Drop Down List 組件提供選擇。
在 Services 窗口中，展開 Databases 節點，然後驗證是否已連接到 TRAVEL 數據庫。
如果 TRAVEL 數據庫 jdbc 節點的標志是裂開的並且無法展開該節點，則表示 IDE 未連接到數據庫。 要連接到 TRAVEL 數據庫，右鍵單擊 TRAVEL 數據庫的 jdbc 節點並從彈出菜單中選擇 Connect 選項。 如果出現 Connect 對話框， 則輸入 travel 作為用戶名和口令，選中 Remember Password During This Session 選項並單擊 OK 按鈕。如果未看到 TRAVEL 數據庫的 jdbc 節點，則查看 如何在 NetBeans IDE 6.0 中啟用 MySQL 示例 Travel 數據庫 這篇文章了解如何將 IDE 連接到數據庫。
展開 Travel > Tables 節點。
在 Tables 節點下面，我們可以看到數據庫各個表的節點，比如說 CARRENTAL 和 FLIGHT。展開 Tables 節點的 Services 窗口如下圖所示。
圖 2：Services 窗口
將 Services 窗口中的 PERSON 拖動到 Drop Down List 組件上。
abc 文本將出現在 Drop Down List 組件中。 abc 文本表示顯示字段已綁定到一個 String 對象，本 例中的 String 對象為 SQL 數據庫中的一列，其類型為 varchar。此外，IDE 將為數據庫表添加一個不 可見的 personDataProvider 組件。personDataProvider 組件將出現在 Navigator 窗口中。IDE 還會添 加一個 personRowSet 屬性到 SessionBean1 中。
右鍵單擊 Drop Down List 組件並從彈出菜單中選擇 Bind to Data 選項。此時將出現 Bind to Data 對話框，如下圖所示。
圖 3：將數據綁定到 Drop Down List 組件
將數據綁定到 Drop Down List 組件時，我們必須指定在列表（Display Field）中顯示的內容並且還 要指定底層程序（Value Field）所使用的值。通常，我們希望通過數據庫表顯示一些有意義的值，比如 說某人的姓名，但是也希望在底層程序中使用惟一的標識符。但是在此應用程序中，我們希望將 Value 值和 Display 值同時綁定到數據庫中的同一列，即 PERSON.NAME 列，如以下兩個步驟所示。
在 Bind to Data 對話框中，選擇 Value Field 列表中的 PERSON.PERSONID 選項使組件的 getSelected 方法返回當前選擇的 PERSON.PERSONID。
選擇 Display 列表中的 PERSON.NAME，讓浏覽器使用 PERSON.NAME 數據庫列中的值填充下拉列表。
單擊 OK 按鈕。
單擊主工具欄中的 Run > Run Main Project 按鈕。
IDE 將保存所有修改，然後編譯、部署和運行應用程序。首先，Output 窗口將出現在 IDE 底部。IDE 會將編譯和部署准備信息寫入到該窗口中。如果在編譯過程中遇到任何問題，請首先查閱 Output 窗口。 接下來，對話框將顯示部署的狀態信息。部署完成之後，IDE 將在 Web 浏覽器中打開應用程序。浏覽器 在呈現頁面時會使用 PERSON 表的 NAME 列中的數據填充下拉列表。
添加表組件
接下來，我們將在應用程序中添加一個 Table 組件並將該組件連接到一個數據庫表。
從 Palette 中拖動一個 Table 組件並將它放置在 Drop Down List 組件下面。
在 Services 窗口中，展開 Travel > Tables 節點。
將 Services 窗口中的 TRIP 拖動到 Table 組件標題欄上。
注意： 如果將 TRIP 數據庫放置在表組件的其他部分上，則會打開 Choose Target 對話框。在 Choose Target 對話框中，選擇 table1 選項並單擊 OK 按鈕。
右鍵單擊 Table 組件並選擇 Table Layout 選項。
Table Layout 框中的 Selected 列表將顯示表中的所有列。我們將使用 Selected 列表中的項目指定 哪些列應顯示在 Table 組件中。
使用 Ctrl-Click 組合鍵選擇 Selected 列表中除 TRIP.DEPDATE、TRIP.DEPCITY 和 TRIP.DESTCITY 之外的所有條目。
單擊 < 按鈕。
所選條目已全部移至 Available 列表，只有以下三個條目仍然保留在 Selected 列表中，如下圖所示 ：
圖 4：Table Layout 對話框
單擊 OK 按鈕。
此時，Visual Designer 將顯示 Table 組件中的三列數據，如下圖所示。
圖 5：顯示表列
修改 SQL 查詢
接下來，我們將修改 tripRowSet 對象中的 SQL 查詢，使查詢也返回 TRIPTYPE 表中的數據。我們還 將修改 Table 組件，在其中顯示旅行類型描述。
在 Navigator 窗口中，展開 SessionBean1 節點（如果該節點尚未展開）。
圖 6：Navigator 窗口中的 SessionBean1 部分
在 Navigator 窗口的 SessionBean1 部分，右鍵單擊 tripRowSet 節點並選擇 Edit SQL Statement 選項。
Query Editor 將出現在編輯匹域，其中含有一個 tripRowSet 選項卡。
技巧 ：如果 Output 窗口是打開的，則關閉它將更多的空間留給 Query Editor。
將 Services 窗口中的 Travel > Tables > TRIPTYPE 節點拖動到 Design View 中，如圖 7 所示。< /p>已有的兩個表圖中間將出現另一個表圖，其中含有一個鏈接。該鏈接表示一對連接。 注意 IDE 修改 Source Code 面板中選擇語句的方式。
清除 TRIPTYPE 表中的 PERSONID 復選框。
此操作將移除結果集和 SQL 查詢（即 Source Code 面板）中的列，如下圖所示：
圖 7：Query Editor
讓 Query Editor 繼續打開。
單擊編輯區域中的 Page 1 選項卡。
在 Visual Designer 中，右鍵單擊 Table 組件並選擇 Table Layout 選項。
此時將出現 Table Layout 對話框，由於我們已經修改了 tripRowSet 的 SQL 查詢，因此可以顯示更 多的列。
將 TRIPTYPE.DESCRIPTION 列添加到 Selected 列表中，然後單擊 OK 按鈕。
第四個列將出現在 Table 組件中。
控制所顯示的行
為 TRIP 表添加了一個 Data Provider 之後，IDE 將創建一個 RowSet 對象，其中的 SQL 查詢將為 表的所有列返回所有行。如果在此時部署並運行應用程序，則 Table 組件將在 TRIP 表中顯示所有旅行 信息。
對於本文中的應用程序，Table 組件只顯示與在 Drop Down List 組件中選擇的人名相對應的旅行信 息。通過編輯 tripRowSet 對象的 SQL 查詢在 Drop Down List 組件和 Table 組件之間創建一個主從復 合（master-detail）關系，我們限制了在數據庫表中顯示的信息。
單擊編輯區域中的 jdbc:derby://localhost:1527/travel 選項卡，切換到 Query Editor。
在 Query Editor 的 Design Grid 中，右鍵單擊 PERSONID 行中的任何表元並選擇 Add Query Criteria 選項。
將 Comparison 下拉列表設置為 =Equals，選中 Parameter 單選按鈕並單擊 OK 按鈕。
我們可以在 PERSONID 表的 Criteria 列中看到 =?，它會在 SQL 查詢中添加以下 WHERE 語句。
代碼示例 1：SQL 查詢中的 WHERE 語句
WHERE TRAVEL.TRIP.PERSONID = ?
故障診斷技巧： 此時，我們可以驗證查詢是否已正確設置。在查詢編輯器中單擊鼠標右鍵，然後選擇 Run Query 選項。在 Specify Parameters Value 對話框中，鍵入 1 作為 TRAVEL.TRIP.PERSONID 參數 的值，然後單擊 OK 按鈕。Person 1 查詢的輸出位於查詢編輯器的結果面板中。
在 Query Editor 的 Design Grid 中，單擊 DEPDATE 行中的 Sort Type 表元並從下拉列表中選擇 Ascending 選項。
IDE 將自動設置 Sort Order 並將排序語句添加到 SQL 查詢中。
關閉 Query Editor。
在 Visual Designer 中，右鍵單擊 Drop Down List 組件。
Page1 類的源代碼將在 Java Editor 中打開，並且光標將位於 personIdDD_processValueChange 方 法的主體中。IDE 將在首次雙擊 Drop Down List 組件時創建這個事件處理程序方法的主干程序（ Stub ）。
將 personIdDD_processValueChange 方法的主體替換為以下黑體代碼。
代碼示例 2：Drop Down List 組件的值修改事件處理
public void personIdDD_processValueChange(ValueChangeEvent event) {
try {
getSessionBean1().getTripRowSet().setObject(
1, personIdDD.getSelected());
tripDataProvider.refresh();
} catch (Exception e) {
error("Cannot switch to person " +
personDataProvider.getValue(
"PERSON.PERSONID"));
log("Cannot switch to person " +
personDataProvider.getValue(
"PERSON.PERSONID"), e);
}
}
以上代碼會將下拉列表中當前所選 NAME 的 PERSONID 值綁定到 tripRowSet 對象的准備 SQL 語句中 的參數，並執行查詢以及獲取新的結果集。
setObject 方法會將查詢中的 ? 替換為 PERSONID 的值。 refresh 方法用於提交新查詢和刷新結果 集。要了解有關這兩個方法的更多信息，右鍵單擊方法調用並從彈出菜單中選擇 Show Javadoc 選項。查 看 Data Provider 和 RowSet Javadocs，方法是選擇 Help > Javadoc References > Data Provider and Help > Javadoc References > RowSet 選項。
log 方法將發送一條消息和關聯棧跟蹤給應用服務器的日志，作用是幫助發現和診斷用戶問題。查看 服務器日志的方法是右鍵單擊 Services 窗口中的 server 節點並從彈出菜單中選擇 View Server Log 選項。
按下 Alt-Shift-F 組合鍵重新格式化代碼。
找到源代碼中的 prerender 方法。
將 prerender 方法的主體替換為以下黑體代碼。
代碼示例 3：首次顯示頁面時同步主從數據
public void prerender() {
if ( personIdDD.getSelected() == null ) {
try {
personDataProvider.cursorFirst();
getSessionBean1().getTripRowSet().setObject(
1, personDataProvider.getValue("PERSON.PERSONID"));
tripDataProvider.refresh();
} catch (Exception e) {
error("Cannot switch to person " +
personDataProvider.getValue("PERSON.PERSONID"));
log("Cannot switch to person " +
personDataProvider.getValue("PERSON.PERSONID"), e);
}
}
}
prerender 方法中的代碼將在 Web 浏覽器開始顯示頁面之前調用。
按下 Alt-Shift-F 組合鍵重新格式化代碼。
單擊編輯工具欄中的 Design 按鈕，返回到 Visual Designer 中。
右鍵單擊 Drop Down List 組件並選擇 Auto-Submit on Change 選項。
在 Projects 窗口，以下代碼將出現在 Onchange 屬性中。
代碼示例 4：onchange 屬性代碼
webuijsf.suntheme.common.timeoutSubmitForm(this.form, 'personIdDD');
現在，當用戶在運行中的 Web 應用程序中修改下拉列表時，Web 浏覽器將自動提交頁面。
單擊主工具欄中的 Run > Run Main Project 按鈕。
IDE 將保存所有修改文件，重新編譯應用程序將它重新部署到服務器中。
從 Drop Down List 組件中選擇某個人物，查看 Table 組件是如何同步主從數據的。單擊 DESTCITY 列頭，查看 Table 組件如何對行排序。
更多功能
動手試試。添加一個 Static Text 組件到 Drop Down List 組件的右側。右鍵單擊 Static Text 組 件，並從彈出菜單中選擇 Bind to Data 選項，然後將該組件綁定到 PERSON.JOBTITLE。運行程序並從下 拉列表中選擇不同的姓名。注意到職位名並未發生變化。這是因為應用程序需要保持 personDataProvider 與下拉列表中的所選項目同步。將以下黑體代碼添加到 prerender 方法中並重新運 行應用程序。現在，職位名應該與所選姓名一致了。
代碼示例 5：同步 personDataProvider 與所選人名
public void prerender() {
if ( personIdDD.getSelected() == null ) {
try {
personDataProvider.cursorFirst();
getSessionBean1().getTripRowSet().setObject(
1, personDataProvider.getValue("PERSON.PERSONID"));
tripDataProvider.refresh();
} catch (Exception e) {
error("Cannot switch to person " +
personDataProvider.getValue("PERSON.PERSONID"));
log("Cannot switch to person " +
personDataProvider.getValue("PERSON.PERSONID"), e);
}
}
else {
try {
// Synchronize data provider with current selection
personDataProvider.setCursorRow(
personDataProvider.findFirst(
"PERSON.PERSONID", personIdDD.getSelected()));
} catch (Exception e) {
error("Cannot switch to person " +
personIdDD.getSelected());
log("Cannot switch to person " +
personIdDD.getSelected(), e);
}
}
}
動手試試。 試著操作表的布局選項。右鍵單擊 Table 組件並從彈出菜單中選擇 Table Layout 選項 。將 Header Text 修改為 Departure Date、Departure City、Destination City 和 Description。使 用對話框中的 Options 表將表題設置為 Trips。選中 Enable Pagination 並將 Page Size 設置為 3。 運行應用程序並查看這些修改將如何影響表的顯示方式。
注意： 如果要使用分頁選項，將以下代碼添加到 personIdDD_processValueChange 方法中的 tripDataProvider.refresh() 語句後面： tableRowGroup1.setFirst(0);。這樣將確保從下拉列表中選 擇新姓名時，第一個頁面總是會顯示出來，
動手試試。 構建一個含有 Drop Down List 組件和 Table 組件的應用程序。讓 Drop Down List 組 件顯示 TRIPTYPE.DESCRIPTION。讓 Table 組件顯示所有與所選 TRIPTYPE 含有相同 TRIPTYPEID 的 TRIP 記錄。
動手試試。 您可能想希望 prerender 和 personIdDD_processValueChange 方法中的重復代碼是否會 造成詳細 Rowset 刷新兩次。答案是否定的。要演示這一點，可以添加一個 log( method-name ) 語句到 構造函數、 prerender 方法和 personIdDD_processValueChange 中。 在 Services 窗口中，右鍵單擊 某個 server 節點 並從彈出菜單中選擇 View Server Log 選項。運行程序並選擇一個新姓名。在服務器 日志（位於 Output 窗口）中，我們可以看到方法將按照以下順序調用：
構造函數
prerender
構造函數
personIdDD_processValueChange
當浏覽器首次請求頁面時，應用程序會創建一個 Page1 實例並調用 prerender 方法。服務器將發送 響應（HTML 頁面），並且 Page1 實例將被銷毀。應用程序並不會調用值修改事件處理程序，因為應用程 序只有在提交頁面時才會生成值修改事件。
從下拉列表中選擇某個新姓名時，浏覽器將提交頁面。IDE 將創建一個新的 Page1 實例，並恢復前一 個實例的值（它們都在請求中傳遞）。因為這是一個提交事件，並且因為姓名已修改，所有應用程序將生 成一個值修改事件。這樣會調用 personIdDD_processValueChange 方法，並且應用程序會刷新 Rowset。
調用值修改事件處理程序之後，應用程序將調用 prerender 方法。由於下拉列表現在已有選擇的值， 因此應用程序將忽略 prerender 方法中的 if 部分。
結束語
將組件綁定到數據庫表的步驟如下所示：
綁定一個組件到數據庫表，方法是將數據庫表的節點放置在組件上，或者從彈出菜單中選擇 Bind to Data 選項並從下拉列表中選擇一個已有的 Data Provider。
使用 Bind to Data 對話框配置組件所顯示的數據庫列。對於列表類型組件，還需配置所返回的數據 庫列。我們還可以使用 Table Layout 菜單操作配置哪些數據庫列將顯示在 Table 組件中。
要修改 RowSet 對象中的 SQL 查詢，可以在使用 Query Editor 打開 Navigator 窗口中的 RowSet 對象。
調用 RowSet 對象的 setObject 方法，設置查詢參數的值。調用數據提供者的 refresh 方法，執行 查詢並刷新結果集。
使用 Auto-Submit on Change 菜單操作讓頁面在組件值發生變化時自動提交。
執行以下步驟同步主從組件：
在 Page Bean 的 prerender 方法中添加代碼，調用 RowSet 對象的 setObject 方法將查詢參數設置 為一些默認值，比如說某個下拉列表中的第一個人物。然後，調用 refresh 方法執行查詢。
將主結構（Master）組件綁定到 processValueChanged 方法。讓這個方法調用從結構（Detail） RowSet 對象的 setObject 方法設置新查詢參數。然後，調用 refresh 方法執行查詢。
