NetBeans IDE 打造 JSF 頁面導航：從靜態跳轉到動態路由完全指南

前言：可視化頁面流編輯器讓導航所見即所得

NetBeans IDE 6.0+ 內建可視化 JSF 頁面流編輯器，支援拖拉連線定義導航規則，自動生成 faces-config.xml。本教程從雙頁靜態跳轉入手，進階至下拉選單動態導航、NavigationHandler 程式化導航、大量頁面導航模式。

第一階段：雙頁靜態導航

1. 建立 Web 應用專案（GlassFish V2 + Visual Web JSF）。
2. Page1.jsp 放置「靜態文字」+「按鈕(Go)」。
3. 右鍵編輯區 →「頁面導航」開啟頁面流編輯器。
4. 右鍵空白處 →「新建文件」→「Visual Web JSF Page」建立 Page2.jsp，放置「靜態文字：Page Two」。
5. 頁面流編輯器：展開 Page1 圖標，拖曳 button1 連接點至 Page2 圖標，連線命名為「Page 2」。
6. 查看生成的 faces-config.xml：

<navigation-rule>
  <from-view-id>/Page1.jsp</from-view-id>
  <navigation-case>
    <from-outcome>Page 2</from-outcome>
    <to-view-id>/Page2.jsp</to-view-id>
  </navigation-case>
</navigation-rule>

部署運行（F6），點擊 Go 按鈕即可跳轉。

第二階段：下拉選單動態導航（按鈕觸發）

1. Page1 新增下拉選單，配置選項：Page 2 / Page 3。
2. 新建 Page3.jsp（文字：Page Three）。
3. 頁面流編輯器：從 button1 再拉一條線到 Page3，命名「Page 3」。
4. 雙擊 Page1 的 Go 按鈕，修改動作處理方法：

public String button1_action() {
    return (String) dropDown1.getValue(); // 返回選中的導航 case 名稱
}

部署測試：選單選 Page 2/3 → 點 Go → 對應跳轉。

第三階段：高階動態導航（選單變更即跳轉，無需按鈕）

1. 刪除 Go 按鈕。
2. 雙擊下拉選單，在 dropDown1_processValueChange(ValueChangeEvent event) 注入程式化導航代碼：

public void dropDown1_processValueChange(ValueChangeEvent event) {
    Application app = getApplication();
    NavigationHandler nav = app.getNavigationHandler();
    FacesContext ctx = getFacesContext();
    nav.handleNavigation(ctx, null, (String) dropDown1.getValue());
}

3. 修復導入（右鍵 → Fix Imports），自動添加 javax.faces.application.*、javax.faces.context.FacesContext。
4. 右鍵下拉選單 →「自動提交改動」。
5. 部署：選單一變更即瞬間跳轉。

第四階段：大量頁面導航模式（通用規則）

當頁面超過十幾個，逐個畫線不可維護。改用通配符規則：

<navigation-rule>
  <from-view-id>/*</from-view-id>
  <navigation-case>
    <from-outcome>login</from-outcome>
    <to-view-id>/login.jsp</to-view-id>
  </navigation-case>
</navigation-rule>

Action 方法返回 "login" 即可從任意頁面跳轉登錄頁。編輯器可能顯示警告，可忽略。

總結：標準導航工作流

1. 建立頁面（JSF 視覺化設計器）。
2. 放置支援導航的組件（按鈕、下拉選單、連結）。
3. 頁面流編輯器拖曳連線定義 from-outcome → to-view-id。
4. 複雜邏輯用 processValueChange + NavigationHandler 程式化控制。