Building Stateless UI"

From Documentation
Line 2: Line 2:
 
__TOC__
 
__TOC__
  
= 1 Setting up =
+
= 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.
 
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 ==
 
== Including Required Jar ==
<syntaxhighlight>
+
<syntaxhighlight lang='groovy'>
 
dependencies {
 
dependencies {
 
     implementation "org.zkoss.zk:stateless:${zkVersion}"
 
     implementation "org.zkoss.zk:stateless:${zkVersion}"
Line 14: Line 14:
  
 
== Dispatcher Richlet Filter ==
 
== Dispatcher Richlet Filter ==
<syntaxhighlight>
+
<syntaxhighlight lang='xml'>
 
<filter>
 
<filter>
 
     <filter-name>DispatcherRichletFilter</filter-name>
 
     <filter-name>DispatcherRichletFilter</filter-name>

Revision as of 10:32, 22 November 2023


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 an example of how to compose a UI with IComponent.

// 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) {
    ...
}

This is a basic outline based on the documents available. For more detailed information and examples, it is recommended to refer directly to the documents: "Diving into Stateless Components" and "ZK 10 is ready for building Cloud-Native Applications."



Last Update : 2023/11/22

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.