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