Google Web Toolkit - Suggest Box (RPC)

The Google Web Toolkit provides many advanced features to make a web page come alive. One feature that is used commonly in AJAX webpages is a select box that has context sensitive options.

I have already covered the SuggestBox, this article will focus on retrieving your suggestion through an asynchronous Javascript call. You may want to read the following articles as this article builds off some of those concepts.

* GWT suggest box
* GWT RPC Call

To create an RPC Suggest Box you will need to do the following
* Create a Service to serve your suggestions. This service will take an input and return a collection of data.
* Create an oracle that wraps the calls to the Service

Create Suggestion RPC Service

Your client side Suggestion box will fire an onchange event when the user enters a keystroke. When this happens you want to send over the entered text and instruct the control to suggest only items that match the pattern.

To do this we need to define a Service. As we saw in GWT RPC Call we need to define two interfaces we'll call them:

• IQuoteService
• IQuoteServiceAsync

public interface IQuoteService extends RemoteService {

public static class Util {
  public static IQuoteServiceAsync getInstance() {
   IQuoteServiceAsync instance=(IQuoteServiceAsync) GWT.create(IQuoteService.class);
   ServiceDefTarget target = (ServiceDefTarget) instance;
   target.setServiceEntryPoint("/GWT/quote");
   return instance;
  }
}

   public SuggestOracle.Response getQuote(SuggestOracle.Request req);
}

public interface IQuoteServiceAsync {
   public void getQuote(SuggestOracle.Request req, AsyncCallback callback);
}

Your Oracle will need to return a class with a com.google.gwt.user.client.ui.SuggestOracle.Suggestion interface. To faciliate this we create a new class called ItemSuggestion.

Note: This class must reside on the client side else you will get serialization errors when you run the app.

public class ItemSuggestion implements IsSerializable, Suggestion {

      private String s;
      // Required for IsSerializable to work
      public ItemSuggestion() {
      }

      // Convenience method for creation of a suggestion
      public ItemSuggestion(String s) {
         this.s = s;
      }

      public String getDisplayString() {
          return s;
      }

      public String getReplacementString() {
          return s;
      }
   } // end inner class ItemSuggestion

Now define the actual service on the server side:

public class RandomQuoteService extends RemoteServiceServlet implements IQuoteService {
  
  
   public SuggestOracle.Response getQuote(SuggestOracle.Request req) {
      
       // req has request properties that you can use to perform a db search
       // or some other query. Then populate the suggestions up to req.getLimit() and
       // return in a SuggestOracle.Response object.
       SuggestOracle.Response resp = new SuggestOracle.Response();
      
       List<suggestion> suggestions = new ArrayList<suggestion>();
       suggestions.add(new ItemSuggestion("It is a good day to die"));
       suggestions.add(new ItemSuggestion("I shall return"));
       suggestions.add(new ItemSuggestion("There is nothing to fear but fear itself"));
      
       resp.setSuggestions(suggestions);
       return resp;
   }
}

Create Suggestion Oracle

So far we've created our service now we need to create the Oracle.

You simply extend SuggestOracle and instruct it to use the Service for its suggestions.

public class ItemSuggestOracle extends SuggestOracle {

       public boolean isDisplayStringHTML() {
           return true;
       }

       public void requestSuggestions(SuggestOracle.Request req,SuggestOracle.Callback callback) {
           IQuoteService.Util.getInstance().getQuote(req, new ItemSuggestCallback(req, callback));
       }

       class ItemSuggestCallback implements AsyncCallback {

           private SuggestOracle.Request req;
           private SuggestOracle.Callback callback;

           public ItemSuggestCallback(SuggestOracle.Request _req,
                   SuggestOracle.Callback _callback) {
               req = _req;
               callback = _callback;
           }

           public void onFailure(Throwable error) {
               callback.onSuggestionsReady(req, new SuggestOracle.Response());
           }

           public void onSuccess(Object retValue) {
               callback.onSuggestionsReady(req,
                       (SuggestOracle.Response) retValue);
           }
       }
   }

And now the result of all our work, we create a new SuggestBox with the new oracle.

public void display() {

       ItemSuggestOracle oracle = new ItemSuggestOracle();      
       SuggestBox sb = new SuggestBox(oracle);

       // Add it to the root panel.
       RootPanel.get().add(sb);
   }

That's it! It looks like its a lot of work but its mostly plumbing and you should find its pretty easy to do once you get the hang of it.

Give it a try and leave a comment to let me know how it goes.