如何使用 GWT 2.1 数据呈现小部件

Question

在 2010 年 Google IO 上，宣布 GWT 2.1 将包含新的数据呈现小部件。 2.1M 可供下载，并且可能包含小部件，但尚未出现任何文档。

有关于如何使用它们的简短教程或示例吗？我看到一个谣言：CellList 和 CellTable 是有问题的类。他们的 Javadoc 充满了大量的 TODO，因此在使用方面仍然缺少相当多的内容。

Answer 1

Google I/O 2010 - GWT用户界面检修

2.1 中的 javadocs 包 com.google.gwt.cell.client

里程碑 2 的 Eclipse 更新站点

当代码位于 bikeshed 中时，将此行添加到您的 gwt.xml 文件中：

<inherits name='com.google.gwt.requestfactory.RequestFactory'/>

以下示例如下：

• TextCells 的 CellList
  TextCells 的PageSizePager
• CellList 带有
  SimplePager
• CellList 的 TextCells 带有
  SimplePager 和 PageSizePager（有问题）
  和
• 带有字符串标题的 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);
        }
    }
}

Answer 2

我有一个可编辑 CellTable 的工作原型。该原型有一个表，显示字符串、布尔值、日期、整数列，每个列都有编辑器。编辑每个单元格会更新相应的模型。

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( );
        }

    }

}

Answer 3

要在表中显示多列，您需要将数组放入列表中。实现这一点的参考代码是：

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);
        }
    }
}

Answer 4

以下代码是我正在编写的代码，希望对您有所帮助：

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;
}
}

Answer 5

上面的 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 + "%";
    }
}

Answer 6

您可能想看看 Spring Roo 项目。 Spring Roo 通常用于构建 Java 应用程序。在最新的 1.1 版本中，它还可以构建 GWT 应用程序（使用许多 GWT 2.1 功能）。

它可以为您生成大量 GWT 2.1 代码，然后您可以看到所有内容如何协同工作。关于 Spring Roo 的信息也在 GWT 2.1 发行说明中给出，并且该工具在 Google I/O Keynote 中介绍过（非常有趣，视频可以在此处）。

编辑：

Spring Roo 中甚至还有一个完整的 GWT 2.1 应用程序（费用应用程序）示例。要生成此应用程序，您只需安装 Roo 1.1，然后在 roo 控制台中执行：

script -f samples/expenses.roo