GWU CellTable与UiBinder无法正常工作

时间:2015-02-21 22:03:05

标签: gwt uibinder celltable

我正在尝试使用UiBinder渲染Celltable但我只得到一个空白屏幕。 这是我的代码:

VDataGrid.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:c="urn:import:com.google.gwt.user.cellview.client">

    <ui:style>
        .cellTable {
        border-bottom: 1px solid #ccc;
        text-align: left;
        margin-bottom: 4px;
        }
    </ui:style>

    <g:HTMLPanel>
        <table cellspacing='0' cellpadding='0' style='width:100%;'>
            <tr>
                <td valign='top'>
                    <c:CellTable addStyleNames='{style.cellTable}'
                        pageSize='15' ui:field='cellTable' />
                </td>
            </tr>
        </table>
    </g:HTMLPanel>
</ui:UiBinder>

VDataGrid.java

public class VDataGrid extends ResizeComposite {

    interface Binder extends UiBinder<Widget, VDataGrid> {
    }
    interface SelectionStyle extends CssResource {
        String selectedRow();
    }

    private static final Binder binder = GWT.create(Binder.class);

    @UiField(provided = true)
    CellTable<Contact> cellTable;

    public VDataGrid() {
        initWidget(binder.createAndBindUi(this));

        TextColumn<Contact> nameColumn = new TextColumn<Contact>() {
            @Override
            public String getValue(Contact object) {
                return object.name;
            }
        };
        cellTable.addColumn(nameColumn, "Name");

        DateCell dateCell = new DateCell();
        Column<Contact, Date> dateColumn = new Column<Contact, Date>(dateCell) {
            @Override
            public Date getValue(Contact object) {
                return object.birthday;
            }
        };
        cellTable.addColumn(dateColumn, "Date");

        TextColumn<Contact> addressColumn = new TextColumn<Contact>() {
            @Override
            public String getValue(Contact object) {
                return object.address;
            }
        };
        cellTable.addColumn(addressColumn, "Address");

        final ListDataProvider<Contact> dataProvider = new ListDataProvider<Contact>();

        // Connect the table to the data provider.
        dataProvider.addDataDisplay(cellTable);

        // Add the data to the data provider, which automatically pushes it to
        // the
        // widget.
        List<Contact> list = dataProvider.getList();
        for (Contact contact : CONTACTS) {
            list.add(contact);
        }
    }

以下是使用上述类的代码 DataGrid.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:grid='urn:import:com.grid.client'>

    <g:DockLayoutPanel unit='EM'>
        <g:center>
            <g:ScrollPanel>
                <grid:VDataGrid ui:field='grid' />
            </g:ScrollPanel>
        </g:center>
    </g:DockLayoutPanel>
</ui:UiBinder>

入口点类:DataGrid.java

public class DataGrid implements EntryPoint {


    interface Binder extends UiBinder<DockLayoutPanel, DataGrid> { }

    private static final Binder binder = GWT.create(Binder.class);

    @UiField VDataGrid grid;

    @Override
    public void onModuleLoad() {
        // Create the UI defined in Mail.ui.xml.
        DockLayoutPanel outer = binder.createAndBindUi(this);
        Window.enableScrolling(false);
        Window.setMargin("0px");
        RootLayoutPanel root = RootLayoutPanel.get();
        root.add(outer);
    }
}

我只看到一个空白的屏幕。欣赏一些这方面的见解。

1 个答案:

答案 0 :(得分:1)

大多数情况下,如果你没有看到你的CellTable,那是因为它的高度为零。

您将CellTable放在HTMLPanel中。 HTMLPanel和CellTable都没有实现ProvideResize和/或RequireResize接口,这意味着它们的高度必须明确设置 - 它们不会从父窗口小部件中获取它。

此外,无需将CellTable放在table标记内 - 它没有用处。实际上,您也不需要将它放在HTMLPanel中。