时间戳

首页 > 解决方案 > GWT UiBinder 使用自定义项目小部件创建自定义列表小部件

gwt - GWT UiBinder 使用自定义项目小部件创建自定义列表小部件

问题描述

我正在创建自定义小部件，其中包含复选框、名字、姓氏标签，我称之为 PersonItem。

<g:HorizontalPanel verticalAlignment="middle">
    <g:CheckBox ui:field="isSelected" />
    <g:Label ui:field="firstName" text="placeholder" />
    <g:Label ui:field="lastName" text="placeholder" />
</g:HorizontalPanel>

我想做的是创建另一个名为 PersonList 的小部件，它将包含所有 PersonItemsList<PersonItem>

PersonList 视图将包含

@UiField
List<PersonItem> personItems;

但不幸的是，我不知道如何为文件中的这种字段制作 uiBinder xmlPersonList.ui.xml文件。甚至可能吗？

除了评论中提出的问题：我想将 PersonList 用作标签

<p:PersonList ui:field="list" />

并且 PersonList 将在加载主演示者时提供数据。

标签： gwtmvpuibindermvp4g

解决方案

正如@Marc Ströbel建议的那样，您可以使用它CellList来管理您的数据列表。作为未来的改进，您可以轻松地将寻呼机添加到此类列表中。

并且您可以使用任何容器进行CellList. 您只需要覆盖单元格的 ( AbstractCell's)render()方法。

示例代码（作为我使用的容器VerticalPanel）：

<!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">

    <g:HTMLPanel>
        <g:VerticalPanel ui:field="container" />
    </g:HTMLPanel>
</ui:UiBinder>

public class PersonList extends Composite {

    private static PersonListUiBinder uiBinder = GWT.create(PersonListUiBinder.class);

    interface PersonListUiBinder extends UiBinder<Widget, PersonList> {}

    @UiField
    VerticalPanel container;

    private CellList<PersonData> list;

    public PersonList() {
        initWidget(uiBinder.createAndBindUi(this));
        list = new CellList<PersonData>(new AbstractCell<PersonData>() {
            @Override
            public void render(Context context, PersonData value, SafeHtmlBuilder sb) {
                container.add(new PersonItem(value));
            }
        });
    }

    public void setData(List<PersonData> values) {
        container.clear();
        list.setRowData(values);
    }
}

我假设人员数据（名字、姓氏等）存储在PersonData类中。

现在您可以PersonList随心所欲地使用小部件UiBinder：

<p:PersonList ui:field="list" />

推荐阅读