ZK

https://github.com/zkoss/zk
Admin
ZK is a highly productive Java framework for building enterprise web and mobile applications without...
Tokens:11,408
Snippets:177
Trust Score:9.4
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install TypeScript and ZK Types

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

Install the necessary TypeScript and ZK type definitions as development dependencies.

```sh
npm i -D typescript zk-types
```

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

### Load ZUL with Absolute Path

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B100-ZK-5598.html

Example of loading a ZUL file using an absolute path with zEmbedded.load. This is relevant for troubleshooting issues where embedded ZUL files might not render correctly.

```javascript
zEmbedded.load('zkapp', 'http://localhost:8080/zktest/test2/B100-ZK-5598.zul');
```

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

### Augment ZK Panel Prototype in TypeScript

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

Example of augmenting the zul.wnd.Panel.prototype with a custom onClose method using zk.augment. Ensure you have configured tsconfig.json correctly.

```ts
const oldPanel = zk.augment(zul.wnd.Panel.prototype, {
    onClose(): void {
        alert('Modified zul.wnd.Panel.prototype.onClose');
        return oldPanel.onClose();
    }
})
```

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

### Client-side Event Listener and Server Command

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F90-ZK-4390test.html

This snippet sets up a click listener for a button. It uses zk.afterMount to ensure server-side bindings are ready before registering a 'toClient' callback. It then sends data to the server, potentially multiple times, with options to ignore duplicates.

```javascript
window.addEventListener('load', function(){
  var init = false;
  jq('#btn').on('click', function() {
    if (!init) {
      zk.afterMount(function () {
        zkbind.$('$win').after('toClient', function (msg) {
          if (msg) zk.log(msg);
        });
      });
      init = true;
    }
    send(0);
    send(0);
  });

  function send(count) {
    if (!count) {
      zkbind.$('$win').command('toServer', {foo: {foo: 'Foo0'}, bar: {bar: 'Bar0'}});
    } else {
      for (var i = 0; i < count; i++) {
        zkbind.$('$win').command('toServer', {foo: {foo: 'Foo' + i}, bar: {bar: 'Bar' + i}}, {duplicateIgnore: {'toServer': true}});
      }
    }
  }
});
```

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

### Initialize ZK Pure Client and Load Parser

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/booksuggest.html

This snippet initializes the ZK Pure Client by setting spaceless mode and creating a ZK UML parser at the '#main' element after the ZK framework has loaded.

```javascript
zk.afterLoad(function () { zk.spaceless = true; zk.zuml.Parser.createAt('#main'); });
```

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

### Initialize TypeScript Configuration

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

Initialize the TypeScript configuration file if one does not already exist.

```sh
npx tsc --init
```

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

### Embed ZK Component Successfully

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4581.html

Loads a ZK component with a given ID and URL. Logs 'ZK is ready!' upon successful loading.

```javascript
var btn = document.getElementById('btn');
btn.addEventListener('click', embedZK, false);
function embedZK() {
    var p = zEmbedded.load('aaa', 'http://localhost:8080/zktest/test2/B95-ZK-4581.zul').then(function() {
        zk.log('ZK is ready!');
    });
}
```

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

### Defining and Extending Classes in ZK

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/oop.html

Demonstrates defining classes A, B, C, D, and E, each extending the previous one, and overriding the 'f' method. Shows how to call the superclass method using $supers.

```javascript
A = zk.$extends(zk.Object, { f: function () { zk.log('A.f called'); } });
B = zk.$extends(A, { f: function () { zk.log('B.f called'); this.$supers('f'); } });
C = zk.$extends(B, { f: function () { zk.log('C.f called'); this.$supers(C, 'f'); } });
D = zk.$extends(C, { f: function () { zk.log('D.f called'); this.$supers('f'); } });
E = zk.$extends(D, { f: function () { zk.log('E.f called'); this.$supers(E, 'f'); } });
new E().f();
```

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

### Create and Draw on ZK Canvas

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/canvas.html

