use of com.vaadin.flow.data.binder.Binder in project flow-components by vaadin.
the class GridViewEditorPage method createBufferedDynamicEditor.
private void createBufferedDynamicEditor() {
Div message = new Div();
message.setId("buffered-dynamic-editor-msg");
Grid<Person> grid = new Grid<>();
List<Person> persons = new ArrayList<>();
persons.addAll(createItems());
grid.setItems(persons);
Column<Person> nameColumn = grid.addColumn(Person::getFirstName).setHeader("Name");
Column<Person> subscriberColumn = grid.addColumn(Person::isSubscriber).setHeader("Subscriber");
Column<Person> emailColumn = grid.addColumn(Person::getEmail).setHeader("E-mail");
Binder<Person> binder = new Binder<>(Person.class);
Editor<Person> editor = grid.getEditor();
editor.setBinder(binder);
editor.setBuffered(true);
TextField field = new TextField();
binder.bind(field, "firstName");
nameColumn.setEditorComponent(field);
Div validationStatus = new Div();
validationStatus.getStyle().set("color", "red");
validationStatus.setId("email-validation");
Checkbox checkbox = new Checkbox();
binder.bind(checkbox, "subscriber");
subscriberColumn.setEditorComponent(checkbox);
TextField emailField = new TextField();
// When not a subscriber, we want to show a read-only text-field that
// ignores whatever is set to it
TextField readOnlyEmail = new TextField();
readOnlyEmail.setValue("Not a subscriber");
readOnlyEmail.setReadOnly(true);
Runnable bindEmail = () -> binder.forField(emailField).withValidator(new EmailValidator("Invalid email")).withStatusLabel(validationStatus).bind("email");
Runnable setEmail = () -> emailColumn.setEditorComponent(item -> {
if (item.isSubscriber()) {
bindEmail.run();
return emailField;
} else {
return readOnlyEmail;
}
});
// Sets the binding based on the Person bean state
setEmail.run();
// Refresh subscriber editor component when checkbox value is changed
checkbox.addValueChangeListener(event -> {
// Only updates from the client-side should be taken into account
if (event.isFromClient()) {
// When using buffered mode, the partial updates shouldn't be
// propagated to the bean before the Save button is clicked, so
// here we need to override the binding function to take the
// checkbox state into consideration instead
emailColumn.setEditorComponent(item -> {
if (checkbox.getValue()) {
bindEmail.run();
return emailField;
} else {
return readOnlyEmail;
}
});
grid.getEditor().refresh();
}
});
Collection<Button> editButtons = Collections.newSetFromMap(new WeakHashMap<>());
// Resets the binding function to use the bean state whenever the editor
// is closed
editor.addCloseListener(event -> {
setEmail.run();
editButtons.stream().forEach(button -> button.setEnabled(true));
});
Column<Person> editorColumn = grid.addComponentColumn(person -> {
Button edit = new Button("Edit");
edit.addClassName("edit");
edit.addClickListener(e -> {
editor.editItem(person);
field.focus();
});
edit.setEnabled(!editor.isOpen());
editButtons.add(edit);
return edit;
});
editor.addOpenListener(e -> editButtons.stream().forEach(button -> button.setEnabled(!editor.isOpen())));
editor.addCloseListener(e -> editButtons.stream().forEach(button -> button.setEnabled(!editor.isOpen())));
Button save = new Button("Save", e -> editor.save());
save.addClassName("save");
Button cancel = new Button("Cancel", e -> editor.cancel());
cancel.addClassName("cancel");
// Add a keypress listener that listens for an escape key up event.
// Note! some browsers return key as Escape and some as Esc
grid.getElement().addEventListener("keyup", event -> editor.cancel()).setFilter("event.key === 'Escape' || event.key === 'Esc'");
Div buttons = new Div(save, cancel);
editorColumn.setEditorComponent(buttons);
editor.addSaveListener(event -> message.setText(event.getItem().getFirstName() + ", " + event.getItem().isSubscriber() + ", " + event.getItem().getEmail()));
grid.setId("buffered-dynamic-editor");
addCard("Grid Editor", "Dynamic Editor in Buffered Mode", message, validationStatus, grid);
}
Aggregations