JSF 與 JSP 整合開發：構建組件化 Web 表現層

背景：JSP 的痛點與 JSF 的登場

JSP 雖功能強大，但「邏輯與展示混雜」、缺乏可視化設計工具，導致前端開發效率低。Sun 於 Java EE 5 中引入 JSF (JavaServer Faces) 1.2 標準，提供組件化、事件驅動、MVC 結構的表現層框架，配合 JSP 作為視圖模板，實現關注點分離。

JSF 核心特性

• 組件模型：豐富的 UI 組件庫（輸入框、表格、樹、日曆等），支持第三方擴展（PrimeFaces、RichFaces、IceFaces）。
• 可視化開發：工具廠商支持拖拽式頁面設計（Oracle JDeveloper、NetBeans、MyEclipse、RAD、JBuilder）。
• 事件驅動導航：頁面流定義於 faces-config.xml，非硬編碼。
• MVC 架構：FacesServlet 統一入口，自動處理請求生命週期（恢復視圖→應用請求值→驗證→更新模型→調用應用→渲染響應）。
• POJO + DI (IoC)：Managed Bean 為純 Java 類，支持依賴注入，易於與 Spring 整合。
• 驗證與轉換：內置驗證器（長度、範圍、正則），支持自定義驗證器與類型轉換器。
• 國際化：資源包機制，輕鬆實現多語言。

JSP 中使用 JSF：標籤庫整合

JSF 提供兩大標籤庫：

• Core 庫：prefix="f"，URI https://java.sun.com/jsf/core，含 <f:view>、<f:validateLongRange>、<f:actionListener> 等。
• HTML 庫：prefix="h"，URI https://java.sun.com/jsf/html，映射標準 HTML 元素（<h:form>、<h:inputText>、<h:commandButton> 等）。

完整範例：數字輸入驗證表單

<%@ taglib uri="https://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="https://java.sun.com/jsf/core" prefix="f" %>
<html>
<head><title>第一個 JSF 程序</title></head>
<body>
<f:view>
  <h:form id="simpleForm">
    <h:outputText id="favoriteLabel" value="請輸入一個數字 (0-30)：" />
    <h:inputText id="favoriteValue" value="#{simpleBean.longValue}">
      <f:validateLongRange minimum="0" maximum="30" />
    </h:inputText>
    <h:message for="favoriteValue" style="color:red" /> <!-- 顯示驗證錯誤 -->
    <p/>
    <h:commandButton id="submit" value="提交" action="#{simpleBean.submit}" />
  </h:form>
</f:view>
</body>
</html>

Managed Bean 定義 (faces-config.xml)

<managed-bean>
  <managed-bean-name>simpleBean</managed-bean-name>
  <managed-bean-class>com.example.SimpleBean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Bean 實現類

public class SimpleBean {
    private Long longValue;
    public Long getLongValue() { return longValue; }
    public void setLongValue(Long v) { this.longValue = v; }
    public String submit() {
        // 業務邏輯
        return "success"; // 對應 faces-config.xml 中的 navigation-case
    }
}

頁面導航配置

<navigation-rule>
  <from-view-id>/input.jsp</from-view-id>
  <navigation-case>
    <from-outcome>success</from-outcome>
    <to-view-id>/result.jsp</to-view-id>
  </navigation-case>
</navigation-rule>

JSF 與 Spring 整合

在 faces-config.xml 註冊 Spring 的 VariableResolver：

<application>
  <variable-resolver>org.springframework.web.jsf.DelegatingVariableResolver</variable-resolver>
</application>

之後 JSF Managed Bean 可直接引用 Spring Bean：#{springBeanName.property}。

遷移建議：從 JSP 2.x 到 JSF 2.x (Facelets)

• JSF 2.0+ 推薦使用 Facelets (.xhtml) 替代 JSP 作為視圖技術，支持模板、組合組件、EL 2.2 方法調用等現代特性。
• 舊專案可共存：web.xml 配置 javax.faces.DEFAULT_SUFFIX 為 .jsp，漸進式重寫頁面。
• 考慮引入 PrimeFaces 等成熟組件庫，加速開發。

總結

JSF + JSP 將「組件化 UI」與「模板渲染」結合，極大降低前端開發複雜度。雖然 Facelets 已成主流，但理解 JSF 在 JSP 中的整合方式，有助於維護存量系統、平滑遷移至現代架構。