Oat Dialog Demo
A modal dialog built on the native <dialog> element. Cancel, the Escape key and a click on the backdrop close it in the browser and tell the server, which runs onClose; Confirm validates the fields in its content and calls onConfirm over Ajax.
Confirmation
With a trigger label, the dialog renders its own button, which opens it without a server round trip.
// Java
add(new OatDialog("deleteDialog", Model.of("Delete item"), Model.of("Delete item?")) {
@Override
protected void onConfirm(AjaxRequestTarget target) {
success("Item deleted.");
}
}.setContent(new Label(OatDialog.CONTENT_ID, "This action cannot be undone."))
.setConfirmLabel(Model.of("Delete"))
.setConfirmVariant(OatVariant.DANGER));
<!-- HTML -->
<div wicket:id="deleteDialog"></div>
Editing from the server
Open a dialog from any Ajax handler with dialog.open(target), which re-renders it first. Its content sits in the dialog's own form: clear a field and click Save, and the dialog stays open with the error shown inline.
| Name | ||
|---|---|---|
| Ada Lovelace | ada@example.com | Edit |
| Grace Hopper | grace@example.com | Edit |
// Java
OatDialog editDialog = new OatDialog("editDialog", Model.of("Edit person")) {
@Override
protected void onConfirm(AjaxRequestTarget target) {
success("Saved."); // the dialog closes unless an error is reported here
target.add(table);
}
};
Fragment fields = new Fragment(OatDialog.CONTENT_ID, "editFields", this, new CompoundPropertyModel<>(selected));
fields.add(new OatTextField<String>("name").setRequired(true));
editDialog.setContent(fields);
// in a row's AjaxLink
selected.setObject(person);
editDialog.open(target);