如何使一个小部件填充GWT中VerticalLayout的空间

Question

编辑包含以下建议：此代码块现在可用于生成屏幕截图中的布局;

我有一个UIBinder，我试图做一个布局，使内容窗格有一个主要部分填充可用的宽度和高度，将页脚推到底部。我试过了;

<!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> 
.eastPanel { 
     background-color: #F60; 
    } 

    .westPanel { 
     background-color: #EEE; 
    } 

    .northPanel { 
     background-color: #39F; 
    } 

    .southPanel { 
     background-color: #99C; 
    } 

    .centrePanel { 
     background-color: #FFC; 
    } 

    .headerPanel { 
     font-weight: bold; 
     background-color: #37B6CE; 
    } 

    .mainPanel { 
     font-weight: bold; 
     background-color: #123; 
    } 

    .footerPanel { 
     font-weight: bold; 
     background-color: #206876; 
    } 
</ui:style> 
<g:DockLayoutPanel unit='EM'> 
    <g:north size='8'> 
     <g:FlowPanel styleName="{style.northPanel}"> 
      <g:SimplePanel ui:field="northPanel" /> 
      <g:Label>This is the NORTH panel</g:Label> 
     </g:FlowPanel> 
    </g:north> 
    <g:west size='13'> 
     <g:FlowPanel styleName="{style.westPanel}"> 
      <g:SimplePanel ui:field="westPanel" /> 
      <g:Label>This is the WEST panel</g:Label> 
     </g:FlowPanel> 
    </g:west> 
    <g:center> 
     <g:LayoutPanel styleName="{style.centrePanel}" ui:field="centrePanel"> 
      <g:layer top="0em" height="2em"> 
       <g:HTMLPanel styleName="{style.headerPanel}" ui:field="headerPanel">     
       fixed header - usually a search box 
       </g:HTMLPanel> 
      </g:layer> 
      <g:layer top="2em" bottom="2em"> 
       <g:HTMLPanel styleName="{style.mainPanel}" ui:field="meainPanel"> 
Expanding main area 
       </g:HTMLPanel> 
      </g:layer> 
      <g:layer bottom="0px" height="2em"> 
       <g:HTMLPanel styleName="{style.footerPanel}" ui:field="footerPanel"> 

       fixed footer - maybe some copyright information 
       </g:HTMLPanel> 
      </g:layer> 
     </g:LayoutPanel> 
    </g:center> 

    <g:east size='0'> 
     <g:FlowPanel styleName="{style.eastPanel}"> 
      <g:Label>This is the EAST panel</g:Label> 
     </g:FlowPanel> 
    </g:east> 
    <g:south size="0"> 
     <g:FlowPanel styleName="{style.southPanel}"> 
      <g:Label>This is the SOUTH panel</g:Label> 
     </g:FlowPanel> 
    </g:south> 
</g:DockLayoutPanel> 

`

这是老代码，没有工作的原因，而是用一个表来尝试布局主要内容的区域;

<!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" xmlns:wids="urn:import:org.limepepper.JavaCart.gwt.ui.client.widgets"> 
<ui:style> 
    .mainPanel { 
     background-color: #AFC; 
     width: 100%; 
     height: 100%; 
    } 
</ui:style> 
<g:DockLayoutPanel unit='EM'> 
    <g:north size='8'> 
     <g:FlowPanel styleName="{style.northPanel}"> 
      <g:SimplePanel ui:field="northPanel" /> 
      <g:Label>This is the NORTH panel</g:Label> 
     </g:FlowPanel> 
    </g:north> 
    <g:west size='13'> 
     <g:FlowPanel styleName="{style.westPanel}"> 
      <g:SimplePanel ui:field="westPanel" /> 
      <g:Label>This is the WEST panel</g:Label> 
     </g:FlowPanel> 
    </g:west> 
    <g:center> 
     <g:HTMLPanel> 
      <g:VerticalPanel> 
       <g:HTMLPanel> 
        A heade panel 
       </g:HTMLPanel> 
       <g:HTMLPanel styleName="{style.mainPanel}"> 
       I want this panel to fill the space 
       th 
       rh 
       tr 
       h 
       <br> 
       </br> 
       <br></br> 
       <p></p> 

       </g:HTMLPanel> 
       <g:HTMLPanel> 
        Footer here 
       </g:HTMLPanel> 
      </g:VerticalPanel> 

     </g:HTMLPanel> 
    </g:center> 
    <g:east size='0'> 
     <g:FlowPanel styleName="{style.eastPanel}"> 
      <g:Label>This is the EAST panel</g:Label> 
     </g:FlowPanel> 
    </g:east> 
    <g:south size="0"> 
     <g:FlowPanel styleName="{style.southPanel}"> 
      <g:Label>This is the SOUTH panel</g:Label> 
     </g:FlowPanel> 
    </g:south> 
</g:DockLayoutPanel> 

`

但这并不填补空间，我能做到这一点编程，但我相信有一些GWT的方法来使用。

Answer 1

首先，您必须认识到，VerticalPanel如何实现以及它如何布置其子部件。如果你检查你的页面生成的HTML，你会立即看到它被实现为<table>。

一旦你意识到这一点，你可以马上看到，没有多少与VerticalPanel或<table>标签搞砸的事情可以让你达到你想要的效果。

执行DockLayoutPanel的<g:center/>的正确方法是使用LayoutPanel并使用它的<g:layer>...</g:layer>子元素来定位页眉，页脚和内容。 LayoutPanel（很像DockLayoutPanel）使用绝对定位来定位其图层，以达到像素完美的位置。

因此，这里是它应该是什么样子：

... 
<g:center> 
    <g:layer top="0px" height="YOUR HEADER HEIGHT"> 
    <g:HTMLPanel> 
     A heade panel 
    </g:HTMLPanel> 
    </g:layer> 
    <g:layer top="YOUR HEADER HEIGHT" bottom="YOUR FOOTER HEIGHT"> 
    <g:HTMLPanel styleName="{style.mainPanel}"> 
     I want this panel to fill the space 
    </g:HTMLPanel> 
    </g:layer> 
    <g:layer bottom="0px" height="YOUR FOOTER HEIGHT"> 
    <g:HTMLPanel> 
     Footer here 
    </g:HTMLPanel> 
    </g:layer> 
</g:center> 
... 

这足以说明在X或Y轴2个坐标的层和LayoutPanel将使层内的小部件占用全部可用空间在另一个轴上。因此，如果您指定了top和height值，则小部件将占用横轴上的所有可用空间，并位于top坐标处并指定height。

Answer 2

您可以嵌入另一个DockLayoutPanel作为外部DockLayoutPanel的center小部件。

即：

<g:DockLayoutPanel unit='EM'> 
... 
    <g:center> 
      <g:DockLayoutPanel unit="EM" width="100%" height="100%"> 
       <g:center> 
        <g:HTMLPanel> 
         I want this panel to fill the space 
        </g:HTMLPanel> 
       </g:center> 
       <g:north size="3"> 
        <g:HTMLPanel> 
         A header panel 
        </g:HTMLPanel> 
       </g:north> 
       <g:south size="3"> 
        <g:HTMLPanel> 
         Footer here 
        </g:HTMLPanel> 
       </g:south> 
      </g:DockLayoutPanel> 

    </g:center> 
... 

DockLayoutPanel是一个专门LayoutPanel。 LayoutPanel可让您将相对于其自身边缘的东西放置，当您想要将某物放到其容器底部时，这非常有用（例如）。如果您需要比DockLayoutPanel更先进的东西，我建议您查看LayoutPanel。