Using GWT Layout Panels with SpiffyUI

[travis.go...@gmail.com]

Hi there, 

I've built a DataGrid that I would like to add onto the main page generated by the tutorial code as a test. I've tried adding the grid directly to the "mainContent" area and it does not appear. 

I then read online that DataGrids need to sit in Layout panels. So, I tried the following with the tutorial code to see whether I could add a layout panel--

   DockLayoutPanel dockPanel = new DockLayoutPanel(Unit.PCT);

        final Button button3 = new Button("SOUTH BUTTON");

        dockPanel.addSouth(button3, 20);

   RootPanel.get("mainContent").add(dockPanel);

        

I now get the exception listed below. Can I use layout panels / data grids with Spiffy UI? To what do I add them to make them visible?

Sorry if this is a simple question. It's been a couple years since I've had to do GWT and I'm a bit rusty. 

Best,

Travis

Error Reproduction:

21:23:41.490 [ERROR] [lbcmwebinterfacesv2.index] Uncaught exception escaped

com.google.gwt.event.shared.UmbrellaException: One or more exceptions caught, see full set in UmbrellaException#getCauses

    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:129)

    at com.google.gwt.user.client.Event$NativePreviewEvent.fire(Event.java:87)

    at com.google.gwt.user.client.Event$NativePreviewEvent.access$4(Event.java:73)

    at com.google.gwt.user.client.Event$.fireNativePreviewEvent(Event.java:488)

    at com.google.gwt.user.client.DOM.previewEvent(DOM.java:1328)

    at sun.reflect.GeneratedMethodAccessor28.invoke(Unknown Source)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:601)

    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)

    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)

    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.invokeNativeObject(ModuleSpace.java:269)

    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)

    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)

    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)

    at sun.reflect.GeneratedMethodAccessor27.invoke(Unknown Source)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:601)

    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)

    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)

    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.invokeNativeObject(ModuleSpace.java:269)

    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)

    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)

    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)

    at sun.reflect.GeneratedMethodAccessor27.invoke(Unknown Source)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:601)

    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)

    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)

    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)

    at java.lang.Thread.run(Thread.java:722)

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): parent is 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.invokeNativeBoolean(ModuleSpace.java:184)

    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeBoolean(JavaScriptHost.java:35)

    at com.google.gwt.dom.client.DOMImplMozilla.isOrHasChild(DOMImplMozilla.java)

    at com.google.gwt.dom.client.Node$.isOrHasChild$(Node.java:280)

    at com.google.gwt.user.client.DOM.isOrHasChild(DOM.java:998)

    at org.spiffyui.client.widgets.LongMessage.onPreviewNativeEvent(LongMessage.java:192)

    at com.google.gwt.user.client.Event$NativePreviewEvent.dispatch(Event.java:195)

    at com.google.gwt.user.client.Event$NativePreviewEvent.dispatch(Event.java:1)

    at com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1)

    at com.google.web.bindery.event.shared.EventBus.dispatchEvent(EventBus.java:40)

    at com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193)

    at com.google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java:88)

    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127)

    at com.google.gwt.user.client.Event$NativePreviewEvent.fire(Event.java:87)

    at com.google.gwt.user.client.Event$NativePreviewEvent.access$4(Event.java:73)

    at com.google.gwt.user.client.Event$.fireNativePreviewEvent(Event.java:488)

    at com.google.gwt.user.client.DOM.previewEvent(DOM.java:1328)

    at sun.reflect.GeneratedMethodAccessor28.invoke(Unknown Source)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:601)

    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)

    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)

    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.invokeNativeObject(ModuleSpace.java:269)

    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)

    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)

    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)

    at sun.reflect.GeneratedMethodAccessor27.invoke(Unknown Source)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:601)

    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)

    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)

    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.invokeNativeObject(ModuleSpace.java:269)

    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)

    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)

    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)

    at sun.reflect.GeneratedMethodAccessor27.invoke(Unknown Source)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:601)

    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)

    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)

    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)

    at java.lang.Thread.run(Thread.java:722)      

      

[Marcos Lilljedahl]

Hi Travis, 

Have you tried adding the DataGrid as follows?:

RootLayoutPanel.get().add(myDataGridWidget);

Regards,
Marcos.

[Zack Grossbart]

Hi Travis,

You could also try putting an HTMLPanel in the middle. Something like this:

HTMLPanel panel = new HTMLPanel("div", "");
panel.add(myDataGridWidget);
RootPanel.get("mainContent").add(panel);

This is the way we often manage panels in our projects.

Cheers,
Zack

com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannel
Server.java:292)
    at
com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChann

com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannel
Server.java:292)
    at
com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChann

[travis.go...@gmail.com]

Ok, thanks for the tip. Using the tip, I added my data grid successfully. Unfortunately, it overlapped with the header in a visually unpleasant way. Removing the header and footer using the

<script type="text/javascript">
        spiffyui.autoloadHTML = false;
        spiffyui.autoloadCSS = false;
</script>

and using the GWT Layout widgets resolved the rendering issue.

Zack - I was unable to get your trick to work -- the data grid simply never became visible. Incidentally, it appears the error I was getting was due to some initialization happening to the generated code's text box and buttons.

Note : To reduce the problem space I used the cellTable tutorial table in the GWT doc rather than my dynamically generated cell table.
(https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellTable)

I guess I would still be curious as to how I could get this to work without disabling the header and footer, but I can progress using the default layout managers.

Both: Thanks again for your quick responses and help. Your kindness speaks well of you and the project.

All Best,
Travis

[Zack Grossbart]

Hi Travis,

The header and footer probably overlapped in a strange way because your table was added to the main body of your page and it should have been added to the mainContent DIV to work with the header and footer.

You might try tweaking things with your RootPanel to see if you can get the table added to the right DIV.

Good luck,
Zack

From: spif...@googlegroups.com [mailto:spif...@googlegroups.com] On Behalf Of travis.go...@gmail.com
Sent: Thursday, November 15, 2012 11:03 PM
To: spif...@googlegroups.com
Subject: Re: Using GWT Layout Panels with SpiffyUI

[Marcos Lilljedahl]

Remember that you can also insert your widgets in the rootpanel in a container as follows:

RootLayoutPanel.get("ID").add(myDataGridWidget);

Take in count the "ID" field which represent your container id attribute.

Marcos.