在2010年的Google IO上，宣布GWT 2.1将包含新的Data Presentation Widgets。 2.1M可供下载，可能包含小部件，但尚未出现任何文档。
是否有关于如何使用它们的简短教程或示例？我看到有传闻说CellList和CellTable是有问题的类。他们的Javadoc充斥着大量的TODO，因此在使用方面仍然缺少相当多的东西。
答案 0 :(得分：28)
Google I/O 2010 - GWT's UI overhaul
javadocs package com.google.gwt.cell.client in 2.1
Eclipse update site for milestone 2
虽然代码处于bikeshed状态，但请将此行添加到gwt.xml文件中：
<inherits name='com.google.gwt.requestfactory.RequestFactory'/>
以下示例如下：
package dpw.client;
import java.util.ArrayList;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.PageSizePager;
import com.google.gwt.user.cellview.client.SimplePager;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.cellview.client.Header;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.view.client.ListViewAdapter;
public class Index implements EntryPoint {
public void onModuleLoad() {
// create some data
ArrayList<String> values = new ArrayList<String>();
values.add("one");
values.add("two");
values.add("three");
values.add("four");
values.add("five");
values.add("six");
// create a ListViewAdapter
ListViewAdapter<String> lva = new ListViewAdapter<String>();
// give the ListViewAdapter our data
lva.setList(values);
{
// CellList of TextCells with PageSizePager
CellList<String> cl = new CellList<String>(new TextCell());
// set the initial pagesize to 2
cl.setPageSize(2);
// add the CellLists to the adaptor
lva.addView(cl);
// create a PageSizePager, giving it a handle to the CellList
PageSizePager<String> psp = new PageSizePager<String>(cl, 2);
// add the CellList to the page
RootPanel.get().add(cl);
// add the PageSizePager to the page
RootPanel.get().add(psp);
}
RootPanel.get().add(new HTML("<hr />"));
{
// CellList of TextCells with a SimplePager
CellList<String> cl = new CellList<String>(new TextCell());
// set the initial pageSize to 2
cl.setPageSize(2);
// add the CellLists to the adaptor
lva.addView(cl);
// create a pager, giving it a handle to the CellList
SimplePager<String> pager = new SimplePager<String>(cl,
SimplePager.TextLocation.CENTER);
// add the CellList to the page
RootPanel.get().add(cl);
// add the Pager to the page
RootPanel.get().add(pager);
}
RootPanel.get().add(new HTML("<hr />"));
{
// CellList of TextCells with a SimplePager and PageSizePager
CellList<String> cl = new CellList<String>(new TextCell());
// set the initial pageSize to 2
cl.setPageSize(2);
// add the CellLists to the adaptor
lva.addView(cl);
// create a PageSizePager, giving it a handle to the CellList
PageSizePager<String> psp = new PageSizePager<String>(cl, 1);
// create a pager, giving it a handle to the CellList
SimplePager<String> pager = new SimplePager<String>(cl,
SimplePager.TextLocation.CENTER);
// add the CellList to the page
RootPanel.get().add(cl);
// add the Pager to the page
RootPanel.get().add(pager);
// add the PageSizePager to the page
RootPanel.get().add(psp);
}
RootPanel.get().add(new HTML("<hr />"));
{
// CellTable
CellTable<String> ct = new CellTable<String>();
ct.setPageSize(2);
lva.addView(ct);
// add a column with a simple string header
ct.addColumn(new TextColumn<String>() {
@Override
public String getValue(String object) {
return object;
}
}, "String Header");
//add a column with a TextCell header
ct.addColumn(new TextColumn<String>() {
@Override
public String getValue(String object) {
return "%" + object + "%";
}
}, new Header<String>(new TextCell()) {
@Override
public String getValue() {
return "TextCell Header";
}
});
// create a pager, giving it a handle to the CellTable
SimplePager<String> pager = new SimplePager<String>(ct,
SimplePager.TextLocation.CENTER);
// add the CellList to the page
RootPanel.get().add(ct);
// add the Pager to the page
RootPanel.get().add(pager);
}
}
}
答案 1 :(得分：5)
我有一个可编辑的CellTable的工作原型。原型有一个Table，显示String，Boolean，Date，Integer列，每个列都有编辑器。编辑每个单元格会更新相应的模型。
public class CellTableDemo implements EntryPoint
{
public void onModuleLoad( )
{
CellTable<SomeDTO> cellTable = createTable( );
addColumns( cellTable );
ListViewAdapter<SomeDTO> listViewAdapter = new ListViewAdapter<SomeDTO>( );
listViewAdapter.setList( getData( ) );
listViewAdapter.addView( cellTable );
RootPanel.get( ).add( new SimplePager<SomeDTO>( cellTable, SimplePager.TextLocation.CENTER ) );
RootPanel.get( ).add( cellTable );
}
private CellTable<SomeDTO> createTable( )
{
CellTable<SomeDTO> cellTable = new CellTable<SomeDTO>( );
cellTable.setSelectionEnabled( true );
cellTable.setSelectionModel( new SingleSelectionModel<SomeDTO>( ) );
cellTable.setPageSize( 5 );
cellTable.setPageStart( 0 );
return cellTable;
}
private void addColumns( CellTable<SomeDTO> cellTable )
{
Column<SomeDTO, String> colA = new Column<SomeDTO, String>( new TextInputCell( ) )
{
public String getValue( SomeDTO object )
{
return object.getA( );
}
};
colA.setFieldUpdater( new FieldUpdater<SomeDTO, String>( ) // updates changes into the backing bean
{
public void update( int index, SomeDTO object, String value )
{
object.setA( value );
}
} );
cellTable.addColumn( colA, "String Column A" );
cellTable.addColumn( new Column<SomeDTO, Integer>( new CurrencyCell( ) )
{
public Integer getValue( SomeDTO object )
{
return object.getB( );
}
}, "Currency Column B" );
Column<SomeDTO, Boolean> colC = new Column<SomeDTO, Boolean>( new CheckboxCell( ) )
{
public Boolean getValue( SomeDTO object )
{
return object.getC( );
}
};
colC.setFieldUpdater( new FieldUpdater<SomeDTO, Boolean>( )
{
public void update( int index, SomeDTO object, Boolean value )
{
object.setC( value );
}
} );
cellTable.addColumn( colC, "Boolean Column C" );
Column<SomeDTO, Date> colD = new Column<SomeDTO, Date>( new DatePickerCell( ) )
{
public Date getValue( SomeDTO object )
{
return object.getD( );
}
};
colD.setFieldUpdater( new FieldUpdater<SomeDTO, Date>( )
{
public void update( int index, SomeDTO object, Date value )
{
object.setD( value );
}
} );
cellTable.addColumn( colD, "Date Column D" );
cellTable.addColumn( new Column<SomeDTO, String>( new ActionCell<String>( "Click of summary of this row", new Delegate<String>( )
{
public void execute( String row )
{
Window.alert( row );
}
} ) )
{
public String getValue( SomeDTO row )
{
return row.getSummary( );
}
} );
}
private ArrayList<SomeDTO> getData( )
{
ArrayList<SomeDTO> tableData = new ArrayList<SomeDTO>( );
tableData.add( new SomeDTO( "A", 10, true, new Date( ) ) );
tableData.add( new SomeDTO( "AA", 200, false, new Date( ) ) );
tableData.add( new SomeDTO( "AAA", 3000, true, new Date( ) ) );
tableData.add( new SomeDTO( "AAAA", 40, false, new Date( ) ) );
tableData.add( new SomeDTO( "AAAAA", 500, true, new Date( ) ) );
tableData.add( new SomeDTO( "AAAAAA", 6000, false, new Date( ) ) );
tableData.add( new SomeDTO( "AAAAAAA", 70, true, new Date( ) ) );
tableData.add( new SomeDTO( "AAAAAAAA", 800, false, new Date( ) ) );
tableData.add( new SomeDTO( "AAAAAAAAA", 9000, true, new Date( ) ) );
tableData.add( new SomeDTO( "AAAAAAAAAA", 10, false, new Date( ) ) );
tableData.add( new SomeDTO( "AAAAAAAAAAA", 11, true, new Date( ) ) );
return tableData;
}
public class SomeDTO
{
private String a;
private Integer b;
private Boolean c;
private Date d;
public SomeDTO( String a, Integer b, Boolean c, Date d )
{
this.a = a;
this.b = b;
this.c = c;
this.d = d;
}
public String getA( )
{
return a;
}
public void setA( String a )
{
this.a = a;
}
public Integer getB( )
{
return b;
}
public void setB( Integer b )
{
this.b = b;
}
public Boolean getC( )
{
return c;
}
public void setC( Boolean c )
{
this.c = c;
}
public Date getD( )
{
return d;
}
public void setD( Date d )
{
this.d = d;
}
public String getSummary( )
{
return getA( ) + " " + getB( ) + " " + getC( ) + " " + getD( );
}
}
}
答案 2 :(得分：4)
要在表格中显示多列，您需要将数组放入列表中。实现此目的的参考代码是：
package com.test.client;
import java.util.ArrayList;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.SimplePager;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.view.client.ListViewAdapter;
import com.google.gwt.view.client.SingleSelectionModel;
public class Index implements EntryPoint {
public void onModuleLoad() {
// create some data
ArrayList<String[]> values = new ArrayList<String[]>();
values.add(new String[] { "1", "a" });
values.add(new String[] { "2", "b" });
values.add(new String[] { "3", "c" });
values.add(new String[] { "4", "d" });
values.add(new String[] { "5", "e" });
values.add(new String[] { "6", "f" });
values.add(new String[] { "7", "g" });
values.add(new String[] { "8", "h" });
values.add(new String[] { "9", "i" });
values.add(new String[] { "10", "j" });
// create a ListViewAdapter
ListViewAdapter<String[]> lva = new ListViewAdapter<String[]>();
// give the ListViewAdapter our data
lva.setList(values);
RootPanel.get().add(new HTML("<hr />"));
{
// CellTable
CellTable<String[]> ct = new CellTable<String[]>();
ct.setSelectionEnabled(true);
ct.setSelectionModel(new SingleSelectionModel());
ct.setPageSize(2);
lva.addView(ct);
ct.addColumn(new TextColumn<String[]>() {
@Override
public String getValue(String[] object) {
return object[0];
}
}, "First");
ct.addColumn(new TextColumn<String[]>() {
@Override
public String getValue(String[] object) {
return "%" + object[1] + "%";
}
}, "Second");
// create a pager, giving it a handle to the CellTable
SimplePager<String[]> pager = new SimplePager<String[]>(ct, SimplePager.TextLocation.CENTER);
// add the Pager to the page
RootPanel.get().add(pager);
// add the CellList to the page
RootPanel.get().add(ct);
}
}
}
答案 3 :(得分：3)
以下代码是我正在讨论的内容，希望它会有所帮助：
protected void init() {
VerticalPanel container = new VerticalPanel();
initWidget(container);
int pageSize = 10;
CellTable<User> cellTable = new CellTable<User>(pageSize);
setColumns(cellTable);
setSelectionModel(cellTable);
setDataSize(cellTable);
int pageStart = 0;
loadData(pageStart, pageSize, cellTable);
SimplePager<User> pager = createPager(cellTable);
container.add(cellTable);
container.add(pager);
}
private SimplePager<User> createPager(final CellTable<User> cellTable) {
SimplePager<User> pager = new SimplePager<User>(cellTable,
SimplePager.TextLocation.CENTER) {
public void onRangeOrSizeChanged(PagingListView<User> listView) {
loadData(listView.getPageStart(), listView.getPageSize(),
listView);
super.onRangeOrSizeChanged(listView);
}
};
return pager;
}
private void setColumns(CellTable<User> cellTable) {
cellTable.addColumn(new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.getName();
}
}, new TextHeader("Name"));
cellTable.addColumn(new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.getLocation();
}
}, new TextHeader("Location"));
}
private void setSelectionModel(CellTable<User> cellTable) {
final SingleSelectionModel<User> selectionModel = new SingleSelectionModel<User>();
SelectionChangeHandler selectionHandler = new SelectionChangeHandler() {
@Override
public void onSelectionChange(SelectionChangeEvent event) {
User user = selectionModel.getSelectedObject();
Window.alert(user.getId() + ": " + user.getName());
}
};
selectionModel.addSelectionChangeHandler(selectionHandler);
cellTable.setSelectionEnabled(true);
cellTable.setSelectionModel(selectionModel);
}
private void setDataSize(final PagingListView<User> cellTable) {
employeeRequest.countUsers(new AsyncCallback<Integer>() {
public void onFailure(Throwable caught) {
Window.alert("Request failure: " + caught.getMessage());
}
public void onSuccess(Integer result) {
cellTable.setDataSize(result, true);
}
});
}
private void loadData(int start, int size,
final PagingListView<User> cellTable) {
employeeRequest.getUsers(start, size,
new AsyncCallback<PagingData<User>>() {
public void onFailure(Throwable caught) {
Window.alert("Request failure: " + caught.getMessage());
}
public void onSuccess(PagingData<User> result) {
cellTable.setData(result.getStart(),
result.getLength(), result.getValues());
}
});
}
public class PagingData<T> implements IsSerializable {
private int start;
private int length;
private List<T> values;
public PagingData() {
}
public PagingData(int start, int length, List<T> values) {
super();
this.start = start;
this.length = length;
this.values = values;
}
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLength() {
return length;
}
public void setLength(int length) {
this.length = length;
}
public List<T> getValues() {
return values;
}
public void setValues(List<T> values) {
this.values = values;
}
}
答案 4 :(得分：3)
上面的antony.trupe给出了很好的答案。
如果你想拥有一个可编辑的单元格，你可以将这段代码添加到他的类中，并实例化这样的列而不是常规的TextColumn。
我确定你理解FieldUpdater部分。它基本上是为了更新底层模型而设计的 - 这在String的情况下是不可能的。
我稍后会尝试发布一个更完整的例子。
static class EditableColumn<T> extends Column<T, String> {
public EditableColumn()
{
super(new EditTextCell());
// workaround a NPE in EditTextCell.java:75
super.setFieldUpdater( new FieldUpdater<T, String>(){
@Override
public void update( int index, T object, String value ) {
// I think object should be updated with the new value, which cannot be done
// in a generic way (and cannot be done if T is String (immutable)).
// Doing nothing here will at least update the view (probably not the model)
System.out.println(index+":"+object+":"+value);
}
});
}
@Override
public String getValue(T object) {
return "%" + object + "%";
}
}
答案 5 :(得分：0)
您可能想看看Spring Roo项目。 Spring Roo通常用于构建Java应用程序。在最新版本1.1中，它还可以构建GWT应用程序（使用许多GWT 2.1功能）。
它可以为您生成许多GWT 2.1代码，然后您可以看到一切如何协同工作。关于Spring Roo的信息也在GWT 2.1发行说明中给出，该工具在Google I / O Keynote中呈现（真的很有趣，视频可以找到here）。
修改
在Spring Roo中甚至有一个完整的GWT 2.1应用程序（费用应用程序）示例。要生成此应用程序，您只需安装Roo 1.1，然后在roo控制台中执行：
script -f samples/expenses.roo