Skip to content
Wicket Oat Demo
Theme: 💼 Business

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.

Delete item?

This action cannot be undone.
// 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.

NameEmail
Ada Lovelace ada@example.com Edit
Grace Hopper grace@example.com Edit

Edit person

// 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);