Initializes a canvas, draws two rectangles, and appends it to the main element. Requires ZK 5 to be loaded.

```javascript
zk.afterLoad(function () {
    var main = jq("#main");
    var canvas = zk.canvas.Canvas.create(main[0].clientWidth, main[0].clientHeight);
    main.append(canvas);
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 255, 50);
    main.after( new zul.wgt.Button({ label: "enlarge", onClick: function () {
        jq(canvas).width("300px");
    }}));
});
```

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

### Load ZK Application 'zkapp3'

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4715.html

Loads the ZK application with ID 'zkapp3' from the specified URL. Logs the widget UUID on success or an error to the console.

```javascript
zEmbedded.load('zkapp3', 'http://localhost:8080/zktest/test2/B95-ZK-4715-1.zul')
  .then(function(result) {
    zk.log('zkapp3: ' + result.widget.uuid);
  })
  .catch(function(error) {
    console.error(error);
  });
```

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

### Load ZK Application 'zkapp2'

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4715.html

Loads the ZK application with ID 'zkapp2' from the specified URL. Logs the widget UUID on success or an error to the console.

```javascript
zEmbedded.load('zkapp2', 'http://localhost:8080/zktest/test2/B95-ZK-4715-1.zul')
  .then(function(result) {
    zk.log('zkapp2: ' + result.widget.uuid);
  })
  .catch(function(error) {
    console.error(error);
  });
```

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

### Load ZK Application 'zkapp5'

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4715.html

Loads the ZK application with ID 'zkapp5' from the specified URL. Logs the widget UUID on success or an error to the console.

```javascript
zEmbedded.load('zkapp5', 'http://localhost:8080/zktest/test2/B95-ZK-4715-2.zul')
  .then(function(result) {
    zk.log('zkapp5: ' + result.widget.uuid);
  })
  .catch(function(error) {
    console.error(error);
  });
```

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

### Load ZK Application 'zkapp1'

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4715.html

Loads the ZK application with ID 'zkapp1' from the specified URL. Logs the widget UUID on success or an error to the console.

```javascript
zEmbedded.load('zkapp1', 'http://localhost:8080/zktest/test2/B95-ZK-4715-1.zul')
  .then(function(result) {
    zk.log('zkapp1: ' + result.widget.uuid);
  })
  .catch(function(error) {
    console.error(error);
  });
```

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

### Load ZK Application 'zkapp0'

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4715.html

Loads the ZK application with ID 'zkapp0' from the specified URL. Logs the widget UUID on success or an error to the console.

```javascript
zEmbedded.load('zkapp0', 'http://localhost:8080/zktest/test2/B95-ZK-4715.zul')
  .then(function(result) {
    zk.log('zkapp0: ' + result.widget.uuid);
  })
  .catch(function(error) {
    console.error(error);
  });
```

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

### Building Document with SAXBuilder (Default Options)

Source: https://github.com/zkoss/zk/blob/master/zcommon/src/main/java/org/zkoss/idom/package.html

Use SAXBuilder with default options to parse an XML file. This method is simple and requires no knowledge of SAX parsers.

```java
import org.zkoss.idom.input.SAXBuilder;
import org.zkoss.idom.Document;

SAXBuilder builder = new SAXBuilder(true, false, true);
Document doc = builder.build("file.xml");
```

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

### Load ZK Application 'zkapp4'

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4715.html

Loads the ZK application with ID 'zkapp4' from the specified URL. Logs the widget UUID on success or an error to the console.

```javascript
zEmbedded.load('zkapp4', 'http://localhost:8080/zktest/test2/B95-ZK-4715-2.zul')
  .then(function(result) {
    zk.log('zkapp4: ' + result.widget.uuid);
  })
  .catch(function(error) {
    console.error(error);
  });
```

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

### Load ZK Component on Button Click

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F100-ZK-5596.html

This snippet shows how to trigger the loading of a ZK component using zEmbedded.load() when a button is clicked. Ensure the target div ('zkapp') and the ZUL file path are correct.

