Question

I’m a newbie in GWT, Is there any way to make StackPanel which expands or collapses Horizontally ? Thank you!!!

Answer 1

use HorizontalSplitPanel and put inside a StackLayoutPanel. I´ve created a UIbinder class DockPanel. Gwt creates for you a xml file with the same name as the class. 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>     

and my 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");   
            }
        });

    }

}    

The code above i used DockLayoutPanel but you could use instead

<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>    

Try it