如何使GWT水平擴展StackPanel？

Question

我是GWT的新手，有沒有辦法讓StackPanel水平擴展或摺疊？謝謝！！！

Answer 1

使用Horizo​​ntalSplitPanel並放入StackLayoutPanel。我創建了一個UIbinder類DockPanel。 Gwt爲您創建一個與該類同名的xml文件。 DockPanel.ui.xml

<!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> 
     .important { font-weight: bold;} 
     .westPanel{background-color: #EEE;} 
     .northPanel{background-color: #39F; 
       border-width: 1px; 
       border-style: solid; 
       border-color: blue;} 
      .h2 {color: #cacaca; 
       text-align: center; 
       font-family: Arial, Helvetica; 
       font-weight: bold; 
       font-size: 1.3em;} 
     .southPanel{background-color: #99C;} 
     .centerPanel{background-color: #FFC;} 
     .botaoR{width: 120px; 
      height: 40px; 
      cursor: pointer;} 
    </ui:style> 

    <g:DockLayoutPanel unit='EM'> 

     <g:north size='2'> 
      <g:FlowPanel styleName="{style.northPanel}"> 
       <g:Label styleName="{style.h2}" text="Gestor de Horarios"/> 
      </g:FlowPanel> 
     </g:north> 

<!-- Aqui foi inserido um StackPanel dentro do DockPanel tipo Acordeao --> 
    <g:west size="15"> 
     <g:StackLayoutPanel unit='EM'> 
      <g:stack> 
       <g:header size='3'> 
        Docentes 
       </g:header> 
        <g:Button styleName="{style.botaoR}" ui:field="botao" text="Ver Docentes" /> 
      </g:stack> 
      <g:stack> 
       <g:customHeader size='3'> 
        <g:Label>Cursos</g:Label> 
       </g:customHeader> 

       <g:VerticalPanel> 
        <g:Label>Exemplo </g:Label> 
        <g:Label>Exemplo </g:Label> 
        <g:Label>Exemplo </g:Label> 
        <g:Label>Exemplo </g:Label> 
       </g:VerticalPanel> 

      </g:stack> 
      <g:stack> 
       <g:customHeader size='3'> 
        <g:Label>Turmas</g:Label> 
       </g:customHeader> 
        <g:Label>Mais uma turma para adicionar, olarilolela</g:Label> 
      </g:stack> 
     </g:StackLayoutPanel> 
    </g:west> 

     <g:center> 
      <g:FlowPanel styleName="{style.centerPanel}"> 
       <g:Label>Painel Central</g:Label> 
      </g:FlowPanel> 
     </g:center> 

     <g:south size ='2'> 
      <g:FlowPanel styleName="{style.southPanel}"> 
       <g:Label>Painel de Rodape</g:Label> 
      </g:FlowPanel> 
     </g:south> 

    </g:DockLayoutPanel>  
</ui:UiBinder>  

和我DockPanel.java（）

import com.google.gwt.core.client.GWT; 
import com.google.gwt.event.dom.client.ClickEvent; 
import com.google.gwt.event.dom.client.ClickHandler; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.uibinder.client.UiField; 
import com.google.gwt.user.client.Window; 
import com.google.gwt.user.client.ui.Button; 
import com.google.gwt.user.client.ui.Composite; 
import com.google.gwt.user.client.ui.Widget; 


public class DockPanel extends Composite { 

    private static DockPanelUiBinder uiBinder = GWT 
      .create(DockPanelUiBinder.class); 

    interface DockPanelUiBinder extends UiBinder<Widget, DockPanel> { 
    } 

    @UiField Button botao; 
    public DockPanel() { 
     initWidget(uiBinder.createAndBindUi(this)); 

     //Botao para mostrar qq coisa 
     botao.addClickHandler(new ClickHandler() { 
      @Override 
      public void onClick(ClickEvent event) { 
       //Aqui coloquei um link, mas depois sera colocado uma accao 
       Window.Location.assign("http://www.sapo.pt"); 
      } 
     }); 

    } 

}  

上面我使用的代碼DockLayoutPanel但你可以使用，而不是

<g:HorizontalSplitPanel width="1024px" height="768px" splitPosition="200x" styleName="{style.resize-bar}"> 

...put here the code for StackLayoutPanel.... 
... create a css style for resize-bar 

</g:HorizontalSplitPanel>  

試試吧

Answer 2

我不認爲有一個內置的水平堆棧面板，但您可以通過複製和修改現有StackPanel的代碼來創建自己的堆棧面板。