Comment utiliser les widgets de présentation de données GWT 2.1

Google I / O 2010 – La refonte de l’interface utilisateur de GWT

package javadocs com.google.gwt.cell.client en 2.1

Site de mise à jour Eclipse pour l’étape 2

Alors que le code est en bikeshed, ajoutez cette ligne à votre fichier gwt.xml:

Les exemples suivants suivent:

• CellList de TextCells avec PageSizePager
• CellList de TextCells avec un SimplePager
• CellList de TextCells avec SimplePager et PageSizePager (buggy) et
• CellTable avec l’en-tête Ssortingng et l’en-tête 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 ssortingng header ct.addColumn(new TextColumn() { @Override public Ssortingng getValue(Ssortingng object) { return object; } }, "Ssortingng Header"); //add a column with a TextCell header ct.addColumn(new TextColumn() { @Override public Ssortingng getValue(Ssortingng object) { return "%" + object + "%"; } }, new Header(new TextCell()) { @Override public Ssortingng 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); } } } 

J’ai un prototype fonctionnel d’une CellTable éditable. Le prototype a une table affichant les colonnes Ssortingng, Boolean, Date, Integer avec des éditeurs pour chacun. La modification de chaque cellule met à jour le modèle correspondant.

 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 Ssortingng getValue( SomeDTO object ) { return object.getA( ); } }; colA.setFieldUpdater( new FieldUpdater( ) // updates changes into the backing bean { public void update( int index, SomeDTO object, Ssortingng value ) { object.setA( value ); } } ); cellTable.addColumn( colA, "Ssortingng 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( Ssortingng row ) { Window.alert( row ); } } ) ) { public Ssortingng 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 Ssortingng a; private Integer b; private Boolean c; private Date d; public SomeDTO( Ssortingng a, Integer b, Boolean c, Date d ) { this.a = a; this.b = b; this.c = c; this.d = d; } public Ssortingng getA( ) { return a; } public void setA( Ssortingng 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 Ssortingng getSummary( ) { return getA( ) + " " + getB( ) + " " + getC( ) + " " + getD( ); } } } 

Pour afficher plusieurs colonnes dans la table, vous devez placer le tableau dans la liste. Le code de référence pour y parvenir est:

 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 Ssortingng[] { "1", "a" }); values.add(new Ssortingng[] { "2", "b" }); values.add(new Ssortingng[] { "3", "c" }); values.add(new Ssortingng[] { "4", "d" }); values.add(new Ssortingng[] { "5", "e" }); values.add(new Ssortingng[] { "6", "f" }); values.add(new Ssortingng[] { "7", "g" }); values.add(new Ssortingng[] { "8", "h" }); values.add(new Ssortingng[] { "9", "i" }); values.add(new Ssortingng[] { "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 Ssortingng getValue(Ssortingng[] object) { return object[0]; } }, "First"); ct.addColumn(new TextColumn() { @Override public Ssortingng getValue(Ssortingng[] 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); } } } 

Le code suivant est ce dont je me réjouis, en espérant que cela vous sera utile:

 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 Ssortingng getValue(User user) { return user.getName(); } }, new TextHeader("Name")); cellTable.addColumn(new TextColumn() { @Override public Ssortingng 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; } } 

Grande réponse d’Antony.trupe ci-dessus.

Si vous voulez avoir une cellule modifiable, vous pouvez append cette partie de code à sa classe et instancier une telle colonne au lieu de la TextColumn .

Je suis sûr que vous comprenez la partie FieldUpdater . Il est essentiellement conçu pour mettre à jour le modèle sous-jacent – ce qui n’est pas possible dans le cas de Ssortingng .

Je vais essayer de poster un exemple plus complet plus tard.

 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, Ssortingng 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 Ssortingng (immutable)). // Doing nothing here will at least update the view (probably not the model) System.out.println(index+":"+object+":"+value); } }); } @Override public Ssortingng getValue(T object) { return "%" + object + "%"; } } 

Vous voudrez peut-être jeter un coup d’œil au projet Spring Roo. Spring Roo en général est utilisé pour échafauder des applications Java. Dans la dernière version 1.1, il est également possible d’échafauder des applications GWT (en utilisant de nombreuses fonctionnalités GWT 2.1).

Il peut générer beaucoup de code GWT 2.1 pour vous et ensuite vous pouvez voir comment tout fonctionne ensemble. Les informations sur Spring Roo sont également fournies dans les notes de version de GWT 2.1 et l’outil a été présenté dans Google I / O Keynote (c’est vraiment intéressant, la vidéo peut être trouvée ici ).

Modifier:

Il existe même un exemple complet de l’application GWT 2.1 (application Dépenses) dans Spring Roo. Pour générer cette application, il vous suffit d’installer Roo 1.1 puis de l’exécuter dans la console roo:

 script -f samples/expenses.roo