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