如何使用GWT 2.1数据演示小部件
在2010年的Google IO上，宣布GWT 2.1将包含新的数据演示组件 。 2.1M可以下载，大概是包含了小部件，但是还没有文档出现。
有一个简短的教程或示例如何使用它们？ 我见过一个传言， CellList和CellTable是有问题的类。 他们的Javadoc充满了很多的TODO，所以在使用方面还是有一些缺失。
Google I / O 2010 – GWT的UI大修
2.1中的javadocs包com.google.gwt.cell.client
Eclipse里程碑2更新站点
当代码处于自行车状态时，将此行添加到您的gwt.xml文件中：
<inherits name='com.google.gwt.requestfactory.RequestFactory'/> 以下示例如下：
- 带有PageSizePager的TextCells的CellList
- TextCells的CellList与SimplePager
- TextCells的CellList与SimplePager和PageSizePager（buggy）和
- 具有String标头和TextCell标头的CellTable
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); } } }
我有一个可编辑CellTable的工作原型。 原型有一个表格显示string，布尔值，date，整数列与编辑器为每个。 编辑每个单元格更新相应的模型。
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( ); } } }
要在表格中显示多个列，您需要将数组放在列表中。 实现这一目的的参考代码是：
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); } } }
下面的代码就是我正在做的事情，希望这会有帮助：
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; } }
从上面的antony.trupe很好的回答。
如果你想有一个可编辑的单元格，你可以把这段代码添加到他的类中，然后实例化一个列而不是常规的TextColumn 。
我相信你了解FieldUpdater一部分。 它基本上是为了更新底层模型而devise的 – 在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 + "%"; } }
你可能想看看Spring Roo项目。 Spring Roo通常用于脚手架Java应用程序。 在最新的1.1版本中，它也可以支持GWT应用程序（使用许多GWT 2.1function）。
它可以为你生成很多的GWT 2.1代码，然后你可以看到一切是如何协同工作的。 有关Spring Roo的信息也在GWT 2.1发行说明中给出，该工具在Google I / O Keynote中提供（这非常有趣，可以在这里findvideo）。
编辑：
在Spring Roo中甚至有一个GWT 2.1应用程序（Expenses应用程序）的完整示例。 要生成这个应用程序，您只需要安装Roo 1.1，然后在roo控制台中执行此操作：
script -f samples/expenses.roo
