쿠...sal: [컴][웹] GWT 사용하기

DataGrid 와 차이점

CellTable 은 기본적으로 scroller 를 제공하지 않는다. 만약 ScrollPanel 을 이용하게 되면, CellTable 의 header 가 같이 움직인다. header 가 움직이지 않는 상태로 scroller 를 제공하는 table 이 필요하다면 DataGrid 를 사용하면 된다.[ref. 2]

이 때 DataGrid 의 화면이 안보이는 경우가 발생한다. 이는 CellTable 은 자신의 size 를 가지고 표현되지만, DataGrid 는 parent 의 size 를 보고 자신의 size 를 결정하기 때문이다.[ref. 3] 관련해서는 ref. 3 을 참고하도록 하자. 참고로 parent 는 LayoutPanel 을 사용해야 한다.

Key Provider

Key Provider 를 cell table 을 create 할 때 제공한다. 이 key provider 는 ProvidesKey interface 를 implement 하는 녀석이면 된다. ProvidesKey 는 특별한 것은 없고, 단순히 getKey() 라는 method 를 가지는 interface 이다.

CellTable 은 generict type 이라 CellTable 을 만들때 data type(class)을 정해주게 된다.

addColumnSortHandler()

CellTable 의 header 를 누르면 정렬이 되는 기능을 위해서
addColumnSortHandler()
로 sort handler 를 set 해줄 수 있다. 이 sort handler 는 ColumnSortEvent.ListHandler[T] 를 이용하면 된다. sortHandler 를 설정해 준 후에 각 column 에 대한 sort 를 위한 comparator 를 설정해 주게 된다.

// sortHandler
ColumnSortEvent.ListHandler<ContactDatabase.ContactInfo> sortHandler
                = new ColumnSortEvent.ListHandler<ContactDatabase.ContactInfo>(
                    ContactDatabase.get().getDataProvider().getList());

cellTable.addColumnSortHandler(sortHandler);



// Add comparator
Column<ContactDatabase.ContactInfo, String> firstNameColumn = new Column<....

firstNameColumn.setSortable(true);

sortHandler.setComparator(firstNameColumn, new Comparator<ContactDatabase.ContactInfo>() {

    @Override
    public int compare(ContactDatabase.ContactInfo o1, ContactDatabase.ContactInfo o2) {
        return o1.getFirstName().compareTo(o2.getFirstName());

    }

});


cellTable.addColumn(firstNameColumn, "FirstName");

setSelectionModel

이 CellTable 의 row 를 선택할 수 있도록 할 수 있다.
setSelectionModel()
을 이용하면 된다. SelectionModel[T] 라는 class 를 이용해서 selection model 을 만들 수 있다.

final SelectionModel<ContactDatabase.ContactInfo> selectionModel
                = new MultiSelectionModel<ContactDatabase.ContactInfo>(
                        ContactDatabase.ContactInfo.KEY_PROVIDER);
cellTable.setSelectionModel(selectionModel,
        DefaultSelectionEventManager.<ContactDatabase.ContactInfo> createCheckboxManager());

Column

CellTable 에서는 Column[T, K] 를 이용해서 colum 을 추가한다.

 Column<ContactDatabase.ContactInfo, String> firstNameColumn = new Column<ContactDatabase.ContactInfo, String>(new EditTextCell()) {

            @Override
            public String getValue(ContactDatabase.ContactInfo object) {
                return object.getFirstName();

            }

        };

Cell

CellTable 은 table 에서 바로 수정도 가능하게 할 수 있다. Column 을 만들 때 아래처럼 EditTextCell() 을 이용한다. 그리고 column 에 FieldUpdater 를 set 해준다.

Column<ContactDatabase.ContactInfo, String> firstNameColumn = new Column<ContactDatabase.ContactInfo, String>(new EditTextCell()) {

        @Override
        public String getValue(ContactDatabase.ContactInfo object) {
            return object.getFirstName();

        }

    };



// FieldUpdater

firstNameColumn.setFieldUpdater(new FieldUpdater<ContactDatabase.ContactInfo, String>() {

    @Override

    public void update(int index, ContactDatabase.ContactInfo object, String value) {

        // Called when the user changes the value.
        object.setFirstName(value);
        ContactDatabase.get().refreshDisplays();

    }

});

getValue() 의 호출과정

Column 의 render() 에서 cell.render() 를 호출하게 되는데 render 에서 getValue() 를 호출하게 된다.

// Column.java
public void render(Context context, T object, SafeHtmlBuilder sb) {
    cell.render(context, getValue(object), sb);
}



// CustomViewImpl.java
Column urlColumn = new Column(new TextCell()) {

    @Override
    public String getValue(DomainInfo object) {
        return object.getUrl();
    }
};

dataGrid.addColumn(urlColumn, NBusConstants.INSTANCE.domain());

그래서 custom cell 를 만들때는 render() 를 override 해서 getValue() 를 거쳐서 들어온 Object 를 처리 할 수 있게 된다. 아래 post 를 참고하자.

http://stackoverflow.com/questions/9043711/adding-hyperlink-in-gwt-celltable

cell 종류

Cell 종류는 다양하다. 아래를 참고하자.

http://www.gwtproject.org/doc/latest/DevGuideUiCellWidgets.html#available

쿠...sal

[컴][웹] GWT 사용하기 - CellTable