gwt - GWT 中 TabLayoutPanel 中的单元格表

Question

我是 GWT 的新手。我一直在搜索使用 UIBinder 在 TabLayoutPanel 选项卡中嵌入 celltable 的示例。有人可以为我提供代码示例吗？谢谢。

Answer 1

我认为了解 TabLayoutPanel 和 CellTable 工作原理的最佳方法是阅读官方文档并查看官方示例。链接：

• 单元格表

http://www.gwtproject.org/doc/latest/DevGuideUiCellWidgets.html#celltable http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellTable

• 选项卡布局面板

http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwTabLayoutPanel

如果您想查看一个非常简单的示例以了解将数据模型转换为 UI 元素的速度，请参阅：

使用 UiBinder 示例更新答案：

public class ExampleGWT implements EntryPoint {

  public void onModuleLoad() {
    MyTabPanel tab = new MyTabPanel();
    RootLayoutPanel.get().add(tab);
  }

}

-

public class MyTabPanel extends Composite {

    private static MyTabPanelUiBinder uiBinder = GWT.create(MyTabPanelUiBinder.class);
    interface MyTabPanelUiBinder extends UiBinder<Widget, MyTabPanel> {}

    @UiField
    TabLayoutPanel tabPanel;

    @UiField (provided=true)
    CellTable<Person> cellTable;

    public MyTabPanel() {

      cellTable = getCellTableWithData();

      initWidget(uiBinder.createAndBindUi(this));
      tabPanel.selectTab(0);
    }

    private CellTable<Person> getCellTableWithData() {

      CellTable<Person> cellTable = new CellTable<Person>();

      cellTable.setAutoHeaderRefreshDisabled(true);

      //You can set many params here  like:
      //   - auto refresh headers and footers
      //   - a List Data provider
      //   - page control
      //   - selection model for selecting cells
      //   
      //   An example in: 
      //       Click on "Source Code" in http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellTable

      // Name column.
      Column<Person, String> firstNameColumn = new Column<Person, String>(
          new EditTextCell()) {
        @Override
        public String getValue(Person object) {
          return object.getName();
        }
      };
      cellTable.addColumn(firstNameColumn, "Name");


      //age column
      Column<Person, String> age = new Column<Person, String>(
          new TextCell()) {

        @Override
        public String getValue(Person object) {
          return String.valueOf(object.getAge());
        }
      };
      cellTable.addColumn(age, "Age");


      //Adding data
      Person personOne = new Person("Foo", 26);
      Person personTwo = new Person("Name Foo", 31);
      List<Person> people = new ArrayList<Person>();
      people.add(personOne);
      people.add(personTwo);

      ListDataProvider<Person> dataProvider = new ListDataProvider<Person>();
      dataProvider.setList(people);
      dataProvider.addDataDisplay(cellTable);

      return cellTable;
    }
}

-

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder 
    xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:c="urn:import:com.google.gwt.user.cellview.client">

  <ui:style>
    .tabPanelCss {
      margin: 10px;
    }

    .cellTableCss {
      background-color: yellow ;
    }
  </ui:style>

  <g:TabLayoutPanel ui:field="tabPanel" barHeight="2" barUnit="EM" addStyleNames='{style.tabPanelCss}'>
    <g:tab>
      <g:header>CellTable</g:header>
      <g:FlowPanel>
        <c:CellTable ui:field="cellTable" addStyleNames='{style.cellTableCss}'/>    
      </g:FlowPanel> 
    </g:tab>
  </g:TabLayoutPanel>   

</ui:UiBinder>

-

    public class Person {
        String name;
        int age;

        public Person(String name, int age) {
          super();
          this.name = name;
          this.age = age;
        }

        public String getName() {
          return name;
        }
        public void setName(String name) {
          this.name = name;
        }
        public int getAge() {
          return age;
        }
        public void setAge(int age) {
          this.age = age;
        }


    }