There is two type of layouts: RIA-like and web-page-like. The RIA-like
layout is done using the layout panels. The app stretch to the whole
available space. There is no scrollbars. The web-page-like layout is
done using HTML tags (and some standard panels). The app don't
stretch. If the content is larger than the viewport, scrollbars
appears, like in traditional pages.
Looking at the first screenshot, here is my proposal:
1) The main panel is a DockLayoutPanel attached to RootLayoutPanel.
2) The north slot contains the header.
3) The center slot contains a TabLayoutPanel.
But when you show data (list, form...) you may have no enough space to
show all. Here you start to use web-page-like layout. So:
4) The contain of the contact tab is a LayoutPanel with four slot:
Tighformat, the list, Detail view, Relations.
5) Tighformat, Detail view and Relations are standard panels
(FlowPanel) into ScrollPanels. If there not enough space, a scrollbar
will appear.
6) The list is some sort of DockLayoutPanel with the headers top, the
navigation buttons bottom and the contains of the list in the center
with a scrollbar is needed. The exact implementation depends on the
used widget for the list (SmartGWT, GXT, gwt-incubator...)
