原文: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,在客戶端和服務器端來回傳遞數據, 該功能是通過RPC (Remote Procedure Call) 機制實現的而不是使用 XMLHttpRequest object.
不管這些,你想在服務器端做什么是有你決定的. Google稱它為"Server Agnostic".
讓我們看看如何添加 AJAX?方式的異步通信到我們的程序中.
Asynchronous Communication in Hosted Mode
在下個階段中,我們將改變該程序的環境.我們添加一個用戶可以輸入姓名的文本域,一旦按鈕被點擊了,請求將會發送到服務器端.服務器將返回出現在彈出窗口的消息.為了跟蹤請求和響應,我們添加一個文本標簽來顯示請求的狀態.
為了在服務器和客戶端傳送數據.我們使用兩個Java beans. ?–?一個把數據帶回服務器端,一個把響應帶回客戶端. .
Client-Side Coding
28.?在JavaSource中創建一個 demo.gwt.client.EventData 類,內容如下:
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;
}
}
用來在客戶端到服務器端傳送數據的類(發送事件)應該繼承 G4jsf的?GwtFacesEvent類.
29.?創建另外一個類 demo.gwt.client.ResultGreeting.
內容如下:
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;
}
}
?
從服務器端帶來響應的類應該繼承G4jsf的 GwtFacesResult 類.
?GwtFacesEvent 和GwtFacesResult 都實現了 ?com.google.gwt.user.client.rpc.IsSerializable 接口,用來序列化在客戶端和服務器端傳遞的被GWT使用的數據.
讓我們更新我們的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.組件的布局.我們創建了一個水平面板,然后添加了一個input box,button,和text label.
2.聲明了異步服務和事件,它繼承至異步模型的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上. 當 On Click 事件發生時,我們創建并且使用輸入的數據填充 ?EventData bean?然后使用異步服務發送該事件.在代碼的組后一行,我們設置text label的文本為 "Loading…",因此在 ?AJAX request 開始的時候,用戶可以看到變化 .
3.發送事件,我們注冊了一個回調函數.?
.........
.........
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? 類的一個接口.我們實現了兩個方法 onSucess and onFailure. 在onSuccess情況下, 我們添加了一個附加的檢測到來的結果.如果我們沒有受到一個期望的類,我們標記在狀態文本中.?
現在我們完成了客戶端的代碼.如果你使用 ?Hosted Mode (with the "ant shell" command)來啟動程序,?你將看到 "Request finished, but the result is empty", 因為我們還沒有寫服務器端代碼.
Server-Side Coding
在Hosted Mode中的服務器端代碼, 在server包中的一個類扮演了一個重要角色.
31. 打開JavaSource中的demo.gwt.server.MockHelloWidget java 文件.
?sendEvent 函數復雜發送響應到客戶端
32. 把sendEvent函數替換為下面的內容.:
public GwtFacesResult sendEvent(GwtFacesEvent event){
??????? ResultGreeting result = new ResultGreeting();
??????? result.setGreetingText( "Hello " +
((EventData)event).getName() );
?????????????? return result;
}
?
33. 導入需要的類:
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
現在程序如下:
Adding JSF Listeners for Run-Time Mode
處理JSF的事件和Hosted Mode的代碼差不多. 客戶端代碼不變.在服務器端 ,?G4jsf使用 JSF?監聽器機制來處理 Ajax events.
35.?打開 WebContent/pages/Base.xhtml并添加監聽器組件聲明.
<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"用來定義事件類型.?事件類型是類的全限定名 .最后一步是實現該函數.
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. 和需要導入的類:
import demo.gwt.client.ResultGreeting;
import demo.gwt.client.EventData;
該函數的簽名(signature? )很容易記住,該函數使用來自于客戶端的事件作為他的唯一一個參數.返回值為 用來返回結果的事件類型(type of the method equals is just the type of the class used to return the result).在這個函數中,我們合成響應數據并且返回它.
38. 創建war文件,部署它.
如果你啟動服務器,可以看導:
The Last Word
就如你看到的,通過G4JSF使用兩種互補的技術(GWT and JSF)可以做很多漂亮的事情. 但是,仍然還有很多東西可以進一步添加到G4jsf中.作為一個開源項目, , G4jsf依靠一個開源社區來支持和開發它.如果你只是使用它,那是很好的.但是你也可以加入到G4JSF社區中來, 幫助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.