web-dev-qa-db-ja.com

GWT 2.1データ表示ウィジェットの使用方法

2010 GoogleでIO GWT 2.1に新しい Data Presentation Widgets が含まれることが発表されました。2.1Mがダウンロード可能です。ドキュメントはまだ公開されていません。

それらを使用する方法についての短いチュートリアルまたは例はありますか？ CellList および CellTable が問題のクラスであるといううわさを見ました。それらのJavadocには多くのTODOがあふれているので、使用法に関してはまだかなり欠けています。

javagwtpagingdataview
45
George Armhold

Google I/O 2010-GWTのUIオーバーホール

2.1のjavadocsパッケージcom.google.gwt.cell.client

マイルストーン2のEclipse更新サイト

コードがbikeshedにある間に、次の行をgwt.xmlファイルに追加します。

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

以下に例を示します。

  • PageSizePagerを使用したTextCellのCellList
  • SimplePagerを使用したTextCellのCellList
  • SimplePagerとPageSizePager（buggy）を持つTextCellのCellListおよび
  • 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);
        }
    }
}
28
antony.trupe

編集可能な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( );
        }

    }

}
5
Ashwin Prabhu

テーブルに複数の列を表示するには、リストに配列を配置する必要があります。これを達成するための参照コードは次のとおりです。

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);
        }
    }
}
4
Janak Kansal

上記の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 + "%";
    }
}
3
Nicolas C

次のコードは、私が目を覚ましているものです、それが役立つことを願っています：

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;
}
}
3
Andrew Chen

Spring Rooプロジェクトをご覧ください。 Spring Rooは一般に、アプリケーションのスキャフォールドに使用されますJavaアプリケーション。最新のバージョン1.1では、GWTアプリケーションの多くをスキャフォールドできます（多くのGWT 2.1機能を使用）。

GWT 2.1のコードを大量に生成でき、すべてがどのように連携するかを確認できます。 Spring Rooに関する情報はGWT 2.1リリースノートにも記載されており、ツールはGoogle I/O基調講演で発表されました（本当に興味深い、ビデオは here にあります）。

編集：

Spring RooにはGWT 2.1アプリケーション（経費アプリケーション）の完全な例さえあります。このアプリケーションを生成するには、Roo 1.1をインストールし、rooコンソールでこれを実行するだけです。

script -f samples/expenses.roo
0
Piotr