GWT TabLayoutPanel inside ScrollPanel

Question

I'm trying very hard to understand GWT's layout system that they introduced in 2.0. It's supposedly recommended, but it seems much more complex that the old way.

What I want to do, (which I feel is a very basic design) is build an application with a header, left vertical menu, footer, and a scrolling content section.

So, to do that, you do this:

DockLayoutPanel panel = new DockLayoutPanel();

FlowPanel header = new FlowPanel();
FlowPanel menu = new FlowPanel();
FlowPanel footer = new FlowPanel();

ScrollPanel content = new ScrollPanel();

panel.addNorth(header);
panel.addWest(menu);
panel.addSouth(footer);

panel.add(content);

RootLayoutPanel.get().add(panel);

That works perfectly fine. Except, the ScrollPanel (where all content goes) apparently breaks the layout flow. So, in my activity, I have:

@Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
    FlowPanel viewPanel = new FlowPanel();

    panel.add(viewPanel);
}

If I add a TabLayoutPanel to the viewPanel, it will not display correctly. I have to add it to a LayoutPanel that is attached to a LayoutPanel that is attached to a LayoutPanel, etc. all the way up to the RootLayoutPanel.

So, I try this:

@Override
public void start(AcceptsOneWidget panel, EventBus eventBus)
{
    LayouPanel viewPanel = new LayoutPanel();

    panel.add(viewPanel);
}

And in my ui:binder, I have:

<g:LayoutPanel>
    <g:layer>
        <g:TabLayoutPanel barHeight="3.33" barUnit="EM" height="500px">
            <!-- tabs go here -->
        </g:TabLayoutPanel>
    </g:layer>
</g:LayoutPanel>

So 2 things here.

1. I don't want to set the height. I want the tab panel to be as big as the content. I don't get why you have to set heights in this "better" method of laying out your app.

2. It still doesn't show on the screen at all. I'm assuming because it's being attached to the ScrollPanel. What confuses me is that ScrollPanel does indeed implement RequiresSize and ProvidesResize, so is it not a valid LayoutPanel? That's literally all LayoutPanel does. It's a ComplexPanel that implements those interfaces

When I inspect the page, and hover over where the TabLayoutPanel should be, I get a blue highlight (in Chrome) as if it were there, but it seems the

<g:layer> 

that wraps it has no height, so it hides the TabLayoutPanel. In fact, if I edit it in the viewer to have a height, the TabLayoutPanel does show.

Am I doing something fundamentally wrong here? I would very much like to do:

RootLayoutPanel > DockLayoutPanel > ScrollPanel > *Some Container > TabLayoutPanel

And for things to just... work. I'm trying to convert my current app to this new layout stuff to get rid of all the tables that get generated under the hood, but it seems to cause more problems than it fixes.

*This container has things above and below the Tab Panel

Answer 1

ScrollPanel in your proposed layout will occupy space given to it by DockLayoutPanel. If "Some Container" is never larger than space allocated to ScrollPanel, ScrollPanel will never scroll. If "Some Container" may become larger (i.e. the need for scrolling), then this container cannot get its size from ScrollPanel - its height should either be set explicitly, or it should be a regular FlowPanel which grows with its content. In both of these cases, this "Some Container" will not be able to provide any size to its children, including TabLayoutPanel.

It's hard to give advice without seeing the requirements, but if you need to include a TabLayoutPanel inside a panel that grows with its own content, you must set its height yourself - in code or CSS.