Question

我正在使用GWT HeaderPanel。作为中间元素，我使用DockLayoutPanel如下：

<g:DockLayoutPanel width="1200px" height="100%">
    <g:west size="220">
        <g:HTMLPanel styleName="{style.debug}">
            something <br />
            something <br />
        </g:HTMLPanel>
    </g:west>
</g:DockLayoutPanel>

页面呈现正常，但是，如果浏览器窗口垂直收缩，则中间面板位于页脚顶部，这当然不是您想要的标题面板。

我更喜欢使用固定的页脚，这就是为什么我不使用DockLayoutPanel做整件事。我究竟做错了什么？谢谢！

编辑：好的，实际上，如果窗口垂直生长，中间面板仍然不会调整大小

EDIT2：HeaderPanel直接位于根面板中，如下所示：

<g:HeaderPanel>
    <my.shared:Header></my.shared:Header>
    <my.shared:Middle></my.shared:Middle>
    <my.shared:Footer></my.shared:Footer>
</g:HeaderPanel>

Answer 1

布局面板101：HeaderPanel是RequiresResize面板，因此必须将其放入ProvidesResize面板，例如RootLayoutPanel，或作为中间面板一个HeaderPanel [1]）或给定一个明确的固定大小。

[1] HeaderPanel没有实现ProvidesResize，因为它只履行了中间小组的合同。

Answer 2

以下方法对我有用。这是基于Zack Linder的建议 Google Web Toolkit ›layout panel problem

（1）将HeaderLayoutPanel附加到RootLayoutPanel。 headerLayoutPanel是您创建的类，它扩展了HeaderPanel并实现了ProvideResize（）。

import com.google.gwt.user.client.ui.HeaderPanel;
import com.google.gwt.user.client.ui.ProvidesResize;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.Widget;

public class HeaderLayoutPanel extends HeaderPanel implements ProvidesResize {
SimpleLayoutPanel contentPanel;

public HeaderLayoutPanel() {
    super();
    contentPanel=new SimpleLayoutPanel();
}

    @Override
    public void setContentWidget(Widget w) {
       contentPanel.setSize("100%","100%");
       contentPanel.setWidget(w);
       super.setContentWidget(contentPanel);
    }

    public void onResize() {
      int w=Window.getClientWidth();
      int h=Window.getClientHeight();
      super.setPixelSize(w, h);
    }
}

（2）接下来，实例化一个HeaderLayoutPanel。页眉和页脚小部件已分配一个固定的高度（例如菜单栏高度），它们的宽度自动调整到面板的宽度。中心窗口小部件应该是ProvideSize。我使用了LayoutPanel。例如，

 public class AppViewer extends Composite implements MyApp.AppDisplay {

private HeaderLayoutPanel allContentsPanel;
MenuBar menuBarTop;
MenuBar menuBarBottom;
LayoutPanel dataPanel;

public AppViewer() {

    allContentsPanel = new HeaderLayoutPanel(); 
    menuBarTop = new MenuBar(false);
    menuBarBottom = new MenuBar(false);
    dataPanel = new LayoutPanel();

    menuBarTop.setHeight("30px");
    menuBarBottom.setHeight("20px");

    allContentsPanel.setHeaderWidget(menuBarTop);       
    allContentsPanel.setFooterWidget(menuBarBottom);                            
    allContentsPanel.setContentWidget(dataPanel);

    initWidget(allContentsPanel);
}


@Override
public void doOnResize() {
    allContentsPanel.onResize();
}   
  }

（3）中心小部件（LayoutPanel）将保存DeckLayoutPanel，我在单独复合（但你可以做任何你想做的事）。例如，

    public class MyDataView extends Composite implements MyDataPresenter.DataDisplay {      
        private DockLayoutPanel pnlAllContents;
    private HorizontalPanel hpnlButtons;
    private HorizontalPanel hpnlToolbar;
    private VerticalPanel pnlContent;

    public MyView() {
    pnlAllContents=new DockLayoutPanel(Unit.PX);
    pnlAllContents.setSize("100%", "100%"); 
    initWidget(pnlAllContents);

    hpnlToolbar = new HorizontalPanel();
    hpnlToolbar.setWidth("100%");   
    pnlAllContents.addNorth(hpnlToolbar, 30);

    hpnlButtons = new HorizontalPanel();
    hpnlButtons.setWidth("100%");
    pnlAllContents.addSouth(hpnlButtons,20);

    pnlContent=new VerticalPanel(); 
    //center widget - takes up the remainder of the space
    pnlAllContents.add(pnlContent);

    ...
         }
}

（4）最后，所有内容都在onModuleLoad（）类中绑定在一起：AppViewer生成显示添加到RootLayoutPanel，MyDataView生成display.asWidget（）这是添加到容器中的。例如，

public class MyApp implements EntryPoint,Presenter{

  private HasWidgets container=RootLayoutPanel.get();
  private static AppDisplay display;  
  private DataPresenter dataPresenter;

    public interface AppDisplay extends Display{
        @Override
        Widget asWidget();
        HasWidgets getContentContainer();
        void doOnResize();
        }

    @Override
    public void onModuleLoad() {
        display=new AppViewer();
        dataPresenter = new DataPresenter();
        display.getContentContainer().add(dataPresenter.getDisplay().asWidget());
        container.add(display.asWidget());
        bind();
        }

       @Override
       public void bind() {

    Window.addResizeHandler(new ResizeHandler() {
        @Override
        public void onResize(ResizeEvent event) {
            display.doOnResize();
        }
    });
        }


       @Override
       public com.midasmed.client.presenter.Display getDisplay() {
        return display;
       }
    }

希望这有帮助！

Answer 3

好吧，我无法解决这个问题，但对于未来的访问者：使用带有北，中，南组件的DockLayourPanel可以实现同样的目标（减去我无法修复的问题）

GWT HeaderPanel中的中间元素的高度

3 个答案: