The character used for thousands separator.
The character used to represent minus sign.
The character used for percent sign.
The character used for mille percent sign.
The user agent of the browser.
Indicates whether an OS-level modal dialog is opened. In this case, onblur will be called so a widget can use it to decide whether to validate.
The application's name, which will be initialized as server-side's
WebApp.getAppName().
It will be used as title of jq.alert.
5.0.6
Checks whether the bookmark is changed.
Indicates whether ZK Client Engine has been booted and created the initial widgets. It is useful to know if it is caused by an asynchronous update (i.e., zk.booted is true).
The build of ZK, such as '08113021'
Indicates if the application is busy. It is actually a number that is increased when zk.AuCmd0.showBusy is called, and decreased when zk.AuCmd0.clearBusy is called. In other words, it is set by the application, and used to indicate the application (rather than ZK) is busy.
5.0.1
A map of all classes, Map<int oid, zk.Class cls>.
5.0.8
The last position that the mouse was clicked (including left and right clicks).
Whether it supports CSS3.
The widget that gains the focus now, or null if no one gains focus now.
The topmost modal window, or null if no modal window at all.
The position of the mouse (including mouse move and click).
Optional ee?: booleanOptional pe?: booleanOptional standard?: booleanThe version as double (only the first two part of the version, such as 3.6) if it is Firefox, such as Firefox. Notice that it is Firefox's version, such as 3.5, 3.6 and 4.0. If not a firefox, it is null.
5.0.6
The version as double (only the first two part of the version, such as 3.5) if it is Gecko-based browsers, such as Firefox.
The widget that captures the keystrokes. Used to specify a widget that shall receive the following the onKeyPress and onKeyUp events, no matter what widget the event occurs on.
doKeyDown_: function () {
zk.keyCapture = this;
this.$supers('doKeyDown_', arguments);
}
Notice that the key capture is reset automatically after processing onKeyUp_.
The number of widget packages (i.e., JavaScript files) being loaded (and not yet complete).
When the JavaScript files of widgets are loading, you shall not create any widget. Rather, you can use afterLoad to execute the creation and other tasks after all required JavaScript files are loaded.
Whether ZK Client Engine has been mounting the peer widgets. By mounting we mean the creation of the peer widgets under the control of the server. To run after the mounting of the peer widgets, use afterMount
The widget that captures the mouse events. Used to specify a widget that shall receive the following the onMouseMove and onMouseUp events, no matter what widget the event occurs on.
doMouseDown_: function () {
zk.mouseCapture = this;
this.$supers('doMouseDown_', arguments);
}
Notice that the mouse capture is reset automatically after processing onMouseUp_.
The version as double (only the first two part of the version, such as 10.1) if it is Opera, or null if not.
Overrides the properties of a map. It is similar to zk.copy, except
Example, ```ts var _xCombobox = {} zk.override(zul.inp.Combobox.prototype, _xCombobox, { redrawpp_: function (out) { if (!_redrawpp(this, out)) _xCombobox.redrawpp_.apply(this, arguments); //call the original method }, open: function () { _renderpp(this); _xCombobox.open.apply(this, arguments); //call the original method } }); ```
the destination object
Overrides a particular method. The old method will be returned, and the caller could store it for calling back. For example,
var superopen = zk.override(zul.inp.Combobox.prototype.open,
function () {
superopen.apply(this, arguments);
//do whatever you want
});
the old function that will be replaced
the new function that will replace the old function
the old function (i.e., oldfunc)
5.0.6
Overrides a particular method or data member. The old method will be stored in method called $nm (assuming nm is the method name to override. For example,
zk.override(zul.inp.Combobox.prototype, {},
open() {
this.$open.apply(this, arguments);
//do whatever you want
}
);
the destination object to override
the method name to override
the value of the method. To override a method, it has to be an instance of Function.
the destination object
5.0.2
The delay before showing the processing prompt (unit: milliseconds).
900 (depending on the server's configuration)
Whether Client Engine is processing something, such as processing an AU response. This flag is set when startProcessing is called, and cleaned when endProcessing is called.
The timeout for re-sending AU request (unit: milliseconds).
200 (depending on the server's configuration)
6.5.2
The version as double (only the first two part of the version, such as 533.1) if it is Safari-based, or null if not.
Assigns a value to the specified property.
For example, `zk.set(obj, "x", 123)`:
If setX is defined in obj, obj.setX(123) is called.
If not defined, obj.x = 123 is called.
Anotehr example: ```ts zk.set(o, 'value', true); //set a single property ```
the object to assign values to
the property's name
the property's value
an extra argument to pass to the setX method
as the extra argument (the second argument).
For example, zk.set(obj, 'x', 123, true) invokes obj.setX(123, true).
the destination object
Sets the given properties from one object to another. Example:
zk.set(dst, src, ["foo", "mike"]);
If dst has a method called setFoo and src has method called getMike, then it is equivalent to
dst.setFoo("foo", src["foo"]);
dst["mike"] = src.getMike();
the destination object to copy properties to
the source object to copy properties from
an array of property names (String)
whether to ignore undefined. Optional (if not specified, false is assumed). If true and src[name] is undefined, then dst[name] won't be assigned.
the destination object
Indicates whether Widget#id is always the same as Widget#uuid.
By default, it is false.
You could enable it if the pure-client approach is taken, since it is more convenient. However, it also means the concept of ID space is no longer valid.
Indicates whether to enable the tablet UI.
9.5.1
The delay before showing a tooltip (unit: milliseconds).
800 (depending on the server's configuration)
Indicates whether to apply touch mode.
9.5.1
Indicates whether the browser is unloading this document. Note: when the function registered with beforeUnload is called, this flag is not set yet.
The version of ZK, such as '5.0.0'
Retrieves the widget.
Optional n: null | string | Node | JQuery<HTMLElement> | Event | Event<unknown> | Tthe object to look for. If it is a string,
it is assumed to be UUID, unless it starts with '$'.
For example, zk.Widget.$('uuid') is the same as zk.Widget.$('#uuid'),
and both look for a widget whose ID is 'uuid'. On the other hand,
zk.Widget.$('$id') looks for a widget whose ID is 'id'.
and zk.Widget.$('.className') looks for a widget whose CSS selector is 'className'. (since zk 8.0)
If it is an DOM element (DOMElement), it will look up
which widget it belongs to.
If the object is not a DOM element and has a property called
target, then target is assumed.
Thus, you can pass an instance of jq.Event or zk.Event,
and the target widget will be returned.
Optional opts: Partial<{ the options. Allowed values:
Provides the default values for the specified options.
Example: ```ts process: function (opts, defaultOptions) { opts = zk.$default(opts, defaultOptions); } ``` ```ts opts = zk.$default(opts, {timeout: 100, max: true}); //timeout and max are assigned to opts only if no such property found in opts ```
the merged options
Defines a class. It returns the class being defined.
Example: ```ts zul.Label = zk.$extends(zk.Widget, { _value: '', getValue() { return this._value; }, setValue(value) { this._value = value; } }); ```
is equivalent to ```ts foo.Widget = zk.$extends(zk.Widget, { _value: '', bind_: function () { // } }); zk.define(foo.Widget, { name: null, value: null }); ```
is equivalent to ```ts foo.Widget = zk.$extends(zk.Widget, { _value: '', getName: function () { return this._name; }, setName: function (v) { this._name = v; return this; }, getValue: function () { return this._value; }, setValue: function (v) { this._value = v; return this; }, bind_: function () { // } }); ```
the class being defined
Imports a class or a package. It returns null if the package or class is not defined yet.
It returns null if the package or class is not defined yet and
fn is null.
If an additional function, `fn` is specified, this method assumes `name` is a class and it will load the package of the class first. If not found. Then, invoke the function after the class is loaded. For example, the following creates a Listbox widget after loading the package.
Example: ```ts var foo = zk.$import('com.foo'); var cool = new foo.Cool(); var Cool = zk.$import('com.foo.Cooler'); var cooler = new Cooler();
zk.$import('zul.sel.Listbox', function (cls) {new cls();}); ```
The name of the package or the class.
Optional fn: CallableFunctionThe function to call after the class is loaded.
a package (Package) or a class (Class)
Intercepts a widget, when specific method has been called, the interceptor would be called first.
Example, ```ts zk.$intercepts(zul.inp.Combobox, { open: function () { var context = this.$getInterceptorContext$(); console.log('open'); context.stop = false; } }); ```
In the interceptor function, you could call this.$getInterceptorContext$() to get the context object. The context object has several properties, it would help you the deal with the interceptor:
the destination object to override
the interceptor map corresponds to the widget methods
8.0.3
Defines a package. It creates and returns the package if not defined yet. If the package is already defined, it does nothing but returns the package. It is similar to Java's package statement except it returns the package object.
Notice the package is usually defined automatically by use of WPD, so you're rarely need to use this method.
Example: ```ts var foo = zk.$package('com.foo'); foo.Cool = zk.$extends(zk.Object); ```
the name of the package.
Optional end: booleanOptional wv: booleanPackage
Executes a function only when no animation is taking place. If there is some animation, the specified function will be queued and invoked after the animation is done.
If the delay argument is not specified and no animation is taking place, the function is executed with `setTimeout(fn, 0)`.
the function to execute
Optional delay: number(int) how many milliseconds to wait before execute if there is no animation is taking place. If omitted, 0 is assumed. If negative, the function is executed immediately.
true if this method has been called before return (delay must be negative, and no animation); otherwise, undefined is returned.
Adds a function that will be executed after onResponse events are done. That means, after au responses, the function added in the afterAuResponse() will be invoked
the function to execute after au responses
7.0.6
Declares a function that shall be executed after all requested packages are loaded (i.e., loading is 0). If all packages has been loaded, the function is executed immediately and this method returns true.
the function to execute
whether func has been executed
Declares a function that shall be executed only if the specified package(s) are loaded (and loading is 0). Notice that it won't cause the package(s) to execute. Rather, it defers the execution of the specified function until someone else loads the package (by use of load).
See also JavaScript Packaging
To know whether all requested packages are loaded (i.e., ZK is not loading any package), you can check loading if it is 0.
Notice that functions specified in the second format execute before those specified in the first format.
Example ```ts zk.afterLoad('foo', function() {new foo.Foo();}); zk.afterLoad('foo1,foo2', function() {new foo1.Foo(foo2.Foo);}); zk.afterLoad(function() {}); ```
the package(s) that the specified function depends on. In other words, the function is evaluated only if the package(s) are loaded. If you want to specify multiple packages, separate them with comma.
the function to execute
Optional front: booleanAdds a function that will be executed after the mounting is done. By mounting we mean the creation of peer widgets.
By mounting we mean the creation of the peer widgets under the control of the server. To run after the mounting of the peer widgets,
If the delay argument is not specified and no mounting is taking place, the function is executed with `setTimeout(fn, 0)`.
Optional fn: (() => void)the function to execute after mounted
Optional delay: number(since 5.0.6) how many milliseconds to wait before execute if there is no mounting taking place. If omitted, 0 is assumed. If negative, the function is executed immediately (if no mounting is taking place).
true if this method has been called before return (delay must be negative, and no mounting); otherwise, undefined is returned.
Adds a function that will be executed after all of the onSize events are done.
Here lists the execution phases:
the function to execute after resized
6.5.2
Encodes and returns the resource URI from Class-Web Resources (CWR). Example:
var res = zk.ajaxResourceURI('/js/my/path/res.css');
the resource URI.
Optional version: stringthe version string to build the cache-friendly URI. If none is set, use zk.build by default.
Optional opts: Partial<AjaxURIOptions>the options. Allowed values:
the encoded resource URI
9.0.0
Encodes and returns the URI to communicate with the server. Example:
document.createElement("script").src = zk.ajaxURI('/web/js/com/foo/mine.js',{au:true});
the URI related to the AU engine. If null, the base URI is returned.
Optional opts: Partial<AjaxURIOptions>the options. Allowed values:
the encoded URI
whether there is some animation taking place. If you'd like to have a function to be called only when no animation is taking place (such as waiting for sliding down to be completed), you could use zk.afterMount.
Replaces existing properties and add new properties. It is similar to zk.override, except
Example, ```ts var _xCombobox = zk.augment(zul.inp.Combobox.prototype, { redrawpp_: function (out) { if (!_redrawpp(this, out)) _xCombobox.redrawpp_.apply(this, arguments); //call the original method }, open: function () { _renderpp(this); _xCombobox.open.apply(this, arguments); //call the original method } }); ```
the backup object
10.0.0
Adds a function that will be executed when the browser is about to unload the document. In other words, it is called when window.onbeforeunload is called.
To remove the function, invoke this method by specifying remove to the opts argument. ```ts zk.beforeUnload(fn, {remove: true}); ```
the function to execute. The function shall return null if it is OK to close, or a message (String) if it wants to show it to the end user for confirmation.
Optional opts: { a map of options. Allowed vlaues:
Copies a map of properties (or options) from one object to another and optionally copies the original value to another map. Example: extending Array
zk.copy(Array.prototype, {
$addAll: function (o) {
return this.push(...o);
}
});
Example: copy style and restore back
var backup = {};
zk.copy(n.style, {
visibility: 'hidden',
position: 'absolute',
display: 'block'
}, backup);
try {
//do whatever
} finally {
zk.copy(n.style, backup);
}
Notice that zk.copy copies the properties directly regardless if the target object has a setter or not. It is fast but if you want to go thru the setter, if any, use set instead.
the destination object
5.0.3
Defines the setter and getter methods.
Notice that you rarely need to invoke this method directly. Rather, you can specify them in a property named $define, when calling #$extends.
For example, the following code snippet ```ts zk.define(zul.wgt.Button, { disabled: null }); ```
is equivalent to define three methods, isDisabled, getDisabled and setDisabled, as follows:
zul.wgt.Button = zk.$extends(zk.Widget, {
isDisabled: _zkf = function () {
return this._disabled;
},
isDisabled: _zkf,
setDisabled: function (v) {
this._disabled = v;
return this;
}
});
If you want to do something when the value is changed in the setter, you can specify a function as the value in the props argument. For example,
zk.define(zul.wgt.Button, {
disabled: function () {
if (this.desktop) this.rerender();
}
});
will cause the setter to be equivalent to
setDisabled: function (v, opts) {
this._disabled = v;
if (this._disabled !== v || opts?.force)
if (this.desktop) this.rerender();
return this;
}
If you want to pre-process the value, you can specify a two-element array. The first element is the function to pre-process the value, while the second is to post-process if the value is changed, as described above. For example,
zk.define(zul.wgt.Button, {
disabled: [
function (v) {
return v != null && v != false;
},
function () {
if (this.desktop) this.rerender();
}
]
});
will cause the setter to equivalent to
setDisabled: function (v) {
v = v != null && v != false;
this._disabled = v;
if (this._disabled !== v || opts?.force)
if (this.desktop) this.rerender();
return this;
}
Notice that when the function (specified in props) is called, the arguments are the same as the arguments passed to the setter (including additional arguments. For example, if button.setDisabled(true, false) is called, then the specified function is called with two arguments, true and false. In additions, as shown above, you can enforce the invocation of the function by passing a map with force as true.
wgt.setSomething(somevalue, {force:true});
the class to define the members
the map of members (aka., properties)
the class being defined
Execute function related to specified widget after a while, and will insure the execution order.
wgt's uuid
a function to be executed
Optional opts: Partial<{ the options. Allowed options:
Declare a package that must be loaded when loading another package.
Notice that it doesn't guarantee the loading order of the two packages. Thus, it is better to do in #afterLoad if a code snippet depends on both packages.
the name of the package that depends another package. In other words, calling #loading against this package will cause dependedPkgnn being loaded.
the name of the package that shall be loaded if another package is being loaded. In other words, it reads "a depends on b".
Disable the default behavior of ESC. In other words, after called, the user cannot abort the loading from the server.
To enable ESC, you have to invoke enableESC and the number of invocations shall be the same.
Clears a flag, processing, to indicate that it the processing has done. It also removes a message, if any, that indicates "processing".
Example: ```ts zk.startProcessing(1000); //do the lengthy operation zk.endProcessing(); ```
Optional pid: string | numberRetrieves a value from the specified property.
For example, `zk.get(obj, "x")`:
If getX or isX is defined in obj, obj.isX() or obj.getX() is returned.
If not defined, obj.x is returned.
Another example: ```ts zk.get(o, 'value'); ```
the object to retrieve value from
the name
the value of the property
the package name
whether the returned URL is used to load the JavaScript file. load will pass true to this argument to indicate the URI is used to load the JavaScript file. However, if you just want the URL to send the request back (such as json-p with jQuery's json), don't pass anything (or pass false) to this argument.
the URI of the server (so called host) for the specified package.
ZK Client Engine loads the packages from the same server that returns the HTML page. If a package might be loaded from a different server, you can invoke #setHost to specify it and then #getHost will return the correct URL for the specified package.
the object to test whether it is a class (aka., a ZK class)
if the given JS object is a class (zk.Class).
5.0.9
Tests if a package is loaded (or being loaded).
the package name
Optional loading: boolean[Optional; default: false] If true is specified, this method returns true if the package is loaded or being loaded. If false or omitted, it returns true only if the package is loaded.
true if loaded
the object to test whether it is a ZK object
whether the given JS object is a ZK object (zk.Object).
5.0.9
Loads the specified package(s). This method is called automatically when mounting the peer widgets. However, if an application developer wants to access JavaScript packages that are not loaded, he has to invoke this method.
The loading of a package is asynchronous, so you cannot create the widget immediately. Rather, use the `func` argument, func, or use #afterLoad to execute. ```ts zk.load('zul.utl', function () { new zul.utl.Timer(); }); ```
the package name
Optional func: CallableFunctionthe function to execute after all packages are loaded. Ignored if omitted. Notice that func won't be executed until all requested packages are loaded; not just what are specified here.
true if all required packages are loaded
Loads the specified package(s). This method is called automatically when mounting the peer widgets. However, if an application developer wants to access JavaScript packages that are not loaded, he has to invoke this method.
The loading of a package is asynchronous, so you cannot create the widget immediately. Rather, use the `func` argument, func, or use #afterLoad to execute.
the package name
Optional dt: Desktopthe desktop used to get URI of the JavaScript file (ajaxURI). If null, the first desktop is assumed.
Optional func: CallableFunctionthe function to execute after all packages are loaded. Ignored if omitted. Notice that func won't be executed until all requested packages are loaded; not just what are specified here.
true if all required packages are loaded
Loads a CSS file.
the URL of the CSS file.
Optional id: stringthe identifier. Ignored if not specified.
Optional media: stringthe media attribute. Ignored if not specified.
Optional callback: CallableFunctionfunction to execute after the CSS file loaded. (since 9.6.3)
5.0.4
Loads a JavaScript file.
the URL of the JavaScript file.
Optional name: stringthe name to shown up in the progressing dialog. Specify a non-empty string if you want ZK not to create widgets until this file is loaded. Ignored if not specified or null. If you specify a name here, you have to call setScriptLoaded when the script is loaded. Otherwise, zk.loading won't be zero and ZK Client Engine is halted.
Optional charset: stringthe charset. UTF-8 is assumed if null.
Optional force: booleanthe script to be loaded. (no matter it is loading or loaded)
Optional callback: CallableFunctionthe function to execute after the JavaScript file loaded. (since 9.6.3)
Optional inp: MomentInputOptional strict: booleanStrict parsing disables the deprecated fallback to the native Date constructor when parsing a string.
Optional inp: MomentInputOptional format: MomentFormatSpecificationOptional strict: booleanStrict parsing requires that the format and input match exactly, including delimiters. Strict parsing is frequently the best parsing option. For more information about choosing strict vs forgiving parsing, see the parsing guide.
Optional inp: MomentInputOptional format: MomentFormatSpecificationOptional language: stringOptional strict: booleanStrict parsing requires that the format and input match exactly, including delimiters. Strict parsing is frequently the best parsing option. For more information about choosing strict vs forgiving parsing, see the parsing guide.
Parses a string to an integer.
It is the same as the built-in parseInt method except it never return NaN (rather, it returns 0).
the text to parse
Optional b: numberrepresent the base of the number in the string. 10 is assumed if omitted.
the integer
Defines the URL of the host for serving the specified packages.
the host, such as http://www.zkoss.org.
the resource URI, such as /zkdemo/zkau, that is used to load the JavaScript files
an array of pckage names (String)
Notify ZK that the name of the JavaScript file is loaded. This method is designed to be used with loadScript, such that ZK Client knows if a JavaScript file is loaded.
the name of the JavaScript file. It must be the same as the one passed to loadScript.
Make a time stamp for this momemt; used for performance tuning. A time stamp is represented by a name. It is an easy way to measure the performance. At the end of executions, the time spent between any two stamps (including beginning and ending) will be logged (with zk.log).
Optional name: stringthe unique name to represent a time stamp
Optional noAutoLog: booleanwhehter not to auto log the result. If omitted or false, zk.stamp will be invoked automatically to log the info and clean up all stamps after mounting is completed. Turn it off, if you prefer to invoke it manually.
Logs the information of all stamps made by zk.stamp. After the invocation, all stamps are reset.
Set a flag, processing, to indicate that it starts a processing. It also shows a message to indicate "processing" after the specified timeout.
Example: ```ts zk.startProcessing(1000); //do the lengthy operation zk.endProcessing(); ```
the delay before showing a message to indicate "processing".
Optional pid: numberDeclares the desktop is used for the stateless context. By stateless we mean the server doesn't maintain any widget at all.
Optional dtid: stringthe ID of the desktop to create
Optional contextURI: stringthe context URI, such as /zkdemo
Optional updateURI: stringthe update URI, such as /zkdemo/zkau
Optional resourceURI: stringOptional reqURI: stringthe URI of the request path.
the stateless desktop being created
The character used for decimal sign.