How to get a nested div in GWT

Question

Hi

I want to get a nested div in GWT and be able to put a widget in there. Something like this:

<div id="container">
    <div id="content_left">
    </div>
    ...other divs
</div>

I want to be able to get content_left and put a widget in there. So far all RootPanel gets are the divs inside the tag. I also tried using DOM.getElementById(...) but I don't know how to put a widget as the add method specifies the input parameters should be of type child.

Now I don't know a lot about CSS and positioning and I didn't do the styling above. It's something I got from my graphic designer. I reckon this was his way of laying out things. I was already thinking about laying out without having to use an outer div such as the div with id=container above so I wouldn't have this problem in the first place but I'd like to hear if that's a good idea.

Answer 1

GWT provides container widgets for this kind of thing: They generate your DIVs for you, and you can nest them to any depth in accordance with their own rules. You don't really need to use explicit DIVs for anything.

You said

Now I don't know a lot about CSS and positioning and I didn't do the styling above.

That's exactly what GWT is about: You don't need to. You put your GUI together in code and let GWT worry about how to translate it to CSS. Hint: It's much better at it than most of us will ever be. There are workarounds for many, many known browser quirks to make it as cross-platform as humanly possible.

Answer 2

A specific example for the HTML snippet you provided would be something like this. FlowPanels are divs that support adding an arbitrary number of things to them. If you know that a given div will only ever have one widget in it, SimplePanel is probably a better choice.

Regardless though, in general what you want to do is take the HTML that you want to generate and build up the GWT code to output that particular DOM structure. A decent article on how I tend to deal with simpler widgets is tags first gwt.

FlowPanel container = new FlowPanel();
container.setStyleName("container");

FlowPanel contentLeft = new FlowPanel();
contentLeft.setStyleName("content_left");
container.add(contentLeft);

container.add(otherDivs);


//elsewhere in your code:
contentLeft.add(oneWidget);
contentLeft.add(secondWidget);