數據綁定到GWT的UI

在Silverlight中，經常使用的模式是：數據綁定到GWT的UI

請求數據
找回的數據一個空的容器
異步斷火查詢填充容器
當查詢返回時，根據容器的內容物的容器
更新UI上觸發一個事件

這可以在GWT中完成嗎？

我問的原因是我試圖製作一個包含組名和圖標列表的SuggestBox。首先，我查詢Facebook以獲取與SuggestBox中的當前字符串接近的組ID的列表。然後，我啓動查詢以獲取每個組ID的圖標。問題是我必須在完成這些查詢之前返回建議。我不知道如何返回並在我擁有後插入數據。我不想在呼叫完成之前阻止，並且沒有辦法事先知道要加載的數據。

我可以爲加載圖像的建議返回小部件，但建議必須是普通字符串。

這裏的正確方法是什麼？

來源

2011-06-16 Nick Heiner

簡短的回答，是的，它是可能的，看看'的AsyncCallback '，'GwtEvent '和GWT MVP模式。你需要提供更多關於你的項目結構的細節，以獲得更多幫助（使用GWT版本，MVP或不）。在MVP「結構」中，演示者可以進行RPC調用和onSuccess，將委派給視圖進行UI更新。在你的情況下，你將有多個RPC調用，第一個用於組Id，然後是一個新的RPC調用fecth圖標。這兩個RPC調用應該更新視圖（在您的情況下'SuggestBox'） – 2011-06-16 05:31:47

假設您正在使用GWT RPC。您將擁有一些服務界面，可讓您獲取groupIds的建議以及特定組ID的圖標。

public interface FacebookService extends RemoteService { 

    List<String> getFacebookGroupIds(String suggestion); 

    Icon getIconForGroup(String groupId); 
}

您應該構建您自己的建議實現，該建議可以使用groupId或groupId和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(); 
    } 
}

我使用Icon作爲您自己的圖標實現，它不是標準類。然後，您可以使SuggestOracle的實現異步獲取groupIds和圖標。 SuggestOracle使用回調函數通知promptBox對請求的某些響應可用。因此獲取您的結果，並在獲取結果時調用回調。它看起來像這樣。

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 

       } 

      }); 
     } 
    } 
}

來源

2011-06-16 09:28:25 jonasr

+1，很好的答案 – 2011-06-16 20:06:42

這很好，謝謝。 – 2011-06-17 04:49:38

數據綁定到GWT的UI

回答

相關問題