Skip to content
Wicket Oat Demo
Theme: 💼 Business

Getting Started

Go from zero to a beautiful Oat-styled Wicket application in under 5 minutes.

1 Add Dependency

Add the following dependency to your pom.xml:

<dependency>
    <groupId>dev.jbaby</groupId>
    <artifactId>wicket-oat-core</artifactId>
    <version>0.3.0</version>
</dependency>

2 Install the Library

Initialize Oat UI in your WebApplication.init() method. This registers global CSS/JS and adds the one Content Security Policy source Oat needs (img-src data:) to Wicket's strict default.

@Override
protected void init() {
    super.init();
    
    // Registers Oat's CSS/JS; keeps Wicket's strict CSP
    WicketOats.install(this);
}

3 Create Your Base Page

Extend OatAppLayout to get the sidebar, top navigation, and automatic theme support for free.

public class BasePage extends OatAppLayout {
    // That's it! Your markup should use <wicket:extend>
}

4 Use the Oat Factory

Use the central Oat class to add components or behaviors to your page.

// In your Page constructor
add(OatButton.onClick("myButton", "Click Me", target -> {
    Oat.toast(target, "Hello from Oat!");
}));

Core Concepts: Components vs. Behaviors

Wicket Oat offers two ways to build your UI. Understanding the difference is key to using the library effectively.

1. Oat Components

Self-contained widgets that manage their own internal markup.

  • Created with: new, or a lambda factory such as OatButton.onClick(...)
  • Philosophy: "Give me an Alert"
  • Best for: Building UI quickly without worrying about HTML tags.
add(new OatAlert("id", "Saved!", OatVariant.SUCCESS));

2. Oat Behaviors

Addons that "Oat-ify" existing Wicket components via composition.

  • Namespace: Oat.Behaviors
  • Philosophy: "Make this look like an Alert"
  • Best for: Styling standard Wicket links, labels, or containers.
myLink.add(Oat.Behaviors.button());
Feature Component Behavior
Java Usage new OatAlert(...) comp.add(new AlertBehavior())
Markup Handled by Oat Handled by You
Flexibility Fixed Structure Highly Flexible

AI AI-Powered Development

Accelerate your development with the Agent Skill for Wicket Oat. This skill gives the AI agent specialized knowledge about the library's components and patterns.

To install the skill:

Point your AI coding agent at the wicket-oat/ directory, or copy it into your agent's own skills folder — see the README for details.

Try asking the agent: "Add an Oat primary button that shows a success toast" or "Oat-ify this form".


Test Your Setup

If you've followed the steps correctly, your components should look like this:

Ready for more?

Explore the sidebar to see detailed demos for every component available in the library.