NetBeans Visual Web JSF 應用程式開發入門教學

前言

NetBeans IDE 內建的 Visual Web JSF 框架提供所見即所得的視覺化開發體驗，讓開發者能透過拖拉元件、設定屬性、綁定資料快速建構 Java EE Web 應用。本教學以 NetBeans 6.0 / GlassFish v2 為環境，帶領讀者從專案建立到部署除錯的完整流程。

開發環境需求

• JavaServer Faces 1.2 / Java EE 5（搭配 GlassFish v2 / Sun Java System Application Server 9）
• JSF 1.1 / J2EE 1.4 亦支援
• Travel 範例資料庫（部分章節需求）

一、建立 Visual Web JSF 專案

1. 選單 File > New Project，選 Web > Web Application。
2. 專案命名 GettingStarted，選擇位置。
3. 伺服器選 GlassFish V2，Java EE 版本選 Java EE 5。
4. 框架勾選 Visual Web JavaServer Faces，完成。

IDE 會依 Java BluePrints 規範產生目錄結構。Projects 視窗顯示邏輯分類，**Files** 視窗顯示實體檔案結構。預設建立 Page1.jsp 作為起始頁（節點旁有箭頭標記 ）。

二、探索 IDE 視窗

Projects 視窗

展開 Web Pages 查看 JSP 頁面；Source Packages 下對應的 Page1.java 為頁面輔助 Bean（Page Bean）。

Files 視窗

顯示實體路徑：src/java/gettingstarted/Page1.java。檔案旁的 標記表示需編譯，建置時自動處理。

三、建立與設計 Web 頁面

新增頁面

在 Projects 視窗 Web Pages 右鍵 New > Visual Web JSF Page，命名 Page2。IDE 同步產生 Page2.jsp 與 Page2.java。

視覺化設計器

編輯區提供三種檢視模式（工具列按鈕切換）：

• Design：拖拉元件設計介面
• JSP：XML 格式的 JSP Document 原始碼
• Java：Page Bean 原始碼

Navigator 視窗

Design 模式下顯示元件樹狀結構；Java 模式下列出成員與方法，支援快速搜尋（點擊視窗輸入字母）。

四、從調色盤拖拉元件

Palette 視窗分類：Basic（輸入/顯示）、Layout（版面）、Composite（複合元件）。常用元件對照表：

屬性視窗設定

選取元件後在 Properties 視窗調整屬性（如 label、required、tooltip），支援資料綁定、事件處理器關聯。

實作練習：建立互動表單

1. 拖拉 Button，設 text="Click Me!"，勾選 primary。
2. 拖拉 Text Field + Label，按 Ctrl+Shift 從 Label 拖到 Text Field 綁定 for 屬性，設 labelLevel="強(1)"。
3. 拖拉 Message 到 Text Field 右側，同樣 Ctrl+Shift 拖曳綁定。
4. 拖拉 Drop Down，設 label="Color"，右鍵 Configure Default Options 新增 Blue/White/Green。
5. 拖拉 Radio Button Group，選項 Blue/White/Red，勾選 selected 設預設值，設 columns=3 水平排列。
6. 右鍵頁面空白處 Preview in Browser 預覽。

五、建置、部署與執行

按 F6 或工具列 Run Main Project ，IDE 依序：儲存檔案 → 編譯 → 啟動伺服器 → 部署 WAR → 開啟瀏覽器顯示起始頁。Output 視窗顯示建置訊息與錯誤連結 。若需完整重建，選 Build > Clean and Build Main Project。

六、頁面導航與 Action 處理

方式一：Hyperlink URL 導航（不提交表單）

拖拉 Hyperlink，設 url 屬性為 /faces/Page2.jsp。

方式二：Page Flow 編輯器（提交表單並處理 Action）

1. Design 檢視右鍵頁面背景 Page Navigation 開啟 Page Flow 編輯器 。
2. 展開來源頁面圖示，從元件連接器（Hyperlink 為鏈條、Button 為箭頭）拖曳到目標頁面圖示。
3. 雙擊連線標籤命名（如 nextPage）。
4. 雙擊目標頁面 Button 編輯 Action 方法，IDE 自動產生 return "nextPage";。

注意：表單提交前會先進行資料轉換與驗證，失敗則不呼叫 Action 方法。建議頁面放置 Messages 元件捕獲錯誤。

七、Java 原始碼編輯進階技巧