```javascript
btn.addEventListener('click', () => { zEmbedded.load('zkapp', '/zktest/test2/F100-ZK-5596.zul'); });
```

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

### Load Book Suggestions via AJAX

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/booksuggest.html

This function sends an AJAX POST request to the '/booksuggest' endpoint with a book ID. Upon successful retrieval of book information, it updates a 'suggestInfo' widget by detaching the old one and creating a new one with the fetched data.

```javascript
function loadSuggest(item) { jq.ajax({ type: 'POST', url: zk.ajaxURI('/booksuggest'), dataType: 'json', data: 'bookId=' + item.id, success: function (bookInfo) { var suggestInfo = zk.Widget.$('suggestInfo'); if (suggestInfo) suggestInfo.detach(); zk.zuml.Parser.createAt('#suggestInfo', {replaceHTML:false}, {infos: bookInfo}, function (w) { zk.Widget.$('main').appendChild(w); }); } }); }
```

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

### Display Desktop Count and Information

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B96-ZK-5083-test.html

Retrieves and displays the total desktop count and specific desktop information using the stored desktop ID.

```javascript
var seeDtCntBtn = document.getElementById('seeDtCntBtn');
seeDtCntBtn.addEventListener('click', showDesktopCount, false);
function showDesktopCount() {
    alert(zk.Desktop._ndt + ', ' + zk.Desktop.all[window['tempZKDtid']]);
}
```

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

### Load ZK Component on Event

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B90-ZK-4502.html

Loads a ZUL file into the 'zkapp' element when the 'trigger' element is clicked. Ensure the 'trigger' element exists and the 'zEmbedded' API is available.

```javascript
trigger.addEventListener('click', () => { zEmbedded.load('zkapp', '/zktest/test2/B90-ZK-4502-1.zul'); });
```

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

### Configure WebSocket Listener

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F100-ZK-4988.html

Add the WebSocket listener to the web application's configuration to enable WebSocket support.

```xml
<listener>
<listener-class>org.zkoss.zkmax.au.websocket.WebSocketWebAppInit</listener-class>
</listener>
```

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

### Embed ZK Component and Handle Errors

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B95-ZK-4581.html

Loads a ZK component and catches potential mounting errors, displaying an alert message.

```javascript
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', embedZKError, false);
function embedZKError() {
    var p = zEmbedded.load('bbb', 'http://localhost:8080/zktest/test2/B95-ZK-4581.zul').then(function() {
        zk.log('ZK is ready!');
    }).catch(reason => {
        alert('ZK mounting error: ' + reason);
    });
}
```

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

### Building Document with Explicit SAXParser

Source: https://github.com/zkoss/zk/blob/master/zcommon/src/main/java/org/zkoss/idom/package.html

Create a SAXParser explicitly and configure the SAXParserFactory before passing it to SAXBuilder. This allows for parser reuse.

```java
import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import org.zkoss.idom.input.SAXBuilder;
import org.zkoss.idom.Document;

SAXParserFactory factory = SAXParserFactory.newInstance();
...//configure factory as you want
SAXParser parser = factory.newSAXParser();
SAXBuilder builder = new SAXBuilder(parser);
Document doc = builder.build("file.xml");
```

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

### ZK Module Dependency Order

Source: https://github.com/zkoss/zk/blob/master/CLAUDE.md

Defines the build order for ZK modules. Enterprise modules have specific dependencies.

```text
zcommon -> zel -> zweb -> zweb-dsp -> zk -> zul -> zhtml -> zkbind -> zkplus -> zktest
- ../zkcml/ (enterprise) depends on zk, zul, zkbind
- zktest depends on ALL modules — always build upstream first if tests fail
```

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

### Window Component Definition

Source: https://github.com/zkoss/zk/blob/master/zul/src/main/java/org/zkoss/zul/package.html

Defines the basic structure and attributes of a ZK Window component in XML.

```XML
<window [id="..."] [class="..."] [style="..."] [use="..."] [title="..."] [border="normal|none"]/>
```

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

