Skip to content
Wicket Oat Demo
Theme: 💼 Business

Oat Form & Feedback Demo

Inputs

Checkable

Radio

Preference

Select & Textarea

Encapsulated Components

These components use BaseOatField for cleaner Java code and consistent styling.

Must be at least 8 chars
Oat Radio Choice
Oat Checkbox Group

Feedback Messages

OatFeedbackPanel shows Wicket's info(), success(), warn() and error() messages as Oat alerts. It adds itself to Ajax responses: these links only report a message and never touch the AjaxRequestTarget.

Info Success Warning Error 
// Java
add(new OatFeedbackPanel("feedback"));

add(new AjaxLink<Void>("save") {
    @Override
    public void onClick(AjaxRequestTarget target) {
        success("Saved."); // no target.add(feedback) needed
    }
});

To show messages as toasts instead, add Oat.Behaviors.feedbackToasts() to the page (see the Event Registration demo). Both leave out errors that Oat form fields already show inline.

Spinners

Skeletons

Progress & Meter

How to use

Encapsulated Fields (Recommended)

For most cases, use the specialized Oat... components. They handle labeling, feedback, and accessibility automatically.

// Java
form.add(new OatTextField<>("name", "Full Name", nameModel)
    .setPlaceholder(Model.of("John Doe"))
    .setRequired(true));

form.add(new OatDropdownChoice<String>("status", "Status", statusModel, statusChoices));
<!-- HTML -->
<div wicket:id="name"></div>
<div wicket:id="status"></div>

Like plain Wicket form components, they can also take their model from a parent CompoundPropertyModel and their label from the page's .properties file, both by id. They render their own tag, so an Ajax onError can re-render them to show inline errors. See the Event Registration demo.

// Java
Form<Person> form = new Form<>("form", new CompoundPropertyModel<>(person));
form.add(new OatTextField<String>("name").setRequired(true));

// MyPage.properties
name=Full Name

Custom Form Fields (Manual)

Use FieldBehavior on a container (like <label> or <div>) to style manual fields.

// Java
WebMarkupContainer container = new WebMarkupContainer("field");
container.add(new FieldBehavior());
container.add(new TextField<>("input", model));
<!-- HTML -->
<label wicket:id="field">
    Label Text
    <input wicket:id="input" type="text" />
</label>

Switches

Add SwitchBehavior to a CheckBox via the Oat factory.

// Java
checkBox.add(Oat.Behaviors.oatSwitch());
<!-- HTML -->
<input wicket:id="switch" type="checkbox" />

Feedback

Use OatSpinner, OatSkeleton components or their behaviors for loading states.

// Java - Components
add(new OatSpinner("spinner", SpinnerBehavior.Size.SMALL));
add(new OatSkeleton("skeleton", SkeletonBehavior.Shape.LINE));

// Java - Behaviors
container.add(Oat.Behaviors.spinner(SpinnerBehavior.Size.SMALL));
container.add(Oat.Behaviors.skeleton(SkeletonBehavior.Shape.LINE));
<!-- HTML -->
<div wicket:id="spinner"></div>
<div wicket:id="skeleton"></div>

Progress & Meter

Use the specialized OatProgress and OatMeter components. OatMeter supports advanced ranges like low, high, and optimum.

// Java - Simple progress
add(new OatProgress("progress", 60));

// Java - Advanced meter
add(new OatMeter("meter", 0.8)); // Default values 0-1 range
// or for full control:
add(new OatMeter("meter", 
    Model.of(0.8), // value
    Model.of(0),   // min
    Model.of(1),   // max
    Model.of(0.3), // low
    Model.of(0.7), // high
    Model.of(1)    // optimum
));
<!-- HTML -->
<progress wicket:id="progress"></progress>
<meter wicket:id="meter"></meter>