Search code examples
javascripthtmlgoogle-app-enginegwtjsni

GWT Layout- how to use docklayout


I am using GWT to write a simple app. Ive divided the view into various sections using the dockPanel. I need to invoke a script that invokes facebook functionality within a certain panel of the dockPanel. Here is the code in 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() 
     {
      ...}

When I run the above code, I get an exception in my browser:

  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)

Iam not that familiar with how to call Javascript functions from within my GWT code. I looked at the tutorials and some samples and came up with this code. But Im stuck,

Can someone give me a hand with this.

Thanks


Solution

  • when in JSNI you need to use the variable '$wnd' to access the actual window.. so you should call '$wnd.document'