Como faço para embrulhar um StackLayoutPanel em um DecoratorPanel usando UiBinder?

Question

Depois de ter criado com sucesso uma interface não-trivial programaticamente usando GWT, eu estou tentando recriar a mesma interface do usuário usando UiBinder. Eu nunca usei qualquer tipo de sistema de interface declarativa antes e, embora eu estou fazendo progresso e pode ver os benefícios de tal abordagem, estou deixando de obter um DecoratorPanel para embrulhar um StackLayoutPanel corretamente.

StackNavigator.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class StackNavigator extends Composite {

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

    interface StackNavigatorUiBinder extends UiBinder<Widget, StackNavigator> {}

    public StackNavigator() {
        initWidget(uiBinder.createAndBindUi(this));
    }

}  

StackNavigator.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" xmlns:bandmates="urn:import:org.redboffin.bandmates.client">

    <ui:style>  
        .gwt-DecoratorPanel {
            width: 200px;
            height: 200px;
        }
        .gwt-DecoratorPanel .middleCenter {
            height: 100%;
            width: 100%;
        }
    </ui:style>

    <g:DecoratorPanel>
        <g:StackLayoutPanel unit='PX'>
            <g:stack>
                <g:header size='20'>Item One</g:header>
                <g:Label>TODO : Item One List Widget</g:Label>
            </g:stack>
            <g:stack>
                <g:header size='20'>Item Two</g:header>
                <g:Label>TODO : Item Two List Widget</g:Label>
            </g:stack>
             <g:stack>
                <g:header size='20'>Item Three</g:header>
                <g:Label>TODO : Item Three List Widget</g:Label>
            </g:stack>
        </g:StackLayoutPanel> 
    </g:DecoratorPanel>

</ui:UiBinder>

Sem ser envolvido na DecoratorPanel, as telas e funções StackLayoutPanel como esperado. Quando envolto na DecoratorPanel, o StackLayoutPanel não pode ser visto. Em seu lugar é um círculo azul minúsculo, que eu estou supondo que é canto gráficos do DecoratorPanel agrupados em conjunto com força. É por isso que eu tenho tentado definir uma largura e altura na DecoratorPanel e definir a área central a 100%, conforme sugerido na API GWT.

Ele não faz o que eu esperava, então eu devo ser mal-entendido alguma coisa aqui. Alguém pode ajudar?

Obrigado: -)

Answer 1

LayoutPanels não funcionam bem, se eles não estão contidos em algo que ProvidesResize, essencialmente outra LayoutPanel de algum tipo. DecoratorPanel não é um LayoutPanel e não se destina a conter um.

Este problema ainda ocorrer sem UiBinder, não é um problema com a forma como você está declarando-lo.

Answer 2

Tente este href="http://www.hkwebentrepreneurs.com/2011/08/gwt-decoratorlayoutpanel.html" rel="nofollow"> DecoratorLayoutPanel classe , que é uma implementação da DecoratorPanel que subclasses LayoutPanel. Por isso, é compatível com o quadro LayoutPanel (ao contrário DecoratorPanel), e deve envolver sua StackLayoutPanel corretamente.

(IMPORTANTE:. O código é doado livremente, e não tem restrições de licença Ele está hospedado no meu blog http://hkwebentrepreneurs.com , que é um blog não tem fins lucrativos.)

UPDATE:

A título de explicação, DecoratorLayoutPanel este DecoratorPanel classe imita do GWT, adicionando 9 widgets para si e organizando-os em uma grade de 3x3. Os 8 Widgets ultraperiféricas estão usando cantos arredondados do DecoratorPanel, com um tamanho padrão de 5px de estilo CSS. A um widget central é expansível e é usado para armazenar o conteúdo LayoutPanel.

A vantagem é que você tem o mesmo efeito de cantos arredondados da DecoratorPanel, ao ser capaz de adicionar qualquer LayoutPanel como uma criança e tê-lo automaticamente dimensionada para o ajuste.