GWT：带框架的网站布局

Question

I'm not really a web developer so please excuse me if my vocabulary is kind of limited.

What I want to do is to create a header and a main-content panel. The main content panel should contain a menu on the left side and scrollable. The header on the other hand shall be fixed. The menu on the left side is also supposed to reside statically on its vertical position next to the content panel.

|- - - - - - - - - - - - - - -|
| Header (fixed)              |
|- - - - - - - - - - - - - - -|
|          |                | |
| | - - - -|                | |
| | Menu   |                | |
| |(fixed) |  Main-Content  | |
| |        |  (scrollable)  | |
| |- - - - |                | |
|          |                | |
|          |                | |
|- - - - - |- - - - - - - - |-|

The thing is that I'm having already troubles witht the header. I've used this:

<ui:style>
    .home_header {
    background-color: #FFC400;
    margin:0px;
    width:100%;
    height:90px;
    position: relative;
    }

    .home_main {
    margin-top:90px;
    }
</ui:style>

<g:VerticalPanel width="100%" height="100%">

    <!-- For now this is empty -->
    <g:DeckPanel ui:field="headerPanel" styleName="{style.home_header}">
    </g:DeckPanel>

    <g:HorizontalPanel horizontalAlignment="ALIGN_CENTER" width="100%" styleName="{style.home_main}">
        <g:ScrollPanel>
            <g:DockPanel>
                <g:Dock direction="CENTER">
                    <g:HTMLPanel ui:field="mainContentPanel" width="1024px" height="1005"> 
                    ...
                    </g:HTMLPanel>
                </g:Dock>
            </g:DockPanel>
        </g:ScrollPanel>

    </g:HorizontalPanel>
</g:VerticalPanel>

and I'm setting the position of the header like this:

public UIHome() {
    initWidget(uiBinder.createAndBindUi(this));     
    Window.addWindowScrollHandler(new Window.ScrollHandler() {
        @Override
        public void onWindowScroll(
                com.google.gwt.user.client.Window.ScrollEvent event) {
            headerPanel.getElement().getStyle().setTop(event.getScrollTop(), Unit.PX);
        }
    });
}

But the problem here on the one hand is that the footer is flickering on the one hand and the content gets displayed above it if one scroll down.

I was not thinking if I should use something like a frameset but I am not sure if that's the way to go here.

Any suggestions how I could set up this layout?

Answer 1

Isn't this the exact use case for DockLayoutPanel ? You can see it in action in the Showcase .

In terms of UiBinder, it'd look something like this :

<g:DockLayoutPanel unit='EM'>
  <g:north size='5'>
    <g:DeckPanel ui:field="headerPanel" styleName="{style.home_header}" />
  </g:north>
  <g:center>
    <g:ScrollPanel>
        <g:HTMLPanel ui:field="mainContentPanel" width="1024px" height="1005"> 
            ...
        </g:HTMLPanel>
    </g:ScrollPanel>
  </g:center>
  <g:west size='192'>
    <g:HTML>
      <ul>
        <li>Sidebar</li>
        <li>Sidebar</li>
        <li>Sidebar</li>
      </ul>
    </g:HTML>
  </g:west>
</g:DockLayoutPanel>