JSF 技術開發 Web 應用全流程：視圖、模型、控制器三層解耦

JSF 核心價值：組件化、工具友好、關注點分離

JavaServer Faces (JSF) 作為 Java EE 官方 Web 框架標準，提供服務端組件模型，讓開發者像使用 Swing/JavaFX 一樣構建 Web UI，配合 RAD 工具（NetBeans、Eclipse、IntelliJ）實現可視化拖拽開發。

三層架構實戰

1. 視圖層：Facelets + 組件庫

• 聲明式頁面：.xhtml (Facelets) 替代 JSP，支援模板、組合組件
• 豐富組件庫：PrimeFaces、OmniFaces、ButterFaces、RichFaces 提供開箱即用的 DataTable、Dialog、Chart、Tree 等
• 綁定表達式：#{bean.property} 雙向綁定，#{bean.action} 事件處理
• 驗證/轉換：內置 <f:validateRegex>、<f:convertDateTime>，可自定義 Validator/Converter

<!-- 典型 JSF 頁面片段 -->
<h:form id="userForm">
    <p:messages autoUpdate="true"/>
    <p:panel header="用戶註冊">
        <h:panelGrid columns="3">
            <p:outputLabel for="username" value="用戶名:" />
            <p:inputText id="username" value="#{userBean.user.username}"
                         required="true" requiredMessage="用戶名必填">
                <f:validateLength minimum="3" maximum="20"/>
            </p:inputText>
            <p:message for="username"/>

            <p:outputLabel for="email" value="郵箱:" />
            <p:inputText id="email" value="#{userBean.user.email}">
                <f:validateRegex pattern="^[\w\.-]+@[\w\.-]+\.\w+$"/>
            </p:inputText>
            <p:message for="email"/>
        </h:panelGrid>

        <p:commandButton value="提交" action="#{userBean.register}"
                         update="userForm" process="@this"/>
    </p:panel>
</h:form>

2. 模型層：CDI Managed Bean + JPA

• CDI (Contexts and Dependency Injection)：@Named、@RequestScoped/@ViewScoped/@SessionScoped/@ApplicationScoped
• 領域模型：JPA Entity (@Entity)、Bean Validation (@NotNull, @Size, @Email)
• 業務邏輯封裝：Service 層 (@Transactional)、Repository 模式

@Named
@ViewScoped  // 視圖作用域：同一視圖多次請求共享 Bean 實例
public class UserBean implements Serializable {
    @Inject private UserService userService;
    private User user = new User();
    private List<User> users;

    @PostConstruct
    public void init() { users = userService.findAll(); }

    public void register() {
        try {
            userService.save(user);
            FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_INFO, "註冊成功", null));
            user = new User();  // 重置表單
            users = userService.findAll();
        } catch (AppRuntimeException e) {
            FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_ERROR, e.getMessage(), null));
        }
    }
    // getter/setter
}

3. 控制器層：faces-config.xml + 導航規則

• 隱式導航 (JSF 2.0+)：action 方法返回字符串直接解析為視圖 ID (return "userList?faces-redirect=true")
• 聲明式導航：faces-config.xml 定義 <navigation-rule>
• 生命週期管理：web.xml 配置 FacesServlet、javax.faces.PROJECT_STAGE (Development/Production)

<!-- web.xml 核心配置 -->
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
</context-param>

<!-- faces-config.xml 導航規則 (可選，隱式導航多數場景足夠) -->
<navigation-rule>
    <from-view-id>/register.xhtml</from-view-id>
    <navigation-case>
        <from-outcome>success</from-outcome>
        <to-view-id>/welcome.xhtml</to-view-id>
        <redirect/>
    </navigation-case>
</navigation-rule>

角色分工：設計師、開發者、架構師

現代 JSF 最佳實踐 (JSF 2.3 / 3.0 / 4.0)

1. 拥抱 CDI：棄用 @ManagedBean，全面使用 @Named + 作用域注解
2. 使用 Facelets：模板 (ui:composition)、組合組件 (cc:interface)、片段複用
3. 組件庫首選 PrimeFaces：社區活躍、組件豐富、響應式佈局、主題系統
4. 無狀態視圖：<f:view transient="true"> 減少會話內存佔用
5. WebSocket 推送：<f:websocket> (JSF 2.3+) 實現服務端主動推送
6. 統一異常處理：ExceptionHandlerFactory + FacesContext 異常攔截

總結

JSF 通過組件化視圖、CDI 模型、聲明式導航實現了 Web 開發的關注點分離。雖然 Spring MVC + Thymeleaf/React/Vue 成為主流選擇，但 JSF 在企業級表單密集型應用、傳統 Java EE 棧項目、需要標準化組件模型的場景仍具獨特優勢。掌握 Facelets、CDI Scope、PrimeFaces 組件庫，即可高效構建可維護的 JSF 應用。