使用G4JSF集成GWT和JSF
Google Web Toolkit (GWT) 吸引了一些開發(fā)者的注意.因?yàn)槭褂盟憧梢院苋菀椎奶砑覣JAX Web 2.0功能到你的程序中. GWT的設(shè)計(jì)師努力隔絕用戶和JavaScript打交道.你只要使用GWT就可以了,不需要知道如何使用JS. GWT 通過從java代碼來產(chǎn)生JS代碼的\方式 實(shí)現(xiàn)了創(chuàng)建高級(jí)客戶端JS小組件(client-side JavaScript widgets)的任務(wù).
與此同時(shí), JavaServer Faces (JSF)聚集了愈來愈多的成為通用服務(wù)端web框架的要素.JSF成功的主要原因是:自頂向下的基于組件的方式來開發(fā)web程序. 同時(shí)JSF帶有自己標(biāo)準(zhǔn)的隨時(shí)可用(out-of-the-box)的UI組件 , 它被設(shè)計(jì)為簡單的包含其他組件庫(it is designed for the easy inclusion of other component libraries).
然而,這兩項(xiàng)技術(shù)是不可思議的使他們自己獲益,他們兩個(gè)相互結(jié)合的非常好(相互互補(bǔ)). GWT 不知道服務(wù)端的狀態(tài)( server-side-agnostic),然而 JSF’s基于組件的結(jié)構(gòu)可以很容易的適應(yīng)任何組件的渲染.在這篇文章中,我們將討論 (首先通過一個(gè)step-by-step 的例子)一個(gè)促進(jìn)這兩個(gè)技術(shù)互補(bǔ)的新框架.
G4jsf 已經(jīng)成為Ajax4jsf開源項(xiàng)目的一個(gè)子項(xiàng)目了https://ajax4sf.dev.java.net ,有它來產(chǎn)生這種集成庫.
GWT和JSF之間看起來是相互競爭的技術(shù),而使用G4JSF則看起來是很自然的互補(bǔ)技術(shù).而G4JSF的任務(wù)就是使這種互補(bǔ)關(guān)系的技術(shù)看起來更自然一些.
關(guān)于G4jsf
庫文件包含兩個(gè)部分:
◆G4jsf組件開發(fā)包( Component Developer Kit)包含 項(xiàng)目骨架產(chǎn)生器.
◆一個(gè) run-time library 提供在GWT widgets和JSF環(huán)境之間的過渡作用.
G4jsf 注意了JSF 和 GWT 兩種技術(shù)的發(fā)展過程\.對(duì)于 GWT, widgets仍然在主機(jī)模型中開發(fā),并且在使用 Google browser來調(diào)試. GWT 項(xiàng)目結(jié)構(gòu)包含 /client, /public, 和 /server 包, 并且還在繼續(xù)維護(hù).
G4jsf 組件開發(fā)包(G4jsf CDK)產(chǎn)生的組件包含兩個(gè)部分.一是 包含客戶端行為的GWT widget .二是負(fù)責(zé) GWT widget 和 JSF 環(huán)境之間的通信問題.
G4jsf CDK 使用Facelets方式來寫JSF組件. 它比不同的JSP方式要簡單, 使用普通的方式要?jiǎng)?chuàng)建一個(gè)TLD文件和一個(gè)Tag類.使用Facelets的方式是相當(dāng)直接的.
示例程序
在這篇文章中,我們將一步一步的通過一個(gè)簡單的"Hello, World" 例子來講述G4JSF的主要功能.我們也創(chuàng)建一個(gè)實(shí)際的例子,a4j-gwtdemo. 在這里http://livedemo.exadel.com/a4j-gwtdemo/可以看到該例子.
你可以從Ajax4jsf示例頁面上下載到示例的源代碼和war部署文件 .該https://ajax4jsf.dev.java.net/nonav/ajax/ajax-jsf/download.html#examples文章描述的最終示例版本在哪里也可以下載到.
雖然我們使用專業(yè)的工具(大部分是Ant)來建構(gòu)這篇文章中的示例,但是這些例子并不需要任何特殊的開發(fā)工具,你只需要產(chǎn)生一個(gè)標(biāo)準(zhǔn)的Java 項(xiàng)目就可以了,只要注意一個(gè)非常重要的關(guān)于 GWT compiler的問題就可以了.它產(chǎn)生組件的JavaScript代碼,這些代碼應(yīng)該在META-INF/gwt 文件夾下面 (在 WEB-INF/classes中). 我們建構(gòu)代碼的compile.js目標(biāo)啟動(dòng)編譯器并且把結(jié)果放到一個(gè) JavaSource 目錄中. 確定你的工具copy這些代碼到deployable code中.
下載和設(shè)置
1. 訪問https://ajax4jsf.dev.java.net/nonav/ajax/gwt/gwt-cdk.html來下載G4jsf CDK.
為了使用G4jsf CDK, 你需要Google Web Toolkit SDK. 由于版權(quán)問題請(qǐng)到這里單獨(dú)下載http://code.google.com/webtoolkit/download.html.
2. 保存GWT SDK .
3. 把G4JSF CDK中的 build.properties.sample 重命名為 build.properties,打開它,把gwt.home改為你的本地GWT 主目錄.
例如,你把 Google Web Toolkit SDK 解壓到:D:/gwt-windows-1.1.0
你應(yīng)該把build.properties 文件中的GWT.home改為下面的代碼:wt.home=D:/gwt-windows-1.1.0
4. 編輯,保存文件
初始化工作已經(jīng)做好了,下面來產(chǎn)生項(xiàng)目框架.產(chǎn)生一個(gè)項(xiàng)目框架在剛才的目錄下的build文件中有個(gè) "create-component" target. 它需要倆個(gè)運(yùn)行參數(shù):out 產(chǎn)生的項(xiàng)目代碼文件存放的目錄.路徑的***一部分為項(xiàng)目的名字m odule GWT module的全限定名. 產(chǎn)生的JSF 組件類型將有同樣的名字.讓我們命名模型為 demo.gwt.HelloWidget 保存項(xiàng)目的名字為, KickStart, 在D:/workspace/ 文件夾下. (Of course, you can change any of these.)
5.使用下面的命令運(yùn)行ant:ant -Dout=D:/workspace/KickStart -Dmodule=demo.gwt.HelloWidget create-componentAnt應(yīng)該產(chǎn)生了該項(xiàng)目文件
6. 導(dǎo)航到項(xiàng)目目錄."Hello, world!" with GWT讓我們來激活我們的項(xiàng)目.我們?cè)跇?biāo)準(zhǔn)的GWT Hosted Mode中來看看效果,在下個(gè)部分中將在servlet container中 來允許該例子.
7.打開 JavaSource/demo/gwt/client/HelloWidgetEntryPoint.java文件.它包含一個(gè) HelloWidgetEntryPoint 類, 里面有個(gè)返回null的方法.
8. 使用下面的代碼替換該方法:
- public class HelloWidgetEntryPoint extends ComponentEntryPoint {
- protected Widget createWidget(final String id) {
- Button btn = new Button("Click me", new ClickListener() {
- public void onClick(Widget sender) {
- Window.alert("Hello, World");
- }
- });
- return btn;
- }
- }
9. 保存文件,到ant文件夾下面.Hosted Mode
10. 使用shell目標(biāo)啟動(dòng)ant:ant shell
Google Toolkit Development shell 和 Google browser 啟動(dòng)了.在browser中顯示了我們剛才創(chuàng)建的button.如果你點(diǎn)擊button ,一個(gè)帶問候消息的警告框出現(xiàn)了.
Google browser包含一個(gè) "Compile/Browser" 按鈕.如果你點(diǎn)擊它,你可以在你默認(rèn)的瀏覽器中查看該示例.
目前還沒有任何JSF代碼攙合進(jìn)來.到此為之我們只是在使用 "Hosted Mode."你可以在該模式下開發(fā)和調(diào)試你的 GWT widget . 如果你已經(jīng)有了開發(fā) GWT的經(jīng)驗(yàn)了,那么你應(yīng)該很熟悉它了. G4jsf CDK 的處理過程和這里是一樣的.Run-Time Mode下一步是在JSF 環(huán)境中運(yùn)行該示例.
11.使用 "war" target啟動(dòng)ant:ant warant創(chuàng)建一個(gè)文件, build/KickStart.war. 他是一個(gè)標(biāo)準(zhǔn)的JaveEE Web 文件.
12. 把它部署到服務(wù)器中.例如,復(fù)制 KickStart.war到 tomcat的webapps 文件夾下.
運(yùn)行該項(xiàng)目 就可以看到同樣的效果,但是運(yùn)行在JSF環(huán)境中我們稱它為 "Run-Time Mode."我們已經(jīng)把 GWT widget 包裝為JSF 組件了.這才是集成的***步.
【編輯推薦】
