SmartGwt - Load Grid Data From JSON

Question

I am trying to get started with SmartGwt. I am using the XJSONDatasource to make a cross-domain call to an example page at SmartClient that has JSON data. When I run the code, however, a popup comes up that says "Finding Records that match your criteria..." This never goes away, and the data is not loaded. I am using the free version of SmartGwt (my company has said that this is what we'll use). Hoping I'm just missing something obvious.

    DataSource dataSource = new XJSONDataSource();
    dataSource.setDataTransport(RPCTransport.SCRIPTINCLUDE);
    dataSource.setDataFormat(DSDataFormat.JSON);

    dataSource.setDataURL("http://www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js");
    DataSourceTextField nameField = new DataSourceTextField("name", "name");

    nameField.setValueXPath("name");

    dataSource.setFields(nameField);

    ListGrid grid = new ListGrid();
    grid.setDataSource(dataSource);
    grid.setWidth100();
    grid.setHeight(100);
    grid.setAutoFetchData(true);
    grid.draw();

Answer 1

I see from the docs here: http://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/data/XJSONDataSource.html

Note, as indicated in the tutorial above, the server is responsible for writing out not just the data, but also a JavaScript function call that tells the client that the response has arrived. The client passes the name of the function to call as the "callback" URL parameter.

But there is no such callback in the code at the page you link at www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js

Answer 2

When your smartGWT datasource makes a call to this URL:

http://www.smartclient.com/smartgwt/showcase/data/dataIntegration/json/contactsData.js

(If you data source is making a call to a Java App go to the bottom of this answer)

The request your datasource will make will include a GET parameter called callback which looks like this:

callback=isc.Comm._scriptIncludeReply_0

The script, contactsData.js, will need to capture this GET parameter.

contactsData.js will need to include a library to retrieve parameters from the URL:

javascript retrieve parameters function:

function getParameter ( queryString, parameterName ) {
   // Add "=" to the parameter name (i.e. parameterName=value)
   var parameterName = parameterName + "=";
   if ( queryString.length > 0 ) {
      // Find the beginning of the string
      begin = queryString.indexOf ( parameterName );
      // If the parameter name is not found, skip it, otherwise return the value
      if ( begin != -1 ) {
         // Add the length (integer) to the beginning
         begin += parameterName.length;
         // Multiple parameters are separated by the "&" sign
         end = queryString.indexOf ( "&" , begin );
      if ( end == -1 ) {
         end = queryString.length
      }

jQuery retrieve parameters function

http://ajaxcssblog.com/jquery/url-read-request-variables/

After you get the value of the callback parameter you will write the function name with the JSON as a parameter in the body of the response like so:

isc.Comm._scriptIncludeReply_0({"item": [ {"id": "1","name": "Monkey"}, 
{"id": "2","name": "Tree"}, 
{"id": "3","name": "Banana"} ] })

So the javascript code will look something like this:

Response.Write(getParameter(URLrequestFromDatasourceString,"callback") + " ( " + JSON + " )" );

---

JAVA

If your smartGWT datasource makes a call to a Java app URL:

http://www.smartclient.com/getJson.htm

Your Java controller will do the same thing but it is much easier

String callbackString = request.getParameter("callback");

response.setContentType("text/X-JSON");
response.getWriter().write( callbackString + " ( " + JSONstring + " ) " );
response.setStatus(HttpServletResponse.SC_OK);  

Also, here is a link to a blog post on the issue