如何將Twitter小部件插入GWT視圖

Question

我有一個視圖，我在我的GWT應用程序中創建了一個視圖，並且想要嵌入/使用twitter提供的其中一個Twitter小部件（如此類http://twitter.com/about/resources/widgets/widget_search）。他們插入的方式是用腳本寫出適當的html。我嘗試過不同的方式來插入它，但我無法使它工作 - 我們通過將它放入一個iFrame中，但確實出現了其他問題。

下面是一些示例代碼，Twitter提供給插入：

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
    version: 2, 
    type: 'search', 
    search: 'rainbow', 
    interval: 30000, 
    title: 'It\'s a double rainbow', 
    subject: 'Across the sky', 
    width: 250, 
    height: 300, 
    theme: { 
    shell: { 
     background: '#8ec1da', 
     color: '#ffffff' 
    }, 
    tweets: { 
     background: '#ffffff', 
     color: '#444444', 
     links: '#1985b5' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: true, 
    live: true, 
    behavior: 'default' 
    } 
}).render().start(); 
</script> 

Answer 1

所以直接在javascript代碼，我看到一個ID可以這樣也可以使用現有的元素傳遞Twitter的插件照看。太糟糕的嘰嘰喳喳沒有真正記錄所有可用的不同選項（至少不是我在上面發佈的頁面上），我可能早就知道了這一點。

這裏是一個示例複合小部件，它將插入一個twitter小部件並在GWT中工作，我已經在GWT 2.4中測試過這段代碼，它在Firefox 6，Chrome 16和IE9中工作（儘管IE在我的系統中有一些奇怪的樣式問題環境）。

import com.google.gwt.core.client.Callback; 
import com.google.gwt.core.client.GWT; 
import com.google.gwt.core.client.JavaScriptObject; 
import com.google.gwt.core.client.ScriptInjector; 
import com.google.gwt.user.client.DOM; 
import com.google.gwt.user.client.ui.Composite; 
import com.google.gwt.user.client.ui.FlowPanel; 

public class TwitterWidget extends Composite { 

    private JavaScriptObject widgetJsObj = null; 
    private final FlowPanel twPanel; 
    private final boolean destroyOnUnload; 

    public TwitterWidget() { 
     this(true); 
    } 

    public TwitterWidget(boolean destroyOnUnload) { 
     this.destroyOnUnload = destroyOnUnload; 
     twPanel = new FlowPanel(); 
     twPanel.getElement().setId(DOM.createUniqueId()); 
     initWidget(twPanel); 
    } 

    @Override 
    protected void onLoad() { 
     super.onLoad(); 

     Callback<Void, Exception> callback = new Callback<Void, Exception>() { 

      @Override 
      public void onSuccess(Void result) { 
       if (nativeEnsureTwitterWidgetJsLoadedAndSetToWnd()) { 
        renderAndStart(); 
       } else { 
        GWT.log("even though success has been called, the twitter widget js is still not available"); 
        // some logic maybe keep checking every second for 1 minute 
       } 
      } 

      @Override 
      public void onFailure(Exception reason) { 
       // TODO Auto-generated method stub 
       GWT.log("exception loading the twitter widget javascript", reason); 
      } 


     }; 

     boolean isTwitterWidgetAvailable = nativeEnsureTwitterWidgetJsLoadedAndSetToWnd(); 
     if (isTwitterWidgetAvailable) { 
      renderAndStart(); 
     } else { 
      ScriptInjector.fromUrl("http://widgets.twimg.com/j/2/widget.js") 
       .setWindow(ScriptInjector.TOP_WINDOW) 
       .setCallback(callback) 
       .inject(); 
     } 
    } 

    @Override 
    protected void onUnload() { 
     super.onUnload(); 

     if (widgetJsObj!=null) { 
      // need to manually destroy so that attached events get removed 
      if (destroyOnUnload) { 
       nativeDestroyTwitterWidget(widgetJsObj); 
      } else { 
       nativeStopTwitterWidget(widgetJsObj); 
      } 
     } 
    } 

    private native JavaScriptObject nativeRenderStartTwitterWidget(String domId) /*-{ 
     var twObj = new $wnd.TWTR.Widget({ 
      version: 2, 
      id: domId, 
      type: 'search', 
      search: 'rainbow', 
      interval: 30000, 
      title: 'It\'s a double rainbow', 
      subject: 'Across the sky', 
      width: 250, 
      height: 300, 
      theme: { 
       shell: { 
        background: '#8ec1da', 
        color: '#ffffff' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#444444', 
        links: '#1985b5' 
       } 
      }, 
      features: { 
       scrollbar: false, 
       loop: true, 
       live: true, 
       behavior: 'default' 
      } 
     }).render().start(); 
     return twObj; 
    }-*/; 

    private native boolean nativeEnsureTwitterWidgetJsLoadedAndSetToWnd() /*-{ 
     // this only works when TWTR has been properly loaded to $wnd directly 
     if (!(typeof $wnd.TWTR === "undefined") && !(null===$wnd.TWTR)) { 
      return true; 
     } 
     return false; 
    }-*/; 

    private native JavaScriptObject nativeStopTwitterWidget(JavaScriptObject twObj) /*-{ 
     return twObj.stop(); 
    }-*/; 

    private native JavaScriptObject nativeDestroyTwitterWidget(JavaScriptObject twObj) /*-{ 
     return twObj.destroy(); 
    }-*/; 

    private void renderAndStart() { 
     widgetJsObj = nativeRenderStartTwitterWidget(twPanel.getElement().getId()); 
     // you can call other native javascript functions 
     // on twitWidgetJsObj such as stop() and destroy() 
    } 

} 

Answer 2

我發現我找到的是一個簡單的解決方案here，沒有JSNI /純GWT的Java，易於定製。