2

我正在使用 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>
4

3 回答 3

3

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

[1]HeaderPanel没有实施ProvidesResize，因为它只履行其中间面板的合同。

于 2013-03-11T12:21:50.373 回答
1

以下方法对我有用。它基于 Zack Linder 的建议 Google Web Toolkit ›布局面板问题

(1) 将 HeaderLayoutPanel 附加到您的 RootLayoutPanel。headerLayoutPanel 是您创建的扩展 HeaderPanel 并实现 ProvidesResize() 的类。

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。页眉和页脚小部件被分配了一个固定的高度（例如菜单栏高度），并且它们的宽度会自动调整为面板的宽度。中心小部件应该是 ProvidesSize。我使用了一个布局面板。例如，

 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) 将包含我在单独的 Composite 中定义的 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;
       }
    }

希望这可以帮助！

于 2013-12-14T20:30:37.653 回答
0

DockLayourPanel好吧，我无法解决这个问题，但是对于未来的访问者：使用带有北、中和南组件的 a可以实现相同的（减去我无法解决的问题） 。

于 2013-03-11T11:45:51.780 回答