GWT UiBinder Creating custom list widget with custom items widget

Question

I am creating custom widgets, which is containing checkbox, firstname, lastname labels, which I am calling 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>

And what I would like to do is create another widget called PersonList, which will contain all PersonItems as List<PersonItem>

PersonList view would contain

@UiField
List<PersonItem> personItems;

But unfortunatelly I have no idea how to make uiBinder xml file for this kind of field in PersonList.ui.xml file. Is it even possible?

In addition to the question asked in comment: I would like to use PersonList just as a tag

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

and the PersonList would by provided with data when main presenter is loaded.

PersonItem is the first .ui.xml file? And (ideally) PersonList.java would contain that List (or more likely, a Panel or some other way to describe that it contains widgets)? Can you clarify also how you would expect to use PersonItem and PersonList, like in a larger widget? Or just that PersonList would create specific tags in its own .ui.xml? — Colin Alworth, Jan 06 '19 at 18:33
maybe you could use the provided cell list widget http://www.gwtproject.org/doc/latest/RefWidgetGallery.html#celllist — Marc Stroebel, Jan 07 '19 at 08:09

Adam · Answer 1 · 2019-01-07T19:46:16.843

As @Marc Ströbel suggested, you can use CellList to manage your data list. As a future improvement you can easily add, for example, a pager to such a list.

And you can use any container for CellList. You just need to overwrite the cell's (AbstractCell's) render() method.

Example code (as a container I've used 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);
    }
}

I've assumed that person data (firstName, lastName, etc.) is stored in PersonData class.

Now you can use the PersonList widget in UiBinder just as you wanted:

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

GWT UiBinder Creating custom list widget with custom items widget

1 Answers1