ZK Documentation

https://github.com/zkoss/zkdoc
Admin
ZK is a popular Java web framework that allows developers to build modern, feature-rich web...
Tokens:1,128,688
Snippets:13,355
Trust Score:7.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Camera component video and snapshot implementation

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/camera.md

This example demonstrates a camera setup that records video and captures snapshots, displaying the media using Video and Image components.

```xml
<hlayout>
    <camera width="480px" audio="true" lengthLimit="60"
            recordFormat="video/webm"
            onVideoUpload='video.setContent(event.getMedia())'
            onSnapshotUpload='image.setContent(event.getMedia())' />
    <vlayout>
        <video id="video" controls="true" />
        <image id="image" />
    </vlayout>
</hlayout>
```

--------------------------------

### Module Name Matching Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/javascript_module.md

Illustrates how the 'name' attribute acts as a prefix, matching packages that start with the specified name. This allows a single configuration to cover multiple related sub-packages.

```xml
<javascript-module name="foo" version="1.5.0"/>
```

--------------------------------

### Hlayout simple example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/hlayout.md

A basic example showing the difference between vlayout and hlayout components.

```xml
<zk>
     <vlayout>
         <button label="Button 1"/>
         <button label="Button 2"/>
     </vlayout>
     <hlayout>
         <button label="Button 3"/>
         <button label="Button 4"/>
     </hlayout>
</zk>
```

--------------------------------

### Start OC4J Server

Source: https://github.com/zkoss/zkdoc/blob/master/zk_installation_guide/oracle_server.md

Use this command to start the OC4J server. Ensure you are in the correct directory.

```bash
bin/oc4j -start
```

--------------------------------

### Start local web server

Source: https://github.com/zkoss/zkdoc/blob/master/README.md

Execute this script to start the local web server for previewing the site.

```bash
preview.sh
```

--------------------------------

### Example version Configuration

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_version_element.md

An example configuration specifying the version class, UID, and minimum ZK version.

```xml
<version>
    <version-class>foo.MyAddon</version-class>
    <version-uid>1.0.3</version-uid>
    <zk-version>5.0.0</zk-version>
</version>
```

--------------------------------

### Rebuild the example plugin

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/integration/idempiere_zk_keikai_enterprise_plugin.md

Use this command to rebuild only the example plugin module if the fragment is already available.

```bash
cd zkoss-idempiere-keikai-plugin/org.idempiere.keikai.example
mvn clean verify
```

--------------------------------

### Example configuration for web-app-class

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_web_app_class_element.md

An example of how to configure a custom web application class within the system-config element.

```xml
<system-config>
  <web-app-class>foo.MyKillerApp</web-app-class>
</system-config>
```

--------------------------------

### Install local dependencies

Source: https://github.com/zkoss/zkdoc/blob/master/README.md

Run this command once to install the necessary gems for the project.

```bash
bundle install
```

--------------------------------

### Example configuration of device-class

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_device_class_element.md

An example showing the device-class element used within a device-config block.

```xml
<device-config>
    <device-type>ajax</device-type>
    <device-class>my.MyAjaxDevice</device-class>
</device-config>
```

--------------------------------

### ViewModel Initialization Examples

Source: https://github.com/zkoss/zkdoc/blob/master/zk_mvvm_ref/syntax/viewmodelinit.md

Provides examples of ViewModel classes demonstrating @Init annotation usage with and without superclass invocation.

```java
public class FooViewModel {
    @Init
    public void initFoo() {
        //initializing
    }
}

public class BarViewModel extends FooViewModel {
    @Init(superclass=true)
    public void initBar() {
        //initial method of super class FooViewModel will be called first.
    }
}

//since 6.0.1
@Init(superclass=true)
public class ChildViewModel extends BarViewModel {
	//method body
}
```

--------------------------------

### Example QR Code

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/barcode.md

A basic example of rendering a QR code.

```xml
<barcode type="qr" value="https://www.zkoss.org/" height="100px"/>
```

--------------------------------

### Install Node and build project

Source: https://github.com/zkoss/zkdoc/blob/master/zk_style_customization_guide/migration_guides/guide-breeze-8.x-to-9.6.6.md

