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

因此，在直接查看twitter小部件javascript代码之后，我看到可以传入id，因此可以使用现有元素。太糟糕的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，易于定制。

如何将Twitter小部件插入GWT视图

2 个答案: