在此演練中，您將在 Sun Java? Studio Creator 應用程序開發環境 (IDE) 中創建和部署一個簡單的 Web 應用程序
"travel center"。向頁面中添加兩個組件，并將那些數據識別組件綁定到本地數據庫。然后，生成應用程序并將其
部署到本地應用服務器，在客戶機 Web 瀏覽器上運行該應用程序。
內容
? 創建項目
? 添加 Dropdown List 組件
? 將組件連接到數據庫
? 運行 Web 應用程序
? 添加 Data Table
? 修改 SQL 查詢
? 控制顯示的行
要完成此演練，系統上應該已經安裝了 IDE，并且您已經閱讀了 Java Studio Creator 入門 教程。
創建項目
開發 Web 應用程序從創建項目開始。就像在入門教程中學習的那樣，項目是 IDE 中的基本工作單元。項目包含
組成應用程序的所有源代碼和資源。
1. 在“歡迎”屏幕上單擊“創建新項目”。
2. 在“新建項目”對話框的“名稱”文本字段中，鍵入 TravelCenter。
3. 選擇“缺省 J2EE Web 應用程序”模板（如果尚未選定），然后單擊“確定”。
通過這些步驟會創建兩個重要的文件，在本教程的其他部分中也將用到這兩個文件。
? Page1.jsp－JavaServer Pages? 中包含組成 Web 應用程序的組件。最初，在應用程序中只有一個 JSP?
頁，但是隨后您可以添加更多的頁面。
? Page1.java－包含頁面狀態并使其在不同的呈現中保持一致的 JavaBeans? Bean。缺省情況下代碼是不
可見的，但是您可以通過右鍵單擊頁面，然后在上下文菜單中選擇“查看 Page1 Java 類”來顯示它。
添加 Dropdown List 組件
接下來，向頁面中添加 Dropdown List 組件。
1. 在組件面板中，選擇“JSF”>“JSF 標準組件”，然后將 Dropdown List 組件拖到頁面上。
Dropdown List 組件將出現在 Page1.jsp 頁面上。您可以通過使用選擇句柄來調整組件的大小，也可以
1
Sun Java Studio Creator
將組件移動到新位置。
2. 右鍵單擊頁面背景，然后在上下文菜單中選擇“查看 Page1 Java 類”。
會在源編輯器中打開頁面的 JavaBeans 源代碼。
3. 在“選擇類成員”下拉列表中選擇 "dropdown1" 以導航到實例變量聲明。（“選擇類成員”下拉列表位于
源編輯器工具欄中。）
初始化 Dropdown List 組件的 Java 代碼已添加到 Page1 類實現。
private HtmlSelectOneMenu dropdown1 = new HtmlSelectOneMenu();
將組件連接到數據庫
在此部分中，使 Dropdown List 組件可以從數據庫表獲得項。
1. 單擊源編輯器頂部的 Page1.jsp 標簽以查看頁面。
2. 從“服務器導航”中，將“數據源”> "Travel" >“表”> "PERSON" 節點拖放到 Dropdown List 組件的上
面。
將出現一個對話框，且 personRowSet 已添加到非可視組件托盤中。
注如果 PointBase Embedded 數據庫沒有運行，則您將看到一個“錯誤”對話框，告訴您這一情況。如果看
到此對話框，請關閉“錯誤”對話框，在“服務器導航”中右鍵單擊“PointBase 數據庫服務器”節點，
然后在上下文菜單中選擇“啟動 PointBase”。然后，右鍵單擊“數據源”>
"Travel"，并從上下文菜單中選擇 “刷新”。現在，您應該能夠定位到 "Travel" 數據源節點。
3. 單擊“填充列表”。
因為 PERSON.NAME 列屬于 SQL 類型 varchar，在 Dropdown List 組件中將顯示文本 "abc"，指示所顯
示的數據是一個字符串。
注如果沒看到這個對話框，是因為 PERSON 節點沒有被直接放到 Dropdown List 組件的上面。在這種情況
下，在執行下一步時，請確保如圖 1 所示選定了 PERSON.PERSONID 和 PERSON.NAME 列。
4. 右鍵單擊 Dropdown List 組件，然后從上下文菜單中選擇“從數據庫填充列表”。
“值字段”被綁定到 PERSON.PERSONID 列，該列是 PERSON 表的主鍵。此字段提供由 JSF 組件的
getValue() 方法返回的值。另一方面，“顯示字段”被綁定到 PERSON.NAME 列，是組件運行時所顯
示的內容。
5. 單擊“確定”。
運行 Web 應用程序
現在，您可以部署和運行 Web 應用程序了。IDE 附帶有一個已經安裝的本地部署服務器：
? Sun Java? System Application Server Platform Edition 8
部署服務器是作為“服務器導航”中“部署服務器”節點下的一個節點安裝的。通過部署服務器的上下文菜單
（可通過右鍵單擊它進行訪問），可以啟動或停止它。
部署和運行 Web 應用程序
1. 單擊工具欄中的“全部保存”按鈕。
2. 單擊工具欄中的“運行項目”按鈕。
IDE 將生成、部署和運行 TravelCenter 應用程序。首先，“生成輸出”窗口出現在 IDE 布局的底部。有關
編譯的信息和部署準備將輸出到此窗口。（如果在生成時出現問題，請首先檢查“生成輸出”窗口。）接
下來，將打開一個對話框，其中顯示部署的狀態。
部署之后，將使用 URL
http://localhost:18080/travelcenter/ 為應用程序打開一個新的 Web 瀏覽器
窗口。使用 PERSON 表的 NAME 列中的數據填充下拉列表。
添加 Data Table
接下來，向應用程序中添加一個 Data Table 組件，并將該組件與數據庫表相連。
1. 在組件面板中，單擊“JSF 標準組件”，將 Data Table 拖至頁面，并將它放置在 Dropdown List 組件的下
面。
2. 拖動“數據源”> "Travel" >“表”> "TRIP" 節點，并將其放在 Data Table 上。確保整個 Data Table 組件的輪
廓為藍色時放置節點。如果只有列或列標題的輪廓為藍色，請將節點在組件內四處移動，直到整個組件的
輪廓為藍色。
如果將節點放在列或列標題上，會出現“選擇目標”對話框，而且 tripRowSet 已添加到非可視組件托
盤中。確保選中了 "dataTable1" 單選按鈕，然后單擊“確定”關閉對話框。
3. 右鍵單擊 Data Table 組件，然后選擇“表布局”。
注如果沒有選定 Data Table 組件，或者選定了它的其中一個子組件（在本例中是列），則在右鍵單擊 Data
Table 時，將出現另外的上下文菜單。在這種情況下，請選擇 "dataTable1" >“表布局”。您可以按 Esc
鍵選擇當前所選組件的父組件。
出現“表布局”對話框。這兩個列表表明哪些列可用于顯示以及正在顯示哪些內容。將 TRIP 表放在 Data
Table 組件上時，將選擇所有可用的列進行顯示。
4. 選擇“顯示”列表中的第一列 (TRIP.TRIPID)，然后單擊 "<" 按鈕。
將從“顯示”列表中移除該列。
5. 移除 TRIP.PERSONID 和 TRIP.TRIPTYPEID 列。
仍然出現在“顯示”列表中的三列：
? TRIP.DEPDATE
? TRIP.DEPCITY
? TRIP.DESTCITY
使用數據綁定組件訪問數據庫 ?
Sun Java Studio Creator
6. 單擊“確定”。
現在，Data Table 組件中有三個顯示列。
修改 SQL 查詢
在此部分中，將修改 TRIP 行集對象中的 SQL 查詢，以便查詢返回 TRIPTYPE 表中的數據。您還將修改 Data
Table 組件以顯示新列。
1. 右鍵單擊非可視組件托盤中的 tripRowSet，然后選擇“編輯行集查詢”。
在編輯器窗格中將出現查詢編輯器。標簽的名稱是 tripRowSet。
2. 右鍵單擊設計視圖（見圖 4），然后選擇“添加表”。
3. 選擇 TRAVEL.TRIPTYPE 表，然后單擊“確定”。
將出現另一個表格圖，在兩個表格圖之間有一個鏈接。
4. 在指示的表中取消選中以下復選框：
? TRIP 表中的 TRIPID
? 兩個表中的 TRIPTYPEID
會從結果集中刪除上述列。同時會修改源視圖中的 SQL 查詢以反映這些更改。
4 使用數據綁定組件訪問數據庫 ?
圖 2 顯示的列
圖 3 第 1 列處于選定狀態的 Data Table
Sun Java Studio Creator
5. 選擇 Page1.jsp 標簽以返回到可視編輯器。
6. 右鍵單擊 Data Table，然后選擇“表布局”。
將出現“表布局”對話框。由于您已經更改了行集的 SQL 查詢，因此有更多可以顯示的列。
7. 將 TRIPTYPE.DESCRIPTION 列添加到“顯示”列表中。
8. 單擊“確定”。
第四列將出現在 Data Table 組件中。
控制顯示的行
在上一部分中將 TRIP 表放在 Data Table 組件上時，IDE 使用返回表中所有列的所有行的 SQL 查詢創建了一個
行集對象。如果此時部署應用程序，則數據表將包含 TRIP 表中的所有行程信息。
假定您僅希望顯示其名字出現在 Dropdown List 組件中人員的行程信息。您必須通過編輯 TRIP 行集對象的缺省查
詢，在 Dropdown List 組件和 Data Table 組件之間創建主從關系 (Master-Detail)。
1. 雙擊 tripRowSet 對象打開查詢編輯器。
2. 在查詢編輯器的設計網格（電子表格）中，右鍵單擊設計網格 PERSONID 行中的“條件”單元格，然后
選擇“添加查詢條件”。
使用數據綁定組件訪問數據庫 ?
圖 4 查詢編輯器
設計視圖
設計網格
源代碼
Sun Java Studio Creator
3. 將“比較”下拉菜單設置為“=等于”，并選擇“參數”單選按鈕。
4. 單擊“確定”。
在 PERSONID 的“條件”列中您會看到 "=?"，它在 SQL 查詢中添加了以下 WHERE 子句：
WHERE TRAVEL.TRIP.PERSONID = ?
5. 通過選擇 Page1.jsp 標簽，返回到可視編輯器，然后雙擊 Dropdown List 組件。
Page1 類的源代碼在編輯器區域中打開，且光標位于 dropdown1_processValueChange() 方法主體
內。此事件處理程序方法存根 (Stub) 是在您首次雙擊 Dropdown List 組件時創建的。
6. 從“組件面板”>“代碼片段”>“演示”拖動 Travel dropdown 代碼片段，將其放在
dropdown1_processValueChange() 方法體中。
6 使用數據綁定組件訪問數據庫 ?
圖 5 “添加查詢條件”對話框
Sun Java Studio Creator
public void dropdown1_processValueChange(ValueChangeEvent vce) {
// User event code here...
try {
dataTable1Model.setObject(1, dropdown1.getValue());
dataTable1Model.execute();
} catch (Exception e) {
log("person change exception", e);
error(“Exception changing person id:”+e);
} // end try catch
}
這段代碼將下拉列表的值綁定到為 dataTable1Model 準備的 SQL 語句中的參數上。
7. 在 Page1 類中找到 Page1() 構造函數。
8. 從“組件面板”>“代碼片段”>“演示”拖動 Travel initialization 代碼片段，并將其放在 Page1() 構造
函數實現的結尾處。
public Page1() {
// other lines of code omitted
catch ( Exception e) {
log("Page1 Initialization Failure", e);
throw new FacesException(e);
}
// Additional user provided initialization code
try {
personRowSet.execute();
personRowSet.next();
dataTable1Model.setObject(1, personRowSet.getObject("PERSONID"));
} catch (Exception ex) {
throw new FacesException(ex);
} // end try catch
}
這段代碼將把下拉列表中當前選定 NAME 的 PERSONID 值綁定到為 dataTable1Model 準備的 SQL 語句
中的參數上。
9. 通過選擇 Page1.jsp 標簽返回到可視編輯器。
10.右鍵單擊 Dropdown List 組件，然后選擇“更改時自動提交”。
在屬性表單中，以下代碼將出現在 "Javascript" > "onchange" 屬性中：
this.form.submit();
現在，當用戶在運行的 Web 應用程序中更改下拉列表選擇時，將重新提交和更新頁面。
11.單擊工具欄上的“全部保存”。
12.單擊工具欄上的“運行項目”。
將重新生成和部署 Web 應用程序。在下拉列表中選擇另一個名字，您會注意到更新了數據表。
使用數據綁定組件訪問數據庫 ? 2004 6 年月 7
Sun Java Studio Creator
請參見
? Java Studio Creator 入門
本文下載地址： http://mail.yl.gov.cn/ftp/yy/jscb2005.rar