原文:http://www.theserverside.com/tt/articles/article.tss?l=GWTandJSF
翻譯:icess http://blog.matrix.org.cn/page/icess?討論
AJAX, AJAX, AJAX
如果你聽說過?GWT,那么你一定也聽說過它的一個核心特性就是 AJAX?支持.在 GWT中, the "X" part,在客戶端和服務(wù)器端來回傳遞數(shù)據(jù), 該功能是通過RPC (Remote Procedure Call) 機(jī)制實現(xiàn)的而不是使用 XMLHttpRequest object.
不管這些,你想在服務(wù)器端做什么是有你決定的. Google稱它為"Server Agnostic".
讓我們看看如何添加 AJAX?方式的異步通信到我們的程序中.
Asynchronous Communication in Hosted Mode
在下個階段中,我們將改變該程序的環(huán)境.我們添加一個用戶可以輸入姓名的文本域,一旦按鈕被點(diǎn)擊了,請求將會發(fā)送到服務(wù)器端.服務(wù)器將返回出現(xiàn)在彈出窗口的消息.為了跟蹤請求和響應(yīng),我們添加一個文本標(biāo)簽來顯示請求的狀態(tài).
為了在服務(wù)器和客戶端傳送數(shù)據(jù).我們使用兩個Java beans. ?–?一個把數(shù)據(jù)帶回服務(wù)器端,一個把響應(yīng)帶回客戶端. .
Client-Side Coding
28.?在JavaSource中創(chuàng)建一個 demo.gwt.client.EventData 類,內(nèi)容如下:
package demo.gwt.client;
import org.ajax4jsf.gwt.client.GwtFacesEvent;
public class EventData extends GwtFacesEvent {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
用來在客戶端到服務(wù)器端傳送數(shù)據(jù)的類(發(fā)送事件)應(yīng)該繼承 G4jsf的?GwtFacesEvent類.
29.?創(chuàng)建另外一個類 demo.gwt.client.ResultGreeting.
內(nèi)容如下:
package demo.gwt.client;
import org.ajax4jsf.gwt.client.GwtFacesResult;
public class ResultGreeting extends GwtFacesResult {
String greetingText;
public String getGreetingText() {
return this.greetingText;
}
public void setGreetingText(String greetingText) {
this.greetingText = greetingText;
}
}
?
從服務(wù)器端帶來響應(yīng)的類應(yīng)該繼承G4jsf的 GwtFacesResult 類.
?GwtFacesEvent 和GwtFacesResult 都實現(xiàn)了 ?com.google.gwt.user.client.rpc.IsSerializable 接口,用來序列化在客戶端和服務(wù)器端傳遞的被GWT使用的數(shù)據(jù).
讓我們更新我們的widget 類.
30. 打開demo.gwt.client.HelloWidgetEntryPoint 使用下面代碼替換它:
package demo.gwt.client;
import java.util.Map;
import org.ajax4jsf.gwt.client.ComponentEntryPoint;
import org.ajax4jsf.gwt.client.GwtFacesServiceAsync;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class HelloWidgetEntryPoint extends ComponentEntryPoint {
Label status;
TextBox input;
protected Widget createWidget(final String id) {
Map m = getWidgetParams(id);
final String buttonLabel = (String) m.get("buttonLabel");
HorizontalPanel panel = new HorizontalPanel();
input = new TextBox();
status = new Label("Loaded.");
final GwtFacesServiceAsync service = createFacesService(id);
final AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
if (null != result) {
status.setText("Loaded");
String greeting =? ((ResultGreeting)result).getGreetingText();
Window.alert(greeting);
} else {
status.setText("Request finished, but the result is empty");
}
}
public void onFailure(Throwable caught) {
status.setText("Error call :" + caught.getMessage());
}
};
Button btn = new Button(buttonLabel, new ClickListener() {
public void onClick(Widget sender) {
EventData eventData = new EventData();
eventData.setName(input.getText());
service.sendEvent(eventData, callback);
status.setText("Loading...");?????
????? }
});
panel.add(input);
panel.add(btn);
panel.add(status);
return panel;
}
}
這里有3個重要的部分.1.組件的布局.我們創(chuàng)建了一個水平面板,然后添加了一個input box,button,和text label.
2.聲明了異步服務(wù)和事件,它繼承至異步模型的AJAX請求.
...
final GwtFacesServiceAsync service = createFacesService(id);
...
Button btn = new Button(buttonLabel, new ClickListener() {
public void onClick(Widget sender) {
EventData eventData = new EventData();
eventData.setName(input.getText());
service.sendEvent(eventData, callback);
status.setText("Loading...");?????
????? }
});
...
:
?
我們添加ClickListener 到button上. 當(dāng) On Click 事件發(fā)生時,我們創(chuàng)建并且使用輸入的數(shù)據(jù)填充 ?EventData bean?然后使用異步服務(wù)發(fā)送該事件.在代碼的組后一行,我們設(shè)置text label的文本為 "Loading…",因此在 ?AJAX request 開始的時候,用戶可以看到變化 .
3.發(fā)送事件,我們注冊了一個回調(diào)函數(shù).?
.........
.........
final AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
if (null != result) {
status.setText("Loaded");
String greeting =? ((ResultGreeting)result).getGreetingText();
Window.alert(greeting);
} else {
status.setText("Request finished, but the result is empty");
}
}
public void onFailure(Throwable caught) {
status.setText("Error call :" + caught.getMessage());
}
};
...........
...........
Callback 是 Google toolkit中AsyncCallback? 類的一個接口.我們實現(xiàn)了兩個方法 onSucess and onFailure. 在onSuccess情況下, 我們添加了一個附加的檢測到來的結(jié)果.如果我們沒有受到一個期望的類,我們標(biāo)記在狀態(tài)文本中.?
現(xiàn)在我們完成了客戶端的代碼.如果你使用 ?Hosted Mode (with the "ant shell" command)來啟動程序,?你將看到 "Request finished, but the result is empty", 因為我們還沒有寫服務(wù)器端代碼.
Server-Side Coding
在Hosted Mode中的服務(wù)器端代碼, 在server包中的一個類扮演了一個重要角色.
31. 打開JavaSource中的demo.gwt.server.MockHelloWidget java 文件.
?sendEvent 函數(shù)復(fù)雜發(fā)送響應(yīng)到客戶端
32. 把sendEvent函數(shù)替換為下面的內(nèi)容.:
public GwtFacesResult sendEvent(GwtFacesEvent event){
??????? ResultGreeting result = new ResultGreeting();
??????? result.setGreetingText( "Hello " +
((EventData)event).getName() );
?????????????? return result;
}
?
33. 導(dǎo)入需要的類:
import demo.gwt.client.ResultGreeting;
import demo.gwt.client.EventData;
The parameter of the method points to the event content that came from the client. What we do here is create the Result bean filling it with a greeting message and then returning.
34.在Hosted Mode中啟動ant:
ant shell
現(xiàn)在程序如下:
Adding JSF Listeners for Run-Time Mode
處理JSF的事件和Hosted Mode的代碼差不多. 客戶端代碼不變.在服務(wù)器端 ,?G4jsf使用 JSF?監(jiān)聽器機(jī)制來處理 Ajax events.
35.?打開 WebContent/pages/Base.xhtml并添加監(jiān)聽器組件聲明.
<widget:component id="main" buttonLabel="#{bundle.buttonLabel}"
greeting="Hello #{greetingBean.name}!" >
?? <gwt:gwtListener method="#{greetingBean.takeGreeting}"
?? event ="demo.gwt.client.EventData"/>
</widget:component>
?
??gwtListener 元素有兩個屬性. "method"使用JSFEL指向處理器."event"用來定義事件類型.?事件類型是類的全限定名 .最后一步是實現(xiàn)該函數(shù).
36. 打開demo.gwt.app.GreetingBean添加下面的代碼:
public ResultGreeting takeGreeting(EventData event) {
name = event.getName();
ResultGreeting result = new ResultGreeting();
result.setGreetingText("Hello " + name + " from JSF!");
return result;
}
?
37. 和需要導(dǎo)入的類:
import demo.gwt.client.ResultGreeting;
import demo.gwt.client.EventData;
該函數(shù)的簽名(signature? )很容易記住,該函數(shù)使用來自于客戶端的事件作為他的唯一一個參數(shù).返回值為 用來返回結(jié)果的事件類型(type of the method equals is just the type of the class used to return the result).在這個函數(shù)中,我們合成響應(yīng)數(shù)據(jù)并且返回它.
38. 創(chuàng)建war文件,部署它.
如果你啟動服務(wù)器,可以看導(dǎo):
The Last Word
就如你看到的,通過G4JSF使用兩種互補(bǔ)的技術(shù)(GWT and JSF)可以做很多漂亮的事情. 但是,仍然還有很多東西可以進(jìn)一步添加到G4jsf中.作為一個開源項目, , G4jsf依靠一個開源社區(qū)來支持和開發(fā)它.如果你只是使用它,那是很好的.但是你也可以加入到G4JSF社區(qū)中來, 幫助G4JSF讓他做的更好. ?Come visit us at:
https://ajax4jsf.dev.java.net
About the Author
Sergey Smirnov is Senior Product Manager at Exadel where he oversees the development of major products including Exadel Visual Components Platform and Exadel Studio. He has more than 15 years of in-depth development experience, primarily in the area of Web applications. His experience with JSF goes back to the very early days. For two years, he has served as a member of the JSF expert group. In addition to this, he manages a site for JSF-related resources, www.jsftutorials.net. Finally, Sergey is the co-lead of the open source project Ajax4jsf (https://ajax4jsf.dev.java.net). He can be reached at ssmirnov@exadel.com.