如何使一個小部件填充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。