如何将Twitter小部件插入到GWT视图中 [英] How to insert Twitter widget into a GWT view
本文介绍了如何将Twitter小部件插入到GWT视图中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个观点，我创建了我的GWT应用程序，并且我想嵌入/使用Twitter提供的一个Twitter小部件（就像这个 http://twitter.com/about/resources/widgets/widget_search ）。他们插入的方式是用脚本写出适当的html。我尝试过不同的方式来插入它，但我无法让它工作 - 我们通过将它放入iFrame中，但它提出了其他问题。\\ b
$ b <这里有一些示例代码，twitter提供了插入它：
< script src =http：// widgets。 twimg.com/j/2/widget.js\"></script>
< script>
新TWTR.Widget（{
版本：2，
类型：'搜索'，
搜索：'彩虹'，
间隔：30000，
标题：'它是双重彩虹'，
主题：'在天空中'，
宽度：250，
高度：300，
主题：{
壳：{
背景：'＃8ec1da'，
颜色：'#ffffff'
}，
tweets：{
背景：'#ffffff'，
color：'＃444444'，
links：'＃1985b5'
}
}，
特性：{
滚动条：false，
loop：true，
live：true，
behavior：'default'
}
}）。render（）。start（）;
< / script>
解决方案
看到一个id可以传入，所以可以使用现有的元素。太糟糕的叽叽喳喳没有真正记录所有可用的不同选项（至少不是我在上面发布的页面上），我可能早就知道这一点。
这里是一个示例复合小部件，它将插入一个叽叽喳喳小部件并在GWT中工作，我已经在GWT 2.4中测试过这些代码，并且它在Firefox 6，Chrome 16和IE9中工作（尽管IE在我的环境中有一些奇怪的样式问题） p>
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;
导入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 = new Callback< Void，Exception>（）{
@Override
public void onSuccess（Void result）{
if（nativeEnsureTwitterWidgetJsLoadedAndSetToWnd（））{
renderAndStart （）;
} else {
GWT.log（即使成功被调用，twitter小部件js仍然不可用）;
//一些逻辑可能会每秒钟检查1分钟
}
}
@Override
public void onFailure（异常原因）{
// TODO自动生成的方法存根
GWT.log（加载叽叽喳喳小部件javascript的异常，原因）;
}
};
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（）;
$ b $ if（widgetJsObj！= null）{
//需要手动销毁以便附加事件被移除
if（destroyOnUnload）{
nativeDestroyTwitterWidget（widgetJsObj）;
} else {
nativeStopTwitterWidget（widgetJsObj）;
$ b私有本地JavaScriptObject nativeRenderStartTwitterWidget（String domId）/ * - {
var twObj = new $ wnd.TWTR.Widget（ {
版本：2，
id：domId，
类型：'search'，
搜索：'rainbow'，
interval：30000，
title ：'它是双重彩虹'，
主题：'在天空中'，
宽度：250，
高度：300，
主题：{
shell：{
background：'＃8ec1da'，
color：'#ffffff'
}，
tweets：{
background：'#ffffff'，
color：'＃444444'，
links：'＃1985b5'
}
}，
特性：{
滚动条：false，
loop：true，
live：true，
behavior：'default'
}
}）。render（）。start（）;
返回twObj;
} - * /;
私有本地布尔nativeEnsureTwitterWidgetJsLoadedAndSetToWnd（）/ * - {
//只有在TWTR已经正确加载到$ wnd时才有效
if（！（typeof $ wnd.TWTR ===undefined）&&！（null === $ wnd.TWTR））{
return true;
}
返回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（））;
//你可以在twitWidgetJsObj上调用其他本地javascript函数
//例如stop（）和destroy（）
}
}
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>
解决方案
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()
}
}
这篇关于如何将Twitter小部件插入到GWT视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
