가로로 확장 가능한 StackPanel을 GWT로 만드는 방법은 무엇입니까?

Question

저는 GWT의 초보자입니다. 수평으로 확장하거나 축소하는 StackPanel을 만들 수있는 방법이 있습니까? 고맙습니다!!!

Answer 1

HorizontalSplitPanel을 사용하고 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이 내장되어 있다고 생각하지 않지만 기존 StackPanel의 코드를 복사하고 수정하여 직접 만들 수 있습니다.