GWT page layout practices

Question

I am making a GWT app based off of an HTML mockup. The mockup has about 4 or 5 different layouts made with divs and css. Right now I have one HTML page with just the basic elements of my layout (header, body, footer). The other layouts are the same thing, with different layouts for the body (i.e. two column, three column). I attempted to add the extra markup the the base template using the following code:

RootPanel.get("main_area").add(html);

Where main_area is the ID of my body div and html is an HTML object with the additional divs for the column layout.

This works fine, but when I try to add some text (or anything) to the divs I added:

RootPanel.get("left_column").add(new Label("test"));

I get the following error:

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)
    at com.google.gwt.user.client.ui.RootPanel.get(RootPanel.java:197)

I assume that I'm going about this completely wrong, but I have no idea what the correct way of doing this would be.

Answer 1

You may want to look into HTMLPanel.

i.e.

HTMLPanel hpanel = new HTMLPanel("<div id='morehtml'></div>");
hpanel.add(new Label("Hello, I am inside morehtml"), "morehtml");

RootPanel.get("main_area").add(hpanel);

Answer 2

I usually have an div which is the entry point and then I build all my GWT layout from that, e.g. ( not checked in IDE):

Panel root = RootPanel.get("entryPoint");
VerticalPanel rows = new VerticalPanel();
rows.add(new Label("Row 1"));
rows.add(new Label("Row 2"));
root.add(contents);