ZK Developer's Reference/Stateless Components/Building Stateless UI

Setting up

To set up stateless components in a ZK 10 application, you need to include the stateless components module and define a Dispatcher Richlet Filter in your `WEB-INF/web.xml` file.

Including Required Jar

dependencies {
    implementation "org.zkoss.zk:stateless:${zkVersion}"
    ...
}

Dispatcher Richlet Filter

<filter>
    <filter-name>DispatcherRichletFilter</filter-name>
    <filter-class>org.zkoss.stateless.ui.http.DispatcherRichletFilter</filter-class>
    <init-param>
        <param-name>basePackages</param-name>
        <param-value><!-- your base packages --></param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>DispatcherRichletFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Constructing UI with IComponent

Stateless components in ZK 10 are immutable and are created using Java APIs. Here is a simple example of how to compose a UI with IComponent. (I means immutable).

// Example of composing UI with IComponent
public IComponent demo() {
    return IButton.of("add items").withSclass("add-items");
}

Handling Events and Accessing UI State in a Stateless Manner

Events in stateless components are wired using the `@Action` annotation, and the UI state is accessed via the `@ActionVariable`.

// Wiring an event listener
@Action(type = Events.ON_CLICK) // Wiring event
public void addItem() {
    ...
}

// Accessing UI state
@Action(type = Events.ON_CLICK)
public void addItem(@ActionVariable(targetId = ActionTarget.SELF, field = "id") String orderId) {
    ...
}