Celltable within TabLayoutPanel in GWT

Question

I'm new to GWT.I have been searching around samples for embedding celltable within TabLayoutPanel tabs using UIBinder.Can anyone provide me with code samples?.Thanks.

Answer 1

I think the best way to understand how the TabLayoutPanel and CellTable work is reading the official documentation and seeing the official examples. Links:

• CellTable

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

• TabLayoutPanel

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

If you want to see a very simple examples in order to understand how fast is transforming your data model into UI elements, see:

Updated answer with UiBinder example:

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;
        }


    }