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, который будет содержать все PersonItems как List<PersonItem>

Представление PersonList будет содержать

@UiField
List<PersonItem> personItems;

Но, к сожалению, я понятия не имею, как сделать XML-файл uiBinder для этого вида поля в PersonList.ui.xml файл. Это вообще возможно?

В дополнение к вопросу, заданному в комментарии: я хотел бы использовать PersonList просто как тег

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

и PersonList будет предоставляться с данными при загрузке основного докладчика.

1 ответ

Как предложил 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);
    }
}

Я предположил, что данные о человеке (firstName, lastName и т. Д.) Хранятся в PersonData учебный класс.


Теперь вы можете использовать PersonList виджет в UiBinder так же, как вы хотели:

<p:PersonList ui:field="list" />
Другие вопросы по тегам