Cómo usar los widgets de presentación de datos de GWT 2.1

En el 2010 Google IO se anunció que GWT 2.1 incluiría nuevos Data Presentation Widgets . 2.1M está disponible para descargar, y presumiblemente los widgets están incluidos, pero aún no ha aparecido documentación.

¿Hay un breve tutorial o ejemplo de cómo usarlos? He visto un rumor de que CellList y CellTable son las clases en cuestión. El Javadoc para ellos está lleno de TODOs, por lo que aún falta bastante en términos de uso.

Google I / O 2010 – Revisión de la interfaz de usuario de GWT

Paquete de javadocs com.google.gwt.cell.client en 2.1

Sitio de actualización de Eclipse para el hito 2

Mientras el código está en bikeshed, agregue esta línea a su archivo gwt.xml:

 

Los siguientes ejemplos siguen:

  • CellList de TextCells con PageSizePager
  • CellList de TextCells con SimplePager
  • CellList de TextCells con SimplePager y PageSizePager (con errores) y
  • CellTable con encabezado de cadena y encabezado de TextCell

 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 values = new ArrayList(); values.add("one"); values.add("two"); values.add("three"); values.add("four"); values.add("five"); values.add("six"); // create a ListViewAdapter ListViewAdapter lva = new ListViewAdapter(); // give the ListViewAdapter our data lva.setList(values); { // CellList of TextCells with PageSizePager CellList cl = new CellList(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 psp = new PageSizePager(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("
