NetBeans IDE 視覺化 Web JSF 快速入門：建立互動式 Web 應用

教學目標

使用 NetBeans IDE 視覺化設計器，從零建立 HelloWeb 應用：

1. 文字輸入框版：輸入姓名 → 點擊按鈕 → 顯示問候。
2. 下拉選單版：從資料庫 PERSON 表載入姓名 → 選擇 → 點擊按鈕 → 顯示問候。

環境需求

• NetBeans IDE 6.0 (Web & Java EE)
• GlassFish V2 / Sun Java System Application Server 9
• 範例資料庫 Travel（內建 PERSON 表）

第一階段：文字輸入框版

1. 建立專案

File → New Project → Web → Web Application，專案名 HelloWeb，啟用 Visual Web JavaServer Faces。

2. 設計頁面

• 頁面標題設 Hello Web。
• 拖入 標籤 → 文字 Name:。
• 拖入 文字框 → ID 改 nameField，預設文字 Enter Your Name。
• 標籤 Ctrl+Shift 拖至文字框，自動綁定 for 屬性。
• 拖入 按鈕 → 文字 Say Hello，ID helloButton。
• 拖入 靜態文本 → ID helloText（顯示結果）。
• 拖入 訊息群組（錯誤顯示用）。

3. 加入按鈕事件處理

雙擊按鈕進入 Java 編輯器，修改 helloButton_action()：

public String helloButton_action() {
    String name = (String) nameField.getText();
    helloText.setText("Hello, " + name + "!");
    return null;
}

4. 執行測試

點擊 Run Main Project，輸入姓名點擊按鈕，下方顯示問候。

第二階段：下拉選單綁定資料庫

1. 替換元件

• 刪除 nameField 文字框。
• 拖入 下拉選單 → ID nameDropDown。
• 標籤重新綁定至下拉選單。

2. 綁定 Travel 資料庫 PERSON 表

• Services 視窗 展開 Databases → Travel，若未連線右鍵 Connect（密碼 travel）。
• 將 PERSON 表拖至下拉選單上。
• IDE 自動新增 personDataProvider、personRowSet。
• 右鍵下拉選單 Bind Data，Value、Display 皆選 PERSON.NAME。

3. 修改按鈕邏輯處理姓名格式

資料庫儲存格式為 Lastname, Firstname，需分割顯示：

public String helloButton_action() {
    String name = (String) nameDropDown.getSelected();
    String[] parts = name.split(",");
    helloText.setText("Hello, " + parts[1].trim() + "!");
    return null;
}

4. 預設選項設定 (prerender)

public void prerender() {
    if (nameDropDown.getSelected() == null) {
        personDataProvider.cursorFirst();
        nameDropDown.setSelected((String) personDataProvider.getValue("person.name"));
    }
}

5. 執行驗證

重新執行專案，下拉選單顯示資料庫姓名，選擇後點擊按鈕正確顯示 Firstname 問候。

進階練習

• 將下拉選單改為 列表框，注意 multiple 屬性不可勾選。
• 建立新應用：下拉選單顯示 TRIPTYPE.DESCRIPTION，按鈕顯示對應 TRIPTYPEID（Value 綁定 TRIPTYPE.TRIPTYPEID，Display 綁定 TRIPTYPE.DESCRIPTION）。

視覺化開發工作流總結

1. 建立頁面
2. 拖放元件佈局
3. 調整元件屬性
4. 綁定資料來源
5. 撰寫伺服器端事件處理
6. 建置部署測試

NetBeans 視覺化 JSF 讓開發者專注於業務邏輯，快速產出標準化 Web 應用。