How to insert Twitter widget into a GWT view

Question

I have a view that I created in my GWT application and I would like to embed/use one of the Twitter widgets that twitter provides (like this one http://twitter.com/about/resources/widgets/widget_search). They way they have it inserted is with a script that then writes out the appropiate html. I tried various ways to insert it but I was not able to get it to work -- we did get it working by putting it in an iFrame but that has presented other problems.

Here is some sample code that twitter provides to insert it:

<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

I found what I find to be a simpler solution here, no JSNI/pure gwt-java, easy to customize.

Answer 2

So after looking directly at the twitter widget javascript code I saw that an id can be passed in so an existing element could be used. Too bad twitter didn't really document all of the different options available (at least not on the page I posted above), I may have figured this out earlier.

Here is a Sample Composite Widget that will insert a twitter widget and work in GWT, I have tested this code in GWT 2.4 and it worked in Firefox 6, Chrome 16 and IE9 (although IE had some weird styling issues in my environment).

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()
    }

}