• Code Completion：Ctrl+Space 自動完成類別、方法、變數。
• Javadoc 整合：滑鼠停留或 Shift+F1 顯示 Javadoc。
• Fix Imports：Ctrl+Shift+I 自動匯入。
• Error Stripe：左側紅框標示編譯錯誤，右側縮圖條快速跳轉 。
• 快捷鍵：Alt+Shift+F 格式化、Ctrl+E 刪除行、Ctrl+[ 跳至配對括號。
• Code Templates：輸入縮寫如 forc、trycatch 按 Tab 展開。
• Code Snippets：Palette 中拖拉常用程式碼片段。
• 快速搜尋：Navigator 視窗輸入方法名首字母定位。

八、處理使用者輸入：驗證器與轉換器

1. 拖拉 Text Field，勾選 required。
2. 從 Palette Validators 拖拉 Double Range Validator 到 Text Field，設 minimum=1.0、maximum=10.0 。
3. 拖拉 Number Converter 到 Text Field，彈出對話框選 Currency、English (US) 。
4. 加入 Message（綁定 Text Field）與 Messages（全域）元件顯示錯誤。
5. 執行測試：空值、非數字、超出範圍、合法值（$1.50）皆正確攔截並顯示對應訊息。

九、資料儲存與傳遞：三種 Managed Bean

加入屬性並綁定元件

1. Navigator 雙擊 SessionBean1 開啟原始碼，在建構子加欄位 private String answer;。
2. 右鍵原始碼 Refactor > Encapsulate Fields 產生 Getter/Setter。
3. 設計器中右鍵元件 Bind to Data > Bind to Object 選擇 Bean 屬性 。

Request Bean 傳遞範例

在 First.jsp Text Field 綁定 RequestBean1.parm，導航到 Next.jsp Static Text 同樣綁定。執行時 First 輸入值會在 Next 顯示，但 Next 按鈕自導航回自身時值消失（Request Bean 已銷毀）。

十、連接資料庫：Travel 範例資料庫

1. Services 視窗展開 Databases > TRAVEL，右鍵 Connect，密碼 travel 。
2. 拖拉資料表 TRIPTYPE 到頁面，IDE 自動產生 tripTypeDataProvider（Data Provider）與 triptypeRowSet（SessionBean 中的 RowSet） 。
3. 右鍵 Listbox Bind to Data > Bind to Data Provider，選 tripTypeDataProvider，設 Value Field=TRIPTYPEID、Display Field=DESCRIPTION。
4. Navigator 雙擊 triptypeRowSet 開啟 Query Editor，設 DESCRIPTION 排序 Ascending 。
5. 重新執行，Listbox 依字母序顯示。

十一、除錯 Web 應用

• Java 編輯器左側點擊設中斷點（粉紅色標記）。
• 右鍵變數 New Watch 加入監看。
• 選單 Run > Debug Main Project 啟動除錯模式。
• 瀏覽器觸發中斷點時，Debugger 視窗顯示 Watches、Local Variables、Call Stack。
• 工具列 Step Over 單步執行觀察變化。

輔助診斷工具

• HTTP Monitor：監控 Client-Server 通訊，支援重送請求。
• Messages 元件 + Bean 中 error()/warn()/info() 方法輸出診斷訊息。
• log() 方法寫入伺服器日誌。

十二、總結重點

• 專案建立：File > New Project > Web Application > Visual Web JSF
• 新增頁面：Web Pages 右鍵 > New > Visual Web JSF Page
• 設計介面：Palette 拖拉元件 > Properties 設定屬性/綁定
• 執行部署：F6 / Run Main Project
• 頁面導航：Hyperlink URL 或 Page Flow 編輯器（Action 方法回傳導航案例名）
• 輸入驗證：Validators/Converters 拖拉到元件 > Messages 顯示錯誤
• 資料儲存：Application/Session/Request Bean 屬性 > Bind to Data
• 資料庫整合：Services 拖拉資料表 > Query Editor 調整 SQL > Bind to Data Provider
• 除錯診斷：中斷點/監看/HTTP Monitor/Server Log/Messages

1. 上一篇文章： Maven 核心配置詳解：settings.xml 完整指南
2. 下一篇文章： Struts 2 開發環境搭建完整教學：從下載到第一個 Hello World

Java 相關知識

Java 開發者必備核心技能全景指南

立志成為專業 Java 開發者，意味著必須建立扎實且全面的技

深入理解 Hibernate 三大物件狀態：瞬時、持久、游離

Hibernate 物件生命週期管理是掌握 ORM 框架的核

Java 進階教程：嵌套類與內部類機制深度解析

嵌套類概述 Java 允許在類內部定義另一個類，稱為嵌套類。

基於 JVMTI 實現 Java 線程監控代理：原理、模型與 C/C++ 實作

隨多核 CPU 普及，Java 多線程並行計算普遍化，但不正