How to get a sub-tray in GWT

Question

I want to get nested divs in GWT and be able to place the widget there. Something like that:

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

I want to have access to content_left and post the widget there. So far, all RootPanel gets the div in the tag. I also tried using DOM.getElementById (...), but I don’t know how to place the widget, since the add method indicates that the input parameters should be of type child.

Now I don’t know much about CSS and positioning, and I didn’t do the style above. This is what I got from my graphic designer. I think that was his way of putting things out. I already thought about laying out without using an external div, such as a div with id = container above, so I would not have this problem in the first place, but I would like to hear if this is a good idea.

Answer 1

GWT provides container widgets for these kinds of things: they generate your DIVs for you, and you can nest them at any depth according to your own rules. You really don't need to use explicit divs for anything.

you said

Now I don’t know much about CSS and positioning, and I didn’t do the style above.

Exactly what GWT is: you don't need to. You combine your GUI into code and let GWT worry about how to translate it into CSS. Hint: this is much better than most of us will ever be. There are workarounds for many, many well-known browser adventures to make it as cross-platform as possible.

Answer 2

The specific example of the HTML snippet you provided will be something like this. FlowPanels are divs that support adding any number of things to them. If you know that this div will have only one widget, SimplePanel is probably the best choice.

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

 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 produces a high-quality code layout, you should use it, but only if you know all the risks and compatibility issues and do not care or you have the opportunity to check your layouts.

Assuming all these things, I find this approach extremely effective ..

Just create your widgets from HTMLPanel and use divs as you want, only swap first class objects to present 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 that you can still use your obfuscation styles with vanilla divs / spans, etc. or mix and match!

Answer 4

You can change (or inform your designer about the change) your html to

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

And in your code use:

 FlowPanel panel = new FlowPanel(); RootPanel.get("qq").add(panel); panel.add(w1); panel.add(w2); ... 

Answer 5

Welcome to UIBinder http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html

supports custom HTML + widgets

"simplifies interaction with user interface designers who are more comfortable with XML, HTML and CSS than Java source code"