gwtgxttabpanelgwt-celltablegwt-tablayoutpanel

Celltable within TabLayoutPanel in GWT


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.


Solution

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

    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

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