GWT：带框架的站点布局答案

【问题标题】：GWT: Site layout with framesGWT：带框架的站点布局
【发布时间】：2015-06-09 20:26:02
【问题描述】：

我不是真正的网络开发人员，所以如果我的词汇量有限，请见谅。

我想做的是创建一个标题和一个主要内容面板。主内容面板应在左侧包含一个可滚动的菜单。另一方面，标题应固定。左侧的菜单也应该静态地位于内容面板旁边的垂直位置上。

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

问题是我已经遇到了标题问题。我用过这个：

<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>

我正在像这样设置标题的位置：

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);
        }
    });
}

但一方面这里的问题是页脚在闪烁，如果向下滚动，内容就会显示在其上方。

我没有考虑是否应该使用框架集之类的东西，但我不确定这是否是这里的方法。

有什么建议可以设置这个布局吗？

【问题讨论】：

首先，您是否真的需要依赖 xml/gwt 来进行布局，还是更喜欢纯 HTML/CSS 解决方案？
@AGE 在这种特殊情况下，我认为我更喜欢 xml/gwt 解决方案。我想这就是去这里的方式，对吧？由于我没有经验，如果您告诉我 HTML/CSS 解决方案会更好，我会相信您，因为 x 的原因。 ^^
这是一个事实，HTML/CSS 会帮助你很多，如果不是 CSS 的话。我可以为您提供一个非常简单的示例，您可以在代码中扩展它，我们可以讨论任何自定义工作：（我现在需要通勤回家，所以我们稍后会联系）。 jsfiddle.net/AGE/nctyx27m

标签： css xml gwt

【解决方案1】：

这不是DockLayoutPanel 的确切用例吗？您可以在Showcase 中看到它的实际效果。

就 UiBinder 而言，它看起来像 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>

【讨论】：