Commands to verify the Node.js version, install the zkless-engine dependency, and package the project.

```sh
node -v                  # must be >= 10.16
npm install              # installs zkless-engine
mvn clean package
```

--------------------------------

### Install zk-doc-mcp-server using uv

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/zk_doc_mcp_server.md

Installs the zk-doc-mcp-server package into the active virtual environment using the 'uv' package manager. This is the recommended installation method.

```bash
# Using uv (recommended)
uv pip install zk-doc-mcp-server
# This command installs the package into the currently active virtual environment.
```

--------------------------------

### Audio player example with multiple tracks

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/track.md

A complete example of an audio component configured with various lyric and subtitle tracks.

```xml
 <audio src="music.wav" controls="true">
   <track kind="captions" src="music_lyric.vtt" srclang="en" default="true"/>
   <track kind="subtitles" src="music_lyric_fr.vtt" srclang="fr"/>
   <track kind="subtitles" src="music_lyric_de.vtt" srclang="de"/>
   <track kind="subtitles" src="music_lyric_zh.vtt" srclang="zh"/>
 </audio>
```

--------------------------------

### Stepbar Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/step.md

A comprehensive example showing a Stepbar with multiple steps in different states.

```xml
<zk>
    <stepbar linear="false" activeIndex="2" width="600px">
        <step title="First Step" iconSclass="z-icon-home"/>
        <step title="Second Step" complete="true" />
        <step title="Third Step" error="true" />
    </stepbar>
</zk>
```

--------------------------------

### Space component example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/space.md

A basic example demonstrating multiple space components with bars enabled.

```xml
 <zk>
     <space bar="true"/>
     <space bar="true"/>
     <space bar="true"/>
     <space bar="true"/>
 </zk>
```

--------------------------------

### Target platform absolute path example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/integration/idempiere_zk_charts_plugin.md

An example of the absolute path to use when replacing the target platform reference.

```text
/Users/yourname/parent-folder/idempiere/org.idempiere.p2.targetplatform
```

--------------------------------

### Nav Component Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/nav.md

A comprehensive example showing a navbar with navitem and a nav group containing a badge count.

```xml
<navbar orient="vertical" width="200px">
    <navitem label="Home" iconSclass="z-icon-home" />
    <nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
        <navitem label="Step One" />
        <navitem label="Step Two" />
        <navitem label="Step Three" />
    </nav>
    <navitem label="About" iconSclass="z-icon-flag" />
    <navitem label="Contact" iconSclass="z-icon-envelope"/>
</navbar>
```

--------------------------------

### Example error-page Configuration

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_error_page_element.md

A practical example mapping java.lang.Throwable to a specific ZUL error page.

```xml
    <error-page>
        <exception-type>java.lang.Throwable</exception-type>
        <location>/WEB-INF/sys/error.zul</location>
    </error-page>
```

--------------------------------

### Default Implementation Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/org_zkoss_zk_ui_metainfo_page_loader_class.md

An example of a custom loader implementation extending org.zkoss.web.util.resource.ResourceLoader, demonstrating the required parse methods.

```java
private static class MyLoader extends org.zkoss.web.util.resource.ResourceLoader {
    private final WebApp _wapp;
    private MyLoader(WebApp wapp) {
        _wapp = wapp;
    }

    //-- super --//
    protected Object parse(String path, File file, Object extra)
    throws Exception {
        final Locator locator =
            extra != null ? (Locator)extra: getLocator(_wapp, path);
        return new Parser(_wapp, locator).parse(file, path);
    }
    protected Object parse(String path, URL url, Object extra)
    throws Exception {
        final Locator locator =
            extra != null ? (Locator)extra: getLocator(_wapp, path);
        return new Parser(_wapp, locator).parse(url, path);
    }
}
```

--------------------------------

### Example configuration for csp-header-generator-class

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_csp-header-generator-class_element.md

An example showing the element used within the system-config block, requiring csp-enabled to be set to true.

```xml
<system-config>
    <csp-enabled>true</csp-enabled>
    <csp-header-generator-class>org.zkoss.zk.ui.http.CspProviderImpl</csp-header-generator-class>
</system-config>
```

