Sencha Inc. | HTML5 Apps

Blog

Build an App with Ext GWT DataProxies

January 06, 2011 | Darrell Meyer

Loading API

Ext GWT Loading APIThe Ext GWT Loading API provides a powerful and flexible design for retrieving remote content. The Loading API consists of 3 parts: Loaders, DataProxies, and DataReaders. Loaders are responsible for retrieving and formatting remote content. To accomplish this, loaders delegate work to the DataProxy and DataReader. The DataProxy is responsible for retrieving the remote content. The DataReader is responsible for parsing the raw data from the server into an expected format.

DataProxy

Ext GWT ships with several different types of DataProxies for retrieving remote content. The different data proxy types retrieve remote content in different ways. Ext GWT DataProxy HttpProxy retrieves remote content using a XMLHttpRequest (XHR) request. The request is made via the GWT RequestBuilder class. Any type of data may be returned such as XML or JSON data. MemoryProxy is simple data proxy that returns data that is already in memory on the client. This is useful when you want to use the Loading API with local data. An example would be setting up a paging grid where paging is done via the Loading API. RpcProxy retrieves its data using GWT RPC calls. GWT RPC provides the ability to pass Java objects back and forth from the server via a service interface. ScriptTagProxy is used to circumvent the same origin policy enforced by the browsers. The same origin policy only allows scripts to make server calls to servers on the same domain that the executing script was loaded. ScriptTagProxy is useful as it allows you to make XHR calls to any server.

Example

In the example we will query a YouTube JSON service to search for videos. The example will use 3 different data proxies to retrieve remote content. However, the same Loader and same DataReader code will be used for each of the 3 examples. Here is a screenshot of the example: Use your Ext GWT app to query a YouTube JSON service and search for videos

HttpProxy Example

For this example, we will be calling a YouTube video service. Because of the same origin policy we cannot call the YouTube service directly. We will make a call to a Servlet on our server which will make the remote call and then return the requested data:
public class YouTubeServlet extends HttpServlet {
  @SuppressWarnings("unchecked")
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    try {
      StringBuffer query = new StringBuffer();
      Enumeration e = req.getParameterNames();
      while (e.hasMoreElements()) {
        String s = e.nextElement();
        if (s != null) {
          query.append(s);
          query.append("=");
          query.append(req.getParameter(s));
          query.append("&");
        }
      }
      URL url = new URL("http://gdata.youtube.com/feeds/api/videos?" + query.toString());
      HttpURLConnection connection = (HttpURLConnection) url.openConnection();
      connection.setDoOutput(true);
      BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
      String decodedString;
      StringBuffer sb = new StringBuffer();
      while ((decodedString = in.readLine()) != null) {
        sb.append(decodedString);
      }
      in.close();
      resp.getOutputStream().print(sb.toString());
    } catch (Exception e) {
    }
  }
}
 
On the client, we create a RequestBuilder instance and pass it to the constructor of the HttpProxy.
String url = GWT.getModuleBaseURL() + "youtubehttpservice";
HttpProxy httpProxy = new HttpProxy(new RequestBuilder(RequestBuilder.GET, url));
 

RpcProxy

For RpcProxy we first define our service and async service interface.
@RemoteServiceRelativePath("youtuberpcservice")
public interface YouTubeService extends RemoteService {
  String getVideos(BasePagingLoadConfig config);
}
 
public interface YouTubeServiceAsync {
  void getVideos(BasePagingLoadConfig config, AsyncCallback callback);
}
 
Next we implement the service on the server:
public class YouTubeServletImp extends RemoteServiceServlet implements YouTubeService {
  public String getVideos(BasePagingLoadConfig config) {
   // code same as HttpProxy Servlet example
    return "";
  }
}
 
We use the following code on the client:
final YouTubeServiceAsync service = GWT.create(YouTubeService.class);
RpcProxy rpcProxy = new RpcProxy() {
   @Override
   protected void load(Object loadConfig, AsyncCallback callback) {
     service.getVideos((BasePagingLoadConfig) loadConfig, callback);
   }
};
 

ScriptTagProxy

In the last two examples, we called our server which then made the call to the YouTube service. With ScriptTagProxy we can make the call to the YouTube service directly from the browser:
String url = "http://gdata.youtube.com/feeds/api/videos";
ScriptTagProxy scriptProxy = new ScriptTagProxy(url);
 

Conclusion

This article has demonstrated the different types of Ext GWT DataProxies and stepped through example code for HttpProxy, RpcProxy, and ScriptTagProxy. The example and its code (written by Sven Brunken) were used during our session on loaders at our recent conference. Feel free to download the code used in this project and view the online demo of the completed project.

There are 5 responses. Add yours.

AwesomeBob

4 years ago

I love how the three parts (Loader, DataProxy and DataReader) use the MVC architecture.

Alex

4 years ago

Really neat stuff.  Sencha FTW!

Elwood_76

4 years ago

Hi Everybody, how i should implement this example in eclipse?
Have i create a web aplication project or import directly this proyect to Eclipse

Thanks in advance

Wandile Chamane

4 years ago

Hi,

Does anyone know when will Ext GWT v3 be available?

Thanks,

agx

4 years ago

@Wandile Chamane
Sencha is promising that Ext GWT v3 testing release will be available at the first week of June 2011, Yes - it should be released this week. We too are waiting for this release already 3 months. Just can’t wait… wink

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.