### Embed ZK Application

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B96-ZK-5083-test.html

Loads an embedded ZK application from a specified URL. It also sets up an event listener to update the status when the embedded ZK desktop is about to be destroyed and stores the desktop ID for later use.

```javascript
var loadBtn = document.getElementById('loadBtn');
loadBtn.addEventListener('click', embedZK, false);
function embedZK() {
    var p = zEmbedded.load('aaa', 'http://localhost:8080/zktest/test2/B96-5083.zul')
        .then(function(result) {
            var dt = result.widget.desktop;
            dt.listen({
                onBeforeDestroy: function() {
                    document.getElementById('status').innerHTML = 'destroy!';
                }
            });
            window['tempZKDtid'] = dt.id;
        });;
```

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

### Gradle Dependency Management with ZK BOM

Source: https://github.com/zkoss/zk/blob/master/zk-bom/README.md

Add this to your build.gradle file for Gradle versions 5.0 and above to manage ZK dependency versions. Replace 'x.y.z' with the desired ZK version.

```groovy
dependencies {
    // replace with the actual version
    implementation(platform('org.zkoss.zk:zk-bom:x.y.z'))
}
```

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

### Enable ZK Embedded Mode

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B100-ZK-5598.html

Set the org.zkoss.web.servlet.http.embedded.enabled property to true in zk.xml to activate embedded mode.

```xml
<zk>
    <library-property name="org.zkoss.web.servlet.http.embedded.enabled" value="true"/>
</zk>
```

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

### ZScript with Java Import

Source: https://github.com/zkoss/zk/blob/master/zul/src/main/java/org/zkoss/zul/package.html

Specifies a script to be interpreted during page execution. Supports importing Java classes for pre-compilation.

```html
<zscript>
import com.MyCompany.MyPackage.MyClass;
MyClass.doThis();
MyClass.doThat();
.</zscript>
```

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

### JavaScript for Embedded ZK Interaction

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B103-ZK-5660-test.html

This snippet handles loading, destroying, and checking the status of an embedded ZK desktop. It includes event listeners for buttons and uses the zEmbedded API to manage the ZK lifecycle. It also provides a way to check internal desktop properties for debugging.

```javascript
var loadBtn = document.getElementById('loadBtn');
var destroyBtn = document.getElementById('destroyBtn');
var checkResponseIdBtn = document.getElementById('checkResponseIdBtn');
var statusDiv = document.getElementById('status');

loadBtn.addEventListener('click', embedZK, false);

function embedZK() {
    statusDiv.innerHTML = 'Loading embedded ZK...';
    var p = zEmbedded.load('zkContainer', '/zktest/test2/B103-ZK-5660-1.zul')
        .then(function (result) {
            var dt = result.widget.desktop;
            dt.listen({
                onBeforeDestroy: function () {
                    statusDiv.innerHTML = 'Desktop destroying...';
                }
            });
            window['tempZKDtid'] = dt.id;
            statusDiv.innerHTML = 'Embedded ZK loaded. Desktop ID: ' + dt.id;
        })
        .catch(function (error) {
            statusDiv.innerHTML = 'Error loading embedded ZK: ' + error;
        });
}

destroyBtn.addEventListener('click', destroyEmbeddedZK, false);

function destroyEmbeddedZK() {
    zEmbedded.destroy('zkContainer');
    statusDiv.innerHTML = 'Embedded ZK destroyed!';
}

checkResponseIdBtn.addEventListener('click', checkResponseId, false);

function checkResponseId() {
    // Access the internal responseId variable (for debugging)
    // After fix, this should be undefined after desktop destruction
    var desktopCount = zk.Desktop._ndt;
    var desktopInAll = zk.Desktop.all[window['tempZKDtid']];
    alert('Desktop count: ' + desktopCount + '\nDesktop in all: ' + desktopInAll + '\n(Both should be 0/undefined after destroy)');
}
```

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

### Page Directive

