TurboManage

David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler


    Web app developer since 1994 and former Developer Advocate with Google now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 242 other followers

  • Sleepless Nights…

    January 2010
    S M T W T F S
    « Dec   Feb »
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
  • Blog Stats

    • 849,257 hits

GWT layout gotcha

Posted by David Chandler on January 12, 2010

I previously wrote about GWT layout with HTML and CSS. One gotcha I’ve found is that you must be careful not to attach a widget to a DIV nested inside a DIV that is attached to a widget. By way of negative example, consider this HTML:

<div id="main">
	<div id="app">
		<div id="detail_header"></div>
	</div>
</div>

Because the detail_header DIV is nested inside the main DIV, this will fail:

		RootPanel.get("main").add(contentContainerPresenter.getDisplay().asWidget());
		RootPanel.get("detail_header").add(userPresenter.getDisplay().asWidget());

The error message is not particularly obvious, which is why I wrote this post:

[ERROR] Uncaught exception escaped
java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list
at com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:122)

The solution is simply to untangle the DIVs by making them siblings instead of nested:

<div id="main">
	<div id="detail_header"></div>
	<div id="app"></div>
</div>

2 Responses to “GWT layout gotcha”

  1. Hi, your blog is really helpful. Thank you!

    I’m encountering this same error, but am not sure how best to fix it. I have a GWT app where the entire UI is generated programmatically, so the HTML document is essentially just an empty . The top-level component is TabLayoutPanel that divides up the app into several screens.

    On one screen, I have use a GWT HTML widget inside a DockLayoutPanel which I then use a JSNI function to populate with a Google Map (api v3). This same JSNI function creates a Map InfoWindow with a content that I want to then populate with some more GWT components. When I call RootPanel.get(“info-window-div”) I get the exception since the div is underneath the GWT hierarchy.

    Is the design of my application wrong, or is there some viable workaround? My goal was to use GWT for all the layout and application chrome, but now I’m starting to doubt that this is doable.

    Any advice would be appreciated
    Thanks,
    Ivan…

    PS – I tried using the GWT Maps API library but found that it’s almost a year and a half out of date, so I opted for the JSNI approach.

    • Thanks, Ivan. It sounds like you should make info-window-div a sibling of the DockLayoutPanel rather than a child div. I think you won’t be able to use a single div for all layout if there is a mix of GWT and non-GWT divs in the hierarchy because there’s no way to add a child Widget to a non-Widget.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: