GWTグリッドがuiBinderで表示されない

Question

uiBuilderを使用して初期化されたプロジェクトに2 x 2グリッドがありますが、グリッドはページに表示されません。タイトルと小見出しはうまく表示されます。私はこれと数日間苦労してきました。どんなアドバイスも非常に感謝しています（これは私の最初のgwtプロジェクトです）。ありがとうございました！ 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：

は、3つのファイルがあります **

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

は、グリッドの高さ/幅が自動的に全領域を埋めるためにスケールDockLayoutPanelDockLayoutPanelとによって設定されています。レイアウトウィジェットのドキュメントをチェックし、DockLayoutPanelまたはDockPanelが必要かどうかを確認してください。とにかく.panelスタイルにこれを追加すること

はそれを動作させる必要があります。

height:100%; 

はい、それは論理的な音ではありません...

-edit-

そしてRootLayoutPanel.get()を使用しますRootPanel.get()の代わりにこれは、LayoutPanelを使用しているためです。