How can I create a GWT layout which has a fixed header and footer that allows a scroll pane center to automatically size?

Question

I have a design in mind which I'm struggling to convert to a GWT layout.

Basically I need a header and footer which have a fixed pixel height and full browser width, the snag is they must both always be visible to the user.

I've been playing around with the DockLayoutPanel with north and south panels and then adding a scroll panel to the center, this works great when I use Unit.PCT but I need to fix the north and south panels so that they are always a set height in pixels but still allow the center scroll panel to automatically fill the gap between the two.

A picture is worth a thousand words so I drafted up this quickly:

draft design

If you have any ideas how this could be solved I'd be very grateful to hear from you!

Answer 1

final DockLayoutPanel dPanel = new DockLayoutPanel(Unit.PX);

dPanel.addNorth(new FlowPanel(), 48);
dPanel.addSouth(new FlowPanel(), 48);

final Panel centerPanel = new FlowPanel();

for (int i = 0; i < 100; i ++)
  centerPanel.add(new Label("Lorem ipsum"));

dPanel.add(new ScrollPanel(centerPanel));

RootLayoutPanel.get().add(dPanel);

Answer 2

Maybe it's a little bit off topic, BUT, I would suggest for you to use this if it is still not too late and if you have the freedom to choose a design: http://gwtbootstrap.github.com/ Twitter Bootstrap looks nice and it is easy to use, and the kind folks at gwt-bootstrap have ported it into GWT in a way that you can use it in a similar fashion to using standard GWT components. This thing has really simplified our design/layouting problems.