--------------------------------

### Configure Loadingbar Start Parameters

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/ui_patterns/useful_java_utilities.md

Sets the initial progress value, screen position, and indeterminate state when starting the loading bar.

```java
loadingbarCtrl.start(20, "top", false);
```

--------------------------------

### Ask for ZK Examples

Source: https://github.com/zkoss/zkdoc/blob/master/_posts/2026-01-01-zk-doc-mcp-server.md

Request examples of ZK framework features, like data binding, from the AI assistant.

```text
Find examples of data binding in ZK
```

--------------------------------

### Set start property

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/frozen.md

Example of setting the horizontal scroll starting position using the start property.

```xml
<grid width="600px">
    <frozen columns="2" start="1"/>
    ...
</grid>
```

--------------------------------

### Build the fragment and example plugin

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/integration/idempiere_zk_keikai_enterprise_plugin.md

Navigate to the repository root and execute the Maven build command.

```bash
cd zkoss-idempiere-keikai-plugin
mvn clean verify -f parent-repository-pom.xml
```

--------------------------------

### Build the example plugin with Maven

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/integration/idempiere_zk_charts_plugin.md

Commands to navigate to the plugin directory and execute the Maven build process to generate artifacts in the target folder.

```bash
cd zkoss-idempiere-zkcharts-plugin/org.idempiere.zkcharts.example
mvn clean verify
```

--------------------------------

### Customize Drag Options with getDragOptions_

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/drag_and_drop_effects.md

Example of overriding getDragOptions_ to modify drag behavior, such as changing the background color during the start effect.

```javascript
getDragOptions_: function(map) {
    if(windowOptions == null){
        windowOptions = zk.copy(new Map(),map);
        //Commented out: chain effect from multiple overrides
        //var oldstarteffect = map.starteffect;
        windowOptions.starteffect = function(dg) {
            //oldstarteffect.apply(this,arguments);
            jq(dg.node).css("background-color","yellow");
        }
    }
    return windowOptions;
}
```

--------------------------------

### Create a CalendarItem with DefaultCalendarItem.Builder

Source: https://github.com/zkoss/zkdoc/blob/master/zk_calendar_essentials/displaying_calendar_items.md

Use the DefaultCalendarItem.Builder to instantiate a new calendar item. This example sets the title, content, start and end times, and the time zone.

```java
 DefaultCalendarItem calendarItem = new DefaultCalendarItem.Builder()
                .withTitle("my title")
                .withContent("my content")
                .withBegin(LocalDateTime.now().truncatedTo(ChronoUnit.HOURS))
                .withEnd(LocalDateTime.now().truncatedTo(ChronoUnit.HOURS).plusHours(2))
                .withZoneId(calendars.getDefaultTimeZone().toZoneId())
                .build();
```

--------------------------------

### Configure SSH for Git Clone

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/zk_doc_mcp_server.md

Sets environment variables to use SSH for cloning the documentation repository and starts the MCP server. Requires SSH key setup.

```bash
export ZK_MCP_CLONE_METHOD=ssh
export ZK_MCP_USE_GIT=true
uv run python3 -m ZK_MCP_mcp
```

--------------------------------

### Example logging configuration file

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/supporting_utilities/logger.md

A sample configuration file demonstrating how to set different log levels for various ZK packages and classes.

```xml
 org.zkoss.zk.ui.impl.UiEngineImpl=FINER
    #Make the log level of the specified class to FINER
 org.zkoss.zk.ui.http=DEBUG
    #Make the log level of the specified package to DEBUG
 org.zkoss.zk.ui=OFF
    #Turn off the log for the specified package
 org.zkoss=WARNING
    #Make all log levels of ZK classes to WARNING except those specified here
```

--------------------------------

### ZK MVVM Binding Setup

Source: https://github.com/zkoss/zkdoc/blob/master/zk_mvvm_ref/syntax/selectorparam.md

An example of a ZK UI component hierarchy using BindComposer for MVVM data binding. It sets up a ViewModel and includes buttons for command execution.

