GWT布局 - 如何使用docklayout

时间:2012-06-23 15:37:51

标签: javascript html google-app-engine gwt jsni

我正在使用GWT编写一个简单的应用程序。我已经使用dockPanel将视图划分为各个部分。 我需要调用一个脚本来调用dockPanel的某个面板中的facebook功能。这是Java中的代码

public class XXXX implements EntryPoint 
{
private DockLayoutPanel dock = new DockLayoutPanel(Unit.PX); 
private HorizontalPanel navPanel = new HorizontalPanel();
private VerticalPanel fbPanel = new VerticalPanel();
private HorizontalPanel ratingsPanel = new HorizontalPanel();
private Marker m = null;
private InfoWindow iw = null;
MapWidget map= null;

public void onModuleLoad() 
{
    implementDockPanelLayout();
    implementMapView();

        // Add the facebook Javascript script to the fbPanel of the dock
    injectFBInitCode();
    RootLayoutPanel.get().add(dock);
}


private void implementDockLayoutSetup() 
{
        navPanel.add(new HTML("<h3>Navigation Panel</h3>"));
    fbPanel.add(new HTML("<div id = \"fb-root\"><h3>FB Comments should go here </h3></div>"));
    ratingsPanel.add(new HTML("<h3>Ratings Here</h3>"));
    dock.addNorth(navPanel, 50);
    dock.addEast(fbPanel, 300);
    dock.addSouth(ratingsPanel, 50);
}


private native void injectFBInitCode() /*-{
//??How to associate this script with the fbPanel which contains 
    the div with id= fb-root
function(d, s, id) 
{
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=XXXXXX";
    fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk');
}-*/;

private void implementMapView() 
     {
      ...}

当我运行上面的代码时,我的浏览器出现异常:

  08:29:05.514 [ERROR] [SomeProj] Unable to load module entry point class  XXX.client.SomeProj (see associated exception for details)
 com.google.gwt.core.client.JavaScriptException: (null): null
 at   com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
 at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
 at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
 at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
 at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
 at cs310.client.someProj.injectFBInitCode(someProj.java)
 at cs310.client.someProj.onModuleLoad(someProj.java:53)
 at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
 at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
 at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
 at java.lang.reflect.Method.invoke(Method.java:597)
 at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
 at  com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
 at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
 at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
 at java.lang.Thread.run(Thread.java:680)

我不熟悉如何从我的GWT代码中调用Javascript函数。我查看了教程和一些示例,并提出了这段代码。但我卡住了,

有人可以帮我一把。

由于

1 个答案:

答案 0 :(得分:0)

在JSNI中你需要使用变量'$ wnd'来访问实际窗口..所以你应该调用'$ wnd.document'