")); { // CellList of TextCells with a SimplePager CellList
cl = new CellList(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 pager = new SimplePager(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("
")); { // CellList of TextCells with a SimplePager and PageSizePager CellList
cl = new CellList(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 psp = new PageSizePager(cl, 1); // create a pager, giving it a handle to the CellList SimplePager pager = new SimplePager(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("
")); { // CellTable CellTable
ct = new CellTable(); ct.setPageSize(2); lva.addView(ct); // add a column with a simple string header ct.addColumn(new TextColumn() { @Override public String getValue(String object) { return object; } }, "String Header"); //add a column with a TextCell header ct.addColumn(new TextColumn() { @Override public String getValue(String object) { return "%" + object + "%"; } }, new Header(new TextCell()) { @Override public String getValue() { return "TextCell Header"; } }); // create a pager, giving it a handle to the CellTable SimplePager pager = new SimplePager(ct, SimplePager.TextLocation.CENTER); // add the CellList to the page RootPanel.get().add(ct); // add the Pager to the page RootPanel.get().add(pager); } } }

Tengo un prototipo funcional de una CellTable editable. El prototipo tiene una tabla que muestra las columnas String, Boolean, Date, Integer con editores para cada una. Al editar cada celda, se actualiza el modelo correspondiente.

 public class CellTableDemo implements EntryPoint { public void onModuleLoad( ) { CellTable cellTable = createTable( ); addColumns( cellTable ); ListViewAdapter listViewAdapter = new ListViewAdapter( ); listViewAdapter.setList( getData( ) ); listViewAdapter.addView( cellTable ); RootPanel.get( ).add( new SimplePager( cellTable, SimplePager.TextLocation.CENTER ) ); RootPanel.get( ).add( cellTable ); } private CellTable createTable( ) { CellTable cellTable = new CellTable( ); cellTable.setSelectionEnabled( true ); cellTable.setSelectionModel( new SingleSelectionModel( ) ); cellTable.setPageSize( 5 ); cellTable.setPageStart( 0 ); return cellTable; } private void addColumns( CellTable cellTable ) { Column colA = new Column( new TextInputCell( ) ) { public String getValue( SomeDTO object ) { return object.getA( ); } }; colA.setFieldUpdater( new FieldUpdater( ) // 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( new CurrencyCell( ) ) { public Integer getValue( SomeDTO object ) { return object.getB( ); } }, "Currency Column B" ); Column colC = new Column( new CheckboxCell( ) ) { public Boolean getValue( SomeDTO object ) { return object.getC( ); } }; colC.setFieldUpdater( new FieldUpdater( ) { public void update( int index, SomeDTO object, Boolean value ) { object.setC( value ); } } ); cellTable.addColumn( colC, "Boolean Column C" ); Column colD = new Column( new DatePickerCell( ) ) { public Date getValue( SomeDTO object ) { return object.getD( ); } }; colD.setFieldUpdater( new FieldUpdater( ) { public void update( int index, SomeDTO object, Date value ) { object.setD( value ); } } ); cellTable.addColumn( colD, "Date Column D" ); cellTable.addColumn( new Column( new ActionCell( "Click of summary of this row", new Delegate( ) { public void execute( String row ) { Window.alert( row ); } } ) ) { public String getValue( SomeDTO row ) { return row.getSummary( ); } } ); } private ArrayList getData( ) { ArrayList tableData = new ArrayList( ); 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( ); } } } 

Para mostrar varias columnas en la tabla, debe poner una matriz en la lista. El código de referencia para lograr esto es:

 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 values = new ArrayList(); 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 lva = new ListViewAdapter(); // give the ListViewAdapter our data lva.setList(values); RootPanel.get().add(new HTML("
")); { // CellTable CellTable ct = new CellTable(); ct.setSelectionEnabled(true); ct.setSelectionModel(new SingleSelectionModel()); ct.setPageSize(2); lva.addView(ct); ct.addColumn(new TextColumn() { @Override public String getValue(String[] object) { return object[0]; } }, "First"); ct.addColumn(new TextColumn() { @Override public String getValue(String[] object) { return "%" + object[1] + "%"; } }, "Second"); // create a pager, giving it a handle to the CellTable SimplePager pager = new SimplePager(ct, SimplePager.TextLocation.CENTER); // add the Pager to the page RootPanel.get().add(pager); // add the CellList to the page RootPanel.get().add(ct); } } }

El siguiente código es en lo que estoy trabajando, espero que sea útil:

 protected void init() { VerticalPanel container = new VerticalPanel(); initWidget(container); int pageSize = 10; CellTable cellTable = new CellTable(pageSize); setColumns(cellTable); setSelectionModel(cellTable); setDataSize(cellTable); int pageStart = 0; loadData(pageStart, pageSize, cellTable); SimplePager pager = createPager(cellTable); container.add(cellTable); container.add(pager); } private SimplePager createPager(final CellTable cellTable) { SimplePager pager = new SimplePager(cellTable, SimplePager.TextLocation.CENTER) { public void onRangeOrSizeChanged(PagingListView listView) { loadData(listView.getPageStart(), listView.getPageSize(), listView); super.onRangeOrSizeChanged(listView); } }; return pager; } private void setColumns(CellTable cellTable) { cellTable.addColumn(new TextColumn() { @Override public String getValue(User user) { return user.getName(); } }, new TextHeader("Name")); cellTable.addColumn(new TextColumn() { @Override public String getValue(User user) { return user.getLocation(); } }, new TextHeader("Location")); } private void setSelectionModel(CellTable cellTable) { final SingleSelectionModel selectionModel = new SingleSelectionModel(); 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 cellTable) { employeeRequest.countUsers(new AsyncCallback() { 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 cellTable) { employeeRequest.getUsers(start, size, new AsyncCallback>() { public void onFailure(Throwable caught) { Window.alert("Request failure: " + caught.getMessage()); } public void onSuccess(PagingData result) { cellTable.setData(result.getStart(), result.getLength(), result.getValues()); } }); } public class PagingData implements IsSerializable { private int start; private int length; private List values; public PagingData() { } public PagingData(int start, int length, List 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 getValues() { return values; } public void setValues(List values) { this.values = values; } } 

Gran respuesta de antony.trupe arriba.

Si desea tener una celda editable, puede agregar este fragmento de código a su clase e instanciar dicha columna en lugar de la columna de texto regular.

Estoy seguro de que entiendes la parte de FieldUpdater . Básicamente está diseñado para actualizar el modelo subyacente, lo que no es posible en el caso de String .

Trataré de publicar un ejemplo más completo más adelante.

 static class EditableColumn extends Column { public EditableColumn() { super(new EditTextCell()); // workaround a NPE in EditTextCell.java:75 super.setFieldUpdater( new FieldUpdater(){ @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 + "%"; } } 

Es posible que desee echar un vistazo al proyecto Spring Roo. Spring Roo en general se usa para andamiar aplicaciones Java. En la versión más nueva 1.1 también puede andamiar aplicaciones GWT (usando muchas características GWT 2.1).

Puede generar una gran cantidad de código GWT 2.1 para usted y luego puede ver cómo funciona todo junto. La información sobre Spring Roo también se incluye en las notas de la versión GWT 2.1 y la herramienta se presentó en Google I / O Keynote (es muy interesante, el video se puede encontrar aquí ).

Editar:

Incluso hay un ejemplo completo de la aplicación GWT 2.1 (aplicación de gastos) en Spring Roo. Para generar esta aplicación solo necesita instalar Roo 1.1 y luego ejecutar esto en la consola roo:

 script -f samples/expenses.roo