```xml
<vbox apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('foo.SelectorParamVM')">

    <hbox><label id="message"/></hbox>
    <hbox><label /></hbox>
    <hbox><label /></hbox>
    <hbox><label /></hbox>

    <button id="cmd" label="cmd" onClick="@command('cmd')"/>
</vbox>
```

--------------------------------

### 3D Pie Chart Example

Source: https://github.com/zkoss/zkdoc/blob/master/_posts/2012-05-02-new-features-of-zk-601.md

Illustrates the creation of a 3D pie chart by setting the 'threeD' attribute to 'true' in the FusionChart component. Similar model setup as 2D pie chart.

```xml
<zk>
<fusionchart id="mychart" title="3D Pie Chart" type="pie" threeD="true"
    width="500" height="250" fgAlpha="128">
    <zscript>
        import org.zkoss.zul.*;
    
        PieModel piemodel = new SimplePieModel();
        piemodel.setValue("C/C++", new Double(12.5));
        piemodel.setValue("Java", new Double(50.2));
        piemodel.setValue("VB", new Double(20.5));
        piemodel.setValue("PHP", new Double(15.5));
        mychart.setModel(piemodel);
    </zscript>
</fusionchart>
</zk>
```

--------------------------------

### Example configuration for Ajax-as-a-Service

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_package_element.md

An example showing how to specify a client package within the client-config element to enable Ajax-as-a-Service for a specific package namespace.

```xml
<client-config>
    <package>
        <package-name>foo.fly</package-name>
    </package>
</client-config>
```

--------------------------------

### Pre-selecting an item on load

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/treeitem.md

Example showing how to pre-select an item during initialization.

```xml
<tree>
  <treechildren>
    <treeitem label="Option A" selected="true"/>
    <treeitem label="Option B"/>
  </treechildren>
</tree>
```

--------------------------------

### Implement Frozen Columns in a Grid

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/frozen.md

This example demonstrates using the <frozen> component within a <grid> to pin the first two columns. The start attribute defines the initial horizontal scroll position.

```xml
<grid width="600px">
    <frozen columns="2" start="1"/>
    <columns>
        <column width="50px">ID</column>
        <column width="50px">Priority</column>
        <column width="50px">Status</column>
        <column width="150px">Summary</column>
        <column width="250px">Detail</column>
        <column width="100px">Group</column>
        <column width="50px">Assign</column>
    </columns>
    <rows>
        <row>
            <cell>0001</cell>
            <cell>1</cell>
            <cell>closed</cell>
            <cell>Fix login issue</cell>
            <cell>Login does not work at all</cell>
            <cell>Account</cell>
            <cell>Bob</cell>
        </row>
        <row>
            <cell>0002</cell>
            <cell>3</cell>
            <cell>open</cell>
            <cell>Button style broken</cell>
            <cell>Check main.css</cell>
            <cell>Styling</cell>
            <cell>Alice</cell>
        </row>
        <row>
            <cell>0003</cell>
            <cell>2</cell>
            <cell>open</cell>
            <cell>Client search result</cell>
            <cell>Search service returns incomplete result</cell>
            <cell>Service</cell>
            <cell>Bob</cell>
        </row>
    </rows>
</grid>
```

--------------------------------

### Example: @ToClientCommand with a Single Command

Source: https://github.com/zkoss/zkdoc/blob/master/zk_mvvm_ref/syntax/toclientcommand.md

Demonstrates how to use @ToClientCommand to notify the client after the 'doCountChange' command is executed on the server. This setup allows client-side JavaScript to react to specific server-side command completions.

```java
@ToClientCommand("doCountChange")
public class VM{
    private int count = 0;

    // getter/setter...

    @Command
    public void doCountChange(){
       count++;
    }
}
```

```xml
<window viewModel="@id('vm') @init('org.zkoss.VM')" xmlns:n="native">
       <n:div id="display"></n:div>
       <n:script>
       	zk.afterMount(function() {
			var binder = zkbind.$('$display');
			// the event handler of after 'doCountChange' from server
			binder.after('doCountChange', function() {
				alert("after doCountChange");
			});
		});
       </n:script>
       <button label="change" onClick="@command('doCountChange')" />
</window>
```

