GWT Grid erscheint nicht mit uiBinder

Question

Ich habe eine 2 von 2 Grid in einem Projekt, das mit uiBuilder initialisiert wird, aber das Raster erscheint nie auf der Seite. Der Titel und die Überschrift erscheinen gut. Ich kämpfe seit Tagen damit. Jeder Rat wird sehr geschätzt (dies ist mein erstes gwt-Projekt). Vielen Dank!

Es gibt 3 Dateien: Test.java, TaskSelect.java und 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

Die Höhe/Breite des Gitters wird durch die DockLayoutPanel als DockLayoutPanel automatisch den gesamten Bereich zu füllen skaliert. Überprüfen Sie die Dokumentation zu den Layout-Widgets und sehen Sie, ob Sie DockLayoutPanel oder DockPanel benötigen.

Wie dem auch sei, diese zu dem .panel Stil sollte es funktioniert:

height:100%; 

Ja, es ist nicht logisch klingt ...

-edit-

Und verwenden RootLayoutPanel.get() anstelle von RootPanel.get(). Dies, weil Sie ein LayoutPanel verwenden.