Source: https://github.com/zkoss/zk/blob/master/zul/src/main/java/org/zkoss/zul/package.html

Defines page properties such as ID, title, and language. The language must be 'xul/html'.

```html
<?page [id="..."] [title="..."] [language="xul/html"]?>
```

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

### Disable Tablet UI

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B102-ZK-5669.html

Set the org.zkoss.zkmax.tablet.ui.disabled property to false to disable the tablet UI.

```xml
<library-property>
<name>org.zkoss.zkmax.tablet.ui.disabled</name>
<value>false</value>
</library-property>
```

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

### ZScript with External Source

Source: https://github.com/zkoss/zk/blob/master/zul/src/main/java/org/zkoss/zul/package.html

Specifies a script to be interpreted during page execution by loading it from an external source.

```html
<zscript src="/WEB-INF/xx/yy.bs">

```

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

### Configure CORS Filter in web.xml

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F102-ZK-5642.html

Set up the EmbeddedCorsFilter in web.xml to allow cross-origin requests. Ensure the Access-Control-Allow-Origin header is set to the correct host and port.

```xml
<filter>
  <filter-name>embeddedCORSFilter</filter-name>
  <filter-class>org.zkoss.zktest.http.EmbeddedCorsFilter</filter-class>
  <async-supported>true</async-supported>
</filter>
<filter-mapping>
  <filter-name>embeddedCORSFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>
```

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

### Enable Embedded Mode

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B102-ZK-5669.html

Set the org.zkoss.web.servlet.http.embedded.enabled property to true to enable embedded mode.

```xml
<library-property>
<name>org.zkoss.web.servlet.http.embedded.enabled</name>
<value>true</value>
</library-property>
```

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

### Textbox Component Attributes and Events

Source: https://github.com/zkoss/zk/blob/master/zul/src/main/java/org/zkoss/zul/package.html

Configures a textbox component with attributes for value, type, size, and state. Includes event handling for changes.

```html
<textbox [id="..."] [class="..."] [style="..."] [use="..."]
[onChange="script"] [onChanging="script"] [value="value"] [type="|password"]
[maxlength="0|num"] [rows="3|num"] [cols="0|num"]
[disabled="false|true"] [readonly="false|true"] [multiline="false|true"] />
```

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

### Compile TypeScript Files

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

Compile your TypeScript files into JavaScript using the TypeScript compiler.

```sh
npx tsc
```

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

### Load and Destroy Embedded ZK Component

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F96-ZK-4943-test.html

Loads an embedded ZK component and sets up an event listener for its destruction. It also includes a separate function to explicitly destroy the embedded component.

```javascript
var loadBtn = document.getElementById('loadBtn');
loadBtn.addEventListener('click', embedZK, false);

function embedZK() {
    var p = zEmbedded.load('aaa', 'http://localhost:8080/zktest/test2/F96-ZK-4943.zul')
        .then(function(result) {
            var dt = result.widget.desktop;
            dt.listen({
                onBeforeDestroy: function() {
                    document.getElementById('status').innerHTML = 'destroy!';
                }
            });
        });
};

var destroyBtn = document.getElementById('destroyBtn');
destroyBtn.addEventListener('click', destroyEmbeddedZK, false);

function destroyEmbeddedZK() {
    zEmbedded.destroy('aaa');
}
```

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

### CaseFoundry Bug Investigation Functions

Source: https://github.com/zkoss/zk/blob/master/CLAUDE.md

Provides functions for searching past bugs, looking up Jira issues, and diagnosing stack traces within the CaseFoundry system.

```python
search_cases("description")
```

```python
lookup_issue("ZK-XXXX")
```

```python
diagnose_from_stacktrace("...")
```

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

### Load ZUL File with jQuery

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/z5-load.html

Loads a ZUL file into a specific HTML div using jQuery's load function. Appends '?zk.redrawCtrl=page' to ensure proper ZK rendering.

```html
jQuery(document).ready(function(){ jQuery("#myDiv").load("z5-load-1.zul?zk.redrawCtrl=page"); });
```

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