--------------------------------

### Conditional Binding UI Setup

Source: https://github.com/zkoss/zkdoc/blob/master/zk_mvvm_ref/data_binding/property_binding.md

Provides the surrounding ZUL structure for conditional binding examples, including a listbox to display data and toolbar buttons for actions like New, Save, and Delete.

```xml
<listbox model="@load(vm.orders)" selectedItem="@bind(vm.selected)" hflex="true" height="200px">
    <template name="model" var="item">
        <listitem >
            <listcell label="@load(item.id)"/>
            <listcell label="@load(item.quantity)"/>
            <listcell label="@load(item.price)"/>
        </listitem>
    </template>
</listbox>

<toolbar>
    <button label="New" onClick="@command('newOrder')"/>
    <button label="Save" onClick="@command('saveOrder')" disabled="@bind(empty vm.selected)"/>
    <!-- show confirm dialog when selected is persisted -->
    <button label="Delete" onClick="@command(empty vm.selected.id ? 'deleteOrder' : 'confirmDelete')"
        disabled="@load(empty vm.selected)"/>
</toolbar>

<grid hflex="true" >
    <columns>
        <column width="120px"/>
        <column/>
    </columns>
    <rows>
        <row>Quantity
            <intbox value="@load(vm.selected.quantity) 
                @save(vm.selected.quantity, before='saveOrder')"/>
        </row>
        <row>Price
            <doublebox value="@load(vm.selected.price) 
                @save(vm.selected.price, before='saveOrder')" format="###,##0.00"/>
        </row>
    </rows>
</grid>
```

--------------------------------

### Example Package Definition

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/package.md

Illustrates a complete <package> definition including script and widget declarations.

```xml
<package name="zul.box" language="xul/html" depends="zul,zul.wgt">
    <script src="Layout.js" jsdoc="true"/>
    
    <widget name="Box"/>
    <widget name="Splitter"/>
    <widget name="Hlayout"/>
    <widget name="Vlayout"/>
</package>
```

--------------------------------

### Selecting ZK Widgets with zk.$()

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/client_side_selection_of_elements_and_widgets.md

Use the `zk.$()` function to directly retrieve the first ZK widget matching a selector, typically a component ID. This example gets the value of a textbox widget.

```xml
    <textbox id="tb"/>
    <script defer="true">
        console.log("client-side textbox value: " + zk.$("$tb").getValue());
    </script>
```

--------------------------------

### Install jekyll-remote-theme plugin

Source: https://github.com/zkoss/zkdoc/blob/master/README.md

Add the plugin to your Gemfile and run bundle install to install it.

```ruby
gem "jekyll-remote-theme"
```

--------------------------------

### Clone and Run zkCharts Essentials

Source: https://github.com/zkoss/zkdoc/blob/master/zk_charts_essentials/example_code.md

Clone the repository, navigate to the directory, and run the embedded Jetty server using Maven. Access the examples via http://localhost:8080/.

```sh
git clone https://github.com/zkoss/zkchartsessentials.git
cd zkchartsessentials
mvn jetty:run
```

--------------------------------

### List Installed Packages

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/zk_doc_mcp_server.md

Lists all installed Python packages in the current virtual environment using 'uv pip list'. This is useful for verifying the installation of zk-doc-mcp-server.

```bash
uv pip list
```

--------------------------------

### Example desktop-config configuration in zk.xml

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_desktop_config_element.md

This snippet demonstrates the structure of the desktop-config element, including settings for timeouts, theme URIs, and provider classes.

```xml
 <desktop-config>
     <desktop-timeout>3600</desktop-timeout>
     <disable-theme-uri>~./zul/css/zk.wcs</disable-theme-uri>
     <file-check-period>5</file-check-period>
     <extendlet-check-period>10</extendlet-check-period>
     <theme-uri>/my/blue**.css</theme-uri>
     <theme-uri-handler-class>my.MyThemeURIHandler</theme-uri-handler-class>
     <theme-provider-class>my.MyThemeProvider</theme-provider-class>
 </desktop-config>
```

--------------------------------

### Example Code128

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/barcode.md

