NetBeans IDE 6.5 實戰教學：從資料庫動態建構 JSF Tree 元件

本教學將帶領您使用 NetBeans IDE 6.5，打造一個雙頁面的 JavaServer Faces (JSF) 1.2 應用程式。首頁利用 Woodstock Tree 元件，從 Travel 範例資料庫動態載入人員與行程層級節點；次頁則顯示行程詳細資訊。全程採用視覺化拖拉開發，輔以少量程式碼綁定，約 30 分鐘即可完成。

專案建立與首頁佈局

1. 建立 Visual Web JSF 應用程式 專案，命名為 DatabaseTree。
2. 從元件面板拖入 Tree 元件，設定 id="displayTree"、clientSide="true"（所有節點一次傳至客戶端，展開無延遲）。
3. 刪除 IDE 預設生成的樹節點（避免靜態屬性覆蓋動態綁定），並為 Tree 元件新增 綁定屬性。
4. 放入 訊息群組 元件用於顯示驗證/轉換錯誤。

資料庫準備：MySQL Travel 範例庫

1. 確認 MySQL 服務運行中，於 IDE「服務」視窗右鍵 MySQL 伺服器 → 建立資料庫，選擇 範例資料庫: travel。
2. 展開 travel 連線節點，確認 person、trip 等資料表存在。

查詢編輯器：定義多表聯結與排序

1. 將 trip 表拖至設計器，自動生成 tripDataProvider 與 tripRowSet。
2. 再拖入 person 表，於查詢編輯器設計網格中建立聯結關係。
3. 設定排序：person.name 升冪（依姓氏字母序）、trip.depdate 升冪（依日期先後）。

核心邏輯：prerender() 動態建構樹狀結構

於 Page1 的 RequestBean1 新增 personId 屬性（含 getter/setter），用於記錄從詳情頁返回時需展開的節點。修改 prerender() 方法核心邏輯如下：

public void prerender() {
    Integer expandedPersonId = getRequestBean1().getPersonId();
    try {
        if (displayTree.getChildCount() == 0) { // 僅首次載入建構
            List outerChildren = displayTree.getChildren();
            outerChildren.clear();
            List innerChildren = null;
            tripDataProvider.refresh();
            boolean hasNext = tripDataProvider.cursorFirst();
            Integer currentPersonId = -1;
            while (hasNext) {
                Integer newPersonId = (Integer) tripDataProvider.getValue("TRIP.PERSONID");
                if (!newPersonId.equals(currentPersonId)) { // 新人員 → 新一級節點
                    currentPersonId = newPersonId;
                    TreeNode personNode = new TreeNode();
                    personNode.setId("person" + newPersonId);
                    personNode.setText((String) tripDataProvider.getValue("person.name"));
                    personNode.setExpanded(newPersonId.equals(expandedPersonId)); // 還原展開狀態
                    outerChildren.add(personNode);
                    innerChildren = personNode.getChildren();
                }
                // 建立二級行程節點
                TreeNode tripNode = new TreeNode();
                tripNode.setId("trip" + tripDataProvider.getValue("trip.tripid"));
                tripNode.setText(tripDataProvider.getValue("trip.depdate").toString());
                tripNode.setUrl("/faces/Trip.jsp?tripId=" + tripDataProvider.getValue("trip.tripid"));
                innerChildren.add(tripNode);
                hasNext = tripDataProvider.cursorNext();
            }
        }
    } catch (Exception ex) { error("Exception gathering tree data: " + ex); }
}

修復匯入 (com.sun.webui.jsf.component.TreeNode, java.util.List) 後執行專案，即可見姓名按字母序、日期按時間序排列的樹狀結構。

詳情頁面 Trip.jsp 建立與導航

1. 新增 Visual Web JSF 頁面 Trip.jsp。
2. 拖入 trip 表至設計器，於 SessionBean1 建立 tripRowSet1，SQL 加入 WHERE trip.tripid = ? 參數條件。
3. 佈局：超連結 (返回首頁) + 訊息群組 + 屬性表單 (含靜態文字顯示 depdate, depcity 等欄位，並綁定至 tripDataProvider1)。
4. Trip.jsp 的 prerender() 從請求參數取得 tripId，設定 tripRowSet1 參數並刷新。
5. 超連結 hyperlink1_action 將 personId 寫回 RequestBean1，以便首頁還原展開狀態。
6. 於「頁面導航」視圖連結 Tree 節點 URL → Trip.jsp、超連結 → Page1.jsp。

進階：JSF 1.2 行為綁定 (替代 URL 導航)

若需在伺服器端處理節點選取邏輯，可改用 actionExpression 綁定至 tripNode_action 方法，透過 displayTree.getSelected() 取得節點 ID，解析 tripId 後存入 Request Bean，導航案例設為 case1。此法避免 Cookie 相容性問題，適用於 JSF 1.2 環境。

結語

本教學示範了從資料庫動態建構樹狀 UI 的完整流程：查詢編輯器定義資料、prerender 邏輯組裝節點、虛擬表單管理提交行為、頁面導航與狀態保持。掌握此模式，可輕鬆擴展至任意階層式資料呈現場景。