NetBeans IDE 6.5 視覺化 Web JSF 頁面片段開發教學

前言

頁面片段是可重複使用的頁面區塊（如頁首、頁尾、導覽列），擁有獨立的頁面 Bean，副檔名為 .jspf。本教學示範在 NetBeans IDE 6.5 中建立包含「公司 Logo 片段」與「導覽片段」的雙頁面應用，並展示片段如何繼承主頁面樣式。

環境需求

• NetBeans IDE 6.5
• JavaServer Faces 1.2 (Woodstock) / Java EE 5
• GlassFish V2 應用伺服器（建議）
• 範例圖片 sky.jpg

建立專案與主頁面

1. File → New Project → Web → Web Application，專案名 FragmentExample，啟用 Visual Web JavaServer Faces 框架。
2. 開啟 Page1.jsp，設定頁面標題為 Sky Company Home。
3. 從調色盤 Layout 拖入兩個 頁面片段框 至左上角與其下方，分別命名 CompanyLogo、Navigation。
4. 在右側空白處放入 靜態文本，內容 Welcome to Sky Company。

設計 CompanyLogo 頁首片段

1. 雙擊 CompanyLogo 片段進入編輯模式。
2. 屬性視窗設定寬度 720px、高度 120px。
3. 從 Basic 拖入 圖像 組件至左上角。
4. 點擊圖像 url 屬性的省略號按鈕 → Add File → 選取 sky.jpg → OK。IDE 會複製圖片至專案 resources 目錄。
5. 調整圖片位置置於片段邊框內。

設計 Navigation 導覽片段

1. 雙擊 Navigation 片段，設定寬度 150px、高度 100px。
2. 拖入兩個 超級鏈接：
3. 第一個：文字 Home。
4. 第二個：文字 Company News，ID newLink，URL /faces/News.jsp。

建立第二頁 News.jsp 並重用片段

1. 專案視窗右鍵 Web Pages → New → Visual Web JSF Page，命名 News。
2. 切回 Page1.jsp，在 導航視窗 按 Ctrl 選取兩個 <div>（片段）與靜態文本組件 → 右鍵 Copy。
3. 切至 News.jsp，在導航視窗 form1 上右鍵 Paste。
4. 修改靜態文本為 We have a new CEO.，頁面標題 Sky Company News，背景色設為淺黃色。
5. 觀察：片段自動繼承主頁面背景色，展示樣式繼承特性。

停用當前頁面連結（動態 UI）

在各頁面的 Java 原始碼 prerender() 方法加入：

Page1.java

public void prerender() {
    Navigation nav = (Navigation) getBean("Navigation");
    Hyperlink homeLink = nav.getHomeLink();
    homeLink.setDisabled(true);
}

News.java

public void prerender() {
    Navigation nav = (Navigation) getBean("Navigation");
    Hyperlink newsLink = nav.getNewsLink();
    newsLink.setDisabled(true);
}

需 import com.sun.webui.jsf.component.Hyperlink;（右鍵 Fix Imports 自動完成）。

執行驗證

1. 點擊 Run Main Project 啟動應用。
2. 驗證 Home 在首頁灰顯、Company News 在新聞頁灰顯，點擊可正常跳轉。

進階練習

• 新增第三頁，並在 Navigation 片段增加對應超級鏈接。
• 建立頁腳片段（寬 720px、高 100px），包含版權資訊 Copyright 1994-2007 Sky Company，加入每頁底部。

最佳實踐提示

• 片段尺寸建議使用像素（如 100px），百分比在 IE6 易異常。
• 大量頁面共用導覽時，可編輯 faces-config.xml 導航規則，將 <from-view-id> 設為通配符 /* 簡化維護。
• 若片段包含按鈕/鏈接觸發導航，需設定 immediate="true" 並為每頁配置導航規則。