Как использовать GWT 2.1 Виджеты представления данных

Question

В 2010 году в Google IO было объявлено, что в GWT 2.1 будут добавлены новые виджеты представления данных .2.1M доступен для загрузки, и, по-видимому, виджеты включены, но документация еще не появилась.

Существует ли краткое руководство или пример, как их использовать?Я слышал, что классы CellList и CellTable .Javadoc для них изобилует множеством TODO, поэтому с точки зрения использования все еще немного.

Answer 1

Google I / O 2010 - капитальный ремонт пользовательского интерфейса GWT

пакет javadocs com.google.gwt.cell.client в версии 2.1

Сайт обновлений Eclipse для Milestone 2

Пока код в байке, добавьте эту строку в ваш файл gwt.xml:

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

Следующие примеры следуют:

• CellList TextCells с PageSizePager
• CellList TextCells с SimplePager
• CellList TextCells с SimplePager и PageSizePager (глючный) и
• CellTable со строковым заголовком и Заголовок 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<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. У прототипа есть Таблица, отображающая столбцы 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( );
        }

    }

}

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

Отличный ответ от 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 5

Следующий код - это то, что я просыпаюсь, надеюсь, это будет полезно:

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 6

Возможно, вы захотите взглянуть на проект Spring Roo. Spring Roo в целом используется для создания приложений Java. В новейшей версии 1.1 он также может создавать приложения GWT (используя множество функций GWT 2.1).

Он может генерировать много кода GWT 2.1 для вас, и тогда вы сможете увидеть, как все работает вместе. Информация о Spring Roo также содержится в примечаниях к выпуску GWT 2.1, а инструмент был представлен в Google I / O Keynote (это действительно интересно, видео можно найти здесь ).

Edit:

Существует даже полный пример приложения GWT 2.1 (приложение Расходы) в Spring Roo. Чтобы сгенерировать это приложение, вам нужно только установить Roo 1.1 и затем выполнить его в консоли roo:

script -f samples/expenses.roo