Binding data to the UI in GWT

Question

In Silverlight, a frequently used pattern is:

1. Request data
2. Get back an empty container for the data
3. Asynchronously fire off a query to fill the container
4. When the query returns, fire an event on the container
5. Update the UI according to the container's contents

Can this be done in GWT?

The reason I ask is that I'm trying to make a SuggestBox that contains a list of group names and icons. First, I query Facebook to get a list of groups IDs that are close to the current String in the SuggestBox . Then, I fire off queries to get icons for each group id. The problem is that I have to return the suggestions before those queries are done. I'm not sure how to go back and insert the data after I have it. I don't want to block until the calls are complete, and there's no real way to know in advance what data to load.

I could return a widget for the suggestion that loads an image, but the suggestion must be a plain String.

What is the right approach here?

Answer 1

Let's assume you're using GWT RPC. You'll have some service interface that lets you fetch the groupIds for a suggestion and the icon for a specific group id.

public interface FacebookService extends RemoteService {

    List<String> getFacebookGroupIds(String suggestion);

    Icon getIconForGroup(String groupId);
}

You should build your own implementation of Suggestion that can display itself with either just a groupId or a groupId and an Icon.

public class FacebookGroupSuggestion implements Suggestion {

    private String groupId;

    private Icon icon;

    public FacebookGroupSuggestion(String groupId) {
        this.groupId = groupId;
    }

    public String getDisplayString() {
        StringBuilder builder = new StringBuilder();
        builder.append("<b>");
        builder.append(this.groupId);
        builder.append("</b>");
        if (this.icon != null) {
            builder.append(this.icon.toSafeHtml());
        }
        return builder.toString();
    }
}

I'm using Icon as your own implementation of an icon, it's not a standard class. Then, you can make your implementation of SuggestOracle to fetch the groupIds and icons asynchronously. The SuggestOracle uses a callback to inform the suggestBox that some response to a request is available. So fetch your results, and call the callback when you get them. It'll look something like this.

public class FacebookSuggestOracle extends SuggestOracle {

    private FacebookServiceAsync service = GWT.create(FacebookService.class);
    private Request currentRequest;
    private Callback currentCallback;

    @Override
    public void requestSuggestions(Request request, Callback callback) {
        // Save request & callback for future use.
        this.currentRequest = request;
        this.currentCallback = callback;

        // Fetch the groupIds
        service.getFacebookGroupIds(request.getQuery(), new AsyncCallback<List<String>>() {
            public void onSuccess(List<String> result) {
                createSuggestionsForGroupIds(result);
            }

        });

    }

    private void createSuggestionsForGroupIds(List<String> groupIds) {
        List<FacebookGroupSuggestion> suggestions = new ArrayList<FacebookGroupSuggestion>();
        for (String groupId : groupIds) {
            suggestions.add(new FacebookGroupSuggestion(groupId));
        }
        Response response = new Response(suggestions);
        // Tell the suggestBox to display some new suggestions
        currentCallback.onSuggestionsReady(currentRequest, response);

        // Fetch the icons
        for (String groupId : groupIds) {
            service.getIconForGroup(groupId, new AsyncCallback<Icon>() {

                public void onSuccess(Icon result) {
                    // match the icon to the groupId in the suggestion list
                    // use the callback again to tell the display to update itself

                }

            });
        }
    }
}