A basic example of rendering a Code128 barcode.

```xml
<barcode type="code128" value="https://www.zkoss.org/" height="100px"/>
```

--------------------------------

### Register AuService via DesktopInit

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/server_side_processing.md

Implementation of DesktopInit to add a custom AuService to the desktop, followed by the required configuration in zk.xml.

```java
package foo;
public class FooDesktopInit implements DesktopInit {
    public void init(Desktop desktop,  Object request) throws Exception {
        desktop.addListener(new FooAuService()); //assume you have a custom service called FooAuService
    }
}
```

```xml
<listener>
    <listener-class>foo.FooDesktopInit</listener-class>
</listener>
```

--------------------------------

### Example of the depends element

Source: https://github.com/zkoss/zkdoc/blob/master/zk_config_ref/the_depends_element.md

An example showing how to specify multiple configuration dependencies, ensuring the current configuration waits for zkex and zkmax to be parsed.

```xml
<depends>zkex, zkmax</depends>
```

--------------------------------

### Macro Template Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/ui_composing/implement_custom_java_class.md

This is an example of a ZUML macro template that defines a layout with a textbox.

```xml
<hlayout id="mc_layout">
    Username: <textbox id="mc_who"/>
</hlayout>
```

--------------------------------

### Basic Area Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/area.md

A simple example showing an imagemap with two defined areas.

```xml
<imagemap src="/img/sun.jpg" onClick="alert(event.area)">
    <area id="First" coords="0, 0, 100, 100"/>
    <area id="Second" shape="circle" coords="200, 200, 100"/>
</imagemap>
```

--------------------------------

### Basic Menuitem Implementation

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/menuitem.md

A standard example showing how to structure menu items within a menubar and menupopup.

```xml
<menubar>
 <menu label="File">
     <menupopup>
         <menuitem label="New" onClick="alert(self.label)"/>
         <menuitem label="Open" onClick="alert(self.label)"/>
         <menuitem label="Save" onClick="alert(self.label)"/>
         <menuseparator/>
         <menuitem label="Exit" onClick="alert(self.label)"/>
     </menupopup>
 </menu>
 <menuitem label="Home"/>
</menubar>
```

--------------------------------

### Use show_settings Tool in Gemini CLI

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/zk_doc_mcp_server.md

Example of how to invoke the show_settings tool using the Gemini CLI.

```text
Use the show_settings tool from zk-doc server
```

--------------------------------

### Prepare for Deploying Prebuilt WAR Files

Source: https://github.com/zkoss/zkdoc/blob/master/zk_installation_guide/red_hat_openshift_express.md

To deploy a prebuilt WAR file instead of having OpenShift build the project, remove the 'pom.xml' and source code. This prepares the application directory for manual deployment.

```bash
$ cd AppName
$ git rm -r src/ pom.xml
```

--------------------------------

### Groovy Dependency Example

Source: https://github.com/zkoss/zkdoc/blob/master/zuml_ref/zscript.md

Provides an example of the Maven dependency required for using Groovy with ZK.

```xml
<dependency>
            <groupId>org.codehaus.groovy</groupId>
            <artifactId>groovy-all</artifactId>
            <version>1.5.6</version>
        </dependency>
```

--------------------------------

### Clone the ZK Gradle Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_installation_guide/create_and_run_your_first_zk_application_with_gradle.md

Use the git command line to clone the official ZK Gradle demonstration repository.

```bash
git clone git@github.com:zkoss-demo/zk-gradle.git
```

--------------------------------

### JavaScript Dependency Example

Source: https://github.com/zkoss/zkdoc/blob/master/zuml_ref/zscript.md

Provides an example of the Maven dependency required for using JavaScript with ZK.

```xml
<dependency>
            <groupId>org.mozilla</groupId>
            <artifactId>rhino</artifactId>
            <version>1.7R4</version>
        </dependency>
```

--------------------------------

### Python Dependency Example

Source: https://github.com/zkoss/zkdoc/blob/master/zuml_ref/zscript.md

Provides an example of the Maven dependency required for using Python with ZK.

```xml
<dependency>
            <groupId>org.python</groupId>
            <artifactId>jython</artifactId>
            <version>2.2.1</version>
        </dependency>
```

