TwitterウィジェットをGWTビューに挿入する方法

Question

GWTアプリケーションで作成したビューがあり、twitterが提供するTwitterウィジェットの1つ（たとえば、http://twitter.com/about/resources/widgets/widget_search）を埋め込み/使用したいと思います。彼らはそれが挿入されている方法は、適切なhtmlを書き出すスクリプトを使用しています。私はそれを挿入する様々な方法を試しましたが、私はそれを動作させることができませんでした - 私はそれをiFrameに入れて動作させましたが、それは他の問題を提示しました。ここで

がさえずりがそれを挿入するために提供し、いくつかのサンプルコードです：

<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

だから私は、idはその既存の要素を使用することができるに渡すことができることを見たJavaScriptコード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の、カスタマイズしやすいように見つけるものを見つけました。