Painel Vertical e painel de disposição Doc em GWT

Question

Painel Vertical e painel de disposição Doc em GWT

A minha estrutura de Layout está na imagem. enter image description here

breve sobre Imagem: HTMLPanel é RootPanel e 2 painéis verticais, um cabeçalho e outro painel de conteúdo. O segundo painel vertical tem DockLayoutPanel.
O meu problema é que o meu DockLayout não aparece quando dirijo o projecto. código da Home Page

<g:HTMLPanel>
     <g:VerticalPanel ui:field="contentPane" ></g:VerticalPanel>
     <g:VerticalPanel ui:field="headerPane" styleName="{style.upper-titlebar-container}" ></g:VerticalPanel>
</g:HTMLPanel>

código para o painel de Conteúdo

<g:HTMLPanel>
        <g:DockLayoutPanel unit='EM'>
             <g:north size='4'>
                <g:Label> Hello </g:Label>
             </g:north>
             <g:east size="7.0">
                  <g:HTMLPanel ui:field="EdgeBandingPane"></g:HTMLPanel>
             </g:east>
             <g:west size="5.8" >
                  <g:HTMLPanel ui:field="PartsPane"></g:HTMLPanel>
             </g:west>

             <g:center >
                  <g:HTMLPanel ui:field="PanelsPane"></g:HTMLPanel>
             </g:center>
             <g:south size="5">
               <g:Label> Hello </g:Label>
             </g:south>
        </g:DockLayoutPanel>

    </g:HTMLPanel>

os elementos que o Iam adiciona estão a mostrar no resultado, mas o meu painel acoplado não está a mostrar. Não estou a entender. problema
Obrigado antecipadamente.

0

gwt panel

Author: srivani, 2013-09-17

Source

1 answers

score 3 · Answer 1

GWT * LayoutPanels não funcionam automaticamente quando aninhados em painéis *(os que não têm disposição). Isso é por causa de diferentes abordagens de layouting:

Os painéis de disposição usam um layout CSS absoluto onde o tamanho deve ser dado pelo elemento-mãe

Para nidificar camadas em painéis, é preciso definir tamanhos fixos e fazer onResize sempre que o tamanho dos cahnges. Mas, alternativamente, você pode tentar apenas trabalhar com LayoutPanels. Se eu estiver certo, você quer ter um cabeçalho com uma altura dinâmica (a altura é definida pelo seu conteúdo). Nesse caso, deve usar o HeaderPanel. Para o cabeçalho você pode usar um VerticalPanel. Como contentor para o seu conteúdo (permutável), poderá usar um 'SimpleLayoutPanel' que é um 'LayoutPanel' que hospeda um elemento:

<g:HeaderPanel>
    <g:VerticalPanel ui:field="headerPane"></g:VerticalPanel>
    <g:SimpleLayoutPanel ui:field="contentPane"></g:SimpleLayoutPanel>
</g:HeaderPanel>

E do meu ponto de vista o HTMLPanel extra em torno do DockLayoutPanel do conteúdo deve ser removido para garantir que o tamanho é corretamente definido a partir do fora:

<g:DockLayoutPanel unit='EM'>
     <g:north size='4'>
        <g:Label> Hello </g:Label>
     </g:north>
     <g:east size="7.0">
          <g:HTMLPanel ui:field="EdgeBandingPane"></g:HTMLPanel>
     </g:east>
     <g:west size="5.8" >
          <g:HTMLPanel ui:field="PartsPane"></g:HTMLPanel>
     </g:west>
     <g:center >
          <g:HTMLPanel ui:field="PanelsPane"></g:HTMLPanel>
     </g:center>
     <g:south size="5">
       <g:Label> Hello </g:Label>
     </g:south>
</g:DockLayoutPanel>

Editar: HTMLPanel só deve ser necessário para o layout" manual". Não o utilize para apenas embrulhar um outro elemento/painel.