原文:http://www.theserverside.com/tt/articles/article.tss?l=GWTandJSF
翻譯:icess http://blog.matrix.org.cn/page/icess?討論
AJAX, AJAX, AJAX
如果你聽(tīng)說(shuō)過(guò)?GWT,那么你一定也聽(tīng)說(shuō)過(guò)它的一個(gè)核心特性就是 AJAX?支持.在 GWT中, the "X" part,在客戶(hù)端和服務(wù)器端來(lái)回傳遞數(shù)據(jù), 該功能是通過(guò)RPC (Remote Procedure Call) 機(jī)制實(shí)現(xiàn)的而不是使用 XMLHttpRequest object.
不管這些,你想在服務(wù)器端做什么是有你決定的. Google稱(chēng)它為"Server Agnostic".
讓我們看看如何添加 AJAX?方式的異步通信到我們的程序中.
Asynchronous Communication in Hosted Mode
在下個(gè)階段中,我們將改變?cè)摮绦虻沫h(huán)境.我們添加一個(gè)用戶(hù)可以輸入姓名的文本域,一旦按鈕被點(diǎn)擊了,請(qǐng)求將會(huì)發(fā)送到服務(wù)器端.服務(wù)器將返回出現(xiàn)在彈出窗口的消息.為了跟蹤請(qǐng)求和響應(yīng),我們添加一個(gè)文本標(biāo)簽來(lái)顯示請(qǐng)求的狀態(tài).
為了在服務(wù)器和客戶(hù)端傳送數(shù)據(jù).我們使用兩個(gè)Java beans. ?–?一個(gè)把數(shù)據(jù)帶回服務(wù)器端,一個(gè)把響應(yīng)帶回客戶(hù)端. .
Client-Side Coding
28.?在JavaSource中創(chuàng)建一個(gè) demo.gwt.client.EventData 類(lèi),內(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;
}
}
用來(lái)在客戶(hù)端到服務(wù)器端傳送數(shù)據(jù)的類(lèi)(發(fā)送事件)應(yīng)該繼承 G4jsf的?GwtFacesEvent類(lèi).
29.?創(chuàng)建另外一個(gè)類(lèi) 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ù)器端帶來(lái)響應(yīng)的類(lèi)應(yīng)該繼承G4jsf的 GwtFacesResult 類(lèi).
?GwtFacesEvent 和GwtFacesResult 都實(shí)現(xiàn)了 ?com.google.gwt.user.client.rpc.IsSerializable 接口,用來(lái)序列化在客戶(hù)端和服務(wù)器端傳遞的被GWT使用的數(shù)據(jù).
讓我們更新我們的widget 類(lèi).
30. 打開(kāi)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個(gè)重要的部分.1.組件的布局.我們創(chuàng)建了一個(gè)水平面板,然后添加了一個(gè)input box,button,和text label.
2.聲明了異步服務(wù)和事件,它繼承至異步模型的AJAX請(qǐng)求.
...
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ā)生時(shí),我們創(chuàng)建并且使用輸入的數(shù)據(jù)填充 ?EventData bean?然后使用異步服務(wù)發(fā)送該事件.在代碼的組后一行,我們?cè)O(shè)置text label的文本為 "Loading…",因此在 ?AJAX request 開(kāi)始的時(shí)候,用戶(hù)可以看到變化 .
3.發(fā)送事件,我們注冊(cè)了一個(gè)回調(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? 類(lèi)的一個(gè)接口.我們實(shí)現(xiàn)了兩個(gè)方法 onSucess and onFailure. 在onSuccess情況下, 我們添加了一個(gè)附加的檢測(cè)到來(lái)的結(jié)果.如果我們沒(méi)有受到一個(gè)期望的類(lèi),我們標(biāo)記在狀態(tài)文本中.?
現(xiàn)在我們完成了客戶(hù)端的代碼.如果你使用 ?Hosted Mode (with the "ant shell" command)來(lái)啟動(dòng)程序,?你將看到 "Request finished, but the result is empty", 因?yàn)槲覀冞€沒(méi)有寫(xiě)服務(wù)器端代碼.
Server-Side Coding
在Hosted Mode中的服務(wù)器端代碼, 在server包中的一個(gè)類(lèi)扮演了一個(gè)重要角色.
31. 打開(kāi)JavaSource中的demo.gwt.server.MockHelloWidget java 文件.
?sendEvent 函數(shù)復(fù)雜發(fā)送響應(yīng)到客戶(hù)端
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)入需要的類(lèi):
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中啟動(dòng)ant:
ant shell
現(xiàn)在程序如下:
Adding JSF Listeners for Run-Time Mode
處理JSF的事件和Hosted Mode的代碼差不多. 客戶(hù)端代碼不變.在服務(wù)器端 ,?G4jsf使用 JSF?監(jiān)聽(tīng)器機(jī)制來(lái)處理 Ajax events.
35.?打開(kāi) WebContent/pages/Base.xhtml并添加監(jiān)聽(tīng)器組件聲明.
<widget:component id="main" buttonLabel="#{bundle.buttonLabel}"
greeting="Hello #{greetingBean.name}!" >
?? <gwt:gwtListener method="#{greetingBean.takeGreeting}"
?? event ="demo.gwt.client.EventData"/>
</widget:component>
?
??gwtListener 元素有兩個(gè)屬性. "method"使用JSFEL指向處理器."event"用來(lái)定義事件類(lèi)型.?事件類(lèi)型是類(lèi)的全限定名 .最后一步是實(shí)現(xiàn)該函數(shù).
36. 打開(kāi)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)入的類(lèi):
import demo.gwt.client.ResultGreeting;
import demo.gwt.client.EventData;
該函數(shù)的簽名(signature? )很容易記住,該函數(shù)使用來(lái)自于客戶(hù)端的事件作為他的唯一一個(gè)參數(shù).返回值為 用來(lái)返回結(jié)果的事件類(lèi)型(type of the method equals is just the type of the class used to return the result).在這個(gè)函數(shù)中,我們合成響應(yīng)數(shù)據(jù)并且返回它.
38. 創(chuàng)建war文件,部署它.
如果你啟動(dòng)服務(wù)器,可以看導(dǎo):
The Last Word
就如你看到的,通過(guò)G4JSF使用兩種互補(bǔ)的技術(shù)(GWT and JSF)可以做很多漂亮的事情. 但是,仍然還有很多東西可以進(jìn)一步添加到G4jsf中.作為一個(gè)開(kāi)源項(xiàng)目, , G4jsf依靠一個(gè)開(kāi)源社區(qū)來(lái)支持和開(kāi)發(fā)它.如果你只是使用它,那是很好的.但是你也可以加入到G4JSF社區(qū)中來(lái), 幫助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.