### Apply Composer as Spring Bean via EL

Source: https://github.com/zkoss/zk/blob/master/zkplus/COMPOSER_SPRING_SCOPE_ANALYSIS.md

Declare a Composer as a Spring Bean and apply it to a ZUL component using an EL expression. This allows Spring to manage the Composer's dependencies.

```xml
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<div apply="${myComposer}">...</div>
```

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

### Maven Dependency Management with ZK BOM

Source: https://github.com/zkoss/zk/blob/master/zk-bom/README.md

Include this snippet in your pom.xml to manage ZK dependency versions. Replace 'x.y.z' with the desired ZK version.

```xml
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.zkoss.zk</groupId>
            <artifactId>zk-bom</artifactId>
            <version>x.y.z</version><!-- replace with the actual version -->
            <type>pom</type>
            <scope>import</scope>
        </dependency>   
    </dependencies>
</dependencyManagement>
```

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

### Load Embedded ZK Component

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B96-ZK-4948-test.html

This JavaScript code snippet shows how to load an embedded ZK component using the zEmbedded API. It attaches an event listener to a button to trigger the embedding process.

```javascript
var loadBtn = document.getElementById('loadBtn');
loadBtn.addEventListener('click', embedZK, false);

function embedZK() {
    zEmbedded.load('aaa', '/4948-embedded/B96-ZK-4948.zul', '/4948-embedded');
}
```

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

### Iterating and Extracting Element Values

Source: https://github.com/zkoss/zk/blob/master/zcommon/src/main/java/org/zkoss/idom/package.html

Use the getElements and getElement methods of Group to sequentially drill down an iDOM tree and extract element values.

```java
for (Iterator it = document.getElements("product").iterator();
it.hasNext();){
  String name = ((Element)it.next()).getElementValue("name", true);
  ...
```

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

### Enable Embedded Mode in ZK Library Property

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F102-ZK-5642.html

Configure the ZK library property to enable embedded mode. This is a prerequisite for cross-origin testing.

```xml
<library-property>
  <name>org.zkoss.web.servlet.http.embedded.enabled</name>
  <value>true</value>
</library-property>
```

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

### Embed ZK Component with Error Handling

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F90-ZK-4499.html

Embeds a ZK component and includes error handling for the embedding process. This is useful for catching and displaying mounting errors.

```javascript
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', embedZKError, false);
function embedZKError() {
    var p = zEmbedded.load('bbb', 'http://localhost:8080/zktest/test2/F90-ZK-4499.zul').then(function() {
        zk.log('ZK is ready!');
    }).catch(reason => {
        alert('ZK mounting error: ' + reason);
    });
}
```

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

### Embed ZK Component with JavaScript

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F90-ZK-4529.html

Use this JavaScript code to embed a ZK component from a ZUL file. It attaches an event listener to a button to trigger the embedding process.

```javascript
var btn = document.getElementById('btn');
btn.addEventListener('click', embedZK, false);

function embedZK() {
    var p = zEmbedded.load('aaa', 'http://localhost:8080/zktest/test2/F90-ZK-4529.zul').then(function(res) {
        zk.log('ZK is ready! ' + res.widget.uuid);
    });
}
```

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

### Common Component Attributes

Source: https://github.com/zkoss/zk/blob/master/zul/src/main/java/org/zkoss/zul/package.html

Defines common attributes for ZUL components, including ID, CSS class, style, and a custom Java class for implementation.

```html
<xxx [id="..."] [class="..."] [style="..."] [use="..."]/>
```

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

### Embed ZK Component

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F90-ZK-4499.html

Embeds a ZK component by loading a ZUL file. Use this to dynamically add ZK functionality to your page.

```javascript
var btn = document.getElementById('btn');
btn.addEventListener('click', embedZK, false);
function embedZK() {
    var p = zEmbedded.load('aaa', 'http://localhost:8080/zktest/test2/F90-ZK-4499.zul').then(function() {
        zk.log('ZK is ready!');
    });
}
```

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

