La grille GWT n'apparaît pas avec uiBinder

Question

J'ai une grille 2 par 2 dans un projet qui est initialisé avec uiBuilder, mais la grille n'apparaît jamais sur la page. Le titre et la sous-position semblent bien. J'ai lutté avec ça pendant des jours. Tout conseil est très apprécié (c'est mon premier projet gwt). Je vous remercie!

Il y a 3 fichiers: Test.java, TaskSelect.java et TaskSelect.ui.xml

* Test.java ***

package org.client; 
    import com.google.gwt.core.client.*; 
    import com.google.gwt.user.client.ui.*; 

    public class Test extends DeckPanel implements EntryPoint 
    { 

    public void onModuleLoad() 
    { 
     Test t = new Test(); 
    TaskSelect taskselect = new TaskSelect(); 
    t.add(taskselect); 
    t.showWidget(0); 
     RootPanel.get().clear(); 
     RootPanel.get().add(t); 
    } 
} 

* TaskSelect.java **

package org.client; 

    import com.google.gwt.user.client.ui.*; 
    import com.google.gwt.core.client.GWT; 
    import com.google.gwt.uibinder.client.*; 

    public class TaskSelect extends Composite { 
    interface Binder extends UiBinder<Widget, TaskSelect> { } 
    private static final Binder binder = GWT.create(Binder.class); 
    @UiField Button buttonA; 
    @UiField Button buttonB; 
    @UiField Button buttonC; 
    @UiField Button buttonD; 
    @UiField Grid mygrid; 

    public TaskSelect() { 
     initWidget(binder.createAndBindUi(this)); 
    } 
} 

* TaskSelect.ui.xml **

<ui:UiBinder 
    xmlns:ui='urn:ui:com.google.gwt.uibinder' 
    xmlns:g='urn:import:com.google.gwt.user.client.ui'> 

    <ui:style> 
    .bigbutton { 
    font-size: 24pt; 
    width: 300px; 
    height: 95px; 
    } 

    .h1 { 
    font-size: 36pt; 
    font-weight: bold; 
    text-align: center; 
    margin: auto; 
    } 

    .subheading { 
    font-size: 24pt; 
    text-align: center; 
    margin: auto; 
    } 

    .panel { 
    margin: auto; 
    } 
    </ui:style> 
     <g:DockLayoutPanel unit='EM' addStyleNames='{style.panel}'> 
    <g:north size='10'> 
     <g:VerticalPanel addStyleNames='{style.panel}'> 
     <g:Label addStyleNames='{style.h1}'>Title is here</g:Label> 
     <g:Label addStyleNames='{style.subheading}'>Sub heading</g:Label> 
     </g:VerticalPanel> 
    </g:north> 
    <g:center size='10'> 
     <g:Grid ui:field='mygrid' addStyleNames='{style.panel}' cellSpacing='50'> 
     <g:row> 
      <g:customCell> 
      <g:Button ui:field='buttonA'>Button A</g:Button> 
      </g:customCell> 
      <g:customCell> 
      <g:Button addStyleNames='{style.bigbutton}' text='Button B' ui:field='buttonB' /> 
      </g:customCell> 
     </g:row> 
     <g:row> 
      <g:customCell> 
      <g:Button addStyleNames='{style.bigbutton}' text='Button C' ui:field='buttonC' /> 
      </g:customCell> 
      <g:customCell> 
      <g:Button addStyleNames='{style.bigbutton}' text='Button D' ui:field='buttonD' /> 
      </g:customCell> 
     </g:row> 
     </g:Grid> 
    </g:center> 
    </g:DockLayoutPanel> 
</ui:UiBinder> 

Answer 1

La hauteur/largeur de la grille est fixée par le DockLayoutPanel comme DockLayoutPanel échelles automatiquement pour remplir toute la zone. Vérifiez la documentation sur les widgets Layout et voyez si vous avez besoin de DockLayoutPanel ou de DockPanel.

Quoi qu'il en soit ajoutant au style .panel devrait le faire fonctionner:

height:100%; 

Oui, il ne semble pas logique ...

-Edit-

Et utiliser RootLayoutPanel.get() au lieu de RootPanel.get(). Ceci parce que vous utilisez un LayoutPanel.