How to get a nested div in GWT

Question

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);

Answer 3

If you have a designer who is producing quality layout code, you should use it but only if you are aware of all the risks and compatibility issues and don't care or have the capacity to test your layouts..

Assuming all these things, Im finding this approach extremely efficient..

Simply build your widgets from a HTMLPanel and use divs as you wish only swapping to First Class objects to represent your layout when you need programmatic control

    <g:HTMLPanel >

            <div class="normal style classes {obfuscated.style.class}">
                    <g:FlowPanel ui:field="programmaticPanel" stylePrimaryName="style">
                            <g:HTMLPanel>
                                    <p>CONTENT</p>
                            </g:HTMLPanel>
                    </g:FlowPanel>
            </div>

    </g:HTMLPanel >

Note you can still use your obfuscated styles with the vanilla divs/spans etc. or mix and match!