How to insert a Twitter widget into a GWT view

Question

I have a view that I created in my GWT application, and I would like to enable / use one of the Twitter widgets that provides twitter (e.g. this http://twitter.com/about/resources/widgets/widget_search ). They, as they inserted, have a script that then writes out the corresponding html. I tried various ways to insert it, but I could not get it to work - we got it working by placing it in an iFrame, but this showed other problems.

Here is an example of the code that twitter provides for embedding 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\ 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

So, looking directly at the javascript code of the quiz widget, I saw that id can be passed so that an existing element can be used. Too bad twitter didn’t really document all of the available options (at least not on the page I posted above), I might have thought of this before.

Here is an example composite widget that will insert a Twitter widget and work in GWT, I tested this code in GWT 2.4 and it worked in Firefox 6, Chrome 16 and IE9 (although IE had some weird design problems 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\ 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

I found what I think is a simpler solution here , without JSNI / pure gwt-java, it is easy to configure.