В 2010 году в Google IO было объявлено, что GWT 2.1 будет включать новые Виджеты представления данных. 2.1M доступен для загрузки, и, предположительно, виджеты включены, но документация еще не появилась.
Есть ли короткий учебник или пример того, как их использовать? Я видел слухи, что CellList и CellTable являются рассматриваемыми классами. Javadoc для них пронизан множеством TODO, поэтому довольно немного по-прежнему отсутствует в плане использования.
Google I/O 2010 - пересмотр интерфейса GWT
javadocs package com.google.gwt.cell.client в 2.1
Сайт обновления Eclipse для этапа 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);
}
}
}
У меня есть рабочий прототип редактируемого CellTable. Прототип имеет таблицу, содержащую столбцы 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( );
}
}
}
Чтобы отобразить несколько столбцов в таблице, вам нужно поместить массив в список. Код ссылки для этого:
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. Он в основном предназначен для обновления базовой модели, что невозможно в случае 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.1).
Он может генерировать много кода GWT 2.1 для вас, а затем вы можете увидеть, как все работает вместе. Информация о Spring Roo также указана в примечаниях к выпуску GWT 2.1, и инструмент был представлен в Key Iote Key Iote (это действительно интересно, видео можно найти здесь).
Edit:
Существует даже полный пример приложения GWT 2.1 (приложение Expenses) в Spring Roo. Чтобы сгенерировать это приложение, вам нужно установить Roo 1.1, а затем выполнить его в консоли roo:
script -f samples/expenses.roo