json with gwt

via the google tutorial, comes an overview on how to Retrieve JSON data via HTTP:

JSON reponse

This requires:

• JSNI (Java Script Native Interface)
• GWT overlay types

JSNI – Using JSNI you can call handwritten JavaScript methods from within the GWT module

JSNI methods  – declared native and contain JavaScript code in a specially formatted comment block between the end of the parameter list and the trailing semicolon. An example:

public final native String getText() /*-{

return this.text;

}-*/;

Again, a JSNI comment block begins with the exact token  /*-{

and ends with the exact token }-*/

GWT overlay types  are the response JSON objects that are returned  from the remote server, and are converted into JavaScript objects:

• A class that extends JavaScriptObject, a marker type that GWT uses to denote JavaScript objects.
• Methods on overlay types are JSNI. These getters directly access the JSON fields you know exist.

Now for the  call to the remote server:

JSON request

The getJSON Javascript Native interface method  :

public native static void getJson(int requestId, String url,
StockWatcher handler) /*-{

This is where you work around the Cross Site scripting SOP  (same origin policy) restrictions by using the src attribute of the <script> tag to make the call to the remote server.

var callback = "callback" + requestId;
var script = document.createElement("script");
script.setAttribute("src", url+callback);
script.setAttribute("type", "text/javascript");

The src attribute is the URL of the JSON data with the name of a callback function appended. When the script executes, it fetches the padded JSON;

window[callback] = function(jsonObj) {

handler.@com.google.gwt.sample.stockwatcher.client.StockWatcher::handleJsonResponse(Lcom/google/gwt/core/client/JavaScriptObject;)(jsonObj);
window[callback + "done"] = true; }

The callback function is defined on the browser’s window object. It receives as an argument a JavaScript object which is the JSON data returned by the server.


setTimeout(function() {
if (!window[callback + "done"]) {
handler.@com.google.gwt.sample.stockwatcher.client.StockWatcher::handleJsonResponse(Lcom/google/gwt/core/client/JavaScriptObject;)(null);
}
document.body.removeChild(script);
delete window[callback];
delete window[callback + "done"];
}
, 1000);


A timeout function is defined to check for an unresponsive server or network problem. It first  checks a flag to see if the JSON callback was ever called. Before the timeout function completes, it removes the new <script> element and the callback function from window.

document.body.appendChild(script);


Finally call appendChild() to attach the dynamically-loaded <script> element to the HTML document body. This causes the web browser to download the JavaScript referenced by the src attribute

public void handleJsonResponse(JavaScriptObject jso) {
if (jso == null) {
displayError("Couldn't retrieve JSON");
return;
}
...
}

When the callback function executes, it calls the Java handleJsonResponse method and passes it the JSON data as a JavaScript object. This has been an example of a bridge method which is a technique for calling back into the Java source code.

Of course, the above example doesn’t handle multiple concurrent requests. For that, you need an array of bridge methods;

gwt json concurrent requests bridge method, you can generate a bridge method, which will be used to invoke a GWT JSON callback handler (aka JSON Request Handler).

http://myhowtosandprojects.blogspot.com/2009/04/making-web-pages-in-java-with-google.html

working with JSON