<t:form t:id="form"> <t:errors/> <div class="t-beaneditor"> <h2>Person</h2> <t:beaneditor t:id="person"/><h3>Phones</h3> <div t:type="ajaxformloop" t:id="phones" source="person.phones" encoder="phoneEncoder" value="phone"> <t:select t:id="type" value="phone.type"/><t:textfield t:id="number" value="phone.number"/> <t:datefield t:id="date" value="phone.startDate"/>| <t:removerowlink> remove </t:removerowlink> </div> <p> <input type="submit" value="Update"/> </p> </div> </t:form>
public class DocsAjaxFormLoop { @Property @Persist private Person person; @Property private Phone phone; @Property private Boolean deleted; @OnEvent(EventConstants.ACTIVATE) void init() { if (person == null) person = new Person(); } public ValueEncoder<Phone> getPhoneEncoder() { return new ValueEncoder<Phone>() { public String toClient(Phone value) { return value.getNumber(); } public Phone toValue(String clientValue) { for (Phone currentPhone : person.getPhones()) { if (currentPhone.getNumber() != null && clientValue.equals(currentPhone.getNumber())) return currentPhone; } return null; } }; } @OnEvent(EventConstants.SUCCESS) public Object onSuccess() { return this; } @OnEvent(value=EventConstants.ADD_ROW, component="phones") public Object onAddRowFromPhones() { Phone phone = new Phone(); phone.setNumber(""); phone.setStartDate(new Date()); person.getPhones().add(phone); phone.setPerson(person); return phone; } @OnEvent(value=EventConstants.REMOVE_ROW, component="phones") void onRemoveRowFromPhones(Phone phoneToDelete) { person.getPhones().remove(phoneToDelete); } }