GWT UiBinder CellTable 未使用 AsyncDataProvider 呈现

Question

我想在我的页面上使用UIBinder 创建一个带有从服务器接收的数据的CellTable。 我想我不太明白UiBinder 的逻辑。在致电initWidget() 之前我应该​​做什么，不应该做什么？
当我删除对configureDataProvider() 的调用时，表格出现，但它是空的，进度条正在运行。当我包含configureDataProvider() 时，表格根本不会呈现。

您能解释一下这里发生了什么吗？

@UiField(provided = true)
VerticalPanel tableSelection;

@UiField(provided = true)
Anchor productTableAnchor;

@UiField(provided = true)
Anchor ordersTableAnchor;

@UiField(provided = true)
Anchor staffTableAnchor;
List<ProductDTO> products;

@UiField(provided = true)
CellTable<ProductDTO> productTable;

@UiField(provided = true)
SimplePager pager;

public TableSelectionWidget() {
SimplePager.Resources pagerResources = GWT
    .create(SimplePager.Resources.class);
tableSelection = new VerticalPanel();
productTableAnchor = new Anchor();
ordersTableAnchor = new Anchor();
staffTableAnchor = new Anchor();
productTable = new CellTable<ProductDTO>();
productTable.setPageSize(10);
configureTable();
pager = new SimplePager(TextLocation.CENTER, pagerResources, false, 0,
    true);
pager.setDisplay(productTable);
initWidget(uiBinder.createAndBindUi(this));
}

private void configureTable() {
Column<ProductDTO, String> nameColumn = new Column<ProductDTO, String>(
    new TextCell()) {
    @Override
    public String getValue(ProductDTO object) {
    return object.getName();
    }
};
Column<ProductDTO, String> priceColumn = new Column<ProductDTO, String>(
    new TextCell()) {
    @Override
    public String getValue(ProductDTO object) {
    return object.getPrice().toString();
    }
};
Column<ProductDTO, String> quantityColumn = new Column<ProductDTO, String>(
    new TextCell()) {
    @Override
    public String getValue(ProductDTO object) {
    return String.valueOf(object.getQuantity());
    }
};
productTable.addColumn(nameColumn, "Name");
productTable.addColumn(priceColumn, "Price");
productTable.addColumn(quantityColumn, "Qty");

configureDataProvider();

}

private void configureDataProvider() {
AsyncDataProvider<ProductDTO> provider = new AsyncDataProvider<ProductDTO>() {
    @Override
    protected void onRangeChanged(HasData<ProductDTO> display) {
    final int start = display.getVisibleRange().getStart();
    int length = display.getVisibleRange().getLength();
    AsyncCallback<List<ProductDTO>> callback = new AsyncCallback<List<ProductDTO>>() {
        public void onFailure(Throwable caught) {
        Window.alert(caught.getMessage());
        }

        public void onSuccess(List<ProductDTO> result) {
        products = result;
        updateRowData(start, result);
        }
    };

    productService.getAllProducts(callback);
    }
};

provider.addDataDisplay(productTable);
provider.updateRowCount(products.size(), true);
}

编辑添加 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"
    xmlns:ct="urn:import:com.ooo1sk.client.widgets">
    <ui:style>
    </ui:style>
    <g:HTMLPanel>
        <g:VerticalPanel styleName="" ui:field="tableSelection">
            <g:Anchor ui:field="ordersTableAnchor" text="Orders"></g:Anchor>
            <g:Anchor ui:field="productTableAnchor" text="Product"></g:Anchor>
            <g:Anchor ui:field="staffTableAnchor" text="Staff"></g:Anchor>
        </g:VerticalPanel>
        <g:HTMLPanel>
            <table cellspacing='0' cellpadding='0' style='width:100%;'>
                <tr>
                    <td valign='top'>
                        <c:CellTable addStyleNames='infoTable' pageSize='15'
                            ui:field='productTable' />
                    </td>
                </tr>
                <tr>
                    <td align='center'>
                        <c:SimplePager ui:field='pager' />
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:HTMLPanel>
</ui:UiBinder> 

UPD：更改后它可以工作，但只显示前 15 行，但 Pager 显示所有 91 行并在单击后更改编号。

 private void configureDataProvider() {

    AsyncDataProvider<ProductDTO> provider = new AsyncDataProvider<ProductDTO>() {
        @Override
        protected void onRangeChanged(HasData<ProductDTO> display) {
        final int start = display.getVisibleRange().getStart();
        final int length = display.getVisibleRange().getLength();
   
        productService
            .getAllProducts(new AsyncCallback<List<ProductDTO>>() {

                public void onSuccess(List<ProductDTO> result) {
                label.setText("start " + start + " "
                    + "resultsize " + result.size() + " "
                    + "length " + length);
                products = result;
                updateRowCount(result.size(), true);
                updateRowData(start, result);

                }

                public void onFailure(Throwable caught) {
                Window.alert(caught.getMessage());
                }
            });
        }
    };
    provider.addDataDisplay(productTable);
    }

好的，玩数字解决了这个问题。在updateRowData(start, result); 中，我将start 更改为0，现在它工作正常。不过，如果专家对此发表任何评论，我将不胜感激。

Answer 1

initWidget(Widget widget) 是Composite 类的一个方法，用于将自身初始化为可能的小部件内部聚合的包装器。通常，您创建基于给定小部件的小部件组合，然后将其传递给initiWidget() 方法。这样一来，根元素就不会暴露（就其方法而言），但仍然表现得好像它从未被包装过一样。

在您的示例中，UiBinder 负责定义 UI，因此您将绑定创建的返回 (uiBinder.createAndBindUi(this)) 传递给此类方法。在此调用之前（实际上是在 createAndBindUi() 之前，但通常它与 initWidget() 相关联），您必须实例化所有标有 @UiField(provided = true) 的小部件，即所有需要正确否则无法以普通的UiBinder 样式进行初始化。在您的情况下，您不需要标记所有内容 provided = true，只有 CellTable 需要（用于专业化）。

回到您的问题，如果您删除 configureDataProvider() 调用，您将永远不会设置 AsyncDataProvider 并且您根本看不到任何数据（旋转的 gif 是因为某处 - 不记得现在在哪里 -行数已设置为 0)。如果启用它，对addDataDisplay() 的调用将隐式强制进行范围更新，最终将调用AsyncDataProvider 来请求您的数据。

问题在于您没有在onSuccess() 回调中同时更新行数据和行数。见here。

另外，你不需要在addDataDisplay()之后再调用updateRowCount()，否则会发出两次请求来检索相同的初始数据，这是不必要的。