### Placeholder for Component ID

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B103-ZK-5841.html

This is a placeholder likely used in a templating engine to insert a component's ID.

```html
${myid}
```

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

### JavaScript for Fixed Table Header

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/fixed-table-header.html

This script calculates and sets the width of table headers to match their corresponding body columns, accounting for browser differences. It's useful for maintaining a consistent table layout with a fixed header.

```javascript
var stuff = new Array('name','tel','function');
function scale() {
  var extra = 0; // default NN6 & IE5Mac, not perfect IE4Mac, Too Bad
  if (document.all && navigator.userAgent.indexOf('Win') != -1) extra = 2; //default IEWin
  // extra += 2 per point of cellpadding; not necessary NN6.01
  if (!document.all || navigator.userAgent.indexOf('Mac') == -1) extra +=4;
  var a = document.getElementById('fixedtable');
  var b = document.getElementById('normaltable');
  for (i=0;i<stuff.length;i++) {
    y = document.getElementById(stuff[i]+'body');
    z = document.getElementById(stuff[i]+'head');
    x = y.offsetWidth - extra;
    z.style.width = x;
  }
}
// -->
```

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

### Configure tsconfig.json for ZK Types

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

Modify your tsconfig.json file to include 'zk-types' in the compiler options' types array. This enables the TypeScript compiler to recognize ZK Framework types.

```json
{
    "compilerOptions": {
        "types": ["zk-types"]
    }
}
```

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

### JavaScript Variable Declarations

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B103-ZK-5841.html

These lines declare JavaScript variables. They appear to be placeholders or incomplete code, as indicated by the comments.

```javascript
var y; // this script tag id is missing
```

```javascript
var x; // this script tag id is missing
```

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

### Instanceof Checks in ZK

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/oop.html

Tests the $instanceof method to check if an object is an instance of a specific class or its superclasses. Note that $instanceof returns false for zk.Class itself.

```javascript
var d = new D();
zk.log(d.$instanceof(A), d.$instanceof(E), d.$instanceof(D), d.$instanceof(zk.Object), d.$instanceof(zk.Class)); //true, false, true, //true, false
```

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

### Destroy Embedded ZK Application

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B96-ZK-5083-test.html

Destroys an embedded ZK application identified by its ID.

```javascript
var destroyBtn = document.getElementById('destroyBtn');
destroyBtn.addEventListener('click', destroyEmbeddedZK, false);
function destroyEmbeddedZK() {
    zEmbedded.destroy('aaa');
}
```

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

### isAssignableFrom Checks in ZK

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test/oop.html

Tests the isAssignableFrom method to check if a class can be assigned to a variable of another class type. This is useful for checking inheritance relationships between classes.

```javascript
zk.log(D.isAssignableFrom(E), E.isAssignableFrom(D), D.isAssignableFrom(zk.Object), zk.Object.isAssignableFrom(D), zk.Class.isAssignableFrom(D)); //true, false //false, true, false
```

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

### Checking aria-label

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/B103-ZK-5841.html

This comment indicates a check for the aria-label attribute, likely in a testing context.

```javascript
check aria-label
```

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

### Accessing Label Value in onClick Event

Source: https://github.com/zkoss/zk/blob/master/zul/src/main/java/org/zkoss/zul/package.html

Demonstrates how to access and modify a component's property (label.value) directly within an onClick event handler using its ID.

```XML
<label id="label" value="Not good enough?"/>
<button label="Change label" onClick="label.value = label.value + 'A'"/>
```

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

### Destroy Embedded ZK Component

Source: https://github.com/zkoss/zk/blob/master/zktest/src/main/webapp/test2/F90-ZK-4499.html

Destroys a previously embedded ZK component using its ID. Call this to clean up embedded ZK instances.

```javascript
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', destroyEmbeddedZK, false);
function destroyEmbeddedZK() {
    zEmbedded.destroy('aaa');
}
```
Tokens:
Raw