Nesting Bound Custom Aggregrate Components

(Ugly title, but a “simple” problem)

A bit of setup: Take a Person POJO which has, as one of it’s properties, a List of Address POJOs. Create a UI that allows the user to edit the Person and _Address_es it contains, while being able to add/edit/delete Address objects.

From a UI perspective, this isn’t very difficult – Render the Person properties, then add an address section in which, for each Address add an Address row with each of the Address properties and a button to delete it, finally adding a button below it all to add another (blank, as of yet) Address to the list. (In other words, a portion of a form that allows for 0 or more Address elements.)

The problem is data binding and the trickle-down… Ideally we can bind the Person POJO to the View and be done with it, using all the great data binding/validation stuff. But we need to have some custom component that will handle that List of Address POJOs, creating each row which is likely another component that will accept a binding of an Address object, and create the underlying various TextField fields and whatnot. Each layer data binding down and up the proverbial stack.

Between Component, AbstractField, the various Has… interfaces, and never mind Composite (which doesn’t seem like it will/should work here) there’s not much documentation / example on how to proceed. So far I’ve been focusing on the Address component (that has TextField elements for address lines, city, state, etc), and think that if I extend AbstractField and extend HasComponents I can get there by creating a new binder internally, watching setPresentationValue() for updates to be bound. Not sure exactly how I’m going to handle the delete button yet, but probably have to bubble up a custom event to the parent component somehow.

Is this a sane path to take or is there a better way for this use case?