JSF 技術入門：基於 MVC 的簡易新聞訂閱表單開發實戰

前言

JavaServer Faces (JSF) 是一種基於 MVC 架構、事件驅動的 Web 應用開發框架。它將應用程式劃分為模型、視圖與控制器三大角色，透過標準化的元件模型簡化 Web 介面開發。本文將透過一個簡單的「新聞訂閱表單」範例，完整示範 JSF 應用的開發流程，包含模型類別、事件處理器、組態配置與 JSP 視圖頁面。

一、領域模型：Subscriber 類別

模型層負責封裝業務資料與邏輯。此處定義 Subscriber 類別，保存使用者的電子郵件與訂閱項目，並提供 save() 方法模擬資料持久化（實際專案中會呼叫 DAO 層寫入資料庫）。

package com.mycompany.newsservice.models;

public class Subscriber {
    private String emailAddr;
    private String[] subscriptionIds;

    public String getEmailAddr() { return emailAddr; }
    public void setEmailAddr(String emailAddr) { this.emailAddr = emailAddr; }

    public String[] getSubscriptionIds() { return subscriptionIds; }
    public void setSubscriptionIds(String[] subscriptionIds) { this.subscriptionIds = subscriptionIds; }

    public void save() {
        StringBuffer subscriptions = new StringBuffer();
        if (subscriptionIds != null) {
            for (int i = 0; i < subscriptionIds.length; i++) {
                subscriptions.append(subscriptionIds[i]).append(" ");
            }
        }
        // 實際開發中此處應呼叫資料庫存儲邏輯
        System.out.println("Subscriber Email Address: " + emailAddr + "\nSubscriptions: " + subscriptions);
    }
}

二、控制器：事件處理器 SubscriberHandler

控制器負責接收視圖層觸發的事件（如按鈕點擊），協調模型與視圖互動。SubscriberHandler 透過依賴注入持有 Subscriber 實例，其 saveSubscriber() 方法對應表單提交動作。

package com.mycompany.newsservice.handlers;

import com.mycompany.newsservice.models.Subscriber;

public class SubscriberHandler {
    private Subscriber subscriber;

    public void setSubscriber(Subscriber subscriber) { this.subscriber = subscriber; }

    public String saveSubscriber() {
        subscriber.save();
        return "success"; // 導航規則可根據此返回值跳轉頁面
    }
}

三、JSF 組態檔：faces-config.xml

在 WEB-INF/faces-config.xml 中註冊 Managed Beans，定義其作用域與依賴關係。此處將 Subscriber 設為 Session 範圍，SubscriberHandler 設為 Request 範圍，並透過 <managed-property> 將前者注入後者。

<faces-config>
    <managed-bean>
        <managed-bean-name>subscr</managed-bean-name>
        <managed-bean-class>com.mycompany.newsservice.models.Subscriber</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

    <managed-bean>
        <managed-bean-name>subscrHandler</managed-bean-name>
        <managed-bean-class>com.mycompany.newsservice.handlers.SubscriberHandler</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
        <managed-property>
            <property-name>subscriber</property-name>
            <value>#{subscr}</value>
        </managed-property>
    </managed-bean>
</faces-config>

四、視圖層：subscribe.jsp 頁面

使用 JSF HTML 標籤庫與核心標籤庫構建表單。<h:inputText> 綁定 Email 欄位，<h:selectManyCheckbox> 綁定多選訂閱清單，<h:commandButton> 觸發 saveSubscriber 動作。

<%@ taglib uri="https://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="https://java.sun.com/jsf/core" prefix="f" %>
<f:view>
    <h:form>
        Email Address: <h:inputText value="#{subscr.emailAddr}" /><br/>
        News Letters: <h:selectManyCheckbox value="#{subscr.subscriptionIds}">
            <f:selectItem itemLabel="JSF News" itemValue="1" />
            <f:selectItem itemLabel="IT Industry News" itemValue="2" />
            <f:selectItem itemLabel="Company News" itemValue="3" />
        </h:selectManyCheckbox><br/>
        <h:commandButton value="Subscribe" action="#{subscrHandler.saveSubscriber}" />
    </h:form>
</f:view>

五、運作流程總結

1. 使用者造訪 subscribe.jsp，JSF 建立視圖樹，綁定 Managed Beans。
2. 使用者填寫表單並點擊「Subscribe」，瀏覽器發送 POST 請求。
3. JSF 生命週期執行：套用請求值、驗證、更新模型值（Subscriber 屬性被設定）。
4. 呼叫應用程式邏輯：SubscriberHandler.saveSubscriber() 被調用，進而呼叫 Subscriber.save()。
5. 根據返回字串 "success" 導航至結果頁（需在 faces-config 定義導航規則）。

結語

此範例展示了 JSF 核心優勢：關注點分離、元件化 UI、聲明式導航與依賴管理。實際專案中可進一步整合驗證器、轉換器、AJAX 元件庫（如 PrimeFaces）及資料庫持久層，構建企業級 Web 應用。