您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

JSF 構建 Apache Geronimo 應用程式（四）：導入 Apache Trinidad 元件庫打造豐富使用者介面

編輯：Java 相關知識

本系列第四篇，介紹如何將 Apache Trinidad（Oracle ADF Faces 開源版）元件庫整合至 Geronimo 上的 JSF 應用程式，以豐富的 UI 元件（表單、佈局、導航、資料表、彈出日曆等）取代原有 MyFaces/Tomahawk 混合實作，提升開發效率與介面一致性。

Apache Trinidad 簡介

Oracle 將 ADF Faces 捐贈 Apache，於孵化器重構為 Trinidad，與 Tomahawk 相容。
提供超越 JSR 規範的豐富元件，相容任何 JSF 1.1 實作（如 MyFaces）。
特色：檔案上傳、資料驗證/轉換器、頁面間值傳遞、混合狀態儲存策略（客戶端+伺服器端最佳平衡）。
元件自帶圖形/JS 資源，由 Trinidad Extension Filter 自動輸出。

Trinidad 元件總覽（節錄重點）

元件	用途
<tr:inputText>	支援標籤、訊息、密碼模式的文字輸入
<tr:inputDate>	日期輸入附彈出日曆
<tr:panelFormLayout>	表單佈局：垂直排列標籤與欄位，支援多欄、腳註
<tr:commandButton>	觸發動作按鈕
<tr:table>	資料表：支援選取、排序、分頁、詳細資訊提示
<tr:navigationTree>	樹狀導航選單，支援展開/收合
<tr:progressIndicator>	長時間作業進度條
<tr:validateRegExp>	正則表達式驗證
<tr:convertDateTime>	日期時間格式轉換
<tr:panelPartialRoot>	局部頁面更新容器（AJAX 基礎）

完整元件清單超過 80 種，涵蓋 UI、佈局、導航、驗證、轉換、工具等類別。

Eclipse 中的 devSignup 專案

整合 Trinidad 至 devSignup 專案

1. 加入 Trinidad 函式庫

專案 Properties → JSF Library References → New，名稱 "Trinidad-SNAPSHOT"，版本 v1_1。
Add JAR：trinidad-api-incubator-m1-SNAPSHOT.jar、trinidad-impl-incubator-m1-SNAPSHOT.jar。
移除 Ajax4jsf 與 Tomahawk 函式庫（Ajax4jsf Filter 與 Trinidad 不相容，Tomahawk 功能已包含在 Trinidad）。

將 Trinidad 添加到 devSignup 專案中制作 Trinidad 庫引用

2. 修改 web.xml：註冊 Trinidad Filter 與 Resource Servlet

將 javax.faces.STATE_SAVING_METHOD 設為 client（Trinidad 混合狀態策略需客戶端狀態）。
移除 MyFacesExtensionsFilter 相關 filter/filter-mapping。
新增：

<filter>
  <filter-name>faces</filter-name>
  <filter-class>org.apache.myfaces.trinidadinternal.webapp.FacesFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>faces</filter-name>
  <url-pattern>*.faces</url-pattern>
</filter-mapping>
<servlet>
  <servlet-name>resources</servlet-name>
  <servlet-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>resources</servlet-name>
  <url-pattern>/trinidad/*</url-pattern>
</servlet-mapping>

Filter 處理 JSF 頁面輸出；Resource Servlet 服務 /trinidad/* 下的 JS/CSS/圖片資源。

3. 修改 faces-config.xml：指定 Trinidad Render Kit

<application>
  <default-render-kit-id>org.apache.myfaces.trinidad.core</default-render-kit-id>
</application>

移除 Temperature Converter 等 Ajax4jsf 相關 Managed Bean。

4. JSP 頁面啟用 Trinidad Taglib

<%@ taglib uri="https://myfaces.apache.org/trinidad" prefix="tr" %>
<%@ taglib uri="https://myfaces.apache.org/trinidad/html" prefix="trh" %>

移除 Tomahawk taglib 宣告。

重構註冊頁面：從 MyFaces/Tomahawk 遷移至純 Trinidad

原版（MyFaces + Tomahawk）

使用 h:form、h:inputText、t:validateEmail、t:inputDate popupCalendar 等三種 Taglib 混雜，程式碼冗長。

當前的 Developer Forum Signup 應用程式

Trinidad 版（精簡優雅）

<tr:form>
  <tr:panelFormLayout>
    <tr:inputText label="Screen name:" value="#{signupData.screenName}"/>
    <tr:inputText label="Email:" value="#{signupData.email}"/>
    <tr:inputText label="Password:" value="#{signupData.password}" secret="true"/>
    <tr:inputText label="Password (for verification):" value="" secret="true"/>
    <tr:inputDate id="birthday" value="#{signupData.birthday}"/>
  </tr:panelFormLayout>
  <tr:commandButton text="Sign up" action="#{signupData.register}" immediate="true"/>
</tr:form>

<tr:inputText> 內建標籤與訊息顯示，<tr:panelFormLayout> 自動垂直排版，<tr:inputDate> 預設含彈出日曆，程式碼行數大幅減少，可讀性與維護性顯著提升。