G4JSF：讓 GWT 與 JSF 完美融合的整合框架實戰

背景：兩大技術的互補

• GWT (Google Web Toolkit)：Java 生成高級客戶端 JS 組件，屏蔽 JavaScript 細節，專注客戶端豐富交互。
• JSF：標準伺服端組件框架，擁有現成 UI 組件庫，設計為易於整合第三方組件。

GWT 不知伺服端狀態，JSF 組件結構易適應任意渲染。G4JSF (現屬 Ajax4jsf 子項目) 促進二者自然融合。

G4JSF 架構

• Component Developer Kit (CDK)：項目骨架生成器。
• Runtime Library：GWT Widgets 與 JSF 環境間的粘合層。

CDK 生成組件含兩部分：客戶端行為的 GWT Widget、負責 Widget 與 JSF 通信的伺服端邏輯。採用 Facelets 寫組件，比傳統 JSP/TLD/Tag 類簡單得多。

實戰：HelloWorld 步驟

1. 下載 G4JSF CDK、GWT SDK，配置 build.properties 指向 GWT 目錄。
2. 運行 ant -Dout=D:/workspace/KickStart -Dmodule=demo.gwt.HelloWidget create-component 生成專案。
3. 編輯 HelloWidgetEntryPoint.java：繼承 ComponentEntryPoint，實現 createWidget() 返回帶 ClickListener 的 Button。
4. ant shell 啟動 GWT Hosted Mode 調試，瀏覽器顯示按鈕點擊彈窗。
5. ant war 生成 KickStart.war，部署至 Tomcat 運行於 JSF 環境 (Run-Time Mode)。

關鍵細節

• GWT Compiler 產出 JS 代碼需置於 META-INF/gwt (最終在 WEB-INF/classes)，構建腳本必須複製到可部署產物中。
• Hosted Mode 純客戶端開發調試；Run-Time Mode 組件包裝為 JSF 組件在伺服端運行。
• 無需特殊 IDE，標準 Java 專案 + Ant 即可。

意義

G4JSF 讓 Java 開發者以純 Java 編寫豐富客戶端組件，並無縫納入 JSF 組件樹，享受 JSF 生命周期、狀態管理、事件模型，實現「客戶端豐富交互 + 伺服端標準框架」最佳平衡。