GWT Grid не отображается с uiBinder

Question

У меня есть 2 на 2 сетки в проекте, который инициализируется с помощью uiBuilder, однако сетка никогда не появляется на странице. Заголовок и подзаголовок отображаются нормально. Я боролся с этим в течение нескольких дней. Любой совет очень ценится (это мой первый проект GWT). Спасибо!

Есть 3 файла: Test.java, TaskSelect.java и 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

Высота / ширина сетки задается DockLayoutPanel как DockLayoutPanel автоматически масштабируется, чтобы заполнить всю область. Проверьте документацию на виджеты Layout и посмотрите, если вам нужно DockLayoutPanel или же DockPanel,

В любом случае, добавив это в .panel стиль должен заставить это работать:

height:100%;

Да, это не звучит логично...

-редактировать-

И использовать RootLayoutPanel.get() вместо RootPanel.get(), Это потому, что вы используете LayoutPanel.