--------------------------------

### Equivalent execution for instant mode

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/ui_composing/component_based_ui.md

This demonstrates the programmatic equivalent of the instant mode Include component using execution.createComponents.

```xml
<window>
  <div>
    <zscript>
      execution.createComponents("another.zul", self, null);
    </zscript>
  </div>
</window>
```

--------------------------------

### Ruby Dependency Example

Source: https://github.com/zkoss/zkdoc/blob/master/zuml_ref/zscript.md

Provides an example of the Maven dependency required for using Ruby with ZK.

```xml
<dependency>
            <groupId>org.jruby</groupId>
            <artifactId>jruby</artifactId>
            <version>1.1.2</version>
        </dependency>
```

--------------------------------

### Configure multiple logging handlers

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/supporting_utilities/logger.md

Example configuration for directing logs to both the console and a file.

```xml
handlers = java.util.logging.FileHandler, java.util.logging.ConsoleHandler

java.util.logging.ConsoleHandler.level = FINER
java.util.logging.ConsoleHandler.formatter = java.util.logging.SimpleFormatter

java.util.logging.FileHandler.formatter = java.util.logging.SimpleFormatter
java.util.logging.FileHandler.pattern = /var/log/jetty6/solr-%u.log
java.util.logging.FileHandler.level = FINER

org.zkoss.zk.ui.impl.UiEngineImpl=FINER
org.zkoss.bind=FINE
```

--------------------------------

### Example of variable-resolver with Spring

Source: https://github.com/zkoss/zkdoc/blob/master/zuml_ref/processing_instructions/variable_resolver.md

An example of using the DelegatingVariableResolver to resolve Java Beans from the Spring framework.

```xml
 <?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
```

--------------------------------

### Create a Window and Textbox component

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/components_and_widgets.md

Example of instantiating a Window component and adding a Textbox child on the server side.

```java
Window w = new Window();
w.setTitle();
w.appendChild(new Textbox());
w.setPage(page); //assuming page is the current page
```

--------------------------------

### Basic MatchMedia Syntax

Source: https://github.com/zkoss/zkdoc/blob/master/zk_mvvm_ref/syntax/matchmedia.md

Demonstrates the basic syntax for applying the MatchMedia annotation with single or multiple media queries.

```java
@MatchMedia("mediaQuery")

@MatchMedia({"mediaQuery1", "mediaQuery2"})
```

--------------------------------

### Orient Property Example

Source: https://github.com/zkoss/zkdoc/blob/master/zk_component_ref/inputgroup.md

Example of using the orient property to stack input elements vertically.

```xml
<inputgroup orient="vertical">
    First and last name
    <textbox placeholder="First"/>
    <textbox placeholder="Last"/>
</inputgroup>
```

--------------------------------

### ZK Namespace Example with URL

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/namespace.md

Provides an example of a ZK namespace defined using a URL, demonstrating the recommended practice. The last part of the URL serves as a shortcut.

```xml
<namespace>http://www.zkoss.org/2005/zul</namespace>
```

--------------------------------

### Example Renderer Class

Source: https://github.com/zkoss/zkdoc/blob/master/zk_client_side_ref/renderer_class.md

Provides an example of a renderer class implementation. It must implement org.zkoss.zk.ui.sys.PageRenderer.

```xml
<renderer-class>org.zkoss.zul.impl.PageRenderer</renderer-class>
```

--------------------------------

### Instantiate HtmlMacroComponent in Java

Source: https://github.com/zkoss/zkdoc/blob/master/zk_dev_ref/ui_composing/macro_component.md

Demonstrates the manual lifecycle steps to instantiate and configure an HtmlMacroComponent, including setting properties and triggering afterCompose.

```java
HtmlMacroComponent ua = (HtmlMacroComponent)
    page.getComponentDefinition("username", false).newInstance(page, null);
ua.setParent(wnd);
ua.applyProperties(); //apply properties defined in the component definition
ua.setDynamicProperty("who", "Joe");
ua.afterCompose(); //then the ZUML page is loaded and child components are created
```
Tokens:
Raw