本教程介紹如何用數據庫中的數據，動態地構建一個樹狀結構。使用 NetBeans Visual Web Pack 5.5，構建一個兩頁應用程序，第一頁包含一個 Tree 組件。使用來自數據庫的名稱，將一級節點填充在 Tree 中，使用人員的 trip 填充二級節點。trip 節點與第二頁鏈接，顯示該 trip 的詳細信息。
目錄
l 設計主頁
l 連接數據庫
l 添加詳細信息頁
l 添加代碼
l 定以頁面導航
| JavaServer Faces 組件/ | |
| | |
| BluePrints AJAX 組件庫 | |
* 該教程發佈時，只有 Sun Java System Application Server 支持 Java EE 5
本教程與 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat
設計主頁
從構建包含 Tree 組件和 TRIP 數據庫表格的主頁開始。
- 創建一個新的可視化 Web 應用程序項目，並將其命名爲
DatabaseTree。
2. 從 Palette 的 Basic 部分，將一個 Tree 組件拖動到頁面上，鍵入 Travel Information，並按 Enter。在 Properties 窗口中，將 id 屬性設置爲 displayTree，將 clientSide 屬性設置爲 True。
當 clientSide 爲 True 時，每個子節點（無論展開與否）都被髮送給客戶端，但是在父節點展開之前它們是不可見的。當 clientSide 爲 False 時，僅提供展開父節點的子節點。
3. 選擇 Tree Node 1，右鍵單擊，從彈出菜單中選擇 Delete。
在本應用程序中，不需要 IDE 創建的初始 tree 節點，因爲正在以編程方式填充 tree。如果未刪除該節點，在 JSP 標記屬性中設置的值將優於運行時設置，該頁將顯示此節點。
- 從 Palette 中將 Message Group 組件拖動到頁面上較邊遠的位置，比如頁面的右上角。
連接數據庫
下一步，將頁面與 Travel 數據源中的數據庫表格連接。然後使用 Query Editor 修改用於檢索數據的 SQL 查詢，使遊客的姓名按字母順序顯示，旅行日期則按時間順序顯示。
1. 打開 Runtime 窗口，展開 Databases 節點，驗證 Travel 數據庫已連接。
如果代表 TRAVEL 數據庫標記的 jdbc 節點斷開，而且不能展開該節點，則 IDE 未與數據庫連接。右鍵單擊 TRAVEL 的 jdbc 節點，並從彈出菜單中選擇 Connect。如果出現 Connect 對話框，爲 Password 輸入 travel，選擇 Remember Password During This Session，然後單擊 OK。如果未看到 TRAVEL 數據庫的 jdbc 節點，請參見 NetBeans Visual Web Pack 安裝說明，瞭解有關使數據庫爲 IDE 所用的信息。
注意：如果正在使用 Apache Tomcat，在嘗試連接數據庫之前，將 derbyClient.jar 文件複製到 目錄。
2. 展開 TRAVEL 數據庫的 jdbc 節點，然後展開 Tables 節點。
3. 將 TRIP 節點拖動到 Visual Designer 上面。
Outline 窗口顯示 Page1 部分的 tripDataProvider 節點，以及 SessionBean1 部分的 tripRowSet 節點。
4. 在 Outline 窗口中，右鍵單擊 tripRowSet 節點，並選擇 Edit SQL Statement。
在編輯區域出現帶有 TRIP 表格圖的 Query Editor。
5. 從 Runtime 窗口中拖動 Travel > Tables > PERSON 節點，並將其放置在 Query Editor 中 Trip 表格圖的旁邊，另一個表格圖出現，且在兩個表格圖之間帶有鏈接或連接。
- 在 PERSON 表格中，清除對 PERSONID 複選框的選擇。
7. 在 Query Editor 的 Design Grid 中，找到 TRAVEL.PERSON 表格的 NAME 行。單擊 Sort Type 單元格，並在下拉列表中選擇 Ascending。
此操作將數據庫表格中的姓名按姓氏字母順序分類。
8. 找到 TRAVEL.TRIP 表格的 DEPDATE 行。單擊 Sort Type 單元格，並在下拉列表中選擇 Ascending。
此操作將旅行日期按照由早到晚的順序分類。使用數據庫表格構建樹狀結構
現在添加一個請求 bean 屬性，來保存應用程序中兩個頁都要使用的信息。然後向 prerender() 方法添加代碼，使用 TRIP 和 PERSON 數據庫表格動態地構建 Tree 組件。
1. 打開 Page1，使 Outline 窗口可見。在 Outline 窗口中，右鍵單擊 RequestBean1 節點，並選擇 Add ＞ Property。將屬性命名爲 personId，將類型輸入爲 Integer，然後單擊 OK。
該屬性保存遊客的 ID，如下圖所示。然後，構建一個使用該屬性的 Trip 詳細頁面，將當前遊客的 id 傳遞給 Page 1。設置該屬性時，Page 1 將該遊客的節點展開。
注意：由於該版本產品存在一個錯誤，可能需要關閉彈出菜單，然後再一次右鍵單擊 RequestBean 節點，激活 Add 子菜單。
2. 打開 Java Editor 中的 Page1，然後滾動到 prerender 方法。使用以下以黑體顯示的代碼替換 prerender 方法的主體部分：
| 代碼示例 1：Page1 的 prerender 方法 |
public void prerender() { // If the Request Bean's personId is set, then // we just came back from the Trip page // and had displayed a selected trip. // We use the personId later to determine whether // to expand a person's node Integer expandedPersonId = getRequestBean1().getPersonId(); try { // Set up the variables we will need Integer currentPersonId = new Integer(-1); // If nbrChildren is not 0 then this is a // postback and we have our tree already int nbrChildren = displayTree.getChildCount(); if (nbrChildren == 0) { // List of outer (person) nodes List outerChildren = displayTree.getChildren(); // Erase previous contents outerChildren.clear(); // List of inner (trip) nodes List innerChildren = null; // Execute the SQL query tripDataProvider.refresh(); // Iterate over the rows of the result set. // Every time we encounter a new person, add first level node. // Add second level trip nodes to the parent person node. boolean hasNext = tripDataProvider.cursorFirst(); while (hasNext) { Integer newPersonId = (Integer) tripDataProvider.getValue( "TRIP.PERSONID"); if (!newPersonId.equals(currentPersonId)) { currentPersonId = newPersonId; TreeNode personNode = new TreeNode(); personNode.setId("person" + newPersonId.toString()); personNode.setText( (String)tripDataProvider.getValue( "PERSON.NAME")); // If the request bean passed a person id, // expand that person's node personNode.setExpanded(newPersonId.equals (expandedPersonId)); outerChildren.add(personNode); innerChildren = personNode.getChildren(); } // Create a new trip node TreeNode tripNode = new TreeNode(); tripNode.setId("trip" + tripDataProvider.getValue("TRIP.TRIPID").toString()); tripNode.setText( tripDataProvider.getValue("TRIP.DEPDATE").toString()); tripNode.setUrl("/faces/Trip.jsp?tripId=" + tripDataProvider.getValue("TRIP.TRIPID").toString()); innerChildren.add(tripNode); hasNext = tripDataProvider.cursorNext(); } } } catch (Exception ex) { log("Exception gathering tree data", ex); error("Exception gathering tree data: " + ex); } } |
該代碼讀取 trip 記錄，這些記錄按 personId 順序排列。代碼爲每個 personId 在 Tree 中創建一個新的一級節點。然後代碼爲與該 personId 相關的每個 trip 創建一個二級節點（嵌入節點）。最後，代碼將二級 trip 節點與tripNode_action方法綁定，本節的後面將創建該方法。- 按 Alt-Shift-F 來修正未發現類的錯誤。在 Fix Imports 對話框中，確保 java.util.List 出現在 Fully Qualified Name 字段中，然後單擊 OK。
5. 運行項目。
Web 瀏覽器打開並顯示 Tree 組件，該組件在每個一級節點顯示有一個人員的姓名。展開一個節點，顯示該人員的旅行日期。注意，姓名按姓氏的字母順序顯示，日期按時間先後順序顯示，在下一節，您將添加代碼以便在用戶單擊 trip 節點時導航到第二頁。第二頁顯示用戶所選 trip 的詳細信息。
添加詳細信息頁
在此，嚮應用程序添加了第二頁。本頁使用了 Property Sheet 組件，動態地顯示用戶在第一頁上所選 trip 的詳細信息。
- 打開 Projects 窗口，右鍵單擊 Web Pages 節點，然後從彈出菜單中選擇 New ＞Page。將新頁命名爲 Trip。
2. 打開 Runtime Window，然後將 Tables > TRIP 節點拖動到 Trip 頁面的 Visual Designer 上。在對話框中，選擇 Create SessionBean1 tripRowSet1 旁邊的單選按鈕．
Outline 窗口顯示 Trip 部分中的 tripDataProvider1 節點，以及 SessionBean1 部分中的 tripRowSet1 節點。
- 在 Outline 窗口中，右鍵單擊 tripRowSet1 節點，並選擇 Edit SQL Statement。
4. 在 Query Editor 的 Design Grid 中，右鍵單擊 TRIPID 行中的任一單元格，然後選擇 Add Query Criteria。在對話框中，將 Comparison 下拉菜單設置爲 =Equals，然後選擇 Parameter 單選按鈕。單擊 OK。
在 TRIPID 的 Criteria 列中可以看到 =?，它在 SQL 查詢中添加以下 WHERE 子句。
WHERE TRAVEL.TRIP.TRIPID = ?
- 在 Visual Designer 中打開 Trip Page。從 Palette 的 Basic 部分，將一個 Hyperlink 組件拖動到頁面上，鍵入
Home，並按 Enter。
6. 在 Hyperlink 組件的 Properties 窗口中，單擊 action 屬性的省略號(…)按鈕，從下拉列表中選擇 hyperlink1_action，然後單擊 OK。
IDE 將 hyperlink1_action 事件處理程序添加到 Java 源。
- 從 Palette 中將 Message Group 組件拖動到頁面，並將其放在 Hyperlink 組件的右面。
8. 從 Palette 的 Layout 部分，將 Property Sheet 組件拖動到頁面上。將它放在 Hyperlink 組件的下方。
Property Sheet 組件爲佈置 trip 信息提供了一個容器。Property Sheet 組件包含 Property Sheet Section，而 Property Sheet Section 則包含 Property 組件。
9. 選擇 Property Sheet Section 1。在 Properties 窗口中，將 label 屬性設置爲 Trip Details。
注意：如果項目源級別被設置爲 1.4，則在 Properties 窗口中更改屬性表標籤後，屬性表標籤不會被更新。
- 在 Outline 窗口中，展開 propertySheet1 ＞ section1，然後選擇 property1 節點。在 Properties 窗口中，將
label屬性設置爲Departure Date：並按 Enter。 - 在 Outline 窗口內，選擇 section1，右鍵單擊，並從彈出菜單中選擇 Add Property。在 Properties 窗口中，將
label屬性設置爲Departure City：並按 Enter。
12. 從 Palette 中拖動 Static Text 組件，並把它放在 Outline 窗口中的 property1 節點上。
Static Text 成爲 property1 的一個子結點。Visual Designer 中也出現了 Static Text。
13. 右鍵單擊 Static Text 組件，然後從彈出菜單中選擇 Bind to Data。如有必要，單擊 Bind to Data Provider 選項卡，將該選項卡置於前端。在對話框中，選擇 Data 字段中的 TRIP.DEPDATE。
在 Visual Designer 的 Static Text 組件中出現當前日期。