Full page GWT layout like an usual webpage

I'm trying to make such a layout using GWT. It is really annoying me, because it doesn't look how i want to. There is always something overlapping, hidden, to large or just on a wrong position.

I simply want to make this layout:

I'm working on this for a couple hours with no result :(

The layout should fill the whole browser, but without a scrollbar! The header should contain an image and an label The Menu is the Menu object from gwt and the content is changing, depending on which l开发者_运维技巧istitem was clicked

Help pls ....

From personal experience, and per google's own recommendations, I'd suggest looking into the UIBinder.

Also, I'd recommend inserting some "overflow buffers" between your panels. I.e, you have 100px allocated for your nothern most panel. Shrink it's size down to say 96, allowing for +/-2px of room between it and the next panel. This will allow for any sizing/layout errors among different computers and browsers to be somewhat compensated for- at little cost.

Using UiBinder you could use two nested DockLayoutPanels to achieve this Layout. I haven't tested it myself but something like this should work (add the DockLayoutPanel to the RootLayoutPanel )

<g:DockLayoutPanel unit='PX'>
  <g:north size='100'>
    <g:HTMLPanel>PUT HERE LABEL AND IMAGE </g:HTMLPanel>
  </g:north>
  <g:center>
     <g:DockLayoutPanel unit='PX'>
         <g:north size='30'>
              MENU 
             </g:north>
         <g:center>
               MAIN BODY
         </g:center>
     </g:DockLayoutPanel>
  </g:center>
  <g:west size='130'>
    <g:ListBox>
    </g:ListBox>
  </g:west>
</g:DockLayoutPanel>

I've just tested the following solution and it looks and works exactly as you described. I used uiBinder, but it is not mandatory to use it. the ui xml code is:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
    .important {
        font-weight: bold;
    }
    .header_bar{
        position:absolute;
        top:0px;
        left:0px;
        height: 100px;
        right:0px;
        background-color: red;
    }

    .left_bar{
        position:absolute;
        top:100px;
        left:0px;
        bottom:0px;
        width: 130px;
        background-color: green;
    }

    .menu_bar{
        position:absolute;
        top:100px;
        left:130px;
        height: 30px;
        right:0px;
        background-color: yellow;
    }
    .content{
        position:absolute;
        top:130px;
        left:130px;
        right: 0px;
        bottom: 0px;
    }
</ui:style>
<g:HTMLPanel>
<div class="{style.header_bar}">
    <g:FlowPanel ui:field="headerPanel"></g:FlowPanel> 
</div>
<div class="{style.left_bar}">
    <g:FlowPanel ui:field="leftPanel"></g:FlowPanel>
</div>
<div class="{style.menu_bar}">
    <g:FlowPanel ui:field="menuPanel"></g:FlowPanel>
</div>
<div class="{style.content}">
    <g:FlowPanel ui:field="contentPanel"></g:FlowPanel>
</div>
</g:HTMLPanel>

And the java file code is:

public class TestLayout extends Composite {

private static TestLayoutUiBinder uiBinder = GWT
        .create(TestLayoutUiBinder.class);

interface TestLayoutUiBinder extends UiBinder<Widget, TestLayout> {
}

public TestLayout() {
    initWidget(uiBinder.createAndBindUi(this));
    headerPanel.add(new Label("Head!"));
    leftPanel.add(new Label("Left!"));
    menuPanel.add(new Label("Menu!"));
    contentPanel.add(new Label("Content!"));
}

@UiField
FlowPanel headerPanel;

@UiField
FlowPanel leftPanel;

@UiField
FlowPanel menuPanel;

@UiField
FlowPanel contentPanel;
}

I hope I've helped.