Question

我在一个使用uiBuilder初始化的项目中有一个2乘2网格，但网格永远不会出现在页面上。标题和副标题看似很好。几天来我一直在努力奋斗。非常感谢任何建议（这是我的第一个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会自动缩放以填充整个区域。查看布局小部件上的文档，看看您是否需要DockLayoutPanel或DockPanel。

无论如何将其添加到.panel样式应该可以使它工作：

height:100%;

是的，这听起来不合逻辑......

<强> -edit -

并使用RootLayoutPanel.get()代替RootPanel.get()。这是因为您使用的是LayoutPanel。

GWI Grid没有出现在uiBinder上

1 个答案: