---
title: WebBuilder Documentation
description: The WebBuilder API documents and user manuals.
type: documentation
audience: ai-agent, developer
version: "10"
keywords: webbuilder, documentation, jsdoc, api-spec, wd-files, ai-training
---
# WebBuilder Documentation Specification
WebBuilder provides automatic documentation generation, extracting content from source code or related files to generate documents.
## Documentation Writing
Documentation includes user manuals and API documentation. The former is written in text files with the ".wd" extension under the "wb/docs" directory, and the latter is automatically extracted from source code. The writing methods for both are identical. Content between "/**" and "*/" in source code is documentation comments, which the system automatically extracts as documentation.
## Link Jump
You can quickly define a link in the document using the following syntax. Clicking the link automatically jumps to the specified target.
Example:
{#Wb} //Ordinary class
{#Wb.Component} //Ordinary class
{#Wb.Component.destroy} //Ordinary class member
{#destroy} //Class name omitted, represents `destroy` member under the current class
{#Wb.Component.!firstNames} //Static class member, `!` can be omitted if `firstNames` is unique.
{#Wb.View.*success} //Event, `*` can be omitted if `success` is unique
{#Visible|Wb.Component.visible} //Visible as label
{#%https://www.geejing.com} //Link address
{#%Geejing|https://www.geejing.com} //Label and link
{#%Boolean} //Boolean is predefined variable
{#%Object.assign|obj:object/assign} //Object.assign as label, obj: is predefined URL prefix
In the example above:
-Starting with `#` in curly braces indicates a link.
-A `!` prefix in the link indicates a static member link. `!` can be omitted if the static member name does not conflict with method, property, or event names.
-A `*` prefix in the link indicates an event link. `*` can be omitted if the event name does not conflict with method, property, or static member names.
-A `#%` prefix in the link indicates an external resource link, which can be a URL or a predefined address variable. A ":" prefix before the address indicates a predefined address prefix.
If a link contains `|`, the string before the symbol is the link label, and the string after is the link address.
Accessing links in the current class can omit the class name. For example, `Wb.Component.visible` can be abbreviated as `visible` in the `Wb.Component` class.
## Documentation Tags
Tags identify specific content, starting with `@`, including:
-class: Identifies a class name, e.g., `@class My.Class`. Classes defined with the {#Cls} keyword do not need this tag, e.g., `Cls['Wb.Base'] = class base {}`; the system automatically extracts the class name "Wb.Base" from context.
-function: Identifies a method, e.g., `@function myFunc`. Descriptions above methods usually do not need this tag; the system automatically extracts the method name from context.
-property: Identifies a property, e.g., `@property {Number} name Description`. If "name" appears below the comment, "name" can be replaced with "-".
-event: Identifies an event, e.g., `@event name Description`.
-param: Parameter, representing a parameter, e.g., `@param {Type} name Description`. Parameter names enclosed in `[]` are optional. A `.` prefix indicates a level-2 parameter, `..` indicates level-3, and so on. If no default value is specified, the default is usually `undefined`, `null`, `0`, `false` or empty string.
-return: Return value, e.g., `@return {Type} Description`.
-singleton: Singleton class, usually instantiated without `new`; static members or methods are called directly.
-key: Key important item. Highlighted in the IDE's Object Inspector when tagged.
-icon: Class icon. When tagged, the class is automatically added to the IDE component tree. The order and directory of controls can be adjusted via {#%Control Manager|controls}. Note that after adding new components to the IDE component tree, it is recommended to click [Run] -> [Reload System] in {#%IDE|ide} to activate them.
-design: Property allowing visual design. When an inherited subclass needs to reset this tag of the ancestor class, marking it as `true` or `false` explicitly resets whether the property can be visually designed. Default value: `true`.
-noDesign: Component not allowing visual design, e.g., `socket`, `xwl`, `script` components.
-readonly: Read-only. Automatically tagged for getter/setter properties.
-writeonly: Write-only. Automatically tagged for getter/setter properties.
-priv/private: Private, usually for internal class use. The difference is that `private` also verifies whether members are used internally in the script.
-static: Static class, property, or method.
-desktop: Applicable only to desktop applications.
-touch: Applicable only to mobile touch applications.
-override: Overridden item, automatically tagged by the system.
-code: Valid only during coding, i.e., not displayed in the IDE's Object Inspector.
-container: Explicitly specifies treating the component as a container during design.
-implicit: Specifies not generating the `cname` attribute when parsing components on the server side.
-lib: URL of js/css files depended on by the control. When the control is added to a module, the system automatically loads dependent js/css files before running the module.
## Class Description
Describes a class.
Example:
/**
* Class description. Specify class name.
* @class MyClass
*/
globalThis.MyClass = {
};
/**
* Class description, auto-retrieve class info.
*/
Cls['My.TestClass'] = class testClass extends Wb.Base {
}
After a class declaration, all subsequent property, method, and event descriptions are automatically added to the class.
## Method Description
Describes a method.
Example:
/**
* Method comment.
* Example:
*
* let foo = bar();
*
* @param {type} name1 Required parameter description.
* @param {type} .sub1 Sub-parameter description of `name1`.
* @param {type} .sub2 Sub-parameter description of `name1`.
* @param {type} [name2] Optional parameter description.
* @return {type} Return value description.
*/
myFunc() = {
}
/**
* Specify method name via function tag.
* @param {type} name1 Required parameter description.
* @function myFunc.
*/
In the example above, `{type}` after `@param` is the parameter type, such as {#Object}, {#String}, {#Wb.Component}, etc.
## Property Description
Properties include two types: configuration properties and getter/setter properties. The former is usually valid only during configuration, while the latter can be dynamically set during runtime. Configuration properties are marked with `config` in the documentation; unmarked properties are getter/setter properties.
Example:
/** @property {type} name Specify name parameter description */
/** @property {String} - Parameter name omitted with `-`, auto-take `foo` below as parameter name. */
foo = 'bar';
/**
* @property {Object} foo Describe sub-parameters of the parameter
* @param {Array} .bar Description of sub-parameter bar of `foo`.
* @param {Wb.Component} .comp Description of sub-parameter comp of foo.
* @key
*/
## getter and setter Description
Unlike ordinary configuration properties, getter/setter properties can usually be dynamically set during runtime. The system defines getter/setter methods as properties and merges them into a single property description. If getter/setter descriptions differ, the system automatically merges them.
Example:
/** @property {String} name Specify name and getter. @getter */
/** @property {Array} - Auto-recognize parameter name and getter. */
get name() {
}
/** @property {Object} - System auto-merges getter/setter as the same property. */
get foo() {
}
/** @property {Array} - System auto-merges getter/setter as the same property. */
set foo() {
}
When a class has only a getter method, the system automatically tags it as readonly; when only a setter method exists, it is automatically tagged as writeonly.
## Event Description
Describes an event.
Example:
/**
* @event eventName Event description
* @param {type} name Parameter description.
*/
In the example above, eventName is the event name. Parameter descriptions are the same as in method descriptions.
## Using Default Comments
/***/ indicates that default inherited comments are used. The system automatically finds descriptions from ancestor classes or properties/methods/events with the same name as the item.
Example:
//Auto-corresponds to getter documentation
/***/
set bar(){
}
//Auto-corresponds to documentation of the same-named property
/** @property */
foo = 'bar';
//Specify property type and auto-correspond to documentation of the same-named property
/** @property {String} */
foo = 'bar';
//Specify property type and name, auto-correspond to documentation of the same-named property
/** @property {String} foo */
foo = 'bar';
Note that the property tag must be used for default property identification; otherwise, it is treated as a method.
## Code Block
Content with a blank line before and after and 5 leading spaces is automatically referenced as a code block. Code is parsed using JS syntax by default. You can also specify the language by prefixing the script with `$mimeType:`, e.g., sql for SQL language, css for CSS language.
Example:
-SQL:
$sql: $sql: select * from table where field1 = 'abc' order by field2
-CSS:
$css: $css: .my-css {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 14px;
overflow: hidden;
}
-Plain Text:
$text: $text: Plain text content
Use text tag for plain text
## List
Each line starting with `-` represents a list item.
Example:
-item1
-item2
-item3
Generated content:
-item1
-item2
-item3
## Table
Each line starting with `|` represents a table row, with columns separated by `|`.
Example:
|Column 1|Column 2|Column 3|
|col1|col2|col3|
Generated content:
|Column 1|Column 2|Column 3|
|col1|col2|col3|
## Image
You can quickly insert images using the following syntax:
{@image} //Path is docs/images/image.png
{@image.jpg} //Path is docs/images/image.jpg
{@path/image} //Path is docs/images/path/image.png
{@http:/www.site.com/pic.jpg} //Path is http:/www.site.com/pic.jpg
In the example above, `image` is the image name; the ".png" extension can be omitted. Images can be multi-level paths or URL addresses.
## Line Break and Continuation
If a line does not end with [.。?？!！:：], the next line is appended to the current line by default. A line ending with `\` explicitly appends the next line to the current line.Forced line breaks to create new paragraphs can be achieved by adding extra blank lines.
## More Formatting
Specific characters in the document represent formatting modifiers.
Example:
Double curly braces {{while}} denote code //while represents code
Double square brackets [[url]] denote emphasis //url represents emphasis
Curly braces plus square brackets {[ok]} denote icon //ok is icon name
Generated content:
Double curly braces {{while}} denote code
Double square brackets [[url]] denote emphasis
Curly braces plus square brackets {[ok]} denote icon
## User Manual Writing
The user manual describes software usage. Manual content can be placed in one or more files with the ".wd" extension, usually under the "wb/docs/manuals" directory.
Chapters start with "##", followed by the chapter path and title. Paths are separated by ".", e.g., "##Operation Usage.Directory1.Directory2.Introduction" generates a multi-level directory.
Paragraphs start with "#", followed by the paragraph title, e.g., "#Instructions".
# How to Create Module for AI
This chapter defines the standard process for AI to automatically generate, compose, and assemble valid WebBuilder XWL modules.
## What is an XWL Module
XWL is WebBuilder's module configuration file in JSON format. It defines the page structure, client components, server-side JS, and business logic.
## XWL Module File Structure
An XWL module file is a tree-structured JSON configuration file. The root node is a module node. Each node corresponds to a component.
A classic XWL module file format like this:
```json
{
"title": "My Module",
"icon": "edit",
"img": "",
"tags": "",
"hideInMenu": "false",
"text": "module",
"cls": "Wb.Module",
"properties": {
"cid": "module",
"serverScript": "function main() {\n let data = 'Server side JS';\n\n Wb.log(data);\n}\nmain();"
},
"_icon": "module",
"_expanded": true,
"events": {
"initialize": "Wb.tip('Client side JS')"
},
"items": [
{
"_icon": "viewport",
"text": "viewport1",
"cls": "Wb.Viewport",
"properties": {
"cid": "viewport1",
"layout": "fit"
},
"_expanded": true,
"items": [
{
"_icon": "grid",
"text": "grid1",
"cls": "Wb.Grid",
"properties": {
"cid": "grid1"
}
}
]
}
]
}
```
### Root Node Properties
The following properties are only available on the module root node.
- title: The display title of the module. String type. Required.
- icon: The icon of the module. Defaults to empty string. String type. Required.
- img: The image icon of the module. Defaults to empty string. String type. Required.
- tags: The parameters object for opening the module. String type. Required. It must be a JSON object formatted string. Defaults to an empty string, Do NOT use "{}".
- hideInMenu: Whether to hide the module in the Menu. String type. Required. "true" is usually set only for pure server modules with serverScript or modules that need to be hidden in the menu. Defaults to "false".
### Common and Root Node Properties
The following properties are available on both the module root node and other nodes.
- text: Node display name. Must be the same as the `cid` property value. String type. Required.
- cls: The full class name of the component, see `class name` in Class Information of the component. String type. Required.
- properties: An object that stores all module configuration properties. See instance properties of the component for details. JSON Object type. Optional.
- events: An object that stores all module event definitions. See events of the component for details. JSON Object type. Optional.
- items: An array that stores child nodes. Each object in the array represents a node, which corresponds to a component. Array type. Optional.
- _icon: The icon of the node, see `Icon` in Class Information of the component. String type. Required.
- _expanded: Whether the node is expanded. Boolean type. `true` expanded, `false` otherwise. Optional. Set to `true` for important parent nodes, and `false` for non-important parent nodes. This property shall not be present on child nodes.
### Business Property and Event Placement
All business properties and events set in the XWL module shall be placed into the `properties` and `events` objects of the node.
Any property not explicitly specified elsewhere must be placed in the `properties` object; any event not explicitly specified elsewhere must be placed in the `events` object.
## JS/CSS Resource Define and Reference Rules
To reference client-side JS/CSS, set the `links` property of the root node. For example: "[\"wb/js/client.js\",\"wb/css/style.css\"]"
Note: The array must be converted to a string and stored in the "links" property.
To reference server-side JS, use the sever JS API `Wb.load` to load a JS file synchronously. For example: Wb.load('wb/ss/util.js');
It is strongly recommended to define classes in JS files using the following method, which is applicable to both client and server JS.
Define classes in JS using the following style:
```js
/**
* comments
*/
Cls['My.ClassName'] = class myClassName extends Wb.Base {
}
```
"My.ClassName" is the global full class name, and "myClassName" is the short class name. This makes the class `My.ClassName` globally accessible. See `Cls` for details.
Define classes in MJS (JS module) using the following style:
```js
/**
* comments
*/
class Util {
}
export default Util;
```
This exports the Util class.
When defining CSS class names, it is highly recommended to use a two-letter prefix derived from the application or module name (e.g., `hr-xxx`, `oa-xxx`).
## Mandatory Constraints and Strict Rules
The following rules are mandatory. AI must NOT violate them:
- All keys and values within the `properties` and `events` objects of the node must be strings. When a property is designated as an explicit expression, its value must start with the "@" symbol (e.g., "@myVar", "@var1 + 'abc'").
- The `cid` property serves as the component's identifier. It can be a meaningful name, but it must be unique within the same parent.
- The root node must be `Wb.Module` and the `cid` property must be "module".
- The `serverScript` is a property of the root node.
- Add necessary comments to each property, method, and event in JS, MJS, CSS files and XWL module.
- Event scripts and property values may use "\n" escape characters for line breaks inside JSON strings. This is valid and recommended for readability.
- The output XWL module must be in valid JSON format. Never use `\'` in JSON strings; single quotes do not need escaping. Multi-line script strings in JSON must use escaped newlines \\n and must remain valid single-line string values. Do NOT embed raw line breaks inside JSON string values.
- Use ES14+ syntax for both client-side and server-side JS coding.
- `_expanded` node property of `Wb.Viewport` and `Wb.Module` must be `true`.
- All JS/CSS code must be formatted with 2-space indentation using Monaco Editor formatting.
- Components defined in the module tree with a `cid` property are automatically mounted to the `app` object. Do NOT manually assign it's reference to `app`.
## Client-side and Server-side JS Coding Specifications
### Client-side JS
- Module-level globally visible properties and methods must be defined in the `initialize` property of the root node.
Please use the following format to define:
```js
Wb.apply(app, {
propertyName: 'propertyValue',
methodName(param){
}
});
```
- Access components using `app.xxx` (where `xxx` is the `cid`). In cases of duplicate cids, `app.xxx` resolves to the most recently created component.
- For component events, concise code can be written directly within the event handler. However, for lengthy or reusable logic, please define it as a method within the `initialize` event, and then invoke that method from the event handler.
Example: For a button's click event, define a method named `app.button1Click` (or a more meaningful name) inside initialize, and then call `app.button1Click();` within the click event.
- Place global common code in separate JS files and reference them in `links` property of the root node. For example, set the links attribute to "['wb/js/app.js']".
### Server-side JS
- For ordinary code, use the following method to invoke it:
```js
/** comments */
function main() {
// Server business logic here
}
/** comments */
function otherFunction(){
}
main();
```
- Properties and methods shared within the same execution context can be defined in `app`, and then invoked in another module via `app.xxx` (`xxx` is the property/method name):
```js
Wb.apply(app, {
propertyName: 'propertyValue',
methodName(param){
}
});
```
- Place global common code in separate JS/MJS files and reference them by API `Wb.load`.
```js
// load JS file
Wb.load('wb/ss/app.js'); // defined My.ClassName class in app.js
My.ClassName.xxx();
// load MJS file
const Util = Wb.load('wb/ss/util.mjs'); // defined Util class in util.mjs
Util.xxx();
```
## Standard AI Generation Workflow
### For Client-Side Modules
- Start with the standard module root node `Wb.Module`.
- Set the root node's `loginRequired` property to `false` if the module does not require login; otherwise, omit the property.
- Set the root node's `links` property if the module requires external JS/CSS links.
- Add Module-level globally JS or initialize logic to the `initialize` property of the root node.
- Add the code that runs synchronously at the end after the module is loaded to the `finalize` property of the root node.
- If the module is viewport fullscreen, add a `Wb.Viewport` container to the `items` of the root node.
- [Set container step] Set the `layout` property of the container based on the child components layout.
- When adding a toolbar as an inner component to a container, set the toolbar's `isProperty` to `true` and its `cid` to "tbar" (at top) or "bbar" (at bottom).
- Add child components to the container.
- Ensure every component has a unique `cid` (component's identifier) under its parent. It can be a meaningful name.
- Fill `properties`, `events`, `items` properties of the component correctly.
- Add JS code to the `ready` event of the component if it should execute after the component is ready.
- When adding components that need to load remote data such as `Wb.View`, `Wb.Grid`, `Wb.Tree` and `Wb.Select`, set the `url` property. If the `url` points to another module, the URL address can be: "m?xwl=path", where "m?xwl=" is a fixed prefix and "path" is the relative path of the module file with the ".xwl" suffix removed.
- If the component is a container and it has child components, goto [Set container step].
- Verify all mandatory constraints before output.
- Output a valid, pretty-formatted JSON string as XWL file content.
### For Server-Side Modules
- Start with the standard module root node `Wb.Module`.
- Set Java GraalVM based JS in the `serverScript` property of the `Wb.Module` to implement business logic.
- Do not generate `items` and `events` node properties of the `Wb.Module`.
- Verify all mandatory constraints before output.
- Output a valid, pretty-formatted JSON string as XWL file content.
#### For Database Application
- Always use parameterized SQL instead of string concatenation to avoid SQL injection.
Example:
```js
// `varchar` is sql type, `name` is parameter name
Wb.sql(`select * from wb_user where user_name={?varchar|name?} and login_times={?numeric|times?}`);
```
- Use the `Wb.sync` method preferentially to perform insert, update, and delete operations on database tables.
- Use the `Wb.sendRowx' method preferentially to execute database SQL queries and send results to the client.
## WebBuilder Source Code
- wb.js: WebBuilder cross server and client JS library, URL: https://www.geejing.com/wb/source/wb.js
- wb-client.js: WebBuilder client JS library, URL: https://www.geejing.com/wb/source/wb-client.js
- wb-server.js: WebBuilder server JS library, URL: https://www.geejing.com/wb/source/wb-server.js
- workflow.js: WebBuilder workflow server JS library, URL: https://www.geejing.com/wb/source/workflow.js
- dbe.mjs: WebBuilder database explorer server JS module, URL: https://www.geejing.com/wb/source/dbe.mjs
- ide.js: WebBuilder integrated development environment, URL: https://www.geejing.com/wb/source/ide.js
- monaco.js: WebBuilder monaco editors, URL: https://www.geejing.com/wb/source/monaco.js
- wb-tpl.css: UI theme template CSS, URL: https://www.geejing.com/wb/source/wb-tpl.css
- icon-color.json: Default icon colors, URL: https://www.geejing.com/wb/source/icon-color.json
- classic-wb.css: Classic UI theme CSS, URL: https://www.geejing.com/wb/source/classic-wb.css
- classic-wb.json: Classic UI theme configuration file, URL: https://www.geejing.com/wb/source/classic-wb.json
- classic-icon-color.json: Classic UI theme icon colors, URL: https://www.geejing.com/wb/source/classic-icon-color.json
- dark-wb.css: Dark UI theme CSS, URL: https://www.geejing.com/wb/source/dark-wb.css
- dark-wb.json: Dark UI theme configuration file, URL: https://www.geejing.com/wb/source/dark-wb.json
- dark-icon-color.json: Dark UI theme icon colors, URL: https://www.geejing.com/wb/source/dark-icon-color.json
## Components DOM Structure
This JSON describes the DOM structure of some WebBuilder components. The property name is the full component class name, the value is the component DOM structure.
```json
{
"Wb.Component": "
",
"Wb.Iframe": "",
"Wb.Splitter": "",
"Wb.Fill": "
",
"Wb.Space": "
",
"Wb.Gap": "
",
"Wb.Divider": "
",
"Wb.Image": "
",
"Wb.Picture": "
",
"Wb.Button": "",
"Wb.SplitButton": "",
"Wb.Label": "
",
"Wb.Text": "",
"Wb.TextArea": "",
"Wb.Number": "",
"Wb.Trigger": "",
"Wb.FileInput": "",
"Wb.Picker": "",
"Wb.Date": "",
"Wb.Time": "",
"Wb.YearMonth": "",
"Wb.Datetime": "",
"Wb.Color": "",
"Wb.Select": "",
"Wb.ColorSelect": "",
"Wb.BoolSelect": "",
"Wb.Viewer": "
",
"Wb.Container": "
",
"Wb.ProgressBar": "",
"Wb.Carousel": "",
"Wb.Fieldset": "",
"Wb.Line": "",
"Wb.Title": "",
"Wb.ScrolledCt": "",
"Wb.Panel": "",
"Wb.Menu": "",
"Wb.Item": "",
"Wb.Option": "",
"Wb.Viewport": "",
"Wb.Toolbar": "",
"Wb.View": "",
"Wb.Grid": "",
"Wb.Tree": "",
"Wb.CheckView": "",
"Wb.ListView": "",
"Wb.IconView": "",
"Wb.SlotView": "",
"Wb.Slot": "",
"Wb.CardCt": "",
"Wb.Tab": "",
"Wb.Window": "",
"Wb.Dialog": "",
"Wb.Drawer": "",
"Wb.Tip": "
",
"Wb.ControlCt": "",
"Wb.Slider": "",
"Wb.AreaSlider": "",
"Wb.Toggle": "",
"Wb.Check": "",
"Wb.Radio": "",
"Wb.CheckGroup": "",
"Wb.RadioGroup": "",
"Wb.DualBox": "",
"Wb.PagingBar":"",
"Wb.Card":"",
"Wb.TabButton":"",
"Wb.HtmlEditor":"",
"Wb.Chart":"",
"Wb.CodeEditor":""
}
```
AI may customize component CSS styles by overriding their corresponding CSS styles. The following example can be used to customize the text label color of a button.
```css
.w-btn > .w-label{
color: red;
}
```
#Overview.What is WebBuilder
Welcome to WebBuilder. This document is designed to help you quickly master how to use WebBuilder.
##WebBuilder Introduction
WebBuilder is a powerful, comprehensive and efficient application development and runtime platform. WebBuilder is both a powerful application development platform and an efficient and stable application runtime platform, providing an integrated and unified solution for the development and operation of complex enterprise-level application systems.
-Based on browser-integrated development environment with intelligent design, it can easily complete the development from conventional desktop applications to mobile applications for mobile phones and other devices.
-Highly efficient, stable and scalable, suitable for the operation of complex enterprise-level applications.
-Cross-platform, cross-database and cross-browser architecture, adapting to complex server and client environments.
-Includes a number of advanced technologies to make application system development faster and easier.
##WebBuilder System Functions and Features
-Uses advanced technologies and architecture to support the operation of large-scale systems and massive data. WebBuilder is built with advanced technologies and has extremely high performance, which can support the operation of large-scale systems with high load. Flexible and extensible architecture can implement complex business functions.
-Unified client development based on desktop and mobile devices. Only one set of applications needs to be developed to easily realize the development from desktop browser applications to mobile applications for mobile phones and PADs. Intelligent design helps developers shield the development differences between different terminal devices. You can still use the integrated development environment on your mobile phone for development.
-The system is simple, easy to learn and use, which greatly reduces the learning cost and enables quick mastery of development using the system. WebBuilder is built with the latest standard technologies, and users do not need to learn additional technologies. For example, only JavaScript is needed to easily master WebBuilder. At the same time, the system provides a complete and easy-to-use document system and rich example modules, allowing users to quickly master the use of the system.
-Cross-platform, cross-database and cross-terminal. WebBuilder supports all industry-standard operating systems, application servers, databases, browsers, terminals, mobile phones and PADs, truly realizing "develop once, run everywhere".
-Easy to realize international development. International development can be realized through simple configuration, including the internationalization of text, numbers, dates, formats and typesetting.
-Multiple development languages support. Multiple languages including Java, JavaScript, Python, Ruby, R can be used for mixed development and run with high performance.
-Powerful development and debugging functions. The system provides a powerful browser-based IDE, including visual design, intelligent code editor, DevTools-based debugger, etc.
##Application Scenarios of WebBuilder
WebBuilder has a very wide range of applications and can develop various types of application systems in various industries. These application systems are applied in finance and banking, telecommunications, energy and electric power, production and manufacturing, retail and e-commerce, medical and health care, education and training, construction and real estate, logistics and transportation, government and public sectors, etc.
##How to Quickly Master WebBuilder
First, learn WebBuilder through this document, then refer to the {#%Example Module|ide?openExample=1} included with the system to learn the development of common and classic functions, and develop some similar applications according to the examples.
If you have the following basic knowledge, it will be of great help for you to quickly master WebBuilder. These basic knowledge include:
-{#%JavaScript|docs:Web/JavaScript}
-{#%HTML|docs:Web/HTML}/{#%CSS|docs:Web/CSS}
-{#%Java|https://www.w3schools.com/java}
-{#%SQL|https://www.w3schools.com/sql}
If you do not have the above knowledge, you can also learn these knowledge in the process of using WebBuilder.
#Overview.WebBuilder Installation and Runtime
##System Runtime Environment Requirements
WebBuilder has low hardware requirements, which can be adjusted according to the system scale.
|Item|Requirements|
|Operating System|Windows, Linux, MacOS|
|Web Application Server|Any industry-standard server (Tomcat, Jetty, Resin, WebLogic, etc.)|
|Memory|800 MB|
|Disk Space|1 GB (including JDK and Tomcat)|
|Desktop and Mobile Browser|Modern browser (Chrome, Edge, Firefox, WebView, etc.)|
##Quick Installation
The system provides one-click running software packages for X64 architecture Windows and Linux. For detailed methods, see the readme file in the software package. Software packages for other operating systems can be quickly installed as follows:
-Download the full Linux package, download link: {#%https://www.geejing.com/site/webbuilder-linux64.zip}
-Download the matching JDK according to the server operating system, download link: {#%https://www.geejing.com/download}
-Replace the JDK in the java-linux64 directory in the WebBuilder software package with the downloaded JDK, and proceed to the next step according to the readme file in the software package.
##Custom Installation
-Install any JDK, such as OpenJDK, OracleJDK, GraalVM for JDK or other JDK. For example, install OpenJDK 21, download link: {#%https://openjdk.org}
-Install the Web application server and configure the Java path as the above Java path. For example, install Tomcat 10, download link: {#%https://tomcat.apache.org}
-Download the jar files of GraalVM JavaScript. All these jar files use a friendly open source license agreement. Download link: {#%https://www.geejing.com/site/graal.zip}, if you need to use Python language, please download this link: {#%https://www.geejing.com/site/python/graal.zip}
-Create a new directory named "graal" in the Tomcat directory, and copy all jar files after unzipping "graal.zip" to this directory.
-Add the following Java Options. For example, if you use Tomcat under Windows, please add the configuration in "catalina.bat", and other operating systems please refer to this configuration. Edit "tomcat/bin/catalina.bat", search for JAVA_OPTS, and add the following script in the appropriate position (please note that path can be set to absolute path or relative path according to the actual path of graal directory):
$txt: set "JAVA_OPTS=%JAVA_OPTS% -server -Dfile.encoding=UTF-8 -XX:+UnlockExperimentalVMOptions -XX:+EnableJVMCI -XX:+UseJVMCICompiler --module-path=../graal --upgrade-module-path=../graal"
-If you copy all jar files after unzipping "graal.zip" to the tomcat/lib or WEB-INF/lib directory instead of deploying according to the above instructions, it may run in interpreted mode in some JREs. At this time, you can add the following options to make it run in compiled mode:
$txt: set "JAVA_OPTS=-server -Dfile.encoding=UTF-8 -XX:+UnlockExperimentalVMOptions -XX:+EnableJVMCI -XX:+UseJVMCICompiler"
-For advanced users, you can also install GraalVM JavaScript according to this document: {#%https://www.graalvm.org/latest/reference-manual/js/RunOnJDK}
-Deploy the webbuilder directory to the Web application server. For example: copy the webbuilder directory to the "webapps" directory of Tomcat.
##Running WebBuilder
-Start the Web application server.
-Open the browser to access the WebBuilder index page. For example: http://localhost:8080/webbuilder, if the application is deployed in the ROOT directory, you can access http://localhost:8080
-On this index page, please enter the default user name "admin" and password "admin" to log in to WebBuilder.
-Open the menu "Example" to view some examples of WebBuilder.
-Open the menu "Development Suite/Documents" to view the WebBuilder documentation.
-Open the menu "Management Tools/About" to view information about WebBuilder.
-Open the menu "Development Suite/Development Environment" to run the WebBuilder integrated development environment.
-Open the menu "Management Tools/Database Configuration" to add your database, and click the [Default] button to set this database as the default database.
##Deployment to Java Integrated Development Environment
Deployment to a Java integrated development environment enables the development and debugging of Java code. Common Java integrated development environments include IntelliJ IDEA and Eclipse.
The deployment steps are:
-Create a new Web project.
-Select the appropriate Java SDK and application server for the project, such as the Java SDK and Tomcat in the WebBuilder {#%Software Package|https://www.geejing.com/site/webbuilder-win64.zip}.
-Copy the WebBuilder Java source code to the src directory of the project, and copy the wb and WEB-INF in the application directory to the WebContent directory of the project.
-Reference the jar files that the project depends on. These jar files include all jar files in the WEB-INF/lib directory and all jar files of {#%graal|https://www.geejing.com/site/graal.zip} (These jars are in the apache-tomcat/graal directory in the {#%full software package|https://www.geejing.com/site/webbuilder-win64.zip}).
##Local Database
WebBuilder comes with an embedded derby database, which can run independently of other databases. This database stores the complete database tables and other related resources required for system operation. You can switch to other databases with one click through the {#%Database Configuration|dbc} module, or switch other databases to this database with one click. It is suitable for use as an intermediate database for database migration. The database is located in the wb/system/db/derby directory. For specific operation instructions, see the {#Database Configuration|System Module.Management Tools.Database Configuration} document.
#Overview.Develop a Starter Application
In this chapter, we will briefly understand the development method using WebBuilder by developing a simple staff query application.
##Open Integrated Development Environment
The Integrated Development Environment (IDE) is the main functional module for developing applications. On the system {#%Homepage|home}, click [Development Suite] -> [{#%Development Environment|ide}] in the left function menu bar to enter the WebBuilder IDE.
##Create Database Query Module
The function of the database query module is to query database data and return the obtained data JSON script to the client. The specific creation steps are as follows:
-In the [File Explorer] on the left side of the IDE, select the [Module] root node, and click the [Add Folder] button on the toolbar. In the Add Folder dialog box, enter [myapp] in the [Name] field, and then click the OK button to create the directory.
-In the [File Explorer] on the left side of the IDE, select the [myapp] directory just created, and click the [Add File] button on the toolbar. In the Add File dialog box, enter [select-staff] in the [Name] field, check the [Hide in the Menu] option at the bottom, and then click the OK button to create the module file. This file serves as the database query module.
-In the module editor of the opened [select-staff.xwl] file, find the [serverScript] property in the [Object Inspector], double-click the edit box of this property, and write the script in the opened [serverScript] tab:
Wb.sendRowx('select * from wb_staff');
Press [Ctrl+S] to save the [select-staff.xwl] file.
##Create Main UI Module
The main UI module is a module that displays data and provides user interaction operations. The specific creation steps are as follows:
-In the [File Explorer] of the IDE, select the [myapp] directory, and click the [Add File] button on the toolbar. In the New dialog box, enter [staff] in the [Name] field, and then click the OK button to create the module file. This file serves as the main interface module.
-Double-click the [General]->[viewport] control in the right [Control Tree] to add this control to the [module] node in the module.
-Select the added [viewport1] node, find the [layout] property in the [Object Inspector], and select the property value as [fit].
-Select the added [viewport1] node, find the [List View]->[grid] control in the right [Control Tree], then hold down the [Ctrl] key and double-click this control to add this control to the [viewport1] node.
-Select the added [grid1] node, find the [url] property in the [Object Inspector].
-Drag the [select-staff.xwl] file in the left [File Explorer] to the [url] property of the [Object Inspector] to set the url address of [select-staff.xwl] to the [url] property.
-Press [Ctrl+Q] or click the [Run] button on the toolbar to save and run the [staff.xwl] file, and you can see the running result.
Refresh the system [{#%Home|home}] page, and you can see the [staff] module just developed in the module list on the left.
At this point, you have completed the development of a simple staff query application. For the complete function, please refer to the {#%staff|ide?openModule=example/crud/staff.xwl} example module.
#Overview.Frequently Asked Questions
##• What is the difference between WebBuilder and low-code platforms and conventional software development tools?
A low-code platform is a development tool that quickly builds applications through a visual interface and a small amount of code, aiming to lower the development threshold and improve efficiency. Conventional software development tools include Java, Python or .net, etc. and their IDE development tools, which are relatively basic underlying software development tools with strong functionality and flexibility. However, because they are basic development tools, they lack rapid development capabilities. Developing complex application systems requires starting from scratch, which puts forward high requirements for developers. WebBuilder combines the advantages of both, having the flexibility and ease of use of low-code platforms, as well as the functionality and flexibility of underlying development tools.
##• Does WebBuilder support the use of third-party frameworks and packages?
WebBuilder supports the use of third-party frameworks and packages, including Java packages, JS packages, Java frameworks/components, JS frameworks/components, etc.
##• Does WebBuilder support front-end and back-end separation?
WebBuilder supports front-end and back-end separation. Applications built with WebBuilder include client and server. Client applications and server applications can be deployed independently as separate applications or merged into a single application. For example, WebBuilder can be used as both a service platform and a client application.
##• How is the runtime performance of WebBuilder?
WebBuilder has extremely high performance:
-Highly efficient algorithms and refined code enable programs to run faster with fewer resources.
-The fastest JavaScript and compatible with the latest ECMAScript specifications. The system uses the Graal JIT compiler to run JavaScript at native code speed, providing unparalleled performance.
-The system caches multiple optimized and preloaded execution contexts to support high concurrency.
-Share data and code with other languages such as Java, Ruby, Python, LLVM, R.
##• What databases does WebBuilder support?
WebBuilder supports all databases, including Oracle, SQL Server, MySQL, PostgreSQL, etc., as well as non-relational databases and any other databases you want to use.
##• Does WebBuilder meet the Xinchuang requirements?
WebBuilder is independently developed software with independent intellectual property rights and fully meets the Xinchuang requirements. All third-party software that WebBuilder depends on for operation are software using friendly open source license agreements such as Apache. For the specific list, please refer to the third-party software list of the {#%About|about} module.
##• How to obtain the license of WebBuilder.
WebBuilder is released based on a commercial license, so any legal use of WebBuilder requires authorization. To purchase WebBuilder, please visit {#%https://www.geejing.com/buy}
#System Module.Development Suite.Development Environment
The Integrated Development Environment (IDE) is the main module for application development. It allows you to complete all development tasks for application features, including design, coding, and debugging. On the system {#%Homepage|home}, click [Development Suite] -> [{#%Development Environment|ide}] in the left function menu to enter the WebBuilder IDE.
The IDE consists of 4 main parts. The top section is the menu and toolbar, used to perform operations on the context or selected content. The left section is the [File Explorer], used to display and manage files/directories. The client area displays opened files for viewing or editing. The right section is the tool panel, which contains the component tree; this tree is only visible when a module file is opened. The bottom section is the multi-function view, used to view and manage context-related content.
##File Explorer
The left side of the IDE is the [File Explorer], which displays the structure of all files/directories of modules, applications, and the operating system in a tree structure. Module files/directories displayed in the active color (usually blue) are hidden. The [File Explorer] tree supports key navigation; pressing a key jumps to files/directories starting with the corresponding letter.
The [File Explorer] tree typically has 3 default root nodes:
-Modules: The module directory, located at [wb/modules] under the application directory. The main title of file/directory nodes displayed under the module node is the file/directory name, and the subtitle is the title.
-Application: The root directory of the current application.
-System: The operating system directory.
In the [File Explorer], you can open specified files by double-clicking nodes, and you can also copy, cut, paste, and drag files/directories. Click the [Property] button on the toolbar to view file/directory properties or modify attributes such as the name.
The top of the [File Explorer] has the following tool buttons:
-Link with editor: Links the file pointed to by the node with the opened file. When switching files in the client area file tabs, the corresponding file node in the browser is automatically selected.
-Search: Quickly retrieve or jump to a specified file. You can search by the absolute path of the file, the relative path based on the application directory, or the relative path based on the module directory. Paths starting with "m?xwl=" represent module files.
-Sort Alphabetically: All files/directories under the module directory are sorted by filename. By default, they are displayed in the configured order.
-Refresh: Refreshes the directory tree in the [File Explorer].
##Client Area File Tabs
The client area tabs display all opened files. Different types of files are opened by their corresponding editors: for example, xwl files by the module editor, js files by the script editor, and image files by the image editor.
##Component Tree
When a module file is opened, the component tree is displayed on the right side of the module file. Components in the tree are structured according to the configuration in {#%Control Manager|controls}. Double-clicking a component or dragging it to the component tree in the module editor adds the component to the module. The component tree supports key navigation; pressing a key jumps to components starting with the corresponding letter.
##Multi-Function View
The multi-function view is a tabbed panel for viewing and managing context-related content.
The [Markers] tab displays a list of code hints, warnings, or error entries. Double-clicking an entry jumps to the corresponding code.
The [Debug] tab displays a list of module files waiting for backend code debugging. It is only valid for modules containing "serverScript". See the following paragraphs for debugging instructions. The [Debug] tab contains the following tool buttons:
-Run: Runs the selected module.
-Resume: Resumes execution of the module waiting for debugging.
-Terminate: Stops the execution of the debugging module.
-Disable: Disables the debugging function. The module will not wait for debugging when running after being disabled.
-Enable: Enables the disabled debugging function. The module will wait for debugging when running after being enabled.
-Delete: Clears the debugging status of the module file, restoring its normal runtime state.
-Copy the URL and open a new window: Copies the URL of the debugging page and opens a new window for further debugging. Double-clicking a debugging module entry performs this function. Note that the URL cannot be copied without clipboard access permissions. For security reasons, browsers do not allow direct opening of debugging windows, so you need to manually copy the debugging URL from the window's address bar to open the debugging window.
-Copy URL: Copies the URL of the debugging page to the clipboard. Note that the URL cannot be copied without clipboard access permissions.
-Refresh: Refreshes the list of debugging module files.
The [Search] tab displays a list of all searched content entries. Double-clicking an entry opens the file and jumps to the content pointed to by the entry.
The [Threads] tab displays all threads in the current JVM process.
##File Menu
Add File/Directory:
Click the [Add File] or [Add Folder] button to create a new file/directory in the selected directory or the directory of the currently selected file. Possible properties of files/directories include:
-Name: The name of the file or directory. When adding a file in the module directory, the default extension is ".xwl" (module file) if not specified. Specify the extension for other file types.
-Title: The title of the file or directory, valid only in the module directory. When displaying files/directories in modules such as the homepage, the title replaces the file/directory name. Titles starting with "@" indicate displaying corresponding text based on the current language; see {#Internationalization Development|System Module.Development Suite.Internationalization Development} for details.
-Icon: The vector icon of the file or directory, valid only in the module directory.
-Image Icon: The image icon of the file or directory, valid only in the module directory. Image icon files are usually located in the [wb/images] directory.
-URL Shortcut: Specifies a short URL path for the module, valid only for module files. For example, setting it to [my-module] allows quick access to the module via a URL like [localhost:8080/[app]/my-module] (the app name can be omitted when deployed to the application root directory). Note that when setting a multi-level path, it is usually only applicable to pure backend modules. Setting multi-level shortcuts for frontend modules may cause path errors in loading system resource files.
-Parameters: Parameters passed when opening the module, valid only for module files. Parameters are configured in JSON format, e.g., {frame: true, newWin: true}. [frame] indicates whether to open in an iframe, [newWin] indicates whether to open in a new window. For other parameters, see the parameter description of the {#Wb.run} method.
-Hide in the Menu: Sets whether the module is hidden in the function menu list of [{#%Homepage|home}], valid only for module files. Usually, pure backend function modules can be hidden to avoid being directly opened by clicking.
-Insert: When clicking the Insert button, the file/directory is inserted before the selected node, valid only in the module directory.
Generator:
The generator is used to automatically generate module files.
Create a Query Module, which automatically generates a query-oriented module based on database tables, views, procedures, or arbitrary SQL selected by the user. In the General group of the dialog box, enter the information for the created module file. The Dictionary configuration is the group name of the {#%Dictionary Information|dict} corresponding to the data; multiple group names are separated by commas. "true" means using dictionaries without a specified group name. The dictionary is used to set the automatically generated field titles, types, formats, etc. The Data group contains the query data source, which can be an object (table, view, procedure) or SQL. The "Use Wb.sql" option means using the "Wb.sql" method to return all data (e.g., when the query result needs to return multiple result sets or multiple output parameters). In this case, the generated module will return all data in JSON format instead of generating a grid, allowing developers to customize data display using the returned JSON data. When using SQL, the SQL query parameters need to be manually edited, e.g., the following SQL:
$sql:select * from wb_user where ({?name?} is null or user_name={?name?}) and ({?timestamp|date?} is null or create_date={?timestamp|date?})
Create a CRUD Module, used to generate add, delete, update, and query functions based on a table. Developers can extend development based on the automatically generated CRUD module.
Other Functions:
-Open: Opens all selected files.
-Import: Imports files to the currently selected directory. You can also directly drag files from the operating system file manager to the [File Explorer] tree to import files.
-Import and Unzip: Imports files to the currently selected directory and unzips them. Only applicable to ".zip" files; other file types are only imported.
-Export: Exports the currently selected file/directory. If the selected node is a directory or multiple files, they are automatically exported as a compressed file.
-Export and zip: Exports the currently selected file/directory as a compressed file.
-Check In: Checks in the selected file from the file system to the version database.
-Check Out: Checks out the specified file from the version database to the file system.
-Save: Saves the currently modified file.
-Save All: Saves all modified files.
-Rename: Renames the selected file.
-Refresh: Refreshes the directory tree in the [File Explorer].
-Property: Views or edits the relevant properties of the file/directory.
##Edit Menu
-Cut: Cuts the selected content. The content can be text, files, nodes, or other selected items. Non-text content is cut to a virtual clipboard.
-Copy: Copies the selected content. See the [Cut] description for details.
-Paste: Pastes the cut or copied content to the current object. See the [Cut] description for details.
-Delete: Deletes the selected content. See the [Cut] description for details.
##Navigate Menu
-Open File Menu: Expands the file menu for quick keyboard selection.
-Goto File Explorer: Moves focus to the [File Explorer].
-Goto File Tab: Moves focus to the file tab bar in the client area.
-Goto View Tab: Moves focus to the tab bar of the bottom multi-function view.
-Goto Tools Panel: Moves focus to the right tool panel, valid only when the panel is visible.
-Back: Navigates back to the previous file tab or cursor position in the code editor.
-Forward: Navigates forward to the file tab or cursor position before the back operation.
-Main Card Back: Navigates back to the previous file tab.
-Main Card Forward: Navigates forward to the file tab before the back operation.
-Sub Card Back: Navigates back to the previous sub-tab. Sub-tabs include module editor tabs.
-Sub Card Forward: Navigates forward to the sub-tab before the back operation. Sub-tabs include module editor tabs.
-Regroup Tabs: Automatically arranges the order of file tabs, including placing source files and runtime pages of the same module adjacent to each other.
-Toggle Source/Page: Switches between the template source file and runtime page.
-Goto Design Page: Switches the current module file's sub-tab to the design page. Valid only when a module file is opened.
##Search Menu
Search Text: Searches for a specified string in files of a specified type within a specified directory. Search results are displayed in the bottom multi-function view. Double-clicking a search result entry opens the file and jumps to the content. A dialog box is displayed during the search, with entries explained as follows:
-Search: The content to search for.
-File Type: The type of files to search in the specified directory.
-Path: The search scope. [Application] searches the entire application directory, [Module] searches the [wb/modules] directory, [Selection] searches the selected directory, [Current] searches the currently opened file. Note that the system automatically skips third-party library directories and compressed files during the search.
-Options: [Case Sensitive] makes the search case-sensitive, [Regular Expression] treats the search content as a regular expression, [Whole Word] performs full word matching, [Include libs Directory] includes the third-party library directory [wb/libs] in the search.
Replace: Replaces a specified string within a specified directory. A dialog box is displayed during replacement, with entries explained as follows:
-Replace To: The content to replace with.
-For other entries, see the search dialog description.
Search File: Searches for files with a specified filename in the application directory.
Search TODO: Searches for keywords marked as TODO within a specified directory.
Search URL: Searches for modules whose URL shortcuts contain a specified name.
None Login Modules: Searches for all modules accessible without login, i.e., modules where the module's loginRequired property is false.
##Run Menu
-Run: Runs the current module or other files.
-Run in a New Window: Runs in a new window. In an opened file, hold Ctrl and double-click the file's tab to open the file in a new window; hold Ctrl+Shift and double-click the tab to open the file in a new window and jump to the page immediately.
-Toggle Debugging Status: Toggles the debug state of the file selected in the [File Explorer]. Valid only when selecting a module file within the application. If set to debug state, the module will wait for debugging when running. See the debugging chapter for using the debugging function.
-Reload System: WebBuilder has a caching mechanism. This function refreshes cached data. After manually modifying certain system files or system database tables, use this function to apply changes immediately.
##Tools Menu
-Database Explorer: Opens the [Management Tools] -> [{#%Database Explorer|dbe}] module.
-Dictionary Config: Opens the [Development Suite] -> [{#%Dictionary Config|dict}] module.
-Key Value Editor: Opens the [Development Suite] -> [{#%Key Value Editor|kve}] module.
-Create UI Theme: Generates CSS files based on 'wb_tpl.css' and theme files.
-Compress Script: Compresses all js, css, mjs, and xwl files. If a file contains the "/* obfuscate */" keyword or the module file's "module.obfuscate" property is true, an obfuscated compressed version is generated. These compressed files are enabled when running in optimized mode (when the "sys.optimal" configuration item is true).
##Help Menu
-Documents: Opens the [Development Suite] -> [{#%Documentation|docs}] module.
-Create Docs: Regenerates documentation and components in the system component library. Also refer to {#Writing and Reading Documentation|System Module.Development Suite.Writing and Reading Documentation}.
-About: Displays information about this software.
##Module Editor
The module editor is a tool for editing module files, consisting of tabs such as [Design], [Source], and Scripts. The right side of the [Design] tab is the component tree, and the left side is the object inspector. The [Source] tab displays the pseudo-source code of the module, which is not directly editable and is mainly used to view the entire module's code. Clicking property/event links in the source code jumps to the corresponding values in the object inspector.
The component tree displays all client-side components contained in the module hierarchically. Each node represents a component, with the node name being the component's "cid" property. Important properties/events of the component are displayed on the right side of the node; clicking them jumps to the property/event. Adding a node under another node has two states: as a subordinate component or as a property (the property name is set by the "cid" property). Whether it acts as a property is determined by the child node's {#Wb.Configurable.isProperty} property. Child nodes acting as properties are displayed in the active color (blue) by default. By default, added child nodes act as subordinate components. For example, adding a toolbar to a panel: by default, the toolbar is a subordinate component of the panel. If the toolbar's "isProperty" is set to true and "cid" is set to "tbar", the toolbar becomes the "tbar" property of the panel. Single or multiple nodes in the component tree can be cut, copied, pasted, deleted, or dragged simultaneously. Selecting the root node (module node) cuts/copies the entire module. Child nodes under the same parent node cannot have duplicate names (cid property), but child nodes under different parents can. Duplicate-named nodes in the module are highlighted. The component tree supports key navigation; pressing a key jumps to nodes starting with the corresponding letter.
The object inspector displays the properties and events of the component selected in the component tree. When multiple components are selected, only common properties/events are displayed. If property/event values are inconsistent, their names are displayed in an error color (usually red). Key and important properties/events are highlighted. Hold Ctrl and click a property/event name to quickly view the corresponding API documentation. When focus is on the object inspector, pressing keys quickly locates specified properties/events (e.g., pressing "cid" jumps to the cid property). Pressing the first letter of an event name twice (e.g., "dd") locates events starting with "d". The top toolbar of the object inspector provides shortcut buttons for common functions:
-Back: Navigates back to the previously selected component node.
-Forward: Navigates forward to the component node before the back operation.
-Property: Jumps to the first property.
-Event: Jumps to the first event.
-Show Header: Displays the table header for adjusting the width of property name and value columns.
-Show Own Members: Displays only properties/events inherent to the component, excluding inherited ones.
-Show Key Members: Displays important and commonly used properties/events.
-Show Valued Members: Displays only properties/events with values, excluding empty ones.
Different properties have different value editors; values can be set by input or selecting dropdown items. Dragging a file from the [File Explorer] to a property quickly adds the file's relative URL or path to the property; hold Shift to add the full URL or path. When editing events or properties linked to the script editor, the script editor can be displayed via a dropdown, or you can click the trigger button or double-click the value to edit the property/event in a new tab.
Prefixing a property value with "@" explicitly specifies the property as an expression value. For example, setting the title property to @ok means using the value of the ok variable as the title.
Tool buttons related to the module editor:
-UI Designer: Opens the UI Designer for visual design of the selected container node. Valid when a container node is selected.
-Rebuild Design: Refreshes the visual interface of the UI Designer.
-Add Components: Automatically adds components by selecting database tables, views, procedures, SQL, or xwl modules. When a dictionary is set, properties configured in the dictionary are directly referenced. When a module is selected, parameters represent the parameter object passed to the module in JSON format.
-Add Column: Automatically adds grid columns by selecting database tables, views, procedures, SQL, or xwl modules. The operation method is the same as [Add Component].
-Clear Values: Clears all property/event values of the selected component.
-Goto Design Page: Switches to the module editor's design page.
-Node link to Control: Automatically selects the component in the component tree when a component node is selected in the module editor.
##Module Debugging
WebBuilder debugging for module code is divided into frontend and backend, both of which can be debugged using the browser's built-in {#%DevTools|docs:Glossary/Developer_Tools} tool. When debugging a client-side page, you can run the page in the IDE or a new window, then press F12 to open the client-side DevTools for debugging. When debugging a backend module, first select the module to debug in the [File Explorer], then click the [Toggle Debug State] button in the toolbar to set the module to debug state. When the module runs or is called, a waiting module entry with a debugging status appears in the Debug tab of the bottom multi-function view.\
Double-clicking the entry opens a new window; paste the debugging address into the window's address bar and press Enter to open the debugging page. If the page does not allow clipboard access, manually copy the debugging address from the window to the address bar. During remote debugging, for security reasons, the browser may block access to the debugging page and prompt that the page is not found. In this case, press [F12] to open "devtools" and press Enter in the browser's address bar. For debugging examples, see {#%devtools-debug|ide?openModule=example/coding/server-js/devtools-debug.xwl}.
When initiating backend debugging of a module file in the IDE, the IDE cancels modal mode; no modal dialog overlays or progress prompts are displayed; to avoid blocking the interface. You can toggle this state by clicking the [Toggle Modal Mode] button in the bottom-right corner of the IDE.
##Script Editor
The script editor is developed based on the Monaco Editor (same as VS Code) with enhanced and optimized functions. Therefore, usage methods such as shortcut keys are identical to VS Code. The following are common functions added by WebBuilder, accessible via the right-click menu:
-Goto Link (Ctrl+F11): Jumps to the file or code at the URL or file path pointed to by the cursor.
-Last Edit Location (Ctrl+,): Jumps to the cursor position of the last edited code in the current editor.
-Back (Ctrl+9): Navigates back to the previously opened file or cursor position.
-Forward (Ctrl+0): Navigates forward to the file or cursor position before the back operation.
Code hints, warnings, and error messages in opened script editors can be found in the [Markers] page of the multi-function view.
In the script editor, hold Ctrl and double-click a file in the [File Explorer] to add the file's relative URL or path at the cursor position; hold Ctrl+Shift and double-click to add the full URL or path.
When opening a file with the script editor, the system-specified character set is used by default. You can click the character set button in the bottom toolbar to set the character set.
#System Module.Development Suite.Control Manager
{#%Control Manager|controls} is used to organize the directory hierarchy of automatically generated controls in the system. In {#%IDE|ide}, you can generate the control library with one click by clicking the [Help] -> [Generate Documentation] menu. The system automatically extracts classes marked with "@icon" defined in all "js" and "mjs" files under the "js" and "ss" directories as controls\
and adds them to the control library. Newly extracted controls are added to the "Ungrouped" directory by default. You can create new control directories and drag controls to specified directories to adjust their belonging and position.
Common Functions:
-Add Folder: Adds a new directory within the current directory. Added to the root directory if no directory is selected.
-Edit: Edits the directory name.
-Delete: Deletes controls or directories.
-Save: Saves all modifications.
-Drag: Drags nodes to adjust directories or controls.
#System Module.Development Suite.Dictionary Config
{#%Dictionary Config|dict} is used to define properties/events for displaying and editing database table fields in grids or dialog boxes. A dictionary consists of multiple dictionary items, each corresponding to a field name via its name and group name.
##Dictionary Item
A dictionary item describes the display and editing behavior of a field, consisting of the following properties:
General: Overall properties of the dictionary item
-Name: The name of the dictionary item, identical to the field name, usually in lowercase. The system automatically converts field names to lowercase to avoid differences between databases.
-Title: The column name displayed in the grid or the title when converted to an edit control.
-Alias: Other names used by the dictionary item, separated by commas. For example, the alias of "id" can be "sid,rec_id,pk_id".
-Group Name: The group the dictionary item belongs to, used to distinguish dictionary items with the same name but different properties. Leave empty if the dictionary item does not belong to any group.
-Group Title: The group title displayed in the dialog box. Dictionary items under the same group can share the same group title.
-Remark: Description of the dictionary item.
Edit: Properties for editing components in dialog boxes
-Hidden: Whether the component is hidden during editing.
-Control Name: The {#Wb.Component.cname} property of the component.
-Length: The {#Wb.Text.maxLength} property of the control.
-Precision: The {#Wb.Number.decimalCount} property of the control.
-Height: The {#Wb.Component.height} property of the control.
-Type: The {#Wb.Text.valueType} property of the control.
-Hint: The {#Wb.Control.hint} property of the control.
-Required: The {#Wb.Control.required} property of the control.
-Read Only: The {#Wb.Text.readonly} property of the control.
-Colspan: The span number of columns for the component's {#Wb.Component.gridColumn} property.
-Fill: Whether to add a {#Wb.Fill} component after this component to occupy the remaining space of the current row.
-Key Name: The key name defined in {#%Key Value Editor|kve}, using all lists under this key name as the dropdown list. Specifying this property sets the default control to a {#Wb.Select} control.
-Validation Script: The {#Wb.Text.validator} property of the control.
-Additional Items: An object consisting of arbitrary properties or events of the component. E.g.: {{({required: true, events: {change(value){Wb.tip(value)}}})}}
Display: Properties for grid columns
-Hidden: Whether hidden in the grid column.
-Width: The {#Wb.Column.width} property of the column.
-Format: The {#Wb.Column.format} property of the column.
-Type: The {#Wb.Column.type} property of the column.
-Wrap Type: The {#Wb.Column.autoWrap} property of the column.
-Check Type: The {#Wb.Column.checkBox} property of the column.
-Render Script: The {#Wb.Column.render} property of the control.
-Additional Items: An object consisting of arbitrary properties or events of the column. E.g.: {{({titleAlign: 'center'})}}
##Function Operations
-Add: Adds a new dictionary item.
-Edit: Edits the selected dictionary item, achievable by double-clicking the entry to edit.
-Delete: Deletes the selected dictionary item.
-Name Search Box: Searches dictionary items by name, alias, or title.
-Group Name Search Box: Searches dictionary items by their group name.
-Content Search Box: Searches dictionary validation scripts, edit extra items, render scripts, and display extra items.
##Dictionary Related APIs
On the backend, methods such as {#Wb.getDict}, {#Wb.getDictRecords}, {#Wb.sendDict}, and {#Wb.sendDictRecords} convert SQL-queried data through the dictionary to obtain JSON scripts of data and metadata, which are output to the client for use by grids/dialogs. Additionally, dictionary data can be accessed via the {#Wb.ServerDict} class.
On the frontend, dictionary related APIs of the {#Wb.Grid} class or the {#Wb.Dict} class can be used to access the dictionary and directly generate interfaces from it.
##Dictionary Table Structure
Dictionary information is stored in the [wb_dict] table, with the following structure:
|Field Name|Description|
|sid|Primary Key|
|name|Name|
|title|Title|
|alias|Alias|
|group_name|Group Name|
|group_title|Group Title|
|remark|Remark|
|edit_hidden|Hidden|
|cname|Control Class Name|
|edit_length|Length|
|edit_scale|Scale|
|edit_height|Height|
|edit_type|Type|
|edit_hint|Hint|
|edit_required|Required|
|edit_readonly|Read Only|
|edit_colspan|Column Span|
|edit_fill|Fill|
|key_name|Key Name|
|validate_script|Validation Script|
|edit_tags|Extra Items|
|display_hidden|Column Hidden|
|display_width|Column Width|
|display_format|Column Format|
|display_type|Column Type|
|auto_wrap|Column Wrap Type|
|check_box|Column Check Type|
|render_script|Column Render Script|
|column_tags|Column Extra Items|
Dictionary data has a caching function. If you directly modify database table data, click [Reload System] under the [Run] menu in {#%IDE|ide} to update cached data.
##Usage Example
The following example demonstrates using a dictionary to develop a simple "Employee Application". For dictionary information, see relevant entries in {#%Dictionary Config|dict}.
Grid-style Query and Edit: {#%dict-edit-grid|ide?openModule=example/crud/dict-edit-grid.xwl}
Dialog-style Query and Edit: {#%dict-edit-dialog|ide?openModule=example/crud/dict-edit-dialog.xwl}
#System Module.Development Suite.Key Value Editor
{#%Key Value Editor|kve} is used to configure key-value pairs. Key-values are usually used to define correspondences between codes and names. For example, for gender, 0 can be defined as "Male" and 1 as "Female".
The left table of the Key Value Editor defines key names, and the right table displays all key-value lists of the currently selected key.
##Key Name
-Add: Adds a new key name. Enter any name in the [Key Name] field and set whether the key is numeric in the [Value Type] field.
-Edit: Modifies the selected key name, also editable by double-clicking the key name.
-Delete: Deletes the selected key name and all its list data.
-Search: Searches for key names.
##Key List
-Add: Adds a new key list entry. Usually, the key is the code and the value is the name.
-Delete: Deletes the selected key list.
-Save: Saves data added, modified, or deleted in the key list.
-Search: Searches for keys and values.
##Using Key-Values
Key-values can be used in controls, APIs, or dictionaries, for example:
-Setting the {#Wb.Select.keyName} property of a selector control directly generates a dropdown list.
-Using the {#Wb.sendRows} method with the kv property converts key-values, e.g., "Wb.sendRows({ sql: 'select code,gender from wb_staff', kv: {gender: 'gender'} })".
-Setting a specified key name in the [Key Name] property of a dictionary item automatically performs key-value conversion.
#System Module.Development Suite.Language Management
{#%Language Management|m?xwl=dev/lang} is used to configure the locale files in the wb/js/locale folder.
##Function Operations
-Add: Adds an item. The "name" column specifies the item name, while the other columns represent specific language-region codes.
-Delete: Deletes the selected items.
-Save: Saves data added, modified, or deleted in the grid.
-Search: Searches for items.
#System Module.Development Suite.Version Management
In WebBuilder, you can use either third-party version control tools such as SVN or Git, or {#%Version Management|m?xwl=dev/version} for file version management.
##Function Operations
-Check Out: Checks out the selected file from the version database to the file system.
-Back: Reverts to a specified version.
-Delete: Deletes the selected file from the version repository.
-Version: Searches for all files of a specified version.
-Search: Searches for all files of a specified name.
#System Module.Development Suite.Documentation
Used to view user manuals and API documentation. The top of the documentation is the search toolbar, the left is the documentation directory tree, and the client area is tabs for opened documents.
##Documentation Browsing
User manuals and API documentation can be viewed according to the document directory structure. Clicking tree nodes opens the corresponding document content. Clicking the browser's [Back] and [Forward] buttons navigates to previous or next content.
##API Documentation
The system provides a dedicated API documentation viewer for reading API documentation. The document title is the class name, and the subtitle consists of identifiers such as the class "cname", mixin, or the file where the class is located. All inherited classes are displayed below the title. In the [Search] bar,\
you can search for property or event names. On the left side of the [Search] bar, a set of function buttons is provided:
-Show Own Members: Displays only properties/events inherent to the current class, excluding inherited ones.
-Show Key Members: Displays important properties/events.
-Show Public Members: Displays public properties/events.
-Toggle Expand/Collapse: Expands or collapses all properties/events.
-Property: Jumps to properties. Hovering the mouse displays a list of all properties; clicking jumps to the corresponding property. Properties starting with "!" are static properties.
-Method: Jumps to methods. Hovering the mouse displays a list of all methods; clicking jumps to the corresponding method. Methods starting with "!" are static methods.
-Event: Jumps to events. Hovering the mouse displays a list of all events; clicking jumps to the corresponding event.
##Full-Text Search
Enter keywords to search in the top toolbar. The system displays search results in the dropdown list by matching degree and priority. Clicking a dropdown entry opens the associated document.
For examples, searching for "grid", "wb.grid", "kv", or "Object Inspector" all retrieves specified content.
#System Module.Development Suite.Internationalization Development
Internationalization development refers to internationalizing text, numbers, dates, etc., used in the system. The system automatically handles internationalization of numbers and dates based on the currently selected language. Developers only need to internationalize custom text.
##Setting the System Language
The specific language is specified by a string consisting of a language code and a region code. For example, "zh-cn" represents Chinese (China), "en-us" represents English (United States). For details, refer to "ISO 639-1" and "ISO 3166-1" codes.
The system provides multiple places to set the specified language, in descending order of priority:
-Module Settings: Each module can set an independent language, which is used after the module runs. Set the language code in the module's "module.language" property.
-User Settings: Each user can set an independent language, effective after login. The system default language is used if not logged in. Set the language code in {#%User Management|user} or the [My Account] menu in the top-right corner of {#%Homepage|home}.
-Configuration Settings: Set the language code via the {#%System Configuration|config} module. Set the used language code in the "sys.locale.language" configuration item; "auto" means automatically using the client's language. If the system does not configure the client-specified language, set the default language in the "sys.locale.defaultLanguage" configuration item. For example, setting it to "en-us" uses the default language "en-us" when the client language is "ja-JP" and the system does not configure that language. Additionally, the system provides a configuration function for language recognition regardless of region, set in the "sys.locale.defaultRegionLanguage" configuration item. For example, specifying "en=en-us" uses "en-us" when the requested language is "en-GB" and the system does not configure that language.
##Definition and Usage of Languages and Text
Languages and text used by the system are defined in the [wb/js/locale] directory, you can use {#%Language Management|m?xwl=dev/lang} to configure it. Each "js" file in this directory represents a language, with filenames starting with "wb-" followed by the language code.
These defined texts can be accessed and used in multiple places, where "name" represents the text name defined in the "js" file:
-Client: Accessed using "Str.name" in code. Accessed using "@Str.name" in the property editor.
-Server: Accessed using "Str.name" in code.
-Title of Module File/Directory: Accessed using "@name".
-Dictionary Title: Accessed using "@name".
-Key-Value: Accessed using "@name".
Some important predefined names in the system:
-lang: The currently used language code.
-startDay: The first day of the week, e.g., displayed in the calendar. 1 represents Monday, 7 represents Sunday.
-monthFormat: Year-month format.
-altMonthFormats: Alternative year-month formats, used for parsing year-month.
-dateFormat: Date format.
-altDateFormats: Alternative date formats, used for parsing dates.
-timeFormat: Time format.
-altTimeFormats: Alternative time formats, used for parsing time.
-dateTimeFormat: Date-time format.
-altDateTimeFormats: Alternative date-time formats, used for parsing date-time.
##Formatting Text
Text can be formatted using custom string prototype methods. For example, formatting the "notFound" prompt uses the following code:
let text = Str.notFound.format('abc'); // text is 'Not found "abc".'
#System Module.Management Tools.User Management
{#%User Management|user} is used to manage the system users.
##User Data
User data consists of the following fields:
-Username: Username used for login.
-Display Name: Display name of the user.
-Password: Password composed of any characters or digits. Passwords of different strengths have different requirements for characters.
-Confirm Password: Same as the password. Used to verify the password to avoid mistakes.
-Email: User's email address.
-Mobile Phone: User's mobile phone number.
-Language: System language used after login. Empty means default, i.e., use the language configured in the system.
-Department Name: Department the user belongs to.
-Enabled: Whether the user is enabled. Disabled users cannot log in.
-User ID: Unique identifier of the user, usually generated automatically by the system.
-Available Roles: List of roles available for the user.
-Selected Roles: Roles already selected by the user. Entries in the [Available Roles] table can be added to the [Selected Roles] table, or the reverse operation can be performed to remove selected roles.
##Function Operations
-Add: Add a new user.
-Edit: Edit the selected user.
-Delete: Delete all selected users.
-Search: Search by username, display name or user ID.
##User Table Structure
User information is stored in the [wb_user] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|user_name|Username|
|password|Password|
|display_name|Display name|
|create_date|Creation date|
|login_times|Login times|
|dept_id|Department ID, related to the sid field of the department table [wb_dept]|
|email|Email|
|mobile_phone|Mobile phone|
|use_lang|Language|
|last_login|Last login time|
|status|Status, 0: Disabled, 1: Enabled|
Roles associated with the user are configured in the [wb_role] table. The roles owned by the user are defined by the user_id and role_id fields in the [wb_user_role] table.
##User Role Table Structure
The mapping between users and roles is stored in the [wb_user_role] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|user_id|User ID, related to the sid field of the user table [wb_user]|
|role_id|Role ID, related to the sid field of the role table [wb_role]|
#System Module.Management Tools.Role Configuration
{#%Role Configuration|role} is used to configure user roles. The system can perform permission control through roles.
##Role Data
Role data consists of the following fields:
-Role Name: Identifier used to distinguish different user types or functional permissions.
-Remark: Supplementary explanatory text for the role.
-Enabled: Whether the role is enabled. Disabled roles are invalid.
-Role ID: Unique identifier of the role, usually generated automatically by the system.
##Function Operations
-Add: Add a new role.
-Edit: Edit the selected role.
-Delete: Delete all selected roles.
-User: Configure user role mappings.
-Module: Configure module role mappings.
-Search: Search by role name or role ID.
##Role Table Structure
Role information is stored in the [wb_role] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|role_name|Role name|
|remark|Remark|
|status|Status, 0: Disabled, 1: Enabled|
#System Module.Management Tools.Department Management
{#%Department Management|dept} is used to configure departments. The department structure is organized in an infinite multi-level tree form.
##Department Data
Department data consists of the following fields:
-Department Name: Specific name of the department.
-Department Code: Unique identifier assigned to the department.
-Manager: Person in charge of the department.
-Enabled: Whether the department is enabled. Disabled departments are invalid.
-Department ID: Unique identifier of the department, usually generated automatically by the system.
##Function Operations
-Add: Add a new department as a child of the currently selected node.
-Add to Sibling: Add a new department at the same level as the currently selected node.
-Edit: Edit the selected department.
-Delete: Delete all selected departments.
-Search: Search by department name, department code or department ID.
##Department Table Structure
Department information is stored in the [wb_dept] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|dept_code|Department code|
|dept_name|Department name|
|parent_id|Sid value of the parent department|
|manager_id|Manager, related to the sid field of the [wb_user] table.|
|status|Status, 0: Disabled, 1: Enabled|
#System Module.Management Tools.Permission Management
{#%Permission Management|dept} is used to configure access permissions for modules. Permissions are role-based, meaning a specified role is granted access to specified modules. When a non-admin user has access to this module, they can set permissions they own for roles they do not have, including allow and deny access settings.
##Permission Settings
The left side of the permission management module is the role list, and the middle is the module list. After selecting a role on the left, you can view the list of accessible modules. Accessible modules are indicated by checkmarks. A directory with a square checkmark means some modules under this directory are accessible.
When you select different roles on the left, the accessible module list switches automatically.
The roles on the right indicate which roles can access the specified module selected in the middle. Accessible roles are indicated by checkmarks. You can set access permissions for the selected module by checking roles on the right.
##Function Operations
The following describes the functions of the toolbar buttons at the top of the module list:
-Permit: Allow the selected role on the left to access all selected modules.
-Forbid: Deny the selected role on the left access to all selected modules.
-Expand All: Expand all functional modules.
-Collapse All: Collapse all functional modules.
-Clean: Clear all invalid permission data in the database permission table. When you delete module files manually, you can click this button to remove invalid permission data. The system automatically cleans when files are deleted via IDE or file manager.
##Permission Table Structure
Permission information is stored in the [wb_perm] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|module_path|Module path|
|role_id|Role ID, corresponding to the sid field of the role table [wb_role].|
#System Module.Management Tools.System Configuration
{#%System Configuration|config} is used to configure system parameters. Some parameters take effect immediately after modification; others require a system restart. See parameter descriptions for details.
##Parameter Data
Parameters, also known as configuration items, consist of the following properties:
-Name: Identifier of the parameter, can be any name. Multi-level paths are separated by ".".
-Type: Value type of the parameter.
-Value: Value of the parameter.
-List: Drop-down list data when the parameter type is enum. Described in array format, e.g.: ["item1", "item2", "item3"].
-Description: Remarks for the parameter.
##Function Operations
-Add: Add a new parameter. Use "." to separate multi-level paths.
-Edit: Set the value of the parameter.
-Delete: Delete the selected parameter.
-Refresh: Refresh the current parameter list.
-Parameter Path: Display the full path of the currently selected parameter, which can be selected and copied.
##Parameter Access
Parameters can be set via the API method {#Wb.setConfig}, obtained via the API method {#Wb.getConfig}, and also accessed via the Java class com.wb.common.Config.
##Parameter Storage
Parameter files are stored in JSON format in [wb/system/config.json]. The key is the full name of the parameter, and the value is the configuration object. The configuration object consists of the following properties:
-name: Parameter name.
-type: Parameter type.
-value: Parameter value.
-description: Parameter description in the default language, usually English.
-list: Drop-down list data when type is enum.
-text: Parameter description in the default language, usually English.
-zh-cn: Parameter description in Chinese. Descriptions for other languages can be added with the corresponding language code.
#System Module.Management Tools.Database Explorer
{#%Database Explorer|dbe} is a powerful database management tool suitable for any type of database. It can run any SQL and retrieve data, and edit database tables online. The left side of the Database Explorer
shows the list of databases added in {#%Database Configuration|dbc}. The client area contains tab pages for running SQL or editing table data. Expand the database list to view its resources: such as tables, views,
procedures, etc. Clicking a table or view opens it in a client tab. The Database Explorer provides SQL auto-completion; the system automatically suggests input when typing SQL statements.
##Function Operations
-New SQL: Add a new SQL execution tab using the currently selected database in the database list.
-Run SQL: Run the SQL statement in the current SQL tab and get the returned result. Blob fields are not returned by default.
-Run SQL and Get Blobs: Run SQL and retrieve any Blob field content to the client. You can click the download link to download Blob content.
-Add: Add a new record in the current table. Only valid when the open tab is a table.
-Delete: Delete selected records in the current table. Only valid when the open tab is a table.
-Save: Save any changes to the current table. Only valid when the open tab is a table.
-Save All: Save all modified but unsaved tables.
-Filter: Filter the currently opened table or view. E.g. "field1='abc' and field2=123".
-Property: View all field properties of the current tab result set, which can be a table, view or SQL result set.
-Maximum Records: Maximum number of records the client can get from the server at one time. When opening a table or view, the system dynamically fetches the current page data asynchronously; when running SQL to get data, the system returns all records within the max record limit at once to avoid potential issues caused by re-running SQL during paging.
-Rename: Put the selected node in the database list into edit mode for easy copying of its name, e.g., table name, field name, etc. Lowercase: Convert the name to lowercase and enter edit mode; Uppercase: Convert the name to uppercase and enter edit mode.
-Database Paging: Whether to enable database-side paging (no return record limit) when opening tables. The default is application server-side paging (with a default max return record limit).
-Export: Export data from the current single table or result set to a file in "wbt" format. This file can be imported into the database via the [Import] button. To export data in other formats, click the menu at the bottom of the table.
-Import: Import files in "wbt", "xls", "xlsx", "csv", "txt" format into the currently opened database table. The first row of imported data is the field name. You can add remarks in "()" after the field name, e.g., "field1(Field1) field2(Field2)".
-Back: Return to the previous tab.
-Forward: Go forward to the tab before returning.
##Table Editing
After clicking a table in the database list, the table opens for editing. You can navigate up and down cells using the up and down arrow keys, and left and right cells using tab and shift+tab. Pressing the down arrow on the last row adds a new row. If a cell contains a trigger button such as a dropdown or date picker, press ctrl+down arrow to expand the associated control.
##Run SQL
You can run any SQL statement in the SQL tab, including CRUD or accessing stored procedures.
Run normal SQL:
$sql: select * from wb_user
Some databases support running multiple SQL statements and returning multiple results. For example, running the following 3 SQL statements in SQL Server will get 3 results at once:
$sql: select * from wb_user;
delete from wb_log where 1=0;
select * from wb_staff;
Run the stored procedure test_proc, where returnValue is the return value and outParam is the output parameter:
$sql: {{*returnValue*}=call test_proc('inParam', {*outParam*})}
Run an Oracle stored procedure that returns a cursor, where cursor indicates the cursor type and p_user is the output parameter:
$sql:{call user_proc({*cursor|p_user*}
Refer to the development manual of the database you are using for more usage.
##Legend
The system uses multiple icons to identify database resources:
-Field: Fields are displayed when expanding a table or view, where {[key]} indicates a primary key field, {[ok]} indicates a required field, and {[item]} indicates a normal field.
-Index: Indexes are displayed when expanding a table, where {[check1]} indicates a normal index and {[check10]} indicates a unique index.
#System Module.Management Tools.Database Configuration
{#%Database Configuration|dbc} is used to add new database data sources or modify existing ones. The left side of the database configuration module shows the list of configured data sources, and the right side shows the detailed configuration information of the selected data source.
##Data Source Properties
-Name: Any data source name used to identify the data source. In the API, you can access the associated database by specifying this data source, e.g., "Wb.sql({sql: 'select * from table', db: 'test1'})", where test1 is the data source name.
-Description: Remarks for the data source.
-driverClassName: Database driver class name.
-For more property descriptions, see: {#%http://commons.apache.org/proper/commons-dbcp/configuration.html}
##Function Operations
-Add: Add a new data source.
-Copy: Copy the selected data source and create a new one. Copying allows quick configuration of a new data source based on an existing one.
-Delete: Delete the selected data source.
-Save: Save any changes to the current data source.
-Test: Test whether the current data source is accessible.
-Default: Set the current data source as the default one. After setting as default, this data source is used when no data source is specified, e.g., "Wb.sql('select * from table')", which uses this data source without specifying one.
-Create Tables: Create tables in the default data source based on the system database table template file. A new table is created if it does not exist; if it exists and has the same structure, the system ignores creation; if the structure is different, the system throws an exception. See the following description for the database table template file.
-Property: Show all connection properties. [Close] for closing the selected connection; [Clear] for clearing all idle connections; [Refresh] for refreshing the connections list.
-Refresh: Refresh the current data source list.
##Data Source Configuration File
System data sources are stored in [wb/system/db/source.json]. You can edit this file to configure data sources, which takes effect after a system restart or clicking [Reload System] in the IDE.
##Database Field Type Configuration File
The database field type configuration file is stored in [wb/system/db/types.json]. This file provides different field adaptations for different databases, making the SQL in the database table template file universal for all databases. You can edit this file when adding a new database or field type. The file is saved in JSON format. The key is the database type name, which must match the database product name returned by JDBC; the value is the configuration object:
-varchar: String type
-nvarchar: Unicode string type
-numeric: Numeric type
-datetime: Date and time type
-clob: Large text type
-nclob: Unicode large text type
-blob: Binary data type
Note that after configuring this file, please add the database driver jar package matching the database to the system, usually to the lib directory of the application server, such as the lib directory of Tomcat.
##Database Table Template File
The system database table template file is stored in [wb/system/db/sqls.sql]. The system can automatically create tables suitable for all databases based on this file. When you need to add a new table to the database, you can edit this file and click the [Create Table] button to automatically create the database table.
SQL statements in this file must be written in strict format: each create statement occupies one line; each field defined in the table occupies one line; comments are added using "/* */"; "_$type$_" is used to represent the field type; type is the field type defined in the database field type configuration file.
#System Module.Management Tools.File Manager
{#%File Manager|file} is used to manage the server-side file system. You can conveniently manage or export server-side files via the File Manager. The left side of the File Manager is the directory tree, and the right side shows the subdirectories and files under the currently selected directory in the directory tree.
##Function Operations
-Add File: Create a new file in the current directory.
-Add Folder: Create a new directory in the current directory.
-Rename: Rename the selected file/directory in the right file/directory list.
-Cut: Cut the selected file/directory in the right file/directory list to the in-memory virtual clipboard of this page.
-Copy: Copy the selected file/directory in the right file/directory list to the in-memory virtual clipboard of this page.
-Paste: Paste the file/directory from the in-memory virtual clipboard of this page to the currently selected directory in the directory tree.
-Delete: Delete the selected file/directory in the right file/directory list.
-Export: Export the selected file/directory in the right file/directory list to the client. If a directory or multiple files are selected, they are automatically compressed into a zip file before export.
-Export and Zip: Compress the selected file/directory in the right file/directory list into a zip file and export it to the client.
-Import: Import client files to the currently selected directory in the directory tree.
-Import and Unzip: Import client zip files to the currently selected directory in the directory tree and automatically extract the zip file.
-Refresh: Refresh the directory and file list.
-Back: Return to the previously selected directory.
-Forward: Go forward to the directory before returning.
-Up: Return to the parent directory.
-Address Bar: The address bar displays the path of the currently selected directory in the directory tree. Its dropdown list contains multiple common paths, which can be selected to navigate to the corresponding directory. Press the [Go] button or Enter to navigate to the directory pointed to in the address bar edit box.
##Import and Unzip
Click the dropdown button of Import to show the dropdown menu. Click Import and Unzip in the dropdown menu to show the import dialog:
-File: One or more files to import.
-Charset: Encoding character set used for file names in the imported zip package.
#System Module.Management Tools.Task Manager
{#%Task Manager|task} is used to manage system scheduled tasks. You can conveniently add periodic scheduled tasks via the Task Manager.
##Scheduled Task Data
Scheduled task data consists of the following fields:
-Name: Identifier of the scheduled task, can be any name.
-Interval: Execution interval of the scheduled task, which can be second, minute, hour, day, week, month, year and Cron. Cron represents any Cron expression, which is used to flexibly set any interval.
-Duration: Time period during which the scheduled task runs. If the start time or end time is missing, it means no start/end time is specified, i.e., unlimited.
-Enabled: Whether the current task is enabled.
-Concurrent: Whether concurrent access is allowed for the scheduled task. If concurrent is disabled, the next task will be canceled if the previous task is not completed.
-One time task: Automatically delete the task after it is executed.
-Description: Remarks for the task.
-Script: Any server-side js script. These scripts are executed when the task starts, and can call js modules or Java classes. If the script starts with "$", it represents a task interface class, e.g., "$com.wb.job.DemoJob".
##Function Operations
-Add: Add a new task.
-Edit: Edit the selected task.
-Delete: Delete all selected tasks.
-Pause: Pause the execution of all selected tasks.
-Resume: Resume the execution of all selected tasks.
-Stop: Stop the entire scheduled task engine; all tasks will stop executing.
-Search: Search by task name.
##Scheduled Task Table Structure
Scheduled task information is stored in the [wb_job] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|job_name|Scheduled task name|
|interval_type|Interval type|
|interval_value|Interval value|
|trigger_time|Trigger time|
|trigger_weekday|Trigger weekday|
|trigger_day|Trigger day|
|trigger_month|Trigger month|
|cron_express|Cron expression|
|concurrent|Whether concurrent access is allowed|
|auto_removed|Whether to automatically delete the task after execution|
|begin_date|Start time|
|end_date|End time|
|status|Status, 0: Disabled, 1: Enabled|
|server_script|Server-side JS script|
|job_desc|Task description|
#System Module.Management Tools.Workflow Manager
{#%Workflow Manager|flow} is used to design and manage process templates.
##Process Template File
Process template files are stored in the server's file system. The root directory is [wb/WebContent/wb/system/resource/flow]. Process template files have the extension ".flw" and the content is stored in JSON.
##Function Operations
-New: Add a new process template.
-Open: Open an existing process template.
-Save: Save the currently edited process template.
-Save All: Save all modified process templates.
-Cut: Cut the selected process node/connection to the in-page virtual clipboard.
-Copy: Copy the selected process node/connection to the in-page virtual clipboard.
-Paste: Paste the node/connection from the in-page virtual clipboard to the current flowchart.
-Delete: Delete the selected node/connection.
-Undo: Undo any operation on the flowchart.
-Redo: Redo the operation on the flowchart before undoing.
-Select All: Select all nodes/connections.
##Process Design
The process template designer consists of 3 parts: the left property editor for viewing properties of the selected node, connection or process itself; the middle client area is the flowchart designer; the right side is the node list, including start, end and other nodes. Except for start and end nodes, other nodes only differ in shape and have the same function.
When starting to design a process, you can drag nodes from the right to the client flowchart. Each process should usually include a start and end node. When hovering the mouse over a node, multiple anchors appear on the node. You can drag any anchor to another node to connect the nodes. Dragging a node adjusts its position. Clicking a node or connection selects it. Clicking on a blank area selects the entire process by default, and all properties are displayed in the left property editor. You can select multiple nodes by pressing Ctrl+click, or by drawing a box on the flowchart.
##Process Properties
Process properties consist of process properties, node properties and connection properties, where process properties represent default properties.
-afterAction: Module executed after performing an action.
-back: Whether rollback is allowed.
-beforeAction: Module executed before performing an action.
-comment: Long descriptive text.
-dept: Processing department of the node.
-deptCC: CC department of the node.
-deptManager: Whether processed by the department manager.
-deptManagerCC: Whether to CC the department manager.
-description: Short remarks.
-handleForm: Form module opened when the user processes the process. If omitted, look for "viewForm" and "startForm" in sequence as alternatives.
-intersectDeptRole: Whether to take users who have an intersection of the department and role attributes, i.e., users who exist in both the department and role. Default is all.
-name: Unique identifier.
-onGetParams: Server-side script executed when getting parameters. Can return an object composed of multiple parameters. Available parameters: "params", "flow", "node" represent the parameter object, process object and current node object respectively.
-onGetUsers: Server-side script executed when getting handlers. Can return one or more users, multiple users are represented as an array. Available parameters: "params", "flow", "node" represent the parameter object, process object and current node object respectively.
-onGetUsersCC: Server-side script executed when getting CC users. Can return one or more users, multiple users are represented as an array. Available parameters: "params", "flow", "node" represent the parameter object, process object and current node object respectively.
-onPass: Method executed when passing. Available parameters: "params", "flow", "node" represent the parameter object, process object and current node object respectively.
-passUserCount: Number of users who pass. The process is considered passed when the specified number of users approve. A value ending with "%" represents a percentage. "100%" means all users must approve to pass.
-reject: Whether rejection is allowed.
-role: Processing role of the node.
-roleCC: CC role of the node.
-signAfter: Whether to allow adding a signature after.
-signBefore: Whether to allow adding a signature before.
-startForm: Form module opened when initiating a process. If omitted, look for "handleForm" and "viewForm" in sequence as alternatives.
-text: Title text of the node.
-transfer: Whether transfer is allowed.
-user: Processing user of the node.
-userCC: CC user of the node.
-viewForm: Form module opened when the user views the process. If omitted, look for "handleForm" and "startForm" in sequence as alternatives.
##Process Initiation and Flow
A process can be initiated in the [{#%My Workflow|my-flow}] module by clicking the [New] button, or via the {#start|Wb.Workflow.start} method of the {#Wb.Workflow} class. After initiation, a dialog box is displayed. The priority of the dialog box module for initiation is determined by the attributes "startForm", "handleForm" and "viewForm" in descending order. Whether the dialog box is displayed automatically is determined by the "app.autoShow" attribute of the client in the module. Setting it to false means it is not displayed automatically by default.
After the process is initiated, it goes to the first node according to the "onPass" attribute of the connection in the process template file. Users with view or processing permissions can view or process it in the [{#%My Workflow|my-flow}] module. The processing user of the node is specified by all users merged from the node attributes "user", "role", "dept", "deptManager" and "onGetUsers" in the process template, where "userCC", "roleCC", "deptCC", "deptManagerCC" and "onGetUsersCC" represent the viewing users.
When a user processes or views a process in the [{#%My Workflow|my-flow}] module, the system displays a dialog box. The priority of the processing dialog box is determined by the attributes "handleForm", "viewForm" and "startForm" in descending order, and the priority of the viewing dialog box is determined by the attributes "viewForm", "handleForm" and "startForm" in descending order. When the dialog box
is opened, the system first executes the "app.init" method in the client of the dialog box, which passes 3 parameters: flowId, type and record, representing the process id, window type ("start", "handle", "view") and the current process record object respectively. Before performing a process action (such as pass, reject, etc.), the system executes the "app.beforeAction" method in the client of the module,
which passes parameters action and record, representing the name of the process action (such as pass, reject, etc.) and the process record object respectively. This method can return an object type representing the parameter object passed to the backend, and returning false cancels the execution of the action. After the process successfully submits the action from the client to the server, the system executes the "app.beforeAction" method in the server-side serverScript of the module, which passes 2 parameters: action and flow, representing the action name and {#Process Object|Wb.Workflow} respectively. The return value of this method can be obtained in the "before" attribute of the client return value, and the module specified by the "beforeAction" attribute in the process template is also executed. After the action is executed, the system executes the "app.afterAction" method in the server-side serverScript of the module, which passes 2 parameters: action and flow, representing the action name and {#Process Object|Wb.Workflow} respectively. The return value of this method can be obtained in the "after" attribute of the client return value, and the module specified by the "afterAction" attribute in the process template is also executed. After the process successfully executes the action on the server, the system executes the "app.afterAction" method in the client of the module, which passes 3
parameters: action, response and record, representing the name of the process action, the content returned by the server and the process record object respectively.
When a process is returned, it is judged whether it is a re-initiation at the start node. This can be judged via the {#restarting|Wb.Workflow.restarting} attribute of the process in the backend, and via the "app.restarting" attribute in the module in the frontend.
See the following examples for processes: {#%workflow|ide?openModule=example/workflow} and {#%leave|ide?openModule=example/apps/oa/leave.xwl}
#System Module.Management Tools.Console
{#%Console|console} is used to display the Java program messages.
##Function Operations
-Pause: Pause displaying Java program messages.
-Clear: Clear console messages.
-Size: Set the maximum console buffer size.
#System Module.Management Tools.System Log
{#%System Log|log} is used to view log information recorded via the database table log API. These APIs include: {#Wb.recordInfox}, {#Wb.recordWarnx}, {#Wb.recordErrorx}, {#Wb.recordExceptx} and related API methods of the com.wb.util.LogxUtil class.
##Log Content
Log content includes the following fields:
-Date: Date when the log was recorded.
-Username: User associated with the log.
-IP Address: IP address associated with the log.
-Log Type: Classification identifier of the log.
-Content: Detailed information of the log.
##Function Operations
-Start Time: Start time for querying logs. No limit by default.
-End Time: End time for querying logs. No limit by default.
-Log Level: Query log level.
-Log Type: Query log type.
-Username: Query the username or display name associated with the log.
-Content: Query the content contained in the log.
-IP Address: Query the IP address contained in the log.
-Reset: Reset all query conditions.
##Log Table Structure
Log information is stored in the [wb_log] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|log_date|Log record date|
|user_id|User ID, related to the sid field of the user table [wb_user]|
|ip|IP address|
|log_level|Log level|
|log_type|Log type|
|msg|Log content|
#System Module.Management Tools.Online Users
{#%Online Users|online-users} is used to view the list of online users logged into the current server. The online user list is displayed in two upper and lower tables. The upper table shows the list of all online users, and the lower table shows all sessions
logged in under the same selected user.
##User List Data
Displays data of all logged-in users:
-Username: Username of the logged-in user.
-Display Name: Display name of the logged-in user.
-IP Address: Client IP address of one of the logged-in sessions.
-Creation Time: Creation time of one of the logged-in sessions.
-Last Access Time: Last access time of one of the logged-in sessions.
##Session List Data
Displays data of all sessions of the selected user:
-IP Address: Client IP address of the session.
-Creation Time: Creation time of the session.
-Last Access Time: Last access time of the session.
##Function Operations
-Logout: Force logout all sessions associated with the selected user.
#System Module.Management Tools.Blocked IPs
{#%Blocked IPs|m?xwl=admin/blocked-ip} is used to edit blocked IP list.
##Function Operations
-Save: Save the current IP list.
-Refresh: Refresh the current IP list.
-Clear: Reload IP lists from files.
##Configuration File Path
-The blocked IP list file is configured by the `sys.file.blockedIPs` config item.
-The allowed headers file is configured by the `sys.file.allowedHeaders` config item.
#System Module.Management Tools.System Information
{#%System Information|sysinfo} is used to view the system's operating environment and parameters.
#System Module.Management Tools.About
{#%About|about} is used to view version, copyright and other declaration information about WebBuilder.
#System Module.My Apps.My Workflow
{#%My Workflow|my-flow} is used to view and process workflows I participate in or initiate new workflows.
##Workflow List Data
-Start Time: Time when the workflow was initiated.
-Initiator: Initiator of the workflow.
-Title: Title of the workflow.
-Current Node: Current processing node of the workflow.
-Type: Type of the workflow template used.
##Function Operations
-New: Initiate a new workflow.
-View: View data related to the selected workflow.
-Handle: Process the selected workflow, such as approving or returning to a specified node.
-Progress: View the approval progress of the selected workflow, the status of each node and the associated flowchart.
-Terminate: Terminate the flow of the selected workflow.
-Search: Search for the title of the workflow.
-Status Selection: Filter all workflows with the specified status.
##Related Database Tables
Process instances are stored in the [wb_flow] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|start_time|Workflow initiation time|
|user_id|Initiator, related to the sid field of the user table [wb_user]|
|title|Process title|
|status|Process status. 0: Canceled, 1: In progress, 2: Completed, 3: Rejected|
|node_name|Current node name|
|node_text|Current node title|
|tpl_file|Process template file path|
Users associated with the process are stored in the [wb_flow_user] table. The structure of the table is as follows:
|Field Name|Description|
|sid|Primary key|
|flow_id|Process instance ID, related to the sid field of the process instance table [wb_flow]|
|user_id|Handler, related to the sid field of the user table [wb_user]|
|accept_time|Acceptance time|
|process_time|Processing time|
|status|Node status. 0: Unread, 1: Read, 2: Completed, 3: Rejected, 4: Backward, 5: Transferred, 6: Pre-signature, 7: Post-signature, 8: Returned|
|user_type|User type. 0: Initiator, 1: Handler, 2: CC user|
|after_user|User ID of the post-signature, related to the sid field of the user table [wb_user]|
|node_name|Node name|
|node_text|Node title|
#System Module.My Apps.Homepage
{#%Homepage|m?xwl=my/home} is used to display multiple application modules simultaneously in a specific layout. In the system's {#%Home|home}, you can drag module nodes from the left function module tree to this page to add modules associated with the nodes. This page is divided into 12 rows and 12 columns by default. Each sub-module can independently adjust the row height and column width it occupies. Click the menu button on the title bar of the sub-module to display sliders for the row and column widths. Drag the sliders to adjust the row and column widths. Drag the title bar of the sub-module to adjust its position on the entire page. After adjustment, you can click the menu button in the upper right corner of the system's {#%Home|home} and click the [Save Desktop] menu to save all changes, which is only valid for the current user.
#System Module.System.Home
{#%Home|home} is the default page after logging into the system. Its module file is located at [sys/portal/home.xwl]. The Home page consists of 3 parts: the top menu toolbar, the left tree of all accessible function modules (including a search box at the bottom), and the client area with tabs for displaying multiple opened modules. Clicking a child node in the function module tree opens the associated module in the client area.
##Function Operations
-Back: Return to the previously opened module.
-Forward: Go forward to the previously opened module before returning.
-Refresh: Refresh the currently opened module. This button is invalid if the current module does not allow refreshing.
-Homepage: Open the {#%Homepage|m?xwl=my/home} module. See the {#Homepage|System Module.My Apps.Homepage} description for details.
-Module Link to Menu: Whether to automatically select the associated node in the left function module tree when opening or selecting a module in the tab.
-My Account: Open my user account, where you can modify the display name or password, etc.
-Save Desktop: Save the current desktop state of the system home page, which is only valid for the current user. The desktop state includes the width and node expansion status of the function module tree, the modules opened in the client area tabs and their order, and the sub-modules opened in {#%Homepage|m?xwl=my/home} and their row and column widths.
-Save as Default Desktop: Perform the save desktop operation and set this desktop as the default desktop for all users who have not saved a desktop.
-Reset Desktop: Clear the saved desktop and set the system's default desktop as the current user's desktop.
-Interface Scheme: Select an available overall interface scheme.
-Font Size: Set the size of the page and text.
-Top Navigation Bar: Display the first-level menus of the left function menu tree at the top.
-Refresh Menu List: Refresh the left function menu tree list.
-Logout: Log out the current user.
#System Module.System.Index Page
{#%Index Page|index} is the system's default index page, i.e., the module displayed when accessing a URL without specifying any sub-page (such as only specifying the IP and port). Its module file is located at [sys/portal/index.xwl]. You can customize the default index page of the application system by modifying this module file.
#Development Basics.Basic and Module Files
WebBuilder is a complete development and runtime environment with both frontend and backend functionality. The frontend is developed using standard JavaScript/CSS/HTML, and the backend is developed using Java/JS and other related languages. The backend is developed based on the Java EE specification and supports multi-language programming, and all these codes can run with high performance. WebBuilder supports development using the latest and most advanced frontend and backend technologies.
##WebBuilder Directory Structure
The system contains 2 default directories, including the [WEB-INF] and [wb] directories. The former contains some jar packages required for system runtime, and the latter consists of the following directories:
-css: CSS files for pages.
-docs: Documentation directory.
-images: Image directory. Icon files can be added to this directory.
-js: Client-side JavaScript/module directory.
-libs: Third-party library directory.
-modules: xwl module file directory. All files are protected except those whose filenames end with the "$" symbol, meaning they cannot be directly accessed by clients.
-ss: Server-side JavaScript/module directory. All files in this directory are protected.
-system: System directory for storing system-related files. The "config.json" file is the system configuration file, the "controls.json" file is the control library file, the "url.json" file is the URL shortcut configuration file, the "db" directory is the database-related directory, and the "resource" directory is the system resource directory.
The system automatically traverses the modules directory and extracts accessible module titles to generate the functional menu tree of the application {#%Home|home}. The application structure can be organized by adjusting the structure and order of module directories/files.
##Module Files
WebBuilder uses a JSON file called Extensible Web Language (xwl file for short) to store application logic and code. An xwl file can serve as a frontend module, a backend module, or a module containing both frontend and backend functions. Frontend modules can be directly compiled into JS/CSS/HTML to run on the client side, and backend modules can be directly compiled into native code to run on the server side with high performance. In addition to being directly requested and invoked by clients as Web services, module files can also be used as ordinary modules, such as being invoked via Java as scheduled task modules.
Each xwl file deployed under the module directory (wb/modules) can be requested and invoked by clients as a web module. Each module has a unique URL with the address "m?xwl=path", where path is the relative path based on the module directory. For example, the user management module "admin/user.xwl" corresponds to the URL "m?xwl=admin/user", with the file extension "xwl" omitted. In addition, you can set a URL shortcut such as "user" for the module, and then access it via the URL "user".
When a client requests a module, the system intercepts the request in a filter and hands it over to the module executor for execution. If the module returns client-side scripts or other content, these contents will be output to the client.
{@wb-arch1}
xwl Module Runtime Process:
-The client requests an xwl file, such as by sending an ajax request or entering the module file's URL in the address bar, e.g., m?xwl=admin/user
-The server reads the compiled xwl module file from the cache.
-Checks if the current user needs to log in; if not logged in, sends the login page to the client.
-Checks if the current user has permission to execute the module; if not, throws an exception message.
-Checks if the module contains server-side scripts (scripts defined in the "module.serverScript" property); if so, executes these pre-compiled native code scripts with high performance.
-Checks if the module contains client-side scripts (components or scripts defined except for the "module.serverScript" property); if so, sends the pre-generated client-side scripts stored in the cache to the client in one go. If the client-side scripts have not changed, only a 304 status code is sent.
-After receiving the scripts, the client executes them if they are executable JavaScript scripts.
##Creating Modules
The following demonstrates how to create a module by taking the creation of the [Staff Management] application function as an example.
First, enter {#%Development Environment|ide}, select the [Development Suite] node under the module node in the [File Explorer], then click the [Add Folder] button on the toolbar. The system will display the create directory dialog box, enter the following information in the dialog box:
-Name: test
-Title: Test
-Icon: Select the archive icon {[archive]}
-Check [Insert before current item]
Click the OK button, and the [Test] directory will be created before the [Development Suite] directory.
Add Staff Module:
Select the newly created [Test] directory, then click the [Add File] button. The system will display the create module file dialog box, enter the following information in the dialog box:
-Name: person
-Title: Staff Management
-Icon: Select the user2 icon {[user2]}
Click the OK button, and the [Staff Management] module will be created in the [Test] directory.
After opening the [Staff Management] module, you can drag the [viewport] control from the control box on the right into the module, or add it by double-clicking the [General->viewport] control. Select the [viewport1] control in the module and set
its "layout" property to "fit". Press the [Ctrl] key and double-click the [List View->grid] control to add it under the [viewport1] control.
Add Staff Directory:
Select the newly created [Test] directory, then click the [Add Folder] button. The system will display the create directory dialog box, enter the following information in the dialog box:
-Name: person
-Title: Staff Management
-Check [Hide in the Menu]
Click the OK button, and the [Staff Management] directory will be created in the [Test] directory. This directory serves as a hidden subdirectory of the [Staff Management] module and will be hidden in the application {#%Home|home}, used to store backend modules.
Add Backend Query Module:
Select the newly created [Staff Management] directory, then click the [Add File] button. The system will display the create module file dialog box, enter the following information in the dialog box:
-Name: select
-Title: Query
Click the OK button, and the [Query] module will be created in the [Staff Management] directory.
After opening the [Query] module, add the following code to the "serverScript" property of the [module] node:
Wb.sendRowx('select * from wb_staff');
Click the save button on the toolbar to save the module.
Edit and Run Staff Module:
Double-click the [person.xwl] node to open the module and select the [grid1] control. Drag the [select.xwl] node from the [File Explorer] to the url property of the [grid1] control in the module editor to set the URL of the [select.xwl] module to the url property of [grid1]. After saving the [person.xwl] file,
click the [Run] button on the toolbar to run the [person.xwl] module.
Go to the system's {#%Home|home}, and you will see the newly added [Test] directory and the [Staff Management] module inside it. Click [Staff Management] to view the staff data displayed in a table.
##Referencing js and css Files
The system provides 3 methods to reference js and css files:
-Global Reference: Frontend js/css files can be referenced in the "sys.app.links" property of the {#%System Configuration|config} module, and backend js files can be referenced in the "sys.ss.files" property of the {#%System Configuration|config} module. Resources are globally available after system startup. Commonly used js/css files can be loaded this way.
-Module Reference: Frontend js/css files can be imported in the links property of the module node in the xwl module file. Referenced resources take effect after module execution. js/css files used within the module can be loaded this way.
-Code Reference: Frontend js/mjs/css files can be loaded using the {#Wb.load|Wb-Client.load} method, and backend js/mjs/xwl files can be loaded using {#Wb.load|Wb-Server.load}, {#Wb.run}, {#Wb.invoke}, {#Wb.execute}. This method allows dynamic loading and execution of js/mjs/css/xwl files via code.
##Server-side Scripts
Each module's module node has a serverScript property, which is used to write server-side scripts that execute when the module is called. See {#Development Basics.JavaScript Development} for details.
##app Object in Modules
Both frontend and backend of a module have an object variable named "app" for sharing variables and passing parameters.
On the frontend, the "app" object is accessible throughout the module, and some global properties and methods are usually defined in this object. The onLoad method in the frontend app object is executed after each module load. The difference between this method and {#finalize|Wb.Module.finalize} is that the former executes whenever the module is loaded regardless of whether it is a singleton,
while the latter executes only once for singleton modules after loading. The onDestroy method in the frontend app object is executed after the module is destroyed.
For example, define the following code in the {#initialize|Wb.Module.initialize} event:
Wb.apply(app, {
onLoad(){
Wb.tip('Module loaded');
},
onDestroy(){
Wb.tip('Module destroyed');
},
myProp: 'abc',
myMethod(param){
}
});
app.myParam = 'foo';
On the backend, the "app" object runs through the entire execution context lifecycle, created at the start of execution and released at the end. All modules within the execution context obtain the same "app" object.
For example, the following code:
Write the following code in the serverScript of test1.xwl:
app.myParam = 'foo';
Execute the following code in the serverScript of test2.xwl:
Wb.run('test1.xwl');
Wb.log(app.myParam);
Since the "app" is the same throughout the execution context, test2.xwl can obtain the app.myParam variable defined in test1.xwl.
Note that both frontend and backend code should avoid setting variables to globalThis; the alternative is to set variables to the "app".
##Module Client Container Components
When a module runs in a client container, such as in a tab of {#%Home|home}, you can access the container via the {{parentContainer}} variable, which is {{undefined}} when the module runs outside the container. The following code will close the current module client interface:
parentContainer ? parentContainer.close() : window.close();
##Accessing Modules Without Login
By default, each module requires login to access. You can set the loginRequired property of the module node to false to make the module accessible without login. Note that if the module calls a login-required module via the client, such as using the {#Wb.ajax} method, login is still required for the call. Module access permissions are controlled by the {#%Permission Management|perm} module.
#Development Basics.Events and Listeners
In this document, "event" specifically refers to events of the Wb class {#events|Wb.Base.events}; "listener" specifically refers to listeners based on page DOM elements {#listeners|Wb.Component.listeners}. Frontend classes (components) based on DOM elements have both events and listeners. For example, a button has a preset {#click|Wb.Component.click} event, and you can also add a click listener to the element {#el|Wb.Component.el} associated with the button to listen for button clicks, both of which have the same effect. See {#%Event} for detailed descriptions of listeners.
##Using Events
Events can observe behaviors occurring on instances of Wb class objects. For example, the {#success|Wb.View.success} event of a view can perform related operations after the view is loaded successfully. You can directly set the success event of the view during IDE design, or add events via the {#on|Wb.Base.on} method during runtime:
view.on('success', resp => { doSomething(); });
button.on('click', e => console.log('clicked'));
When you need to remove an event from an instance or component, you can remove it via the {#un|Wb.Base.un} method:
view.un('success', fn);
##Using Listeners
Listeners can observe behaviors occurring on DOM elements. For example, the mouseenter listener of a button can monitor the behavior when the mouse enters the button. Use the {#mon|Wb.Component.mon} method to add listeners, such as adding the following code in the {#ready|Wb.Configurable.ready} event of a button:
button.mon('mouseenter', e => { doSomething(); });
component.mon(el, 'click', e => {doSomething();}, scope, {once: true, capture: true});
When you need to explicitly remove a listener from a component, you can remove it via the {#mun|Wb.Component.mun} method:
button.mun('mouseenter', fn);
#Development Basics.JavaScript Development
System development is divided into frontend and backend development. Frontend development is usually done using the {#%JavaScript|docs:Web/JavaScript} language, and the backend can be developed using languages including {#%Java|https://www.w3schools.com/java}, {#%JavaScript|docs:Web/JavaScript}, Python, etc. Since
the frontend uses JavaScript for development, it is recommended to use JavaScript for backend development as well. Developing the backend with JavaScript has the following advantages:
-Share JavaScript code between frontend and backend, maximizing code reusability.
-Reduce requirements for developers; using the same development language for frontend and backend lowers learning and usage difficulty.
-Access Java class libraries using JavaScript syntax, and flexibly and efficiently use any Java class library with the latest JavaScript features. See the {#%common-usage|ide?openModule=example/coding/server-js/common-usage.xwl} example for details.
##JavaScript Classes
JavaScript classes can be created using the class keyword. For example, the following code:
class myClassName {
}
The above code defines a normal class that can be accessed by class name or assigned to a variable. Non-global classes can have their definition code placed in code snippets or mjs module files.
In addition, you can assign a class to a global variable to create a global class, such as the following code:
Cls['My.pack.ClassName'] = class myClassName extends Wb.Base {
}
In the above code, "Cls" is a Proxy object, and Cls['My.pack.ClassName'] defines a global class based on globalThis. After the code creating this class is loaded, you can access it via {{My.pack.ClassName}} anywhere in the code. Global classes can have their definition code
placed in js files.
##Quick Definition of Getters and Setters
The {#Wb.define} method can be used to quickly define getters and setters.
For example, extend the properties and methods of "app" with the following code:
Wb.define(app, {
/** @property {String} - Setter description. */
set$name(value) {
},
/** @property {String} - Getter description. */
get$name() {
},
/**
* Function description.
*/
myMethod() {
}
});
##Extended Prototype Properties and Methods
The system provides extended prototype properties and methods for types such as {#String}, {#Number}, {#Date}, {#Object}, {#Array}, {#Map}, {#Set} to improve development capability and efficiency.
Such as the following code:
date = '2021-03-12 14:19:39.614'.dateValue;
val = (12345.625).format('$#,##0.00');
val = (1234.5).cny;
date = new Date().addDay(3);
##Judging Value Types
Judging value types is commonly used in development, such as implementing different functions by judging different types of input parameters.
The following methods can judge value types:
-{#Wb.isString}: Judges if it is a string.
-{#Wb.isNumber}: Judges if it is a numeric value.
-{#Wb.isNumeric}: Judges if it can be converted to a numeric value.
-{#Wb.isDate}: Judges if it can be a date.
-{#Wb.isBoolean}: Judges if it can be a boolean value.
-{#Wb.isArray}: Judges if it is an array.
-{#Wb.isObject}: Judges if it is an object.
-{#Wb.isFunction}: Judges if it is a function.
-{#Wb.isPrimitive}: Judges if it is a primitive numeric type.
-{#Wb.isIterable}: Judges if it is iterable.
-{#Wb.isEmpty}: Judges if it is a null value, null, undefined, empty object or empty array.
For more examples, refer to: {#%coding|ide?openModule=example/coding}
#Server-Side Development.Interoperability between JavaScript, Java and Others
Server-side JavaScript can directly access Java classes, as well as other languages such as Python and R.
##Accessing Java from JavaScript
The system provides a set of features to enable interoperability from JavaScript to Java. Java classes can be accessed via the {{Java.type(typeName)}} function, for example:
let HashMap = Java.type('java.util.HashMap');
let map = new HashMap();
map.put('foo', 'bar');
var file = new (Java.type('java.io.File'))("test.md");
var fileName = file.getName();
Classes starting with package names "com", "edu", "java", "javax", "javafx", "org", "jakarta" can be accessed directly, for example:
let map = new java.util.HashMap();
map.put('foo', 'bar');
Classes starting with other package names can be accessed using the "Packages" keyword prefix, for example:
let cls = Packages.my.pack.SomeClass;
cls.someStaticMethod();
It is recommended to use the Java.type method to access classes. This method not only allows accessing classes starting with any package name, but also provides higher-performance access and retrieval of classes.
##Method Parameter Conversion
JavaScript is defined to operate on double-precision numeric types. For performance reasons, the system may internally use other Java data types (e.g., int type).
Value conversion may be required when calling Java methods. This occurs when a Java method expects a long parameter and the system provides an int. A TypeError is thrown if this conversion results in a lossy conversion:
$java://Java
void longArg (long arg1);
void doubleArg (double arg2);
void intArg (int arg3);
//JavaScript
javaObject.longArg(1); //widening, OK
javaObject.doubleArg(1); //widening, OK
javaObject.intArg(1); //match, OK
javaObject.longArg(1.1); //lossy conversion, TypeError!
javaObject.doubleArg(1.1); //match, OK
javaObject.intArg(1.1); //lossy conversion, TypeError!
Note that parameter values must be compatible with parameter types. This behavior can be overridden using custom target type mappings.
##Method Selection
Java allows method overloading by parameter type. When calling Java from JavaScript, the method with the narrowest available type to which the actual arguments can be converted without loss is selected:
$java://Java
void foo(int arg);
void foo(short arg);
void foo(double arg);
void foo(long arg);
//JavaScript
javaObject.foo(1); // will call foo(short);
javaObject.foo(Math.pow(2,16)); // will call foo(int);
javaObject.foo(1.1); // will call foo(double);
javaObject.foo(Math.pow(2,32)); // will call foo(long);
To override this behavior, explicit method overloads can be selected using the {{javaObject['methodName(paramTypes)']}} syntax. Parameter types must be comma-separated without spaces, and object types must be fully qualified (e.g., {{get(java.lang.String,java.lang.String[])}}).
javaObject['foo(int)'](1);
javaObject['foo(long)'](1);
javaObject['foo(double)'](1);
Explicit method selection is also useful when method overloading is ambiguous and cannot be resolved automatically, and when you wish to override the default selection:
$java://Java
void sort(List array, Comparator callback);
void sort(List array, IntBinaryOperator callback);
void consumeArray(List array);
void consumeArray(Object[] array);
//JavaScript
var array = [3, 13, 3, 7];
var compare = (x, y) => (x < y) ? -1 : ((x == y) ? 0 : 1);
// throws TypeError: Multiple applicable overloads found
javaObject.sort(array, compare);
// explicitly select sort(List, Comparator)
javaObject['sort(java.util.List,java.util.Comparator)'](array, compare);
// will call consumeArray(List)
javaObject.consumeArray(array);
// explicitly select consumeArray(Object[])
javaObject['consumeArray(java.lang.Object[])'](array);
##Array Access
The system supports creating Java arrays from JavaScript code.
var JArray = Java.type('java.lang.reflect.Array');
var JString = Java.type('java.lang.String');
var sarr = JArray.newInstance(JString, 5);
var IntArray = Java.type("int[]");
var iarr = new IntArray(5);
The created arrays are of Java type but can be used in JavaScript code:
iarr[0] = iarr[iarr.length] * 2;
##Map Access
In the system, you can create and access Java Maps, such as {{java.util.HashMap}}:
var HashMap = Java.type('java.util.HashMap');
var map = new HashMap();
map.put(1, "a");
map.get(1);
The system supports iteration over such maps:
for (var key in map) {
print(key);
print(map.get(key));
}
##List Access
In the system, you can create and access Java Lists, such as {{java.util.ArrayList}}:
var ArrayList = Java.type('java.util.ArrayList');
var list = new ArrayList();
list.add(42);
list.add("23");
list.add({});
for (var idx in list) {
print(idx);
print(list.get(idx));
}
##String Access
The system can create Java strings with Java interoperability. The length of a string can be queried using the length property (note that length is a value property and cannot be called as a function):
var javaString = new (Java.type('java.lang.String'))("Java");
javaString.length === 4;
Note that the system internally uses Java strings to represent JavaScript strings, so the code above and the JavaScript string literal "Java" are effectively indistinguishable.
##Iterating Over Properties
Properties (fields and methods) of Java classes and Java objects can be iterated using {{for in}}:
var m = Java.type('java.lang.Math')
for (var i in m) { print(i); }
##Multithreading
JS supports multithreading when used with Java. The system creates an independent execution context for each thread by default, so you don't need to worry about concurrent access to JS variables within JS. To create a thread in JS, you can
use the {#Wb.poolStart} and {#Wb.startThread} methods. It is recommended to use the {#Wb.poolStart} method, as it uses a thread pool for management, allowing queued execution and controlling the number of concurrent threads.
Wb.poolStart(params => {
Wb.log(params.date);
}, { foo: 'bar', abc: 123, date: new Date() });
If multiple execution contexts need to share global variables, this can be achieved by accessing `Base.map`.
Base.map.put('app.my.var', 'value'); // Add a global shared variable value
sharedValue = Base.map.get('app.my.var'); // Read the global variable
Note that shared variable values can only be strings, numbers, booleans, null, or Java objects; otherwise, concurrent access exceptions will occur.
##Accessing Other Languages
Accessing other languages such as Python and R is allowed in JS. Note that before running other languages, their corresponding language packs need to be deployed. For example, using Python requires deploying the Python language pack.
let pyArray = Polyglot.eval('python', '[1,2,42,4]'); // Call Python code directly
let result = Polyglot.evalFile('python', 'wb/modules/example/coding/server-js/demo.py');
Wb.send(result);
For related examples, see: {#%common-usage|ide?openModule=example/coding/server-js/common-usage.xwl}
#Server-Side Development.Interaction with Clients and Request Initiation
After a client submits a request to the server, the server can send data to the client synchronously after completing the operation. If the client establishes a WebSocket connection, the server can actively send messages to the client. In addition, the system provides API methods for initiating Web requests on the server side.
##Sending Data to Clients Synchronously Using Conventional Methods
In ServerScript, the request and response objects can be accessed directly, representing the web request and response objects. Data can be sent to the client through the response object.
Send text using the following code:
response.getWriter().print('msg');
response.flushBuffer();
Send binary data using the following code:
os = response.getOutputStream());
try {
IOUtils.copy(fis, os);
} finally {
inputStream.close();
}
##Sending Data to Clients Synchronously Using System-Provided APIs
The system provides the {#Wb.send} method to send arbitrary data such as text, numbers, objects, arrays, byte arrays, and input streams. The buffer is flushed immediately after this method is executed.
For example, the following code:
Wb.send('msg'); // Send a string and flush the buffer immediately
Wb.send({foo: 'bar', abc:123}); // Send an object and flush the buffer immediately
Wb.send([123, 'abc', new Date()]); // Send an array and flush the buffer immediately
Wb.send(inputStream); // Send an input stream and flush the buffer immediately
##Sending Data to Clients Using WebSocket
After the client establishes a WebSocket connection, the server can actively push data to the client using the {#Wb.send} method.
For example, the following code:
Wb.send('text', 'mySocket'); // Send content to the current user's WebSocket with the socket name mySocket
Wb.send('text', 'mySocket', 'admin'); // Send content to all admin users' WebSockets with the socket name mySocket
Wb.send({ type: 'log', style: 3, data: 'msg' }, '$ide', true); // Send content to the IDE's WebSocket
##Exporting Data to Clients
In addition to sending data to the client synchronously using the {#Wb.send} method, you can also use the {#Wb.exportData} method. This method not only sends data but also sets the content type of the sent data, making it suitable for scenarios such as file export.
For example, the following code:
Wb.exportData(photoInputStream, 'photo.png'); // Export the file input stream and specify the exported file name as "photo.png"
##Sending Web Requests
The system provides the {#Wb.submit} method to conveniently initiate web requests.
For example, to initiate a request to a web service on another server and obtain the result:
let result = Wb.submit({ url: 'https://www.geejing.com/app', params: { foo: 'bar' }, all: true });
The above code initiates a request to {{https://www.geejing.com/app}}, submits parameters, and finally obtains the result.
#Server-Side Development.Database Access
Database access is an important part of developing application systems. In addition to using traditional methods to access databases, WebBuilder also provides simple, efficient, and feature-rich APIs for database access.
##Accessing Databases via JDBC
This is a relatively primitive database access method. First, obtain a database connection through the {{com.wb.tool.DataSource.getConnection}} method, then create a {{Statement}} object to execute SQL, and finally obtain the result.
The following code queries a user with a specified ID in the user table and displays the user name in the IDE console.
let conn, statement, resultSet;
try {
conn = DataSource.getConnection('wb-sqlserver');
statement = conn.prepareStatement('select user_name from wb_user where sid=?');
statement.setString(1, 'admin');
resultSet = statement.executeQuery();
while (resultSet.next()) {
Wb.log(resultSet.getString(1));
}
} finally {
//Note that the closing order is resultSet, statement, conn
//SysUtil.close performs the close without throwing any exception
SysUtil.close(resultSet);
SysUtil.close(statement);
SysUtil.close(conn);
}
##Accessing Databases via WebBuilder-Encapsulated Classes and APIs
The system provides a set of convenient class libraries and APIs for database access based on JDBC. A primary API method is {#Wb.sql}, which is used to execute arbitrary SQL statements and obtain all returned results.
For example, the following code will query user table data:
let result = Wb.sql('select * from wb_user');
After executing the above code, the return result of "result" is a JSON object, where the "items" property is a list of all returned record data, "columns" is a list of all returned field metadata, "fields" is a list of fields requiring type conversion (such as date fields), and "total" is the accessible total number of records (used for frontend pagination).
Complex results may be returned when accessing complex SQL or stored procedures. For example, execute the following SQL statements at once using SQL Server:
let result = Wb.sql(`
select * from wb_user;
delete from wb_log where 1=0;
select * from wb_staff;
`
});
After executing the above code, the result of "result" is an array. The first item represents the result returned by "select * from wb_user", the second item represents the number of affected records returned by "delete from wb_log where 1=0", and so on. Note that different databases return different results for SQL execution. Some databases do not support the execution of multiple SQL statements, in which case stored procedures can be used to execute multiple SQL statements.
When executing a stored procedure that returns complex results, the result of "result" will be an object type, where the property name is the output parameter name and the value is the output parameter value. The property named "$return" represents an array of results obtained by executing SQL sequentially. For details on stored procedure access, see subsequent documents. For the data type returned by "result", refer to {#Wb.Query.result}
##Commonly Used Database Access API Methods
The following API methods are commonly used for database access, and all of these methods are based on {#Wb.sql} at their core.
-{#Wb.getRow}
-{#Wb.getRows}
-{#Wb.getRowx}
-{#Wb.getAllRows}
-{#Wb.sendRow}
-{#Wb.sendRows}
-{#Wb.sendRowx}
-{#Wb.getRecord}
-{#Wb.getRecords}
-{#Wb.getRecordx}
-{#Wb.getAllRecords}
-{#Wb.sendRecord}
-{#Wb.sendRecords}
-{#Wb.sendRecordx}
-{#Wb.getDict}
-{#Wb.sendDict}
-{#Wb.getDictRecords}
-{#Wb.sendDictRecords}
-{#Wb.sqlRS}
-{#Wb.sqlAll}
-{#Wb.sendSql}
##Specifying the Database to Access
When accessing databases using the above APIs, if the db parameter is not set in the API method to specify the database, the system will use the default database shared connection. When you need to access a specified database, you can do so by setting the db parameter. If db is a string, the system will use the shared database connection with that name; if db is a {#Wb.Connection} object, that connection will be used.
For example, the following code:
Wb.sql({sql: 'select * from wb_user', db: 'mydb'});
The above code specifies the use of the shared database connection named "mydb" through the db property. The name "mydb" is configured in {#%Database Configuration|dbc}.
If you need to use an independent database connection, you can set the db property to a database connection {#Wb.Connection} object.
For example, the following code:
let db1 = new Wb.Connection('db1');
Wb.sql({sql: 'select * from wb_user', db: db1});
db1.close(); // This method does not need to be placed in a finally block; the system will automatically close the db1 connection when an exception occurs
If you need to obtain a shared database connection object, you can use the following code:
let defaultConn = Wb.getConn(); // Obtain the default shared connection
let db1Conn = Wb.getConn('db1'); // Obtain the shared connection with the specified name
##Release of Database Connections and Related Resources
When accessing databases using the above APIs, you do not need to worry about releasing database connections and related resources. The system will release database-related resources immediately after the method is executed, and the used database connection will be automatically closed after the execution context is completed.
If you need to close the database connection immediately, you can use the following code:
Wb.getConn().close(); // Close the default shared database connection
Wb.getConn('mydb').close(); // Close the shared database connection named "mydb"
let conn = new Wb.Connection('mydb'); // Create an independent connection
Wb.sql({sql: 'select * from wb_user', db: conn}); // Execute SQL
conn.close(); // Explicitly close the connection; if not closed, it will be automatically closed after the execution context is completed.
##Using SQL Parameters
Specific syntax can be used in SQL statements to represent input and output parameters. Input parameters are represented by {?type|scale|name?}, and output parameters are represented by {*type|scale|name*}, where type is the parameter type, scale is the parameter precision, and name is the parameter name. Both type and scale can be omitted. If type is omitted, the parameter value will be processed according to the object type; it is recommended to add type. When an input parameter has scale (scale can be empty, but the placeholder "|" must be retained), it will be forced to be processed as an object type parameter.
In SQL performance-sensitive scenarios, it is recommended to explicitly add type to improve SQL execution performance, such as the following SQL:
$sql:select * from wb_user where user_name={?name?} -- No parameter type added, processed as object type
select * from wb_user where user_name={?varchar|name?} -- Parameter type varchar added, explicitly processed as string type parameter; specifying the type usually provides higher SQL execution performance
Valid type values in SQL parameters:
-BIT
-TINYINT
-SMALLINT
-INTEGER
-INT: Same as INTEGER
-BIGINT
-FLOAT
-REAL
-DOUBLE
-NUMERIC
-DECIMAL
-CHAR
-VARCHAR
-LONGVARCHAR
-DATE
-TIME
-TIMESTAMP
-BINARY
-VARBINARY
-LONGVARBINARY
-NULL
-OTHER
-JAVA_OBJECT
-OBJECT
-DISTINCT
-STRUCT
-ARRAY
-BLOB
-CLOB
-REF
-DATALINK
-BOOLEAN
-ROWID
-NCHAR
-NVARCHAR
-LONGNVARCHAR
-NCLOB
-SQLXML
-REF_CURSOR
-CURSOR: Same as REF_CURSOR
-TWT: Same as TIME_WITH_TIMEZONE
-TSWT: Same as TIMESTAMP_WITH_TIMEZONE
For specific type meanings, refer to the definitions in {{java.sql.Types}}.
The values of SQL parameters are obtained from the context by default, i.e., from session attributes, request attributes, and request parameters. This can be disabled by setting the contextParams property of APIs such as {#Wb.sql} to false. In addition, you can
set the params property to specify parameters. If the parameters specified by this property have the same names as those in the context, the parameters specified by this property have higher priority.
Such as the following code:
// Disable obtaining parameters from the context and specify params parameters
let rows = Wb.getAllRows({sql: 'select * from wb_user where user_name={?admin?}', contextParams: false, params: {name: 'admin'}});
##Accessing Stored Procedures
Accessing stored procedures is essentially no different from executing ordinary SQL. The following demonstrates how to access a stored procedure on an Oracle database and obtain output parameters of the cursor type (result set).
First, create a stored procedure on Oracle:
$sql:CREATE OR REPLACE NONEDITIONABLE PROCEDURE USER_PROC
(
P_USER OUT TYPES.X_CURSOR,
P_NAME IN VARCHAR
)
AS
BEGIN
OPEN P_USER FOR SELECT * FROM WB_USER WHERE USER_NAME = P_NAME;
END USER_PROC;
Obtain the result set of the output parameter P_USER from the stored procedure through code, and return the data to the client after retrieval:
let object = Wb.sql(`{call user_proc({*cursor|p_user*}, 'admin')}`);
Wb.send(object.p_user);
In the above example, the entire SQL for calling the stored procedure is enclosed in "{}", the "call" keyword is used to invoke the stored procedure, the first output parameter is specified as the "cursor" type, and the second input parameter "admin" is a constant. After execution, an object composed of all returned results of the stored procedure will be returned, and the result set data of the p_user output parameter in the object will be sent to the client.
##Limiting the Number of Retrieved Records
When accessing databases using the above APIs, except for the {#Wb.getAllRows} and {#Wb.getAllRecords} methods, the number of records returned by default is limited. The limited number of records is set by the "rs" parameter in the API, and the default value of rs is specified by "sys.db.maxRows" in {#%System Configuration|config}.
Retrieving too many records at once may cause memory overflow. If you need to traverse all returned records, you can do so through the method specified by the "fn" property in the API.
For example, the following code:
let total = 0;
Wb.sql({
sql: 'select salary from wb_staff', fn(row) {
total += row.salary;
}
});
Wb.send(total);
The above {#Wb.sql} method does not return any value by default due to the presence of the fn parameter, so even if the number of returned records is large, it will not cause memory overflow.
##Obtaining the Raw ResultSet
When you need to obtain a ResultSet object instead of a record list, you can use the {#Wb.sqlRS} method.
For example, the following code:
let rs;
rs = Wb.sqlRS('select * from wb_staff').resultSet; // Execute SQL and obtain the ResultSet object
while (rs.next()) {
Wb.log(rs.getString(1));
}
rs.close(); // Explicitly close the result set and release resources immediately; if not closed, it will be automatically closed after the execution context is completed. Immediate release is recommended for use within loops
##Database-Side Pagination
Database-side pagination is usually implemented through SQL statements, such as the following SQL statement based on the Derby database:
$sql:select * from wb_staff offset {?bigint|_from?} rows fetch first {?bigint|_size?} rows only
Where "_from" and "_size" are parameters passed from the context for pagination, which are automatically passed by default when table pagination is used.
When using APIs to perform database-side pagination, the "paging" property must be set to false, as pagination is already completed on the database side, to avoid pagination errors caused by secondary pagination on the application server side. Such as the following code:
Wb.sendRowx({
sql: 'select * from wb_staff offset {?bigint|_from?} rows fetch first {?bigint|_size?} rows only',
paging: false, // Stop secondary pagination on the application server side. This parameter defaults to true when pagination parameters exist
total: 'select count(*) from wb_staff' // Return the total number of records; the value can be a numeric constant, used for frontend pagination
});
##Preventing SQL Injection Vulnerabilities
SQL injection vulnerabilities are usually caused by SQL statement concatenation. Therefore, avoid generating SQL statements by concatenating strings as much as possible. If you need to pass parameters, use SQL parameters to prevent SQL injection.
sql = "select * from wb_user where user_name='" + userName + "'"; // Not recommended: Generating SQL by concatenating strings has SQL injection risks
sql = "select * from wb_user where user_name={?userName?}"; // Recommended: Using parameters to avoid SQL injection risks
For related examples, see: {#%database-access|ide?openModule=example/coding/server-js/database-access.xwl}
#Server-Side Development.File Access
In addition to using traditional Java file classes (java.io and java.nio-related classes) for server-side file system access, you can also use the {#Wb.File} class provided by WebBuilder, which is encapsulated based on Java file classes, to access the server-side file system.
##Static Members
The following static members of the {#Wb.File} class can quickly obtain specified file paths:
-{#Wb.File.appFolder}: Application directory
-{#Wb.File.wbFolder}: wb directory
-{#Wb.File.moduleFolder}: Module directory, i.e., wb/modules directory
##File Traversal
Use the {#Wb.File.each} method to traverse the direct subordinate files/directories of a directory, and use {#Wb.File.cascade} to deeply traverse all subordinate files/directories.
For example, the following code:
new Wb.File('/my/folder').each(file => Wb.log(file.name)); // Traverse the direct subordinate files/directories of the specified directory
new Wb.File(true, 'wb/docs').cascade(file => Wb.log(file.name)); // Deeply traverse all subordinate file/directory names of the "wb/docs" directory
##File Access
The following properties and methods can be used to access file contents:
-{#Wb.File.readString}
-{#Wb.File.text}
-{#Wb.File.object}
-{#Wb.File.bytes}
-{#Wb.File.byteStream}
-{#Wb.File.stream}
-{#Wb.File.base64}
##Obtaining a java.io.File Object from Wb.File
You can access the {#Wb.File.file} property to obtain a java.io.File object, for example, the following code:
let javaFile = new Wb.File(true, 'wb/docs').file; // Obtain the java.io.File object pointing to the system's docs directory
For related examples, see: {#%file-access|ide?openModule=example/coding/server-js/file-access.xwl}
#Server-Side Development.Modular Development
When developing complex applications on the server side using JavaScript (ServerScript), modular development can be used. Modular development includes the following methods:
-Using js files
-Using mjs files
-Using xwl files
##Using js Files
This method is suitable for placing commonly used code in js files, which can be loaded globally statically through the "sys.ss.files" property of {#%Configuration|config} or dynamically loaded using the {#Wb.load|Wb-Server.load} method.
The following demonstrates how to write and use js files.
First, create a js file test.js:
Cls['My.Util'] = class myUtil {
/**
* Perform add.
* @param {Number} value1 Value 1
* @param {Number} value2 Value 2
* @return {Number} The result
*/
static add(value1, value2) {
return value1 + value2;
}
}
When you need to call this js:
Wb.load('test.js'); // If configured for global static loading, you can use it directly without Wb.load
let result;
result = My.Util.add(1, 3);
##Using mjs Files
mjs files are standard JavaScript module files, which can place a set of code for specific functions. This method is suitable for placing infrequently used code in mjs files and loading them using the {#Wb.load|Wb-Server.load} method when needed.
The following demonstrates how to write and use mjs files.
First, create an mjs file test.mjs:
class Util {
/**
* Perform add.
* @param {Number} value1 Value 1
* @param {Number} value2 Value 2
* @return {Number} The result
*/
static add(value1, value2) {
return value1 + value2;
}
}
export default Util;
When you need to call this mjs:
const Util = Wb.load('test.mjs');
let result;
result = Util.add(1, 3);
##Using xwl Files
This method is mainly used to call ServerScript code in xwl. There are several methods to call xwl:
-{#Wb.run|Wb-Server.run}: Runs the ServerScript code of the module.
-{#Wb.invoke|Wb-Server.invoke}: Runs the ServerScript code of the module and outputs client-side scripts.
-{#Wb.execute|Wb-Server.execute}: Runs the ServerScript code of the module and returns client-side scripts.
The following demonstrates how to write and use xwl files.
First, create an xwl file test.xwl and add scripts in serverScript:
app.myVar = 'abc'; // Define the myVar property value as "abc" on the global variable app
Wb.log('test.xwl'); // Output logs to the IDE console
Wb.send('result'); // Send "result" to the client
When you need to call this xwl:
let p = app.myVar; // Obtain the myVar property value "abc" in the global variable app
Wb.run('test.xwl'); // Only call the ServerScript of test.xwl, will not output the script "result" to the client
p = Wb.execute('test.xwl'); // Call the ServerScript of test.xwl and obtain the returned client script "result" for variable p
Wb.invoke('test.xwl'); // Call the ServerScript of test.xwl and directly output the client script "result" to the client
For related examples, see: {#%server-load-module|ide?openModule=example/load/server-load-module.xwl}
#Server-Side Development.Permission Handling
The system's default permissions are role-based. Each user can be assigned multiple roles, and each role can be configured with allowed modules in the {#%Permission Management|perm} or {#%Role Management|role} modules. The system only allows access to
modules with permissions or modules that do not require {#Login|Wb.Module.loginRequired}.
If you need to customize login and permission handling, such as implementing personalized single sign-on, you can do so by configuring the "sys/session/login.xwl" module and the client-side "Wb.login" method. The former is the module that runs when not logged in, and the latter is the method executed after the client page session expires.
##Permission Judgment
On the server side, you can determine whether a user or role has permission to access a specified module through the permission-related API method {#Wb.permit} or the permit method of Java's Perm class.
result = Wb.permit('admin/dbe.xwl'); // Determine whether the current user can access admin/dbe.xwl
result = Perm.permit('admin/dbe.xwl', ['roleId1', 'roleId2']); // Determine whether the role with the specified ID can access admin/dbe.xwl
##Hiding Unauthorized Page Components
To hide unauthorized components in a page, such as hiding the "Add" button in the user management module when there is no permission to access the "add.xwl" module, you can achieve this through the following method.
First, set variables in the server-side code {#serverScript|Wb.Module.serverScript} property of the module:
let addVisible = Wb.permit('admin/user/add.xwl'); // The addVisible variable indicates whether the current user can access add.xwl
Wb.set('addVisible', addVisible); // Add the addVisible variable to the "addVisible" parameter
Then set "_$addVisible$_" in the visible property of the client-side "addBtn" to associate the button's visibility with permissions.
In addition, you can dynamically reference this variable in client-side JavaScript scripts to set values:
let addVisible = _$addVisible$_;
app.addBtn.visible = addVisible;
Each component has a {#bindModule|Wb.Component.bindModule} property. You can set this property to a module address to quickly set component visibility: the component is visible if the module is accessible, otherwise it is hidden.
For related examples, see: {#%module-bind-ui|ide?openModule=example/basic/module-bind-ui.xwl}
#Client-Side Development.Interaction with the Server
Client-side code typically runs in a browser, while server-side code runs on a backend application server. During application development, it is often necessary to transfer data from the client to the server or retrieve data from the server to the client.
##Retrieving Server Data Statically
Retrieving server data statically means obtaining server data synchronously during the generation of the client-side module page. The advantage of this method is reducing the number of interactions between the frontend and backend.
To retrieve data this way, you first need to set parameters in the server-side {#serverScript|Wb.Module.serverScript} code, then reference the parameter values using the "_$name$_" syntax in client-side scripts, properties, or events.
For example, the following method retrieves the currently logged-in username from the server in a client-side script:
First, write code in {#serverScript|Wb.Module.serverScript}:
Wb.set('myName', Wb.encode(Wb.username)); // Encode the current username into a quoted string and set it to the myName parameter
Then, write code in the client-side {#initialize|Wb.Module.initialize}:
app.currentUserName = _$myName$_; // Reference the server-side myName parameter via the "_$name$_" syntax
This allows the {{app.currentUserName}} variable to be referenced in all client-side scripts, properties, or events of the module to get the currently logged-in username. Note that this variable is not updated dynamically; the entire module must be refreshed to update the variable value.
##Retrieving Server Data Dynamically
Retrieving server data dynamically means obtaining server data through code during client-side runtime after the client-side module page has been generated. The advantage of this method is convenience and flexibility.
This method typically uses the {#Wb.ajax} method to retrieve data. When using {#Wb.ajax}, you can specify the {{params}}, {{comps}}, {{form}}, {{data}}, or {{object}} properties to pass client-side parameters
to the server, then retrieve the content returned by the server in events such as {{success}}.
For example, the following method uses {#Wb.ajax} to retrieve content returned by the server:
First, write code in {#serverScript|Wb.Module.serverScript}:
Wb.send('any data');
Then, write code in client-side scripts, such as the click event of a button:
Wb.ajax({
url: 'm?xwl=path',
params: { param1: 'abc', param2: 123 },
success(resp) {
//If resp is a JSON string, it can be converted to a JSON object via the Wb.decode method or by setting the json parameter to true in the ajax method
Wb.tip(resp);
}
});
##Using WebSocket
The system provides the {#Wb.Socket} class for sending and receiving data. The difference between using WebSocket and {#Wb.ajax} is that the server can actively send data to the client after a WebSocket connection is established.
The method to create a WebSocket connection is as follows:
-Add a {#socket|Wb.Socket} control.
-Set the {#Wb.Socket.name} property to identify this WebSocket.
-If you need to send content to a specified server-side module via WebSocket, set the "xwl" property. This step can be omitted if only receiving server messages.
-Use the {#Wb.Socket.send} method to send arbitrary content when sending messages. This is only meaningful if the "xwl" property is set; otherwise, content sent to the server will be discarded.
-Listen for content sent by the server within the {#Wb.Socket.message} event when receiving messages. The server can use the {#Wb.send} method to send content, such as {{Wb.send('msg', 'socketName');}}
See the {#%web-socket|ide?openModule=example/comps/web-socket.xwl} example for details.
##Other Methods
Data can also be transferred and retrieved using methods such as {#Wb.submit|Wb-Client.submit} or {#Wb.download}.
#Client-Side Development.Creating Interfaces
An interface refers to the visual part where users interact with software, including the layout, design, elements of a web page, and the interaction modes between them. In WebBuilder, interfaces can be created in multiple ways.
##Creating Interfaces by Setting HTML or Adding Elements
Each component has an {#html|Wb.Component.html} property, which can be set to configure the page via HTML. For example, add a {#Wb.Component} and configure the html property as:
$html:
Add a click event to the element:
component1.query('ul').onclick = e => Wb.tip('clicked');
component1.mon(component.query('ul'), 'click', e => Wb.tip('clicked'));
A list interface is defined for the component through the above method. You can also set html or create elements via code:
// Not recommended, easy to cause XSS injection vulnerabilities
component1.html = ``;
// Recommended method
let div, ul;
div = component1.el.addEl();
ul = div.addTag('ul');
ul.addTag('li').textContent = 'item1';
ul.addTag('li').textContent = 'item2';
ul.addTag('li').textContent = 'item3';
// Dynamically create elements via code after fetching remote data through Ajax
listEl = panel1.el.query('[cid=list]');
Wb.ajax({
url: 'demo-source?xaction=staffFirstRow',
json: true,
success(resp) {
listEl.addEl().textContent = 'Code:';
listEl.addEl().textContent = resp.code;
listEl.addEl().textContent = 'Name:';
listEl.addEl().textContent = resp.full_name;
}
});
##Creating Interfaces via Templates
A {#Template|Wb.Template} refers to defining an HTML framework and referencing dynamically changing content through the "{name}" syntax. Each component has a {#tpl|Wb.Component.tpl} property, which can be set to configure the page via a template. For example, add a {#Wb.Component} and configure the tpl property as:
$html:
Code:
{code}
Name:
{full_name}
Then, populate data into the template by statically setting the {#tplData|Wb.Component.tplData} property or dynamically calling the {#update|Wb.Component.update} method. For example:
component1.update({code: '10001', full_name: 'Terri Duffy'});
##Creating Interfaces via Components
Components have specific functions, encapsulate multiple elements, and provide a series of properties, events, and methods. For example, the {#text|Wb.Text} control encapsulates multiple elements to achieve simple, flexible, and rich text editing functions.
The following code can dynamically create a form containing multiple components after fetching remote data via Ajax:
let panel = app.compPagePanel;
Wb.ajax({
url: 'demo-source?xaction=staffFirstRow',
json: true,
success(data) {
panel.add({ cname: 'displayField', cid: 'code', text: 'Code', value: data.code });
panel.add({ cname: 'text', cid: 'full_name', text: 'Name', value: data.full_name });
panel.add({ cname: 'component', html: 'WebBuilder components' });
}
});
For related examples, see: {#%create-page|ide?openModule=example/basic/create-page.xwl}
#Client-Side Development.Page Components.Component
A {#Component|Wb.Component} is the base class for visual components.
##Common Properties, Methods, and Events of Components
-The simple class name of a component is specified by the {#cname|Wb.Base.cname} property, which determines the type of component created via a configuration object.
-Visibility is set by the {#visible|Wb.Component.visible} property.
-Disabled state is set by the {#disabled|Wb.Component.disabled} property.
-The width of a component is set by the {#width|Wb.Component.width} property, and the height by the {#height|Wb.Component.height} property.
-The style of a component is set by the {#cls|Wb.Component.cls} property.
-Accessing the {#el|Wb.Component.el} property retrieves the DOM element associated with the component.
-When the container's layout is a flexible layout such as "row" or "column", setting the {#alignSelf|Wb.Component.alignSelf} and {#justifySelf|Wb.Component.justifySelf} properties configures the component's alignment.
-When setting properties or events in the IDE, custom properties can be set in the {#tagProperties|Wb.Component.tagProperties} property, and custom events in the {#tagEvents|Wb.Component.tagEvents} property.
-Use the {#add|Wb.Container.add} method within a container to add components, specifying a configuration object to create the component.
-Use the {#remove|Wb.Component.remove} or {#destroy|Wb.Component.destroy} method to remove or destroy a component.
-Code executed after the component is ready can be placed in the {#ready|Wb.Component.ready} event.
##Component Creation
Components can be created statically during the design phase or dynamically via code during runtime.
Taking adding a {#Textbox|Wb.Text} to a {#Panel|Wb.Panel} as an example, the following code can dynamically create and add a textbox to the panel:
panel.add({cname: 'text', text: 'label'}); // Add via configuration object
panel.add(new Wb.Text({text: 'label'})); // Add via instance
panel.insert(2, {cname: 'text', text: 'label'}); // Insert a new textbox at the 2nd child component position
panel.insertBefore({cname: 'text', text: 'label'}, text1); // Insert a new textbox before text1
panel.insertAfter(new Wb.Text({text: 'label'}), text1); // Insert a new textbox after text1
##Component Removal
Removing a component means detaching it from its parent component; the removed component can be added to a container again. Use the {#remove|Wb.Component.remove} method to remove a component. For example, the following code removes a button:
button.remove();
##Component Destruction
Destroying a component means detaching, dismantling, and releasing it from its parent component. All its child and subordinate components are destroyed simultaneously, and the destroyed component cannot be reused. Destroyed components that are no longer referenced will be garbage collected. Use the {#destroy|Wb.Component.destroy} method to destroy a component and release resources when it is no longer needed. Components added to a container are usually automatically destroyed when the container is destroyed. For example, the following code destroys a button:
button.destroy();
##Component Classification
Components are mainly classified into:
-Component Base Class: The base class for all components, see {#Wb.Component} for details.
-Containers: Used to hold one or more subordinate components, including {#Wb.Container}, {#Wb.Panel}, {#Wb.Fieldset}, {#Wb.Window}, {#Wb.Tab}, {#Wb.Card}, {#Wb.TabCt}, etc.
-Controls: {#Wb.Control} components for inputting and retrieving data, including {#Wb.Text}, {#Wb.Number}, {#Wb.Select}, {#Wb.Check}, {#Wb.Radio}, etc.
-Views: The base class for all view components is {#Wb.View}, including {#Wb.Grid}, {#Wb.Tree}, {#Wb.ListView}, etc.
-Others: Components not included in the above categories, including {#Wb.Chart}, {#Wb.Socket}, {#Wb.Xwl}, etc.
##Components and DOM Elements
Each WebBuilder page {#Component|Wb.Component} is associated with a top-level DOM element, which can be retrieved via the component's {#el|Wb.Component.el} property. When rendering third-party controls into a component, they can be rendered directly to the component's el; all associated DOM elements are deleted when the component is {#destroyed|Wb.Component.destroy}.
#Client-Side Development.Page Components.Container
Containers are used to hold one or more subordinate components and apply different layouts to them. Common container controls include {#container|Wb.container} and {#panel|Wb.Panel}; the former is a regular container, while the latter has a title bar, top toolbar {#tbar|Wb.Panel.tbar}, bottom toolbar {#bbar|Wb.Panel.bbar}, and other elements.
##Using the Viewport Component
The {#Viewport Component|Wb.Viewport} is a full-screen {#Panel|Wb.Panel}, typically used as the top-level component within a module.
##Using the Window Component
A {#Window|Wb.Window} is a pop-up, draggable, and resizable panel component, often used as a dialog box. Windows used as dialogs are usually displayed modally and contain "OK" and "Cancel" buttons at the bottom. A window can be quickly set as a dialog by setting its {#dialog|Wb.Window.dialog}, {#resetDialog|Wb.Window.resetDialog}, or {#clearDialog|Wb.Window.clearDialog} property to true. Clicking the OK button of a dialog triggers the {#ok|Wb.Window.ok} event. By default, clicking OK validates all component values in the window; this default validation can be disabled by setting {#noVerify|Wb.Component.noVerify} to false. Window components are usually added directly to the module's node to display independently of the entire module.
Windows are hidden by default and are usually displayed via code, such as after clicking a button, using the following code:
app.window1.show();
Windows are hidden by default when closed; to destroy a window on close, set the window's {#closeAction|Wb.Window.closeAction} to "destroy".
##Using the Tab Component
A {#Tab|Wb.Tab} is a container component for paged display. {#Card|Wb.Card} components are usually added directly under this container as each page, and components such as textboxes, buttons, and grids are then added within the {#Card|Wb.Card}. Each card represents a page of the tab component; adding multiple cards creates multiple pages for the tab. Set the card's {#title|Wb.Card.title} property as the page title and the {#icon|Wb.Card.icon} property as the page icon.
##Interface Layout
An interface typically consists of {#Container Components|Wb.Container} and non-container components. Any components, including container components, can be added under a container component, and containers can be nested within containers. Non-container components cannot have child components. The layout mode of a container is determined by its {#layout|Wb.Container.layout} property, which defines the layout by setting the {#cls|Element.cls} property on the container's {#bodyEl|Wb.Container.bodyEl} element, implemented entirely via CSS.
For layout examples, refer to: {#%layout|ide?openModule=example/basic/layout.xwl}.
##User Interface Composition
A typical user interface usually consists of a top toolbar, a client area container, and windows. The toolbar provides functional buttons and search boxes, the client area container displays the main page, and windows provide pop-up interactive interfaces.
Each module usually contains a [viewport] control, added directly to the module's root node to represent a full-screen container within the module. Select the tbar property under the [viewport] control, then click [Add Wb.Toolbar] in the property editor to create a built-in top toolbar under the viewport. {#item|Wb.Item} components can be added as tool buttons within the toolbar, and controls such as {#text|Wb.Text} or {#select|Wb.Select} can be added as search boxes.
Common UI layouts include:
-Full Screen: Subordinate components fill the entire viewport. For example, a grid added under a viewport fills the viewport. Set the viewport's layout property to "fit" to achieve this.
-Left Sidebar + Client Area: Fixed-width left sidebar, adaptive-width client area. For example, a tree, splitter, and grid added sequentially under a viewport. The tree acts as the left sidebar, and the grid as the client area. Set the viewport's layout to "row", the tree's width to "20em", and the grid's flex to 1.
-Bottom Bar + Client Area: Fixed-height bottom bar, adaptive-height client area. For example, a grid, splitter, and panel added sequentially under a viewport. The panel acts as the bottom bar, and the grid as the client area. Set the viewport's layout to "column", the grid's flex to 1, and the panel's height to "20em".
-Form: Multiple components displayed in a form style, usually in a vertical single or multi-column layout. For example, multiple editing controls added under a viewport to form a form. Set the viewport's layout to "form", "form1", "grid", "grid1", or "grid2"; "grid1" is recommended.
-Combination and Nesting of the Above Layouts: Multiple containers can be added to achieve combined and nested layouts.
##Visual Design
Select any container component and click the [UI Designer] button on the toolbar to perform visual design on the container. Drag components to adjust their order within the container; dragging a component to the first half of a target component inserts it before the target. Multiple components can be selected in the designer by holding Ctrl/Shift and clicking or drawing a box.
#Client-Side Development.Page Components.Edit Control
Edit {#Control|Wb.Control} components are used for inputting and retrieving data, including subclasses such as {#Textbox|Wb.Text}, {#Numberbox|Wb.Number}, and {#Selectbox|Wb.Select}.
##Control Label
Each control has a built-in label. The {#text|Wb.Control.text} property is a plain text label, and the {#html|Wb.Control.html} property is an HTML label. Label alignment is set by the {#labelAlign|Wb.Control.labelAlign} property; setting {#labelUp|Wb.Control.labelUp} displays the label above the control. Label width is set by the {#labelWidth|Wb.Control.labelWidth} property.
##Getting and Setting Values
Controls typically include a {#value|Wb.Control.value} property for storing and retrieving values. Additionally, values can be retrieved via the {#getValue|Wb.Control.getValue} method and set via the {#setValue|Wb.Control.setValue} method.
For example:
control.value = 'abc'; // Set value via the value property
let value = control.value; // Get value via the value property
value = control?.getValue(); // Get value via getValue, usually with the optional chaining operator "?."; otherwise, use the value property directly
control?.setValue('abc'); // Set value via setValue, usually with the optional chaining operator "?."; otherwise, use the value property directly
Use the {#clear|Wb.Control.clear} method to clear the control value and the {#reset|Wb.Control.reset} method to reset it.
##Textbox Controls
Textbox controls include {#Textbox|Wb.Text}, {#Numberbox|Wb.Number}, {#TextArea|Wb.TextArea}, etc.
Common properties, methods, and events:
-Read-only state is set by the {#readonly|Wb.Text.readonly} property.
-Input prompt information is set by the {#placeholder|Wb.Text.placeholder} property.
-Setting the {#password|Wb.Text.password} property converts the textbox to a password field.
-Setting the {#clearButton|Wb.Text.clearButton} property adds a clear button to the textbox.
-The predefined value type of the textbox is set by the {#valueType|Wb.Text.valueType} property, such as "email", "filename", "url", etc.
-Custom value validation is implemented by setting the {#validator|Wb.Text.validator} property.
-The {#change|Wb.Text.change} event is triggered when the value changes.
For textbox-related examples, see: {#%input|ide?openModule=example/comps/input.xwl}
##Dropdown Controls
Dropdown controls include {#Wb.Trigger}, {#Wb.Picker}, {#Wb.Select}, etc. They inherit from textbox controls and thus have all the above properties, methods, and events.
Common properties, methods, and events:
-Editability is set by the {#editable|Wb.Trigger.editable} property.
-The dropdown component is set by the {#picker|Wb.Picker.picker} property.
-The {#beforecollapse|Wb.Picker.beforecollapse} event is triggered before expanding the dropdown; returning {{false}} prevents expansion.
-The {#triggerclick|Wb.Trigger.triggerclick} event is triggered when the trigger button is clicked.
A {#Dropdown|Wb.Select} displays data via dropdown items, with the default dropdown component being {#Wb.SelectView}.
Dropdown data can come from {#data|Wb.Select.data} (local data) or {#url|Wb.Select.url} (remote data URL). Dropdown data can be an object list or an array list, such as:
[{field1: 'abc', field2: 123}, {field1: 'def', field2: 456}] // Object list
[['name1', 'value1'], ['name2', 'value2'], ['name3', 'value3']] // Array list
When using a data list, the first field is the name by default, and the second is the value.
Dropdown item content is specified by the {#textField|Wb.Select.textField} property by default, and item values by the {#valueField|Wb.Select.valueField} property. Item content can also be custom-rendered by setting {#itemTpl|Wb.Select.itemTpl} or {#itemTplFn|Wb.Select.itemTplFn}.
Setting the {#keyName|Wb.Select.keyName} property configures a preset dropdown list, with data specified in the {#%Key Value Editor|kve}.
To set or retrieve multiple values (e.g., name, code, and ID of a selected person), use the {#bindField|Wb.Select.bindField} or {#valueMap|Wb.Select.valueMap} property.
Set {#multiSelect|Wb.Select.multiSelect} to true for multi-selection. Set {#treePicker|Wb.Select.treePicker} to true for a tree-structured dropdown.
For dropdown-related examples, see: {#%select|ide?openModule=example/comps/select.xwl}
#Client-Side Development.Page Components.View, Grid, and Tree
{#View|Wb.View} components generate a list of specified content items based on data, including subclasses such as {#Grid|Wb.Grid}, {#Tree|Wb.Tree}, and {#ListView|Wb.ListView}.
##View Data
View data can be specified via {#data|Wb.View.data}, {#localData|Wb.View.localData}, or {#url|Wb.View.url}.
Set the {#data|Wb.View.data} property to read/write current page data.
Set the {#localData|Wb.View.localData} property to read/write local paginated data; call the {#load|Wb.View.load} method to update the view after dynamically setting localData.
Set the {#url} property to read remote data, updated via the {#load|Wb.View.load} or {#reload|Wb.View.reload} methods. The {#autoLoad|Wb.View.autoLoad} property configures automatic remote data loading when the view is ready.
Three ways to pass parameters to the backend during remote data loading:
-Set static parameters via the {#params|Wb.View.params} property.
-Pass parameters when loading data via the {#load|Wb.View.load} method, e.g., {{view.load({params: {param1: 'abc', param2: 123}});}}
-Set params input parameters in the {#beforeload|Wb.View.beforeload} event, e.g., {{params.param1 = 'abc';}}
##View Data Rendering
View data rendering is specified via the {#itemTpl|Wb.View.itemTpl} (custom HTML template) or {#itemTplFn|Wb.View.itemTplFn} (custom function) property. Once the rendering mode is defined, the view is rendered based on the data.
##View Item
A {#View Item|Wb.ViewItem} is each displayed entry in the view, such as a grid row or tree node. When rendering content, the view generates items based on associated data, with each item corresponding to a record in the data source. Manipulating view items allows
manipulating view content. View item data has specific-named fields with special meanings, such as "_icon" for the icon name; see the {#data|Wb.ViewItem.data} property for details.
Use the {#set|Wb.ViewItem.set} method to set view item data, which re-renders the item based on the configured template.
##Adding and Deleting Data
There are two ways to add data to a view: adding view item objects or view item data (the latter is a simplification of the former):
Add or insert view item objects:
view.add({itemCls: 'mycls', data: {field1: 'abc', field2: 123}}); // Add
view.insert(index, item); // Insert
view.insertBefore(item, refItem); // Insert before the specified item
view.insertAfter(item, refItem); // Insert after the specified item
Add or insert view item data:
view.addData({field1: 'abc', field2: 123}); // Add
view.insertData(index, item); // Insert
view.insertDataBefore(item, refItem); // Insert before the specified item
view.insertDataAfter(item, refItem); // Insert after the specified item
To delete data from a view, retrieve the target view item and call its {#destroy|Wb.Component.destroy} or {#remove|Wb.Component.remove} method.
view.selection.destroy(); // Delete the selected item
app.grid1.find(rec => rec.data.user_name=='demo2')?.destroy(); // Delete the first record with user_name "demo2" in the grid
##Grid
A {#Grid|Wb.Grid} is a 2D row-column view. No rendering template is needed; grids render data by defining the {#columns|Wb.Grid.columns} property. Each {#column|Wb.Column} in columns represents a grid column, configurable with title, width, alignment, display format, and custom render functions.
Each row in the grid is a {#Grid Item|Wb.GridItem} component, inheriting from view items. Manipulating grid items allows manipulating grid data.
##Tree
A {#Tree|Wb.Tree} is a hierarchically multi-level grid, inheriting from grids with similar operations.
Each node in the tree is a {#Tree Item|Wb.TreeItem} component, a container component. Adding/deleting nodes under a node is the same as view operations:
node = tree.addData({text: 'folder'}); // Add a folder node under the tree
node.addData({text: 'abc', _icon: 'module', _leaf: true}); // Add a leaf node under the parent node
node.destroy(); // Delete the node
#Client-Side Development.Page Components.Toolbar and Menu
{#Toolbar|Wb.Toolbar} and {#Menu|Wb.Menu} are common interactive components. {#Item|Wb.Item} components are usually added under them as toolbar buttons or menu items.
Toolbars and menus are container components, so besides {#Item|Wb.Item}, components such as {#Textbox|Wb.Text} and {#Selectbox|Wb.Select} can also be added.
##Using Toolbars
Toolbars can be used as regular containers with a default "row" layout. Components added to a toolbar without the {#cname|Wb.Base.cname} property default to {#tool|Wb.Tool}. More commonly, toolbars are embedded as child components of panels in {#tbar|Wb.Panel.tbar}.
##Using Menus
Menus can be associated with a button's {#menu|Wb.Button} property as dropdown menus, or with any component's {#contextMenu|Wb.Component} property as pop-up context menus. Additionally, menus
can be displayed anywhere using the {#showAt|Wb.Component.showAt} or {#showBy|Wb.Component.showBy} method.
##Using Item Components
{#Item|Wb.Item} components are usually added under toolbars or menus, defaulting to {#Wb.Tool} when added to toolbars. {#Item|Wb.Item} inherits from buttons and thus has all button features.
#Client-Side Development.Modular Development
When developing complex client-side applications via JavaScript, modular development can be used, including the following methods:
-Using js files
-Using mjs files
-Using xwl files
##Using js Files
This method is suitable for placing commonly used code in js files, loaded globally statically via the "sys.app.links" property of {#%Configuration|config} or dynamically via the {#Wb.load|Wb-Client.load} method.
The following demonstrates how to write and use js files.
First, create the js file wb/js/test.js:
Cls['My.Util'] = class myUtil extends Wb.Base {
/**
* Perform add.
* @param {Number} value1 Value 1
* @param {Number} value2 Value 2
* @return {Number} The result
*/
static add(value1, value2) {
return value1 + value2;
}
}
To call this js file:
Wb.load('wb/js/test.js', f => My.Util.add(1, 3)); // The My.Util class can be used directly without Wb.load if configured for global static loading.
To load a js file before module execution in an xwl module file, set the module's {#links|Wb.Module.links} property.
##Using mjs Files
mjs files are standard JavaScript module files for grouping specific functionality code. This method is suitable for placing infrequently used code in mjs files, loaded via the {#Wb.loadModule} method when needed.
The following demonstrates how to write and use mjs files.
First, create the mjs file wb/js/test.mjs:
class Util {
/**
* Perform add.
* @param {Number} value1 Value 1
* @param {Number} value2 Value 2
* @return {Number} The result
*/
static add(value1, value2) {
return value1 + value2;
}
}
export default Util;
To call this mjs file:
Wb.loadModule('wb/js/test.mjs', module => Wb.tip(module.default.add(3, 5)));
##Using xwl Files
This method is mainly used to run modules and retrieve the client-side app object.
-{#Wb.open}: Runs a module file.
-{#Wb.openNormal}: Runs a module file and allows users to manually refresh it in the container.
-{#Wb.run|Wb-Client.run}: Runs a module file and returns the module's app object in the callback.
-Statically reference an Xwl module using the {#Wb.Xwl} component.
Run the user management module file with the following code:
Wb.open({ url: 'm?xwl=admin/user' }); // Open the user management module
Wb.openNormal('dbe'); // Open the database explorer and allow page refresh
Run the database explorer and add its tree to viewport1:
First, create test.xwl, add a viewport control with layout "fit", then write code in the module's initialize event:
Wb.run({
url: 'm?xwl=admin/dbe', success(scope) {
app.dbeModule = scope; // Save the dbe module's app to the current module's dbeModule property
app.viewport1.add(scope.tree); // Add the dbe module's tree to viewport1
Wb.tip('Max Return Rows: ' + scope.maxRows); // Access the maxRows variable in the dbe module's app
}
});
For an example of statically loading a module using the {#Wb.Xwl} control, see: {#%xwl-static-load|ide?openModule=example/load/xwl-static-load.xwl}
For related examples, see: {#%client-load-module|ide?openModule=example/load/client-load-module.xwl}
#Client-Side Development.Drag and Drop
Drag and drop is a common operation in client-side interface applications. The system provides relevant properties and API methods to quickly implement drag-and-drop functionality.
##Dragging Components Within a Container
Each container component has an {#itemsSortable|Wb.Container.itemsSortable} property. Setting this to true enables dragging components within the container.
##Dragging Items Within a View
Dragging items within a view includes grid rows or tree nodes. Set the view's {#draggable|Wb.View.draggable} and {#droppable|Wb.View.droppable} properties to true to enable
item dragging. Setting {#dropGroup|Wb.Component.dropGroup} to a specified value restricts the source and target views for dragging between different views. The {#itemdrag|Wb.View.itemdrag} event
configures whether an item can be dropped and the drag mode. The {#itemdrop|Wb.View.itemdrop} event executes actions after an item is dropped.
##Asynchronous Drag and Drop
Asynchronous drag and drop means performing remote operations after dragging and dropping only upon success. For views requiring asynchronous drag-and-drop, set {#draggable|Wb.View.draggable} to {{"{autoDrop: false }"}}, then call {{draggable.acceptDrop()}} after the remote operation succeeds to drop the item.
For related examples, see: {#%drag-drop|ide?openModule=example/basic/drag-drop.xwl}
# globalThis
Extension class for the global this object.
## Class Information
- class name
globalThis
- Icon
undefined
- file
wb/js/wb.js
- hierarchy
globalThis
## Static Properties
- Wb
- Type
Object
- Description
The {#Wb} object.
- Globals
- Flags
Private
- Type
Object
- Description
Object for storing shared global variables. See {#Globals} for details.
- SysLang
- Type
String
- Description
Current language in use. Default language for server-side, client's language for client-side.
- BodyEl
- Type
HTMLBodyElement
- Description
The HTML body element node.
- DocEl
- Type
Element
- Description
The document root element.
- Keys
- Type
Object
- Description
Object containing a list of commonly used key codes.
- app
- Type
Object
- Description
Object for storing shared variables in current context.
- inWSSession
- Flags
Read-only
- Type
Boolean
- Description
Whether executing xwl module within a WebSocket session.
- request
- Flags
Read-only
- Type
HttpServletRequest
- Description
Current request object.
- response
- Flags
Read-only
- Type
HttpServletResponse
- Description
Current response object.
- Str
- Type
Proxy
- Description
A proxy object for getting text of the specified name based on the client's region from the
request. Uses the default region when there is no client request context.
- Params
- Type
Proxy
- Description
A proxy object for context parameters.
Example:
let param = Params.myParam; // Get param value
Params.myParams = 'value'; // Set param value
- self
- Type
Object
- Description
Alias of {#globalThis}.
- BaseMap
- Flags
Read-only
- Type
ConcurrentHashMap
- Description
A map for storing global Java variables across all execution contexts. Do not store
JS variables (excluding String, Number, Boolean); otherwise, concurrent access exceptions may occur.
- ByteArray
- Type
Function
- Description
`byte[]` type.
- File
- Type
Function
- Description
`java.io.File` class.
- JavaString
- Type
Function
- Description
`java.lang.String` class.
- Runtime
- Type
Function
- Description
`java.lang.Runtime` class.
- JavaDate
- Type
Function
- Description
`java.util.Date` class.
- System
- Type
Function
- Description
`java.lang.System` class.
- FileUtils
- Type
Function
- Description
`org.apache.commons.io.FileUtils` class.
- IOUtils
- Type
Function
- Description
`org.apache.commons.io.IOUtils` class.
- FilenameUtils
- Type
Function
- Description
`org.apache.commons.io.FilenameUtils` class.
- IOCase
- Type
Function
- Description
`org.apache.commons.io.IOCase` class.
- Source
- Type
Function
- Description
`org.graalvm.polyglot.Source` class.
- JSONObject
- Type
Function
- Description
`org.json.JSONObject` class.
- JSONArray
- Type
Function
- Description
`org.json.JSONArray` class.
- Base
- Type
Function
- Description
`com.wb.common.Base` class.
- Sessions
- Type
Function
- Description
`com.wb.common.Sessions` class.
- Xwl
- Type
Function
- Description
`com.wb.common.Xwl` class.
- Perm
- Type
Function
- Description
`com.wb.common.Perm` class.
- Config
- Type
Function
- Description
`com.wb.common.Config` class.
- ModuleData
- Type
Function
- Description
`com.wb.common.ModuleData` class.
- StrCls
- Type
Function
- Description
`com.wb.common.Str` class.
- UrlBuffer
- Type
Function
- Description
`com.wb.common.UrlBuffer` class.
- WebUtil
- Type
Function
- Description
`com.wb.util.WebUtil` class.
- ZipUtil
- Type
Function
- Description
`com.wb.util.ZipUtil` class.
- WSUtil
- Type
Function
- Description
`com.wb.util.WSUtil` class.
- SysUtil
- Type
Function
- Description
`com.wb.util.SysUtil` class.
- DateUtil
- Type
Function
- Description
`com.wb.util.DateUtil` class.
- LogUtil
- Type
Function
- Description
`com.wb.util.LogUtil` class.
- LogxUtil
- Type
Function
- Description
`com.wb.util.LogxUtil` class.
- DbUtil
- Type
Function
- Description
`com.wb.util.DbUtil` class.
- JsonUtil
- Type
Function
- Description
`com.wb.util.JsonUtil` class.
- ExcelUtil
- Type
Function
- Description
`com.wb.util.ExcelUtil` class.
- FileUtil
- Type
Function
- Description
`com.wb.util.FileUtil` class.
- JobUtil
- Type
Function
- Description
`com.wb.util.JobUtil` class.
- StringUtil
- Type
Function
- Description
`com.wb.util.StringUtil` class.
- SourceBuffer
- Type
Function
- Description
`com.wb.graal.SourceBuffer` class.
- KVBuffer
- Type
Function
- Description
`com.wb.common.KVBuffer` class.
- DebugFiles
- Type
Function
- Description
`com.wb.graal.DebugFiles` class.
- Encrypter
- Type
Function
- Description
`com.wb.tool.Encrypter` class.
- DictCls
- Type
Function
- Description
`com.wb.common.Dict` class.
- ResultSet
- Type
Function
- Description
`java.sql.ResultSet` class.
- Types
- Type
Function
- Description
`java.sql.Types` class.
- InputStream
- Type
Function
- Description
`java.io.InputStream` class.
- ByteArrayInputStream
- Type
Function
- Description
`java.io.ByteArrayInputStream` class.
- ByteArrayOutputStream
- Type
Function
- Description
`java.io.ByteArrayOutputStream` class.
- BufferedInputStream
- Type
Function
- Description
`java.io.BufferedInputStream` class.
- FileInputStream
- Type
Function
- Description
`java.io.FileInputStream` class.
- ArrayList
- Type
Function
- Description
`java.io.ArrayList` class.
- DataSource
- Type
Function
- Description
`com.wb.tool.DataSource` class.
- HashMap
- Type
Function
- Description
`java.util.HashMap` class.
- ConcurrentHashMap
- Type
Function
- Description
`java.util.concurrent.ConcurrentHashMap` class.
- Byte
- Type
Function
- Description
`java.lang.Byte` class.
- Short
- Type
Function
- Description
`java.lang.Short` class.
- Integer
- Type
Function
- Description
`java.lang.Integer` class.
- Long
- Type
Function
- Description
`java.lang.Long` class.
- Float
- Type
Function
- Description
`java.lang.Float` class.
- Double
- Type
Function
- Description
`java.lang.Double` class.
- jakarta
- Type
Function
- Description
`Packages.jakarta` package name.
## Static Methods
- setTimeout
- Description
The setTimeout method, which is empty by default. Use {#Wb.setTimeout} to execute in another thread.
- setInterval
- Description
The setInterval method, which is empty by default. Use {#Wb.setInterval} to execute in another thread.
- clearTimeout
- Description
The clearTimeout method, which is empty by default. Use `future.cancel` to clear {#Wb.setTimeout}.
- clearInterval
- Description
The clearInterval method, which is empty by default. Use `future.cancel` to clear {#Wb.setInterval}.
# Globals
Shared global variable storage object.
## Class Information
- class name
Globals
- Icon
undefined
- file
wb/js/wb.js
- hierarchy
Globals
## Static Properties
- isServer
- Type
Boolean
- Description
Whether the script is running on the server side.
- HasOwnProperty
- Type
Function
- Description
The hasOwnProperty prototype method of objects.
- WbMainTab
- Flags
Read-only
- Type
Wb.Tab
- Description
The main tab in the current context. See {#Wb.Tab.mainTab} for details.
- loginWin
- Flags
Read-only
- Type
Wb.Window
- Description
Shared login window.
- wsPrefix
- Flags
Read-only
- Type
String
- Description
WebSocket URL prefix.
- onLoadDone
- Flags
Read-only Private
- Type
Boolean
- Description
Indicates whether the page's onLoad method has completed.
- debugMode
- Flags
Private
- Type
Boolean
- Description
Indicates whether debug mode is enabled.
- promptWins
- Flags
Private
- Type
Object
- Description
Object containing all singleton windows displayed via {#Wb.prompt}.
- allModules
- Flags
Private
- Type
Object
- Description
Object containing all singleton modules.
- allScript
- Flags
Private
- Type
Object
- Description
Object containing all cached module scripts.
- onLoadCt
- Flags
Private
- Type
Number
- Description
Manual loading counter.
- zIndex
- Type
Number
- Description
Current zIndex value.
- minZIndex
- Type
Number
- Description
Minimum zIndex value.
- maxZIndex
- Type
Number
- Description
Maximum zIndex value.
- isMoving
- Type
Boolean
- Description
Indicates whether a component is currently being moved.
- smallScreen
- Type
Boolean
- Description
Indicates whether the screen is considered small.
- smallScreenWidth
- Type
Number
- Description
Width threshold (in pixels) for defining a small screen.
- context
- Flags
Read-only
- Type
Context
- Description
Current execution context.
## Static Methods
- init
- Description
Initialization before module execution.
- Parameters
- path
- Type
String
- Description
Current context path.
- request
- Type
HttpServletRequest
- Description
Current request object.
- response
- Type
HttpServletResponse
- Description
Current response object.
- paramNames
- Type
Array
- Description
List of parameter names.
- paramValues
- Type
Array
- Description
List of parameter values.
- clear
- Description
Cleanup after module execution.
- Parameters
- hasExcept
- Type
Boolean
- Description
Whether an exception occurred.
# Wb
Wb base JavaScript library for client and server programming.
## Class Information
- class name
Wb
- Icon
undefined
- file
wb/js/wb.js
- hierarchy
Wb
## Static Properties
- isServer
- Type
Boolean
- Description
Whether the script is running on the server side.
- classes
- Type
Object
- Description
All classes defined using {#Cls} are stored in this object, where the key is the
class short name and the value is the class.
- nbsp
- Type
String
- Description
Uninterruptive space character, its ASCII code value is 160.
- emptyObject
- Type
Object
- Description
Empty object.
- maxInt
- Type
Number
- Description
The maximum integer value. The value is `2147483647`.
- compare
- Type
Function
- Description
Alias of compare method of Intl.Collator.
- lowerCompare
- Type
Function
- Description
Case insensitive comparison method alias of Intl.Collator.
## Static Methods
- encode
- Description
Convert the value to a JSON string.
See {#%JSON.stringify|obj:JSON/stringify} for details.
Example:
let text = Wb.encode({foo: "bar", abc: 123});
// text value: '{"foo":"bar","abc":123}'
- decode
- Description
Convert the string to a JavaScript value or object it describes.
See {#%JSON.parse|obj:JSON/parse} for details.
Example:
let object = Wb.decode('{"foo":"bar","abc":123}');
// object value: {foo: "bar", abc: 123}
- isArray
- Description
Determines whether the value is an array.
See {#%Array.isArray|obj:Array/isArray} for details.
Example:
let result = Wb.isArray([1, 2, 3]);
// result: true
- apply
- Description
Copies the values of all enumerable properties from one or more source objects to the target object.
See {#%Object.assign|obj:object/assign} for details.
Example:
let result = Wb.apply({foo: 'abc'}, {bar: 123});
// result: {foo: 'abc', bar: 123}
// equals to: let result = {...{foo: 'abc'}, ...{bar: 123}};
- emptyFn
- Description
Empty function.
- raise
- Description
Throw an exception with the specified message and code.
Example:
Wb.raise('error message');
Wb.raise('save error.', 'file modified');
- Parameters
- msg
- Type
Object
- Description
Exception object or message.
- code
- Type
String
- Description
Exception code.
- error
- Type
Object
- Description
Cause error to log.
- encodePretty
- Description
Converts the value to a JSON string with the specified formatting.
- Parameters
- object
- Type
Object
- Description
The object needs to be converted.
- Returns Value
- Type
String
- Description
Formatted JSON string.
- destroy
- Description
Execute all destroy function in the object. All Objects, Arrays, Maps or Sets will be traversed, and the destroy
function contained in them will be executed.
Example:
Wb.destroy([obj1, obj2, obj3]);
- Parameters
- object
- Type
Object|Array|Set|Map|Wb.Base
- Description
The object or traversable that needs to execute the destroy function.
- destroyIf
- Description
Execute the destroy method of the object, if destroy method exists.
- Parameters
- object
- Type
Object
- Description
The object.
- eval
- Description
Returns the object represented by the script. Please note that using this method will parse and execute
any script. Please ensure that the script source is reliable.
- Parameters
- script
- Type
String
- Description
Script to be executed.
- Returns Value
- Type
Object
- Description
Object returned after executing the script.
- mixCompare
- Description
Compares characters, numbers, or date equivalents and returns the comparison results.
- Parameters
- a
- Type
Mix
- Description
Source value for comparison
- b
- Type
Mix
- Description
Dest value for comparison
- Returns Value
- Type
Number
- Description
Results of comparison.
-< 0: less than
-= 0: equal to
-> 0: greater than
- hasProperty
- Description
Returns a boolean indicating whether this object has the specified property as its own property.
- Parameters
- object
- Type
Object
- Description
The object to be checked.
- name
- Type
String|Symbol
- Description
The String name or Symbol of the property to test.
- Returns Value
- Type
Boolean
- Description
`true` if the object has the specified property as own property; `false` otherwise.
- create
- Description
Create object instances by config object. If the instanced property of the object is `true`,
the object will be returned directly.
Example:
let object = Wb.create({cname: 'button'});
- Parameters
- configs
- Type
Object
- Description
Configuration object used to create instances.
- Returns Value
- Type
Wb.Base
- Description
The newly created object instance.
- px
- Description
Add the suffix "px" after the number value. If the value is non number, it will be returned directly.
- Parameters
- val
- Type
Object
- Description
Any value, `true` means ".5em". `false` means 0.
- Returns Value
- Type
String|Object
- Description
The string after adding "px" or value itself.
- toObject
- Description
Convert an array to an object. The object key is an array member, and the value is true.
Example:
let object = Wb.toObject(['foo', 'bar']);
// object: {foo: true, bar: true}
- Parameters
- array
- Type
Array
- Description
An array to be converted.
- Returns Value
- Type
Object
- Description
Converted object.
- encodeURL
- Description
Convert the parameters in the object to URL encoded strings.
- Parameters
- params
- Type
Object
- Description
The parameters object.
- Returns Value
- Type
String
- Description
URL encoded string.
- optText
- Description
Convert the name starting with "@" to the string corresponding to the name of the current region.
Example:
Wb.optText('@ok'); // returns "OK" in english
- Parameters
- name
- Type
String
- Description
The name.
- Returns Value
- Type
String
- Description
The string corresponding to the name or the string without "@" if not found.
- getSourceURL
- Description
Convert the specified url to the sourceURL used to identify the script path.
- Parameters
- url
- Type
String
- Description
URL path.
- Returns Value
- Type
String
- Description
Converted sourceURL.
- serialize
- Description
Serialize the value. The difference from {#Wb.encode} is that it supports the serialization and deserialization
of date and function values. See {#Wb.deserialize} for deserialize.
- Parameters
- value
- Type
Object
- Description
Value to serialize.
- Returns Value
- Type
String
- Description
Serialized text value.
- deserialize
- Description
Deserialize the text serialized with the {#Wb.serialize} method and restore it to the value before
serialization. See {#Wb.serialize} for serialize.
- Parameters
- value
- Type
String|Object
- Description
Serialized text or object value.
- noFunction
- optional
true
- Type
Boolean
- Description
Whether to not restore the function. For security reasons, this parameter is always
`true` on the server side.
- Returns Value
- Type
Object
- Description
The value restored after deserialization.
- format
- Description
Converts the value to a string in the specified format. This method will directly call the `format` method
of `value`, and pass the format parameter.
Example:
// Format Numbers
let val = Wb.format(1234, '#,##0.00');
//val: 1,234.00
//--------------------------------------------------------------------------
// Format characters
val = Wb.format('Name: {name}, Sex: {sex}', {name: 'Jeena', sex:'Female'});
//val: Name: Jeena, Sex: Female'
val = Wb.format('foo {0} bar {1} and {0}', 'abc', 123);
//val: foo abc bar 123 and abc
//--------------------------------------------------------------------------
// Format date
val = Wb.format(new Date('2021-3-10'), 'y-MM-dd');
//val: 2021-03-10
- Parameters
- value
- Type
Object
- Description
Value to format.
- format
- Type
String
- Description
Format text.
- Returns Value
- Type
String
- Description
The formatted string value. Returns `value` directly if `value` is `null`.
- toArray
- Description
Convert the value to an array. If the value is an array, return the value directly. Otherwise, return the value
wrapped in the array.
array = Wb.toArray('foo'); // array: ['foo']
bar = ['foo'];
array = Wb.toArray(bar); // array: bar
- Parameters
- value
- Type
Object
- Description
Value to convert.
- Returns Value
- Type
Array
- Description
Converted array.
- define
- Description
Copy the properties of the configs object to the target object, and define the properties. The rules defined are:
- The method name starts with "get$" is the getter method, and its property name is the name after the $.
- The method name starts with "set$" is the setter method, and its property name is the name after the $.
- Others will be set directly to the target object.
- Parameters
- object
- Type
Object
- Description
The target object.
- configs
- optional
true
- Type
Object
- Description
Source configs object. Defaults means that the object is configs, and create a new object.
- Returns Value
- Type
Object
- Description
Target object itself.
- random
- Description
Returns a random integer between 0 and maxInt, including 0 but excluding maxInt.
- Parameters
- maxInt
- Type
Number
- Description
Limited maximum value.
- Returns Value
- Type
Number
- Description
Randomly generated number.
- cascade
- Description
Recursively traverses the object or array, executing the function for each item.
Example:
let items = [{param: 'one'}, {param: 'two', items: [{param: 'three'}]}];
// output: one, two, three
Wb.cascade(items, item => {console.log(item.param)}); // Using {} to prevent unexpected interruptions.
Wb.cascade(parentNode, node => console.log(node), 'childNodes'); // Traverse all descendant nodes of the node
- Parameters
- object
- Type
Object|Array
- Description
The object or array to traverse.
- fn
- Type
Function
- Description
Function to execute. Stops traversal if returns false; skips subitems if returns null.
- fn.item
- Type
Object
- Description
Current item.
- fn.parent
- Type
Object
- Description
Parent item.
- itemsName
- optional
true
- Type
String
- Description
The property name of the child items. Defaults to "items".
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- reverse
- optional
true
- Type
Boolean
- Description
Whether to traverse sibling items in reverse.
- includeSelf
- optional
true
- Type
Boolean
- Description
Whether to include the object itself when traversing.
- parent
- optional
true
- Type
Object
- Description
Parent item parameter passed to `fn`.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- bubble
- Description
Up traverses the object or array, executing the given method for each item.
Example:
let items = {param: 'one',parent: {param: 'two', parent: {param: 'three'}}};
Wb.bubble(items, parent => {console.log(parent.param)}); // Using {} to prevent unexpected interruptions.
// output: one, two, three
Wb.bubble(childNode, parent => console.log(parent), 'parentNode');
// Traverse all parent nodes of the node
- Parameters
- object
- Type
Object
- Description
The object to traverse.
- fn
- Type
Function
- Description
Function to execute. Traversal will be interrupted if `false` is returned.
- fn.parent
- Type
Object
- Description
Current parent.
- parentName
- optional
true
- Type
String
- Description
The property name of the parent items. Defaults to "parent".
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the object itself when traversing.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- down
- Description
Recursively traverses the object to find a matching item.
Example:
let object = {param: 'two', items: [{param: 'three'}]};
let items = [{param: 'one'}, object];
console.log(Wb.down(items, item => item.param === 'two'));
- Parameters
- object
- Type
Object
- Description
The object to traverse.
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.item
- Type
Object
- Description
Current item.
- queryAll
- optional
true
- Type
Boolean
- Description
Whether to return all matching items. Default return first item.
- itemsName
- optional
true
- Type
String
- Description
The property name of the child items. Defaults to "items".
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- includeSelf
- optional
true
- Type
Boolean
- Description
Whether to include the object itself when traversing.
- Returns Value
- Type
Object|Array
- Description
If query all returns array with all matching items, else returns matching item or `null`.
- downAll
- Description
Recursively traverses the object to find all matching items.
- Parameters
- object
- Type
Object
- Description
The object to traverse.
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.item
- Type
Object
- Description
Current item.
- itemsName
- optional
true
- Type
String
- Description
The property name of the child items. Defaults to "items".
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- includeSelf
- optional
true
- Type
Boolean
- Description
Whether to include the object itself when traversing.
- Returns Value
- Type
Array
- Description
Array with all matching items. Returns empty array if none found.
- up
- Description
Up traverses the object to find a matching item.
Example:
let object = {param: 'two', parent: {param: 'three'}};
let items = {param: 'one', parent: object};
console.log(Wb.up(items, parent => parent.param === 'two'));
- Parameters
- object
- Type
Object
- Description
The object to traverse.
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.parent
- Type
Object
- Description
Current parent.
- queryAll
- optional
true
- Type
Boolean
- Description
Whether to return all matching items. Default return first item.
- parentName
- optional
true
- Type
String
- Description
The property name of the parent items. Defaults to "parent".
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the object itself when traversing.
- Returns Value
- Type
Object|Array
- Description
If query all returns array with all matching items, else returns matching item or `null`.
- upAll
- Description
Up traverses the object to find all matching items.
- Parameters
- object
- Type
Object
- Description
The object to traverse.
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.parent
- Type
Object
- Description
Current parent.
- parentName
- optional
true
- Type
String
- Description
The property name of the parent items. Defaults to "parent".
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the object itself when traversing.
- Returns Value
- Type
Array
- Description
Array with all matching items. Returns empty array if none found.
- find
- Description
Finds the property name of the first matching item in the object.
Example:
Wb.find({foo: 123, bar: 'abc'}, (k, v) => v === 'abc'); // output "bar"
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.key
- Type
String
- Description
Property name of the current item.
- fn.value
- Type
Object
- Description
Property value of the current item.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- Returns Value
- Type
String
- Description
Matching name or `undefined` if not found.
- filter
- Description
Finds the property names of all matching items in the object.
Example:
Wb.filter({foo: 123, bar: 'abc', bar1: 'abc'}, (k, v) => v === 'abc'); // output ["bar", "bar1"]
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.key
- Type
String
- Description
Property name of the current item.
- fn.value
- Type
Object
- Description
Property value of the current item.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- Returns Value
- Type
String[]
- Description
Array with all matching names or empty array if none found.
- some
- Description
Determines whether at least one item in the object matches.
Example:
Wb.some({foo: {name: 'Allen'}, bar: {name: 'David'}}, (k, v) => v.name == 'David'); // returns: true
- Parameters
- object
- Type
Object
- Description
The object to check.
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.key
- Type
String
- Description
Property name of the current item.
- fn.value
- Type
Object
- Description
Property value of the current item.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- Returns Value
- Type
Boolean
- Description
`true` if at least one item matches, `false` otherwise.
- every
- Description
Determines whether all items in the object match.
Example:
Wb.every({foo: {name: 'Allen'}, bar: {name: 'David'}}, (k, v) => v.name == 'David'); // returns: false
- Parameters
- object
- Type
Object
- Description
The object to check.
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.key
- Type
String
- Description
Property name of the current item.
- fn.value
- Type
Object
- Description
Property value of the current item.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current object.
- Returns Value
- Type
Boolean
- Description
`true` if all items match, `false` otherwise.
- flatItems
- Description
Flattens a nested array structure by recursively collecting all items including those nested
within descendant properties.
Example:
Wb.flatItems([{v: 1}, {v: 2, items: [{v: 3}, {v: 4}]}], true); // [{"v":1},{"v":2},{"v":3},{"v":4}]
- Parameters
- array
- Type
Array
- Description
Array to flatten.
- deleteItems
- optional
true
- Type
Boolean
- Description
Whether to delete the property specified by `itemsName`.
- itemsName
- optional
true
- Type
String
- Description
The property name of the child items. Defaults to "items".
- Returns Value
- Type
Array
- Description
A new flattened array containing all items from all levels of the original nested structure.
- pluck
- Description
Get the values of the specified names from object.
Example:
Wb.pluck({a: 123, b: 'abc', c: 'def'}, ['a', 'b']); // returns: [123, 'abc']
- Parameters
- object
- Type
Object
- Description
The source object to pluck values from.
- names
- Type
String[]
- Description
Array of property names to pluck.
- Returns Value
- Type
Array
- Description
Array of values in the order corresponding to the names array.
- toHTML
- Description
Convert the specified object value into an HTML script.
- Parameters
- object
- Type
Object
- Description
The object to convert.
- singleLine
- optional
true
- Type
Boolean
- Description
Whether to display as a single line. `true` means line breaks will be converted to spaces.
- convertSpace
- optional
true
- Type
Boolean
- Description
Whether to convert spaces to a single " ", tabs to multiple " ", and line
breaks to "{title} {for data.rows}{text} {/for} ");
console.log(tpl.apply({title: 'My Title', rows: [{cls: 'foo',text: 'item1'}, {cls: 'bar',text: 'item2'}]}));
# Example 2: Data is an array
let tpl = new Wb.Template("{for}{[index]}:{text} {/for}");
console.log(tpl.apply([{cls: 'foo',text: 'item1'}, {cls: 'bar',text: 'item2'}]));
# Example 3: Multi-level data
let tpl = new Wb.Template("{title} {for data.rows}"+
"{text}{for value.items}{[value1]} {/for} {/for} ");
console.log(tpl.apply({title: 'My Title', rows: [{cls: 'foo',text: 'item1', items:[1, 2, 3]},
{cls: 'bar',text: 'item2', items:[4, 5, 6]}]}));
# Value Retrieval
Value retrieval refers to getting the value of a specified field from the data and appending it to the output string
at the current position. Its syntax is {data.name}, where "name" is the name of the data field. The prefix "data." can
be omitted when retrieving top-level fields. Multi-level fields can be referenced using ".",
e.g., {data.foo.bar}. Expressions starting with "**" indicate HTML content.
Example:
Sample data: {field: 'abc', foo: {bar: 3}}
{field} {data.foo.bar}
# Using Loops
The loop syntax is {for root}...{/for}, where "root" is the root node of the data to be traversed. If the data itself
is an array, "root" can be omitted.
Example:
{for}...{/for} // Traverse the data itself (typically an array)
{for data.myArray}...{/for} // Traverse the "myArray" field in the object
"data" refers to the raw data used to populate the template.
Three parameters are available within a loop:
-value: The current field being traversed
-index: The index of the current field
-array: The array being traversed
For nested loops, the parameter names for the first-level inner loop are value1, index1, array1 respectively;
for the second-level inner loop, they are value2, index2, array2, and so on.
# Using Conditional Judgments
The conditional judgment syntax is {if expression}...{elseif expression}...{else}...{/if}.
"expression" can be any valid boolean expression. "elseif" is equivalent to the "else if" statement,
and "else" is equivalent to the "else" statement. Both "elseif" and "else" clauses are optional.
Example:
Sample data: {field: 7, value: 'demo'}
{if data.field1 > 10}text1{elseif data.field1 < 8 && data.field1 >= 5}{value}{else}text3{/if}
# Using Expressions to Retrieve Values
Any valid expression can be used to retrieve values in the template, with the syntax {[expression]}. The value returned
by the expression is the retrieved value.
Example:
{[this.myMethod(data.field1)]}
{[data.field1 >= data.field2 ? data.field3 : data.field4]}
# Inserting Arbitrary Code into Templates
Arbitrary code can be inserted at the current position in the template using the syntax {%code%}. "code" can be any valid
code snippet, which will be directly inserted at the current position and output to the method generated by template
compilation.
Example:
{%for(let i = 0; i < 10; i++){%}
foo {field1} bar
{%}%}
## Class Information
- class name
Wb.Template
- Icon
undefined
- cname
template
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Template
## Instance Properties
- parseFn
- Flags
Private
- Type
Function
- Description
Function used to parse the template.
- tpl
- Getter
- Type
String|Function
- Setter
- Type
String|Function
- Description
String template or template function.
## Instance Methods
- constructor
- Description
Template class constructor. Automatically compiles string templates into the function on initialization.
- Parameters
- tpl
- Type
String|Function
- Description
String template or template function.
- apply
- Description
Fills the template with data and returns the output string.
- Parameters
- data
- optional
true
- Type
Object
- Description
Fill Data. Such as object, array, or any valid value.
- option
- optional
true
- Type
Object
- Description
Optional parameters pass to the parser function.
- Returns Value
- Type
String
- Description
Output string.
- compile
- Description
Compiles a string template into a function-based template.
- Parameters
- tpl
- Type
String
- Description
String template.
# Wb.Math
Math utility class providing common mathematical helper functions.
## Class Information
- class name
Wb.Math
- Icon
undefined
- cname
math
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Math
## Static Methods
- intersect
- Description
Determines whether two rectangles intersect with each other.
Example:
let result = Wb.Math.intersect({x: 10, y: 50, right: 200, bottom: 100},
{x: 10, y: 30, right: 300, bottom: 400});
// Result value: true
- Parameters
- rect1
- Type
Object
- Description
Rectangle object 1 in {x, y, right, bottom}.
- rect2
- Type
Object
- Description
Rectangle object 2 in {x, y, right, bottom}.
- Returns Value
- Type
Boolean
- Description
`true` if the rectangles intersect, `false` otherwise.
- getPointXY
- Description
Gets the XY coordinates of a specified position point in a rectangle.
Example:
Wb.Math.getPointXY({x: 10, y: 50, right: 200, bottom: 100}, 'c'); // Output: [105, 75]
- Parameters
- rect
- Type
Object
- Description
Rectangle object in {x, y, right, bottom}.
- position
- Type
String
- Description
Position. Valid values:
-tl: Top-left corner
-t: Midpoint of the top edge
-tr: Top-right corner
-l: Midpoint of the left edge
-c: Center position
-r: Midpoint of the right edge
-bl: Bottom-left corner
-b: Midpoint of the bottom edge
-br: Bottom-right corner
- Returns Value
- Type
Number[]
- Description
Coordinates as [x, y].
- getMoveToPointXY
- Description
Gets a rectangle's XY coordinates when its specified point is moved to target [x, y].
Example:
Wb.Math.getMoveToPointXY({x: 10, y: 50, right: 200, bottom: 100}, 'c', [100, 200]); // Output: [5, 175]
- Parameters
- rect
- Type
Object
- Description
Rectangle in {x, y, right, bottom}.
- position
- Type
String
- Description
Position. Valid values:
-tl: Top-left
-t: Top midpoint
-tr: Top-right
-l: Left midpoint
-c: Center
-r: Right midpoint
-bl: Bottom-left
-b: Bottom midpoint
-br: Bottom-right
- toXY
- Type
Number[]
- Description
Target [x, y] to move to.
- Returns Value
- Type
Number[]
- Description
[x, y] coordinates.
- getAlignPosition
- Description
Gets the x/y and resized width/height of the source rectangle when aligned to the target rectangle as specified.
- Parameters
- sourceRect
- Type
Object
- Description
Source rectangle in {x, y, right, bottom}.
- destRect
- Type
Object
- Description
Target rectangle in {x, y, right, bottom}.
- position
- Type
String
- Description
Alignment mode. See {#Element.alignTo} for details.
- restrictWidth
- Type
Number
- Description
Restricted width.
- restrictHeight
- Type
Number
- Description
Restricted height.
- autoSize
- optional
true
- Type
String|Boolean
- Description
Allow resizing source rect for optimal alignment.
- offset
- optional
true
- Type
Number[]
- Description
[x, y] offset.
- Returns Value
- Type
Object
- Description
{x, y, width, height} object.
- pointInRect
- Description
Determines whether a point is inside a rectangle.
Example:
Wb.Math.pointInRect([30, 91], {x: 10, y: 50, right: 200, bottom: 100}); // Output: true
- Parameters
- point
- Type
Number[]
- Description
Point position as [x, y] coordinates.
- rect
- Type
Object
- Description
Rectangle object in {x, y, right, bottom}.
- Returns Value
- Type
Boolean
- Description
`true` if the point is inside the rectangle, `false` otherwise.
- rectInRect
- Description
Determines whether one rectangle is completely contained within another rectangle.
Example:
Wb.Math.rectInRect({x: 5, y: 30, right: 20, bottom: 60},
{x: 10, y: 50, right: 200, bottom: 100}); // Output: false
- Parameters
- inRect
- Type
Object
- Description
Inner rectangle object in {x, y, right, bottom}.
- outRect
- Type
Object
- Description
Outer rectangle object in {x, y, right, bottom}.
- Returns Value
- Type
Boolean
- Description
`true` if inRect is completely inside outRect, `false` if not.
- getDistance
- Description
Gets the distance between two points.
- Parameters
- src
- Type
Number[]
- Description
Source point position as [x, y] coordinates.
- dst
- Type
Number[]
- Description
Target point position as [x, y] coordinates.
- Returns Value
- Type
Number
- Description
Distance between the two points.
# Wb.Editor
Embedded editor class for enabling embeddable editing. During editing, the control will float to the position of the
specified element and cover the entire element. The control will be removed or destroyed when its value is confirmed
or it loses focus. Only a single editor is allowed to be displayed at any time.
Example:
Wb.Editor.startEdit(div,{value: div.textContent, callback(ok, value){
if (ok)
div.textContent = value;
}});
## Class Information
- class name
Wb.Editor
- Icon
undefined
- cname
editor
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Editor
## Static Properties
- callback
- Flags
Read-only
- Type
Function
- Description
Callback event fired when the current editor finishes editing.
- valueChanged
- Type
Boolean
- Description
Indicates whether the editor value has been changed.
- activeEditor
- Flags
Read-only
- Type
Wb.Text
- Description
The editor currently being edited. `undefined` means no editor is in edit
state.
- el
- Flags
Read-only
- Type
Element
- Description
The element where the editor is displayed.
- stringEditor
- Flags
Read-only
- Getter
- Type
Wb.Text
- Description
The shared text editor.
## Static Methods
- startEdit
- Description
Displays the editing component at the position of the specified element, removes or destroys the editing component after
editing is completed, and executes the callback method.
- Parameters
- el
- Type
Element
- Description
The element where the editor is displayed.
- configs
- optional
true
- Type
Object
- Description
Optional configuration parameter object.
- .value
- optional
true
- Type
Object
- Description
Edited value. Defaults to the current value of the editing control.
- .callback
- optional
true
- Type
Function
- Description
Callback function after editing is completed.
- ..ok
- Type
Boolean
- Description
Whether editing is completed normally. `true` for completed, `false` for canceled.
- ..value
- Type
Object
- Description
Edited value.
- .editing
- optional
true
- Type
Function
- Description
Callback function during editing.
- ..value
- Type
Object
- Description
Value during editing.
- .editor
- optional
true
- Type
Wb.Text
- Description
Editing control. Uses the default text editor if omitted.
- .isDestroy
- optional
true
- Type
Boolean
- Description
Whether to destroy the component after editing. `false` for remove, `true` for destroy.
- .keydown
- optional
true
- Type
Function
- Description
Callback method executed on key down. Return `true` means key event handled.
- ..e
- Type
Event
- Description
Event object.
- finish
- Description
Complete editing and remove the editor.
- Parameters
- ok
- optional
true
- Type
Boolean
- Description
`true` to complete editing, `false` to cancel editing.
- completeEdit
- Description
Complete the editing process and remove the editor.
- cancelEdit
- Description
Cancel the editing process and remove the editor.
- onValueChange
- Flags
Private
- Description
Method executed when the editor value changes.
- onDocMouseDown
- Flags
Private
- Description
Method executed when the mouse is down on document.
- Parameters
- e
- Type
Event
- Description
The event object.
- onKeydown
- Flags
Private
- Description
Method executed when a key is pressed in the editor.
- Parameters
- e
- Type
Event
- Description
The event object.
# XMLHttpRequest
The XMLHttpRequest object in JavaScript. See {#%XMLHttpRequest} for details.
## Class Information
- class name
XMLHttpRequest
- Icon
undefined
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
XMLHttpRequest
# Wb.Request
A wrapper class for handling AJAX interactions with server-side data.
## Class Information
- class name
Wb.Request
- Icon
undefined
- cname
request
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Request
## Static Methods
- ajax
- Description
Sends AJAX requests to the server and retrieves returned data. See {#Wb.ajax} for details.
- needForm
- Flags
Private
- Description
Determines if the values in the parameter object contain data that needs to be submitted via FormData.
- Parameters
- params
- Type
Object
- Description
Parameter object.
- Returns Value
- Type
Boolean
- Description
`true` if contains, `false` otherwise.
- download
- Flags
Private
- Description
Downloads the object returned by AJAX as a file.
- Parameters
- xhr
- Type
XMLHttpRequest
- Description
AJAX request object.
- filename
- optional
true
- Type
String
- Description
Download filename. Defaults to auto.
- url
- optional
true
- Type
String
- Description
Download URL address.
- processError
- Flags
Private
- Description
Handles XHR error information.
- Parameters
- xhr
- Type
XMLHttpRequest
- Description
AJAX request object.
- target
- optional
true
- Type
Wb.Component
- Description
Display error information on this object. Show error dialog by default.
# Wb.Draggable
A class that adds drag-and-drop functionality to components. Components using this class gain the ability to perform drag
and drop operations.
## Class Information
- class name
Wb.Draggable
- Icon
undefined
- cname
draggable
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Draggable
## Instance Properties
- threshold
- Type
Number
- Description
Drag start threshold. Dragging starts only when the mouse has moved at least this number of pixels
horizontally or vertically.
- primaryButtonOnly
- Type
Boolean
- Description
Whether dragging is allowed only when the primary mouse button is pressed.
- moveX
- Type
Boolean
- Description
Whether horizontal dragging is allowed.
- moveY
- Type
Boolean
- Description
Whether vertical dragging is allowed.
- hideTarget
- Type
Boolean
- Description
Whether to hide {#targetEl} during dragging. Displayed by default.
- dragTarget
- Type
Boolean
- Description
Whether to drag the target element itself directly.
- animate
- Type
Boolean
- Description
Whether to display animation effects.
- scrollDragDelay
- Type
Number
- Description
Delay in milliseconds before executing the {#drag} method after scrolling with the mouse wheel.
- forceEnabled
- Type
Boolean
- Description
Whether to force enable drag-and-drop when setting {#disabled} to false. Drag-and-drop is
disabled on mobile devices by default.
- scrollStep
- Type
Number
- Description
- Auto-scroll step size during dragging, in pixels. Defaults to 30.
- maxWidth
- Type
Number/String
- Description
Maximum width of the dragging element {#dragEl}.
- maxHeight
- Type
Number/String
- Description
Maximum height of the dragging element {#dragEl}.
- minX
- Type
Number
- Description
Minimum value of the dragged x-coordinate.
- minY
- Type
Number
- Description
Minimum value of the dragged Y-coordinate.
- maxX
- Type
Number
- Description
Maximum value of the dragged x-coordinate.
- maxY
- Type
Number
- Description
Maximum value of the dragged y-coordinate.
- targetEl
- Type
Element
- Description
The target element being dragged. Defaults to the {#target} component element if not
specified.
- dragEl
- Flags
Read-only
- Type
Element
- Description
The element displayed during dragging.
- dragElSize
- Flags
Private
- Type
Boolean
- Description
Whether to set the size of the element displayed during dragging.
- dragCenter
- Type
Boolean
- Description
Whether the mouse position is at the center of {#dragEl} during dragging:
-`true`: The mouse is at the center of {#dragEl}
-`false`: The mouse is at the top-left corner of {#dragEl}
-`null`: Original position
- constrainEl
- Type
Element
- Description
The element within which the dragging element {#dragEl} is confined.
- displayField
- Flags
Read-only
- Type
Wb.DisplayField
- Description
The display control associated with {#dragEl} during dragging. Only valid when
the text attribute is specified.
- target
- Type
Wb.Component
- Description
The target component for dragging.
- startDrag
- Flags
Read-only
- Type
Boolean
- Description
Whether dragging has started.
- disabled
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the drag and drop is disabled.
- text
- Getter
- Type
String
- Setter
- Type
String
- Description
Text displayed on {#dragEl} during dragging. If not specified, a copy of {#targetEl} will be created
as {#dragEl}.
- icon
- Getter
- Type
IconString
- Setter
- Type
IconString
- Description
Icon displayed on {#dragEl} during dragging. Only valid when the {#text}/{#html} attribute
is specified. No icon is displayed by default.
- textCls
- Getter
- Type
String
- Setter
- Type
String
- Description
CSS class of {#dragEl} during dragging. Only valid when the {#text}/{#html} is specified.
- drag
- Type
Function
- Description
Method executed during dragging.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
Draggable component object.
- e
- Type
Event
- Description
Event object during dragging.
- currentX
- Flags
Private
- Type
Number
- Description
Current x-coordinate during dragging.
- currentY
- Flags
Private
- Type
Number
- Description
Current y-coordinate during dragging.
## Instance Methods
- setDisabled
- Description
Sets whether the drag and drop is disabled.
- Parameters
- disabled
- Type
Boolean
- Description
`true` disabled, `false` enabled.
- onMouseDown
- Flags
Private
- Description
Method executed when the mousedown event is fired on the drag handle element.
- Parameters
- e
- Type
Event
- Description
Event object.
- onMouseUp
- Flags
Private
- Description
Method executed when the mouseup event is fired on the document.
- Parameters
- e
- Type
Event
- Description
Event object.
- onWheel
- Flags
Private
- Description
Method executed when the `wheel` event is fired on the document.
- Parameters
- e
- Type
Event
- Description
Event object.
- onMouseMove
- Flags
Private
- Description
Method executed when the `mousemove` event is fired on the document.
- Parameters
- e
- Type
Event
- Description
Event object.
- doAutoScroll
- Flags
Private
- Description
Auto-scrolls when dragging and the mouse is at the edge.
## Events
- beforedrag
- Description
Fires before dragging. Returning `false` to prevent dragging. Unlike {#startdrag}, this event is
fired as long as the object is clicked, regardless of whether a dragging action occurs. See also {#afterdrag}.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
Draggable component object.
- e
- Type
Event
- Description
Event object during dragging.
- afterdrag
- Description
Fires after dragging. See also {#beforedrag}.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
Draggable component object.
- e
- Type
Event
- Description
Event object during dragging.
- startdrag
- Description
Fires when dragging starts. Unlike {#beforedrag}, this event is only fired after a dragging action
occurs. See also {#enddrag}.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
Draggable component object.
- e
- Type
Event
- Description
Event object during dragging.
- enddrag
- Description
Fires when dragging ends. See also {#startdrag}.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
Draggable component object.
- e
- Type
Event
- Description
Event object during dragging.
- drag
- Description
Fires during dragging.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
Draggable component object.
- e
- Type
Event
- Description
Event object during dragging.
# Wb.Movable
Adds move functionality to components. The target component to be moved is specified by the `target` property, and the
element used to initiate movement is specified by the `handle` property.
## Class Information
- class name
Wb.Movable
- Icon
undefined
- cname
movable
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Movable
## Instance Properties
- threshold
- Type
Number
- Description
Move start threshold. Movement initiates only when the mouse has moved at least this number of
pixels horizontally or vertically.
- moveCursorOnly
- Type
Boolean
- Description
Movement is allowed only when the cursor of the dragged {#handle} element is set to `move`.
- moveX
- Type
Boolean
- Description
Whether horizontal movement is allowed.
- moveY
- Type
Boolean
- Description
Whether vertical movement is allowed.
- target
- Type
Wb.Component
- Description
The target component to be moved.
- handle
- Type
Element
- Description
The element that triggers movement actions.
- startMove
- Type
Boolean
- Description
Whether movement has started.
- disabled
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the move functionality is disabled.
## Instance Methods
- setDisabled
- Description
Sets whether the move functionality is disabled.
- Parameters
- disabled
- Type
Boolean
- Description
`true` disabled, `false` enabled.
- onDestroy
- Flags
Private
- Description
Method executed when the target component is destroyed.
- onMouseDown
- Flags
Private
- Description
Method executed when the `mousedown` event is fired on the move handle element.
- Parameters
- e
- Type
Event
- Description
Event object.
- onMouseUp
- Flags
Private
- Description
Method executed when the `mouseup` event is fired on the document.
- Parameters
- e
- Type
Event
- Description
Event object.
- onMouseMove
- Flags
Private
- Description
Method executed when the `mousemove` event is fired on the document.
- Parameters
- e
- Type
Event
- Description
Event object.
# Wb.Resizable
Applies drag handles to an element or component to make it resizable. The drag handles are inserted into the element (or
component's element) and positioned absolute.
## Class Information
- class name
Wb.Resizable
- Icon
undefined
- cname
resizable
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Resizable
## Instance Properties
- allowXY
- Type
Boolean
- Description
Whether to allow adjusting the X and Y values of the target component while resizing.
-`true`: Allowed
-`false`: Disallowed
-`null`: Auto-determined. Allowed if the parent position is 'absolute', 'relative', or 'fixed'; otherwise disallowed.
- allowHandles
- Type
String
- Description
Allowed resize directions (space-separated). Example: "s se sw" means resizing
is allowed for the bottom edge, southeast and southwest corners. Valid directions are:
-"n": North
-"e": East
-"s": South
-"w": West
-"nw": Northwest
-"ne": Northeast
-"se": Southeast
-"sw": Southwest
- target
- Type
Wb.Component
- Description
The target component to be resized.
- disableMouseEvent
- Flags
Private
- Type
Boolean
- Description
Whether to disable `onMouseMove` and `onMouseLeave` methods.
- handle
- Flags
Private
- Type
String
- Description
The current resize direction.
- cssPrefix
- Flags
Private
- Type
String
- Description
Prefix for resize CSS class names.
- snapX
- Type
Number
- Description
Horizontal resize step size.
- snapY
- Type
Number
- Description
Vertical resize step size.
- constrain
- Type
Boolean
- Description
Whether to constrain resizing within the positioned parent element. Defaults to true.
- handleBorder
- Type
Boolean
- Description
Whether to automatically add a border to the target component as the resize area for easier
resizing operations.
- disabled
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether resize functionality is disabled.
- minWidth
- Flags
Private
- Type
Number
- Description
Minimum resize width.
- minHeight
- Flags
Private
- Type
Number
- Description
Minimum resize height.
- oldWidth
- Flags
Private
- Type
Number
- Description
Width at the start of resizing.
- oldHeight
- Flags
Private
- Type
Number
- Description
Height at the start of resizing.
- doSetXY
- Flags
Private
- Type
Boolean
- Description
Whether to allow setting the X and Y values of the target component.
## Instance Methods
- close
- Description
Closes the object and disables the resize functionality of the component.
- stopResize
- Flags
Private
- Description
Stops resizing.
- getHandle
- Flags
Private
- Description
Gets the direction of the current resizable area.
- Parameters
- e
- Type
Event
- Description
Event object.
- Returns Value
- Type
String
- Description
Valid direction; returns `undefined` if not found.
- onDestroy
- Flags
Private
- Description
Method executed when the target component is destroyed.
- onMouseMove
- Flags
Private
- Description
Method executed when the mouse is moved.
- Parameters
- e
- Type
Event
- Description
Event object.
- onMouseLeave
- Flags
Private
- Description
Method executed when the mouse leaves the element.
- Parameters
- e
- Type
Event
- Description
Event object.
- onMouseDown
- Flags
Private
- Description
Method executed when the mouse is down.
- Parameters
- e
- Type
Event
- Description
Event object.
- onDocMouseUp
- Flags
Private
- Description
Method executed when the mouse button is released on the document.
- Parameters
- e
- Type
Event
- Description
Event object.
- onDocMouseMove
- Flags
Private
- Description
Method executed when the mouse moves on the document.
- Parameters
- e
- Type
Event
- Description
Event object.
## Events
- resize
- Description
Fires when the component is resized.
- Parameters
- target
- Type
Wb.Component
- Description
The target component being resized.
- resizing
- Description
Fires while resizing is in progress.
- Parameters
- target
- Type
Wb.Component
- Description
The target component being resized.
- startresize
- Description
Fires when resizing starts.
- Parameters
- target
- Type
Wb.Component
- Description
The target component being resized.
- endresize
- Description
Fires after resizing ends. Fired regardless of whether the target component's size has changed.
- Parameters
- target
- Type
Wb.Component
- Description
The target component being resized.
# Wb.Component
Component class, the base class for visual components. Each component has one or more associated DOM elements. A component
can consist of one or more inner components. Inner components are an integral part of the component itself. The child
components are independent components contained within a {#container|Wb.Container}.
## Class Information
- class name
Wb.Component
- Icon
component
- cname
component
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component
## Static Properties
- events
- Flags
Private
- Type
Object
- Description
Object of event names that need to be forwarded from {#listeners} via {#events}. The object's keys
are event names, and the values are the class property names of the elements to listen to. Set to `true` for elements
associated with the component. Setting the value to `false` explicitly cancels the forwarding of that event in the
component. This property automatically merges with the same property from all parent classes; if key names overlap,
child class keys override parent class keys.
- allEvents
- Flags
Private Read-only
- Getter
- Type
Object
- Description
The merged value of the current class's static {#!events} property and the same property from
parent classes.
- cls
- Type
String
- Description
Space-separated list of CSS class names to be added to the component's DOM elements.
Unlike the non-static {#cls} property, setting this property will not be overridden by subclasses.
- allCls
- Flags
Read-only
- Getter
- Type
String
- Description
The merged value of the current class's static {#!cls} property and the same property from
parent classes.
- defaults
- Type
String
- Description
Default properties for direct child components. Unlike the non-static {#default} property,
setting this property will not be overridden by subclasses.
- allDefaults
- Flags
Private Read-only
- Getter
- Type
String
- Description
The merged value of the current class's static {#!defaults} property and the same property from
parent classes.
## Instance Properties
- touchTip
- Flags
Code
- Type
Boolean
- Description
Whether to display the tooltip {#Wb.Tip} on mobile devices.
- tagName
- Flags
Read-only
- Type
String
- Description
The `tagName` of the component's {#el}.
- defaultAlign
- Flags
Code
- Type
String
- Description
Default alignment mode used when aligning via the {#alignTo} method.
- defaultOffset
- Flags
Code
- Type
Number[]
- Description
Default offset in pixels specified as [x, y], typically used for positioning display.
- weight
- Type
Number
- Description
Weight of the component when inserted into the {#headers}/{#footers}. A larger value means the
component is inserted earlier in the {#headers} and later in the {#footers}. The default weight value is 50.
- closeAction
- Type
Enum
- Description
Action performed when the close method is called. Defaults to "destroy".
-'hide': Call the hide method to hide the component.
-'destroy': Call the destroy method to destroy the component.
- autoDestroy
- Type
Boolean
- Description
If the component is an inner component, whether it is automatically destroyed when its {#owner}
component is destroyed. Defaults to true.
- destroyed
- Flags
Read-only
- Type
Boolean
- Description
Whether the component has been destroyed.
- autoMake
- Type
Boolean
- Description
Whether to automatically execute the {#make} method when the component's {#html} property
is set.
- noVerify
- Type
Boolean
- Description
Whether the component, along with all its inner and child components, skips validation when
verified via {#Wb.verify}.
- noValue
- Type
Boolean
- Description
Whether the component, along with all its inner and child components, skips getting their
{#value} via {#Wb.getValue}.
- allowFocus
- Type
Boolean
- Description
Whether auto-focus is enabled.
- autoSize
- Flags
Private
- Type
Enum
- Description
Whether to automatically set the component's width and height when aligned using the
{#alignTo} method.
- el
- Flags
Code
- Type
Element
- Description
The DOM element associated with the component, where the component is rendered.
- tipAutoAlign
- Flags
Code
- Type
Boolean
- Description
Whether the tooltip is automatically aligned when displayed.
- tagProperties
- Type
Object
- Description
The property configuration object directly added to the component.
- tagEvents
- Type
Object
- Description
The event configuration object directly added to the component.
- bindModule
- Type
PathString
- Description
- Hides the component if the current user lacks access to the bound module. Only valid
in the xwl module.
- noVerifyFocus
- Flags
Private
- Type
Boolean
- Description
Whether focus is prohibited after validation is performed.
- roundBorder
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display rounded borders.
- shrinkSelf
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the component is allowed to shrink:
-true: enables shrink (flex-shrink:1)
-false: disables shrink (flex-shrink:0)
-null: remove the explicitly added flex-shrink class, restoring default behavior.
- tplData
- Type
Object
- Description
Template data. Used to populate the {#tpl} property. See {#update} for dynamic sets.
- tpl
- Flags
Key
- Getter
- Type
Wb.Template
- Setter
- Type
HtmlString|Wb.Template|Function
- Description
HTML {#templat|Wb.Template}, used to generate the HTML content within
the component.
- tplFn
- Getter
- Type
Wb.Template
- Setter
- Type
Function
- Description
HTML template function. Same as the {#tpl} property.
- focusable
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the component can receive focus by click. See {#tabIndex} for related property.
- activated
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current component has focus.
- subTitle
- Flags
Code
- Getter
- Type
String
- Setter
- Type
String
- Description
The component's subtitle, which will be displayed in the format of "Title - Subtitle". Only valid
when the component has a "title" property.
- resizeListeners
- Flags
Private
- Type
Array
- Description
List of resize listeners.
- listeners
- Flags
Key
- Getter
- Type
Array
- Description
The list of listener configuration objects. To get resize listeners, see {#resizeListeners}.
- Setter
- Type
Object
- Description
Event listeners configuration object. See {#mon} for details.
- itemIndex
- Flags
Read-only
- Getter
- Type
Number
- Description
The position index of the current component in its parent container. Returns `-1` if no parent.
- isFirstItem
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether it is the first child component of the container.
- isLastItem
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether it is the last child component of the container.
- renderEl
- Flags
Code
- Getter
- Type
Element
- Setter
- Type
Element
- Description
Renders the current component under this element.
- frame
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to show component's border frame effect.
- owned
- Flags
Read-only
- Getter
- Type
Set
- Description
Set of inner components.
- owner
- Flags
Code
- Getter
- Type
Wb.Component
- Setter
- Type
Wb.Component
- Description
The owner of the component. When the owner is destroyed, all owned components are also
destroyed.
- parent
- Flags
Read-only
- Type
Wb.Component
- Description
The parent component. Both descendant and inner components have the same parent
property.
- visible
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the component is visible (CSS display). Setting this property fires the {#*show}/{#*hide}
events. Use {#isVisible} method to deeply check if the current component is visible. See also {#appeared}.
- appeared
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the component is visible (CSS visibility). Setting this property does not fire the
{#*show}/{#*hide} events. Use {#isAppeared} method to deeply check if the current component is visible. See also
{#visible}.
- contextMenu
- Getter
- Type
Wb.Menu
- Setter
- Type
Wb.Menu|Object
- Description
Context menu displayed when right-clicking the component. After setting a new menu,
the menu instance becomes an inner component of the current component. Note: The original menu is not automatically
destroyed when a new menu is set. See {#contextTarget} for the element associated with the context menu.
- zIndex
- Getter
- Type
Number
- Setter
- Type
Number
- Description
The z-index value of the component.
- plainIcon
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether all icons under the component use a unified plain color.
- droppable
- Type
Boolean/String
- Description
Whether {#draggable} objects are allowed to be dropped within the current
component. If a string, it means dropping is allowed and {#dropGroup} is set to this value.
- dropGroup
- Type
String
- Description
Drop group name. Only components from the same dropGroup are allowed to be dropped.
- draggableComp
- Flags
Read-only
- Type
Wb.Draggable
- Description
The draggable object set for the current component.
- draggable
- Getter
- Type
Boolean|Object
- Setter
- Type
Boolean|Object
- Description
Sets whether the component is draggable. The {#Wb.Draggable} object can be accessed via
{#draggableComp}. Set {#droppable} to `true` to allow dropping after dragging.
-Boolean: Whether draggable.
-Object: Configuration object for {#Wb.Draggable}.
- movableComp
- Flags
Read-only Desktop
- Type
Wb.Movable
- Description
The movable object set for the current component.
- movable
- Getter
- Type
Boolean|Object
- Setter
- Type
Boolean|Object
- Description
Sets whether the component is movable. If movable, the {#Wb.Movable} object can be accessed
via {#movableComp}.
-Boolean: Whether movable.
-Object: Configuration object for {#Wb.Movable}.
- resizableComp
- Flags
Read-only Desktop
- Type
Wb.Resizable
- Description
The resize object for the current component.
- resizable
- Getter
- Type
Boolean|String|Object
- Setter
- Type
Boolean|String|Object
- Description
Sets whether the component is resizable. When resizing is enabled, it defaults
to adding a border as a resize handle. If no border is needed, set {#Wb.Resizable.handleBorder} to `false`. The
component's {#Wb.Resizable} object can be accessed via {#resizableComp}.
-Boolean: Whether enable resizable in all directions.
-String: resizable directions {#Wb.Resizable.allowHandles}.
-Object: Configuration object for {#Wb.Resizable}.
- noWrap
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the text inside the component is not wrapped.
- full
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the current component is displayed covering the entire container.
- rect
- Flags
Code
- Getter
- Type
Object
- Setter
- Type
Object
- Description
The bounding rectangle `{x, y, width, height}` of the component.
- x
- Flags
Code
- Getter
- Type
Number
- Setter
- Type
Number|String
- Description
The x-coordinate of the component. Numeric value is in px.
- y
- Flags
Code
- Getter
- Type
Number
- Setter
- Type
Number|String
- Description
The y-coordinate of the component. Numeric value is in px.
- xy
- Flags
Code
- Getter
- Type
Number[]
- Setter
- Type
Number[]|String[]
- Description
The [x, y] coordinate values of the component. Numeric value is in px.
- width
- Flags
Key
- Getter
- Type
Number
- Setter
- Type
Number|String
- Description
The width of the component. Numeric value is in px.
- height
- Flags
Key
- Getter
- Type
Number
- Setter
- Type
Number|String
- Description
The height of the component. Numeric value is in px.
- minWidth
- Getter
- Type
String
- Setter
- Type
Number|String
- Description
The minimum width of the component. Numeric value is in px.
- minHeight
- Getter
- Type
String
- Setter
- Type
Number|String
- Description
The minimum height of the component. Numeric value is in px.
- maxWidth
- Getter
- Type
String
- Setter
- Type
Number|String
- Description
The maximum width of the component. Numeric value is in px.
- maxHeight
- Getter
- Type
String
- Setter
- Type
Number|String
- Description
The maximum height of the component. Numeric value is in px.
- margin
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
Component margin. Numeric value is in px.
-true: Sets all margins to the specified value.
-false: No margin.
-'top': Sets only the top margin.
-'right': Sets only the right margin.
-'bottom': Sets only the bottom margin.
-'left': Sets only the left margin.
- padding
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
Component padding. Numeric value is in px.
-true: All padding to specified value.
-false: No padding.
-'top': Only top padding.
-'right': Only right padding.
-'bottom': Only bottom padding.
-'left': Only left padding.
- tabIndexEl
- Flags
Private
- Type
Element[]
- Description
The elements with tabIndex set in the component. Defaults to {#focusEl}.
- focusEl
- Flags
Private
- Type
Element
- Description
The element to set focus on in the component. Defaults to the component's {#el}.
- tabIndex
- Getter
- Type
Enum|Number
- Setter
- Type
Enum|Number
- Description
The tabIndex of the component.
--1: -1.
-0: 0.
-1: 1.
-2: 2.
-null: `null` value; for input elements, it will be set to -1, and for others, the tabIndex attribute will be removed.
-undefined: `undefined` value means no setting.
- position
- Flags
Code
- Getter
- Type
String
- Setter
- Type
String
- Description
Component positioning method.
- fontSize
- Getter
- Type
String
- Setter
- Type
Number|String
- Description
Component font size
- color
- Getter
- Type
ColorString
- Setter
- Type
ColorString
- Description
Font color. `true` use "active color"; `false` use default color.
- background
- Getter
- Type
ColorString
- Setter
- Type
ColorString
- Description
Background color. `true` use "fixed color"; `false` use default color.
- border
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
Component border. Numeric value is in px.
-true: All borders "thin".
-false: No border.
-'top': Only top border "thin".
-'right': Only right border "thin".
-'bottom': Only bottom border "thin".
-'left': Only left border "thin".
- borderTop
- Flags
Code
- Getter
- Type
String
- Setter
- Type
String
- Description
Border top.
- borderRight
- Flags
Code
- Getter
- Type
String
- Setter
- Type
String
- Description
Border right.
- borderBottom
- Flags
Code
- Getter
- Type
String
- Setter
- Type
String
- Description
Border bottom.
- borderLeft
- Flags
Code
- Getter
- Type
String
- Setter
- Type
String
- Description
Border left.
- alignSelf
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The value of CSS `align-self` for the current component.
-'start': Align to the start
-'center': Align to the center
-'end': Align to the end
-'baseline': Align to the text baseline
-'stretch': Stretch to fill the container
- justifySelf
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The value of CSS `justify-self` for the current component.
-'start': Align to the start
-'center': Align to the center
-'end': Align to the end
-'baseline': Align to the text baseline
-'stretch': Stretch to fill the container
- gridArea
- Getter
- Type
String
- Setter
- Type
String
- Description
The value of CSS `grid-area` for the current component.
Example:
span 2 / span 3 // span 2 rows and 3 cols
- gridColumn
- Flags
Key
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
The value of CSS `grid-column` for the current component.
Example:
span 3 // span 3 cols
-'span 1': Span 1 col
-'span 2': Span 2 cols
-'span 3': Span 3 cols
-'span 4': Span 4 cols
-'span 5': Span 5 cols
-'span 6': Span 6 cols
-'span 7': Span 7 cols
-'span 8': Span 8 cols
-'span 9': Span 9 cols
-'span 10': Span 10 cols
-'1 / -1': Span all cols
-'-2 / -1': Last col
- gridRow
- Flags
Key
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
The value of CSS `grid-row` for the current component.
Example:
span 2 // span 2 rows
-'span 1': Span 1 row
-'span 2': Span 2 rows
-'span 3': Span 3 rows
-'span 4': Span 4 rows
-'span 5': Span 5 rows
-'span 6': Span 6 rows
-'span 7': Span 7 rows
-'span 8': Span 8 rows
-'span 9': Span 9 rows
-'span 10': Span 10 rows
-'1 / -1': Span all rows
-'-2 / -1': Last row
- scrollEl
- Flags
Private
- Getter
- Type
Element
- Setter
- Type
Element
- Description
The scrollable element representing the component.
- autoScroll
- Flags
Key
- Getter
- Type
Boolean|String
- Setter
- Type
Boolean|String
- Description
Whether to display scrollbars when the component overflows.
- previousSibling
- Flags
Read-only
- Getter
- Type
Wb.Component
- Description
Gets the previous sibling component.
- nextSibling
- Flags
Read-only
- Getter
- Type
Wb.Component
- Description
Gets the next sibling component.
- previousValidSibling
- Flags
Read-only
- Getter
- Type
Wb.Component
- Description
Finds the previous visible and enabled sibling component in a circular manner; returns null
if none is found.
- nextValidSibling
- Flags
Read-only
- Getter
- Type
Wb.Component
- Description
Finds the next visible and enabled sibling component in a circular manner; returns null
if none is found.
- cid
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- cls
- Getter
- Type
String
- Description
CSS class name of the component's {#el}, consistent with the className property value.
- Setter
- Type
String
- Description
Space-separated CSS class names to add to the component's {#el}.
- style
- Getter
- Type
String
- Description
Style string, consistent with the `style.cssText` property.
- Setter
- Type
String
- Description
Multiple semicolon-separated styles to be added to the component's {#el}.
- disabledEls
- Flags
Private
- Type
Element[]
- Description
The list of elements to be disabled when the component is disabled.
- disabled
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the component is disabled.
- rippleOnClick
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display a ripple effect when the component is clicked.
- rippleRange
- Flags
Code
- Type
Boolean/Number/Object
- Description
The bounding range of the ripple effect.
-Boolean: `true` indicates the range is 100*100px.
-Number: Both width and height of the range are limited to this value in px.
-Object: The range is {width, height} in px.
- rippleCls
- Flags
Private
- Type
String
- Description
Additional CSS class name for the ripple effect.
- children
- Flags
Read-only
- Getter
- Type
Proxy
- Description
A proxy object for accessing inner components or descendant components via {#down} method.
Example:
let button = panel.children.myButton; // "myButton" is `cid` property
- headers
- Getter
- Type
Wb.Container|Wb.Toolbar|Wb.Component|Object|Array
- Setter
- Type
Wb.Container|Wb.Toolbar|Wb.Component|Object|Array
- Description
The inner components added to the header of the component,
which can be a component configuration object, a component instance, or an array consisting of both.
- footers
- Getter
- Type
Wb.Container|Wb.Toolbar|Wb.Component|Object|Array
- Setter
- Type
Wb.Container|Wb.Toolbar|Wb.Component|Object|Array
- Description
The inner components added to the footer of the component,
which can be a component configuration object, a component instance, or an array consisting of both.
- textEl
- Flags
Private
- Getter
- Type
Element
- Setter
- Type
Element
- Description
The element for setting {#html} and {#text} properties. Defaults to {#el}.
- html
- Getter
- Type
HtmlString
- Setter
- Type
HtmlString
- Description
The `innerHTML` property of the component's {#textEl}.
- text
- Getter
- Type
String
- Setter
- Type
String
- Description
The `textContent` property of the component's {#textEl}.
- flex
- Flags
Key
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The `flex` CSS style property.
- textSelectable
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the component text is selectable. `null` means auto.
- floating
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the component element is floating. Floating means the component element is positioned
with absolute positioning. If the component has no parent component, it will be added to {#globalThis.bodyEl}.
- tip
- Flags
Key Desktop
- Getter
- Type
Mix|String|Function|Object|Wb.Tip
- Setter
- Type
Mix|String|Function|Object|Wb.Tip
- Description
The component's {#tip|Wb.Tooltip}.
-String: The tip text, which is displayed using a shared {#tip|Wb.tip} instance.
-Function: Returns the tip text by this method, which is displayed using a shared {#tip|Wb.tip} instance. The available\
parameter `comp` is the component associated with the tip, and `this` to the tip instance.
-Object: A {#tip|Wb.tip} configuration object. This object will create a new tip instance, which will be destroyed when\
the component is destroyed.
-Wb.Tip: Use the tip instance. By default, this tip instance will not be destroyed when the component is destroyed; auto\
destroy can be enabled by setting {#owner} property of the tip instance.
- errorTip
- Flags
Desktop
- Getter
- Type
Mix|String|Function|Object|Wb.Tip
- Setter
- Type
Mix|String|Function|Object|Wb.Tip
- Description
The component's {#error tip|Wb.ErrorTip}. See {#tip} for details.
- overflowTip
- Flags
Desktop
- Getter
- Type
Mix|String|Function|Object|Wb.Tip
- Setter
- Type
Mix|String|Function|Object|Wb.Tip
- Description
The component's {#overflow tip|Wb.OverflowTip}. See {#tip} for details.
## Instance Methods
- some
- Description
Determines whether at least one child component matches. See {#Set.some} for details.
- every
- Description
Determines whether all child components match. See {#Set.every} for details.
- bubbleSome
- Description
Determines whether at least one component in all ancestor components matches. See {#Wb.some} and {#Wb.bubble} for
details, with `object` implicitly set to this component.
- bubbleEvery
- Description
Determines whether all ancestor components match. See {#Wb.every} and {#Wb.bubble} for details, with `object`
implicitly set to this component.
- cascadeSome
- Description
Determines whether at least one component in the descendant components matches. See {#Wb.some} and {#Wb.cascade} for
details, with `object` implicitly set to this component.
- cascadeEvery
- Description
Determines whether all descendant components match. See {#Wb.every} and {#Wb.cascade} for details, with `object`
implicitly set to this component.
- init
- addProxyEvent
- Description
Adds events that need to be forwarded from {#listeners} via {#events}. The names of events to be proxied are specified
by the static {#!events} property.
- Parameters
- eventName
- Type
String
- Description
The name of the event to be proxied.
- removeProxyEvent
- Description
Removes events that need to be forwarded from {#listeners} via {#events}. The names of events to be proxied are specified
by the static {#!events} property.
- Parameters
- eventName
- Type
String
- Description
The name of the event whose proxy is to be removed.
- update
- Description
Applies the specified data to the template based on the {#tpl} configuration, then updates the resulting HTML to the
current component. Set the {#tplData} property for static template data.
- Parameters
- data
- Type
Object
- Description
The data object to be applied to the template.
- setMaxZIndex
- Description
Sets the zIndex of the current component to the maximum value within the specified range. If the zIndex value exceeds
the range, the zIndex values of all related components will be reset.
- listenerTrigger
- Flags
Private
- Description
Event trigger for proxying events by DOM element listeners.
- onFocusTapUp
- Flags
Private
- Description
Method executed when the mouse button is released.
- Parameters
- e
- Type
Event
- Description
Event object.
- onFocusTapDown
- Flags
Private
- Description
Method executed when the mouse button is down.
- Parameters
- e
- Type
Event
- Description
Event object.
- findChildByEl
- Description
Finds the inner component or direct child component that contains the specified element.
- Parameters
- el
- Type
Element
- Description
The containing element.
- Returns Value
- Type
Wb.Component
- Description
The found component or null if not found.
- onClickPreview
- Description
Adds click-to-preview for associated images. Use {#unClickPreview} to remove.
- Parameters
- el
- optional
true
- Type
Element
- Description
Target element. Defaults to the component's {#el}.
- unClickPreview
- Description
Removes click-to-preview for associated images. Use {#onClickPreview} to add.
- Parameters
- el
- optional
true
- Type
Element
- Description
Target element. Defaults to the component's {#el}.
- onPreviewElClick
- Flags
Private
- Description
Method executed when the image preview element is clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- scrollToTop
- Description
Scrolls the component's scrollbar to the top.
- scrollToBottom
- Description
Scrolls the component's scrollbar to the bottom.
- scrollToLeft
- Description
Scrolls the component's scrollbar to the leftmost position.
- scrollToRight
- Description
Scrolls the component's scrollbar to the rightmost position.
- resetScroll
- Description
Resets the horizontal and vertical scroll to 0.
- mon
- Description
Registers event listeners for elements. Listeners are automatically unregistered when the component is destroyed. It
allows only one registration for listeners with the same element, event name, and function; subsequent duplicate
registrations will be ineffective. See {#%addEventListener|api:EventTarget/addEventListener} for details. Use {#mun}
method to unregister event listeners.
Example:
comp.mon('click', fn);
comp.mon(el, 'click', e => { doSomething(); }, scope, { once: true, capture: true });
comp.mon({el: el, scope: comp, click: fn, mouseover: {fn: overFn, el: otherEl, once: true}});
- Parameters
- configs
- Type
String|Element|Object
- Description
Event name, target element or event configuration object.
- .el
- optional
true
- Type
Element
- Description
Target DOM element to listen on; defaults to the component's {#el}.
- .scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- .once
- optional
true
- Type
Boolean
- Description
Whether the listener is executed only once. If set to `true`, the listener is unregistered after
the first execution.
- .capture
- optional
true
- Type
Boolean
- Description
Event propagation order for multiple elements: `false` for bottom-up (bubbling), `true` for
top-down (capture).
- .passive
- optional
true
- Type
Boolean
- Description
If `true`, the listener never calls `preventDefault()`; otherwise, the call is ineffective
and a warning is issued.
- .fn
- optional
true
- Type
Function
- Description
Listener function.
- .*
- optional
true
- Type
Function|Object
- Description
Listener functions or `configs` objects. The keys are any event names except
above reserved keywords. Entire object is passed as `options` if it is an object.
- eventName
- optional
true
- Type
String|Function
- Description
Event name or listener function. If `configs` is an element, this parameter is the
event name; otherwise, it is the listener function.
- fn
- optional
true
- Type
Function|Object
- Description
Listener function or scope object. If `configs` is an element, this parameter is the
listener function; otherwise, it is the scope object.
- .e
- optional
true
- Type
Event
- Description
Event object.
- .options
- optional
true
- Type
Object
- Description
Passed `options` parameter.
- scope
- optional
true
- Type
Object
- Description
If `configs` is an element, this parameter is the `this` context for the listener; otherwise,
it is the `options` object.
- options
- optional
true
- Type
Object
- Description
Options object used as the argument for both `addEventListener` and `fn`.
- mun
- Description
Unregisters event listeners registered by the {#mon} method. See {#mon} for details.
Example:
comp.mun('click', fn);
comp.mun(el, 'click', fn);
comp.mun({el: el, click: fn, mouseover: {fn: overFn, el: otherEl}});
- Parameters
- configs
- Type
String|Element|Object
- Description
Event name, target element or event configuration object.
- .el
- optional
true
- Type
Element
- Description
Target DOM element to listen on; defaults to the component's {#el}.
- .fn
- optional
true
- Type
Function
- Description
Listener function.
- .*
- optional
true
- Type
Function|Object
- Description
Listener functions or `configs` objects. The keys are any event names except above
reserved keywords.
- eventName
- optional
true
- Type
String|Function
- Description
Event name or listener function. If `configs` is an element, this parameter
is the event name; otherwise, it is the listener function.
- fn
- optional
true
- Type
Function|Object
- Description
Listener function variable.
- setListeners
- Description
Register or unregister listeners.
- Parameters
- status
- Type
Boolean
- Description
`true` for registration, `false` for unregistration.
- args
- optional
true
- Type
...Object
- Description
Parameters to be passed to the {#mon}/{#mun} method.
- dispatchEvent
- Description
Triggers the DOM event with the specified name that was registered by the {#mon} method.
Example:
let continueFlag = container.dispatchEvent('click', e, el);
- Parameters
- eventName
- Type
String
- Description
The name of the event.
- e
- optional
true
- Type
Event
- Description
The event object. Defaults to an empty object if omitted.
- el
- optional
true
- Type
Element
- Description
The element that triggers the listener event. Defaults to the component's {#el}.
- extraOptions
- optional
true
- Type
Object
- Description
Event options, this value will be merged into the original `options` parameter.
- Returns Value
- Type
Boolean
- Description
`false` if any listener returns `false`, otherwise `true`.
- clearListeners
- Description
Clears all {#listeners} of the current component.
- close
- Description
Performs the closing operation according to the {#closeAction}, hiding or destroying the component.
- Returns Value
- Type
Boolean
- Description
`true` if the closing operation is successful, `false` if the closing is cancelled.
- renderTo
- Description
Renders the current component into the specified element.
- Parameters
- el
- Type
Element
- Description
The target element to render to.
- replace
- optional
true
- Type
Boolean
- Description
Whether to replace the element. `true` replaces the element, `false` appends to the element.
- applyRefer
- Description
Adds references of all inner components and descendant components with the `cid` attribute to the specified object. The
added member key is the `cid` attribute of the component, and the value is the component instance.
- Parameters
- object
- optional
true
- Type
Object
- Description
The target object to add references to. Defaults to the component itself.
- getRefer
- Description
Gets an object composed of references to all inner components and descendant components with the `cid` attribute. The
key of each added member is the `cid` attribute value of the component, and the value is the component instance.
- applyCls
- Description
Applies CSS class to an element as an attribute value.
- Parameters
- value
- Type
String|Boolean
- Description
The attribute value. `null` clears the CSS class.
- name
- Type
String
- Description
The attribute name.
- prefix
- Type
String
- Description
The CSS class prefix.
- el
- optional
true
- Type
Element|Wb.Component
- Description
The target element, defaults to the current component's {#el}.
- reverse
- optional
true
- Type
Boolean
- Description
When `value` is a Boolean, `true` means removing the class, `false` means adding the class.
- Returns Value
- Type
Boolean
- Description
`true` for successful setting, `false` for unsuccessful setting.
- focus
- Description
Sets focus to the component's {#el}.
- Parameters
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrolling when setting focus.
- focusOnly
- Description
Sets focus to the component's {#el} and prevents scrolling.
- focusFirst
- Description
Sets focus to the first focusable descendant component with the {#allowFocus} property. If no focusable component
is found, focus will be set to the component itself.
- Parameters
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrolling when setting focus.
- mask
- Description
Adds a loading mask to the component. See {#Wb.mask} for details.
- unmask
- Description
Removes the mask added via the {#mask} method. See {#Wb.unmask} for details.
- progress
- Description
Adds a mask to the component, and updates the progress bar position or the label text displayed on the mask. See
{#Wb.progress} for details.
- alignTo
- Description
Aligns the component with the target component/element in the specified manner. See {#Element.alignTo} for details.
Example:
// Align the top-left corner of the current component with the bottom-left corner of the target component,
// and constrain the component to the viewport.
comp.alignTo(destComp, "tl-bl?"); // tl- can be omitted
// Align the bottom-left corner of the current component with the center of the target component,
// and set x-offset to -8.
comp.alignTo(destComp, "bl-c", [-8, 0]);
- Parameters
- item
- Type
Wb.Component|Element
- Description
The target component or element to align with.
- position
- optional
true
- Type
String
- Description
Alignment mode. See `position` of {#Element.alignTo} for details.
- offset
- optional
true
- Type
Number[]
- Description
[x, y] specified offset values.
- minXY
- optional
true
- Type
Number[]
- Description
[x, y] specified minimum values.
- center
- Description
Displays the current component at the horizontal and vertical center of the {#Element.posParent} element.
- intoView
- Description
Scrolls the current component into the nearest visible viewport.
- intoViewCenter
- Description
Scrolls the current component to the center of the visible viewport.
- Parameters
- smooth
- Type
Boolean
- Description
Whether to enable smooth scrolling.
- intoVCenter
- Description
Scrolls the current component to the vertical center of the visible viewport.
- intoHCenter
- Description
Scrolls the current component to the horizontal center of the visible viewport.
- setVisible
- Description
Sets whether the component is visible (CSS display). See {#visible} property for details.
- Parameters
- visible
- Type
Boolean
- Description
Whether the element is visible.
- isVisible
- Description
Deeply checks whether the component is {#visible}. This method traverses all ancestor components.
- Returns Value
- Type
Boolean
- Description
`true` for visible, `false` otherwise.
- hide
- Description
Shows the component. See {#visible} for details.
- Returns Value
- Type
Wb.Component
- Description
The component itself.
- show
- Description
Hides the component. See {#visible} for details.
- Returns Value
- Type
Wb.Component
- Description
The component itself.
- setAppeared
- Description
Sets whether the component is visible (CSS visibility). See {#appeared} property for details.
- Parameters
- visible
- Type
Boolean
- Description
Whether the element is visible.
- isAppeared
- Description
Deeply checks whether the component is {#appeared}. This method traverses all ancestor components.
- Returns Value
- Type
Boolean
- Description
`true` for visible, `false` otherwise.
- onContextmenu
- Flags
Private
- Description
Method executed when the component's contextmenu event is fired.
- Parameters
- e
- Type
Event
- Description
Event object.
- showAt
- Description
Shows the component at the specified position.
- Parameters
- x
- Type
Number|String
- Description
The x-coordinate. Numeric value is in px units.
- y
- Type
Number|String
- Description
The y-coordinate. Numeric value is in px units.
- constrain
- optional
true
- Type
Boolean
- Description
Whether to constrain display within the viewport. Defaults to `true`.
- showBy
- Description
Shows the component with specified alignment.
Example:
// Show comp, align its top-left corner with the bottom-left corner of panel, and constrain comp to the viewport.
comp.showBy(panel, "tl-bl?");
- Parameters
- refItem
- Type
Wb.Component|Element
- Description
The reference component or element. The current component aligns with this
component/element.
- position
- optional
true
- Type
String
- Description
Alignment mode. Defaults to {#defaultAlign}. See `position` of {#Element.alignTo} for details.
- offset
- optional
true
- Type
Number[]
- Description
[x, y] The offset values.
- minXY
- optional
true
- Type
Number[]
- Description
[x, y] The minimum values.
- toggleShow
- Description
Toggles the component's by {#show}/{#hide}.
- toggleShowBy
- Description
Toggles the component's by {#showBy}/{#hide}.
- addEl
- Description
Creates a new element and appends it to the component's {#el} element.
Example:
let el = comp.addEl('my-cls');
- Parameters
- className
- Type
String
- Description
CSS class name for the new element.
- tagName
- optional
true
- Type
String|Number
- Description
Tag name of the new element, defaults to 'div'. If a number is provided, it is
treated as the `weight` parameter.
- weight
- optional
true
- Type
Number
- Description
Positional weight of the element; higher values appear later. Elements without a `weight`
value default to 50. If omitted, the element is appended last.
- Returns Value
- Type
Element
- Description
The newly created element.
- addTag
- Description
Creates a new element and appends it to the component's {#el} element without CSS class name.
Example:
let el = comp.addTag('span');
- Parameters
- tagName
- optional
true
- Type
String|Number
- Description
Tag name of the new element, defaults to 'div'. If a number is provided, it is
treated as the `weight` parameter.
- weight
- optional
true
- Type
Number
- Description
Positional weight of the element; higher values appear later. Elements without a `weight`
value default to 50. If omitted, the element is appended last.
- Returns Value
- Type
Element
- Description
The newly created element.
- highlight
- Description
Generates a highlight effect that covers the entire component. See {#Element.highlight} for details.
- getSibling
- Description
Gets the previous/next sibling component of the current component.
Example:
let foo = bar();
- Parameters
- offset
- Type
Number
- Description
The offset position (positive for next, negative for previous).
- Returns Value
- Type
Wb.Component
- Description
The found component or null if not found.
- travelSibling
- Description
Finds the next or previous sibling component with circular traversal; returns null if it loops back to itself without
finding a valid sibling.
- Parameters
- next
- optional
true
- Type
Boolean
- Description
`false` returns the previous component, `true` returns the next component.
- allowHidden
- optional
true
- Type
Boolean
- Description
Allows returning hidden components.
- allowDisabled
- optional
true
- Type
Boolean
- Description
Allows returning disabled components.
- Returns Value
- Type
Wb.Component
- Description
The found component or null if not found.
- addCls
- Description
Add the specified class name to the component's {#el}.
- Parameters
- cls
- Type
String
- Description
The class name to add.
- removeCls
- Description
Remove the specified class name from the component's {#el}.
- Parameters
- cls
- Type
String
- Description
The class name to remove.
- setCls
- Description
Adds or removes a CSS class name on the component's {#el}.
- Parameters
- enabled
- Type
Boolean
- Description
`true` to add the class, `false` to remove it.
- cls
- Type
String
- Description
CSS class name to add or remove.
- toggleCls
- Description
Toggles a CSS class name on the component's {#el}. Removes the class if it exists, otherwise adds it.
- Parameters
- cls
- Type
String
- Description
CSS class name to toggle.
- containsCls
- Description
Determines whether the component's {#el} contains the specified CSS class name.
- Parameters
- cls
- Type
String
- Description
CSS class name to check.
- Returns Value
- Type
Boolean
- Description
`true` if the class exists, `false` otherwise.
- getStyle
- Description
Gets the component's {#el} CSS property value.
- Parameters
- property
- Type
String
- Description
CSS property name.
- Returns Value
- Type
String
- Description
CSS property value.
- setStyle
- Description
Sets the component's {#el} CSS property value.
- Parameters
- property
- Type
String
- Description
CSS property name.
- value
- Type
Object
- Description
CSS property value.
- priority
- optional
true
- Type
String
- Description
Priority string (e.g., "important").
- removeStyle
- Description
Removes the component's {#el} CSS property.
- Parameters
- property
- Type
String
- Description
CSS property name.
- onDisableFocusIn
- Flags
Private
- Description
Method executed when the disabled component receives focus.
- Parameters
- e
- Type
Event
- Description
The event object.
- setDisabled
- Description
Sets whether the component is disabled.
- Parameters
- disabled
- Type
Boolean
- Description
Whether to disable the component.
- rippleEffect
- Flags
Private
- Description
Displays a ripple effect that covers the component's bounds, centered at the mouse click position of the event.
- Parameters
- e
- Type
Event
- Description
The event object.
- each
- Description
Traverses the inner/child components, executing the given method for each component.
Example:
panel.each(item => console.log(item));
- Parameters
- fn
- Type
Function
- Description
Function to execute. Traversal will be interrupted if `false` is returned.
- fn.item
- Type
Wb.Component
- Description
Current component.
- fn.index
- Type
Number
- Description
Current index. Only valid when traversing child components.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- reverse
- optional
true
- Type
Boolean
- Description
Whether to iterate in reverse, `true` for reverse. Only valid when traversing child components.
- whole
- optional
true
- Type
Boolean
- Description
Whether to fully traverse inner (intrinsic) and child (lower-level) components:
-`true`: full traversal.
-`false`: traverse only inner components.
-`null`: traverse only child components. Default value.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- eachWhole
- Description
Traverses the component, executing the given method for each inner and child component. See {#each} for details.
- eachOwned
- Description
Traverses the component, executing the given method for each inner component. See {#each} for details.
- cascade
- Description
Recursively traverses the inner/descendant components, executing the function for each component.
Example:
panel.cascade(item => console.log(item));
- Parameters
- fn
- Type
Function
- Description
Function to execute. Stops traversal if returns false; skips child components if returns null.
- fn.item
- Type
Wb.Component
- Description
Current component.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- reverse
- optional
true
- Type
Boolean
- Description
Whether to traverse sibling items in reverse. Only valid when traversing child components.
- includeSelf
- optional
true
- Type
Boolean
- Description
Whether to include the component itself when traversing.
- whole
- optional
true
- Type
Boolean
- Description
Whether to fully traverse inner (intrinsic) and child (lower-level) components:
-`true`: full traversal.
-`false`: traverse only inner components.
-`null`: traverse only child components. Default value.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- cascadeSelf
- Description
Recursively traverses the current component and all its inner/descendant components, executing the function for each
component. Params: (`fn`, `scope`, `reverse`, `whole`). See {#cascade} for details.
- cascadeWhole
- Description
Recursively traverses the inner and descendant components, executing the function for each component. Params:
(`fn`, `scope`, `reverse`). See {#cascade} for details.
- cascadeSelfWhole
- Description
Recursively traverses the current component and all its inner and descendant components, executing the function for each
component. Params: (`fn`, `scope`, `reverse`). See {#cascade} for details.
- bubble
- Description
Traverses upward from this component to the root component, executing the given method for each component.
Example:
panel.bubble(item => console.log(item));
- Parameters
- fn
- Type
Function
- Description
Function to execute. Traversal will be interrupted if `false` is returned.
- fn.item
- Type
Wb.Component
- Description
Current component.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the current component itself during traversal.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- bubbleParent
- Description
Traverses upward from this component (excluding itself) to the root component, executing the given method for each
component. See {#bubble} for details.
- down
- Description
Recursively traverses downward to find matching inner/descendant component(s) via `cid` property or a function.
Example:
let comp = panel.down('nameText');
// comp is the first component with `cid` "nameText" under the panel component
- Parameters
- cid
- Type
String|Function
- Description
The `cid` property of the component. If the value is a function, see {#downBy}.
- includeSelf
- optional
true
- Type
Boolean
- Description
Whether to include the component itself during traversal.
- whole
- optional
true
- Type
Boolean
- Description
Whether to fully traverse inner (intrinsic) and child (lower-level) components:
-`true`: full traversal.
-`false`: traverse only inner components.
-`null`: traverse only child components. Default value.
- queryAll
- optional
true
- Type
Boolean
- Description
Whether to find all matching components. `true` for all, `false` for the first one.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The matching component(s). `null` (queryAll=false) or an empty array (queryAll=true)
if not found.
- downAll
- Description
Recursively traverses downward to find all matching inner/descendant components via `cid` property or a function. Params:
(`cid`, `includeSelf`, `whole`). See {#down} for details.
- downWhole
- Description
Recursively traverses downward to find the first matching inner or descendant component via `cid` property or a
function. Params: (`cid`, `includeSelf`). See {#down} for details.
- downAllWhole
- Description
Recursively traverses downward to find all matching inner and descendant components via `cid` property or a
function. Params: (`cid`, `includeSelf`). See {#down} for details.
- downBy
- Description
Recursively traverses downward to find matching inner/descendant component(s) via the specified function.
Example:
let comp = panel.downBy(item => item.foo == 'bar');
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- .item
- Type
Wb.Component
- Description
Current component.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- includeSelf
- optional
true
- Type
Boolean
- Description
Whether to include the component itself during traversal.
- whole
- optional
true
- Type
Boolean
- Description
Whether to fully traverse inner (intrinsic) and child (lower-level) components:
-`true`: full traversal.
-`false`: traverse only inner components.
-`null`: traverse only child components. Default value.
- queryAll
- optional
true
- Type
Boolean
- Description
Whether to find all matching components. `true` for all, `false` for the first one.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The matching component(s). `null` (queryAll=false) or an empty array (queryAll=true)
if not found.
- downAllBy
- Description
Recursively traverses downward to find all matching inner/descendant components via the specified function. Params:
(`fn`, `scope`, `includeSelf`, `whole`). See {#downBy} for details.
- downWholeBy
- Description
Recursively traverses downward to find the first matching inner or descendant component via the specified
function. Params: (`fn`, `scope`, `includeSelf`). See {#downBy} for details.
- downAllWholeBy
- Description
Recursively traverses downward to find all matching inner and descendant components via the specified function. Params:
(`fn`, `scope`, `includeSelf`). See {#downBy} for details.
- up
- Description
Traverses upward to find matching ancestor component(s) via the specified `cid` property or function.
Example:
let panel = text.up('myPanel');
- Parameters
- cid
- Type
String|Function
- Description
The `cid` property of the component. If the value is a function, see {#upBy}.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the component itself during traversal.
- queryAll
- optional
true
- Type
Boolean
- Description
Whether to find all matching components. `true` for all, `false` for the first one.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The matching component(s). `null` (queryAll=false) or empty array (queryAll=true)
if not found.
- upAll
- Description
Traverses upward to find all matching ancestor components via the specified `cid` property or function. Params:
(`cid`, `excludeSelf`). See {#up} for details.
- upBy
- Description
Traverses upward to find matching ancestor component(s) via the specified function.
Example:
let panel = text.upBy(item => item.foo == 'bar');
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- .item
- Type
Wb.Component
- Description
Current component.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the component itself during traversal.
- queryAll
- optional
true
- Type
Boolean
- Description
Whether to find all matching components: `true` for all, `false` for the first one.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The matching component(s). `null` (queryAll=false) or empty array (queryAll=true)
if not found.
- upAllBy
- Description
Traverses upward to find all matching ancestor components via the specified function. Params:
(`fn`, `scope`, `excludeSelf`). See {#upBy} for details.
- find
- Description
Finds the first matching inner/child component via the specified `cid` property.
Example:
let comp = panel.find('nameText');
- Parameters
- cid
- Type
String|Function
- Description
The `cid` property of the component. If the value is a function, see {#findBy}.
- whole
- optional
true
- Type
Boolean
- Description
Whether to fully traverse inner (intrinsic) and child (lower-level) components:
-`true`: full traversal.
-`false`: traverse only inner components.
-`null`: traverse only child components. Default value.
- Returns Value
- Type
Wb.Component
- Description
Matching component or `null` if not found.
- findWhole
- Description
Finds the first matching inner or child component via the specified `cid` property. Params:
(`cid`, `scope`). See {#find} for details.
- findBy
- Description
Find matching inner/child component(s) via the specified function.
Example:
let comp = panel.findBy(item => item.foo == 'bar');
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- .item
- Type
Wb.Component
- Description
Current component.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- whole
- optional
true
- Type
Boolean
- Description
Whether to fully traverse inner (intrinsic) and child (lower-level) components:
-`true`: full traversal.
-`false`: traverse only inner components.
-`null`: traverse only child components. Default value.
- queryAll
- optional
true
- Type
Boolean
- Description
Whether to find all matching components. `true` for all, `false` for the first one.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The matching component(s). `null` (queryAll=false) or an empty array (queryAll=true)
if not found.
- findWholeBy
- Description
Find the first matching inner or child component via the specified function. Params:
(`fn`, `scope`). See {#findBy} for details.
- filter
- Description
Find all matching child components via the specified function.
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- .item
- Type
Wb.Component
- Description
Current component.
- scope
- optional
true
- Type
Object
- Description
`this` in the function. Defaults to the current component.
- Returns Value
- Type
Wb.Component[]
- Description
The matching components or an empty array if not found.
- filterWhole
- Description
Find all matching inner and child components via the specified function. See {#filter} for details.
- hasSub
- Description
Determines whether the component contains a specific inner component. See also {#Wb.Container.has} and
{#Wb.Container.hasItem}
- Parameters
- comp
- Type
Wb.Component
- Description
The component to check.
- Returns Value
- Type
Boolean
- Description
`true` if contained, `false` otherwise.
- contains
- Description
Determines whether the specified component is an inner or descendant component.
- Parameters
- item
- Type
Wb.Component
- Description
The component to check.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the component itself during traversal.
- Returns Value
- Type
Boolean
- Description
`true` if contained, `false` otherwise.
- insertRefresh
- Flags
Private
- Description
The method executed after the component instance is added to another component.
- insertBefore
- Description
Inserts the specified inner or child component(s) to the current component. If inserting a child component, the insertion
position is specified by the `refItem` parameter; if inserting an inner component, the insertion position is specified by
its {#weight} property.
Example:
panel.insertBefore({cname: 'text'}, text1); // Insert a new text box before text1
- Parameters
- comps
- Type
Object|Wb.Component|Array
- Description
The component(s) to insert, which can be a component configuration object,
a component instance, or an array consisting of both. If the inserted instance has an {#insertRefresh} method, it will be
executed after insertion.
- refItem
- optional
true
- Type
Wb.Component|Element
- Description
The reference component/element for inserting `comps`. If inserting `comps` as
child, then `comps` are inserted before `refItem`; otherwise, `comps` are added to `refItem`. Defaults to adding under
the current component.
- isFooter
- optional
true
- Type
Boolean
- Description
Whether to insert as an inner component, `true` means inserting as a inner component to the
end, `false` means inserting as a inner component to the start. Defaults to inserting as a child component.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The inserted component(s); returns an array if multiple components are inserted.
- addHeader
- Description
Inserts the specified inner component(s) to the current component. `isFooter` defaults to `false`, see {#insertBefore}
for details.
Example:
panel.addHeader({cname: 'text'}); // Add edit box as inner component to panel header
- addFooter
- Description
Inserts the specified inner component(s) to the current component. `isFooter` defaults to `true`, see {#insertBefore}
for details.
Example:
panel.addHeader({cname: 'text'}); // Add edit box as inner component to panel footer
- remove
- Description
Removes the current component from its parent component without destroying it. The removed component can be added to
any component again. Different from the {#destroy} method, this method only removes the reference relationship with
the parent component and removes the component's {#el} from the DOM tree. After executing this method, it does not
affect the inner and child components. To ensure the component is destroyed, please use the {#destroy} method.
- removeAll
- Description
Removes all inner/child components.
- Parameters
- mode
- optional
true
- Type
Boolean
- Description
Removal mode:
-`true`: All inner and child components
-`false`: All inner components
-`null`: All child components (default)
- destroy
- Description
Destroys the current component, and all its inner and child components will also be destroyed recursively. The component
can only be reclaimed by the garbage collector when all references to the component are removed. The {#remove} method
will be executed first to remove the component before it is destroyed.
- destroyAll
- Description
Destroys all inner and child components.
- Parameters
- mode
- optional
true
- Type
Boolean
- Description
Destruction mode:
-`true`: All inner and child components
-`false`: All inner components
-`null`: All child components (default)
- make
- Description
Iterates through all elements with the `obj` attribute in the component and creates the corresponding component for
that element. If the `obj` attribute is a JSON string, it represents the configuration object of the component;
otherwise, it represents the component whose `cid` attribute has this value.
- Parameters
- object
- optional
true
- Type
Object
- Description
Components map object, with key as `cid` and value as component instance. The corresponding
component will be added to the element associated with the `cid` attribute. Defaults to {#app}.
- setTip
- Flags
Private Desktop
- Description
Sets the tip of the component.
- Parameters
- value
- Type
Object
- Description
The tip object.
- type
- Type
String
- Description
The type of tip:
-'tip': Normal tip
-'errorTip': Error tip
-'overflowTip': Content overflow tip
## Events
- resize
- Description
Fires when the component is resized. This event has additional uses, such as being fired when the
component's DOM is added to the DOM tree.
- Parameters
- el
- Type
Element
- Description
The element whose size has changed.
- click
- Description
Fires when the component is clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- dblclick
- Description
Fires when the component is double-clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- beforeclose
- Description
Fires before the current component is closed. Return `false` to cancel closing.
- close
- Description
Fires after the current component is closed.
- beforeshow
- Description
Fires before the component is shown. Return `false` to prevent showing.
- show
- Description
Fires after the component is shown.
- beforehide
- Description
Fires before the component is hidden. Return `false` to prevent hiding.
- hide
- Description
Fires after the component is hidden.
- subadd
- Description
Fired when an inner component is added to the component.
- Parameters
- child
- Type
Wb.Component
- Description
The component being added.
- subadded
- Description
Fired when the component is added as an inner component to a parent component.
- Parameters
- parent
- Type
Wb.Component
- Description
The parent component to which it is added.
- added
- Description
Fired when the component is added as a child component to a parent component.
- Parameters
- parent
- Type
Wb.Container
- Description
The parent component to which it is added.
- position
- Type
Number
- Description
The position index where the component is added.
- removed
- Description
Fired after the current component is removed from its parent component as a child component.
- Parameters
- parent
- Type
Wb.Container
- Description
The parent component.
- subremoved
- Description
Fired after the current component is removed from its parent component as a inner component.
- Parameters
- parent
- Type
Wb.Component
- Description
The parent component.
- beforesubremove
- Description
Fired before a inner component of the current component is removed.
- Parameters
- child
- Type
Wb.Component
- Description
The inner component.
- subremove
- Description
Fired after a inner component of the current component is removed.
- Parameters
- child
- Type
Wb.Component
- Description
The inner component.
- destroy
- Description
Fired after the current component is destroyed.
# Wb.Iframe
Encapsulated component for the iframe element.
## Class Information
- class name
Wb.Iframe
- Icon
layout
- cname
iframe
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Iframe
## Instance Properties
- name
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The `name` attribute of the iframe element.
- src
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The URL of the page to embed.
# Wb.Splitter
Splitter component, used to adjust the width or height of the component, typically applied in containers with flex layout.
## Class Information
- class name
Wb.Splitter
- Icon
splitter
- cname
splitter
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Splitter
## Instance Properties
- enterShowTarget
- Flags
Key Desktop
- Type
Boolean
- Description
Whether to display the hidden target component when the mouse enters the splitter, and hide
the target component when the mouse leaves.
- target
- Flags
Code
- Type
Wb.Component
- Description
The component adjusted when moving the splitter. `null` means auto detect.
- targetComp
- Flags
Private
- Type
Wb.Component
- Description
The component adjusted when moving the splitter.
- behindTaget
- Flags
Private
- Type
Boolean
- Description
Whether the adjusted component is behind the splitter.
- collapsible
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the splitter can toggle the collapsed/expanded state of the target component by clicking
the toggle button or double-clicking the splitter.
- hSplit
- Flags
Read-only Private
- Type
Boolean
- Description
Whether to split horizontally. `true` for horizontal, `false` for vertical, `null` to disable
splitting.
- slideTarget
- Type
Wb.Component
- Description
The currently displayed floating target component.
## Instance Methods
- init
- onClick
- Flags
Private
- Description
Method executed when clicked.
- onDblClick
- Flags
Private
- Description
Method executed when double-clicked.
- onMouseEnter
- Flags
Private
- Description
Method executed when the mouse enters the component.
- onMouseLeave
- Flags
Private
- Description
Method executed when the mouse leaves the component.
- showTargetComp
- Flags
Private
- Description
Displays the hidden target component in a floating manner.
- hideTargetComp
- Flags
Private
- Description
Hides the displayed floating target component.
- Parameters
- e
- Type
Event
- Description
The event object.
- restoreTargetComp
- Description
Restores the floating target component to its non-floating state.
- setToggleBtn
- Flags
Private
- Description
Sets the expand/collapse toggle button for the splitter.
- getTarget
- Flags
Private
- Description
Gets the target component.
- Returns Value
- Type
Wb.Component
- Description
The found component.
- onMouseDown
- Flags
Private
- Description
Method executed when the mouse is down.
- Parameters
- e
- Type
Event
- Description
The event object.
- onDocMouseUp
- Flags
Private
- Description
Method executed when the mouse button is released on the document.
- Parameters
- e
- Type
Event
- Description
The event object.
- onDocMouseMove
- Flags
Private
- Description
Method executed when the mouse is moved on the document.
- Parameters
- e
- Type
Event
- Description
The event object.
# Wb.Fill
Component that fills the remaining available space. If placed within a `grid` layout, this component will be in the last
column, so components after it will be forced to start layout from the first column.
## Class Information
- class name
Wb.Fill
- Icon
right1
- cname
fill
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Fill
# Wb.Space
Component that occupies a specified space in width and height. If placed within a `grid` layout, it will occupy an
entire row.
## Class Information
- class name
Wb.Space
- Icon
space
- cname
space
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Space
# Wb.Gap
Component with specified minimum width/height and a fixed background color, typically used to separate components.
## Class Information
- class name
Wb.Gap
- Icon
padding
- cname
gap
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Gap
# Wb.Divider
Divider line component. If placed within a `grid` layout, it will occupy an entire row.
## Class Information
- class name
Wb.Divider
- Icon
divider
- cname
divider
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Divider
## Instance Properties
- autoHide
- Type
Boolean
- Description
Whether to automatically hide this component when there are no visible components before
it. Defaults to `true`.
## Instance Methods
- init
- onAdded
- Flags
Private
- Description
Fired when added to the parent component.
# Wb.Image
Image component, used to display images. The difference between {#Wb.Image} and {#Wb.Picture} is that {#Wb.Image} scales
the image with the component by default, while {#Wb.Picture} displays the image at its actual size.
See example: {#%visual.xwl|ide?openModule=example/comps/visual.xwl}
## Class Information
- class name
Wb.Image
- Icon
image
- cname
image
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Image
## Instance Properties
- src
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The URL of the image. Setting it to `null` will clear the image.
- repeat
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The repeat mode of the image.
-'no-repeat': No repeat. Default value.
-'repeat-x': Repeat horizontally.
-'repeat-y': Repeat vertically.
-'round': As the allowed space grows in size, the repeated images will stretch (no gaps) until there is enough space\
to add one more image.
-'space': The image will repeat as much as possible without being clipped.
-'repeat': The image will repeat as needed to cover the entire area of the image container.
- clickPreview
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to preview the full image when clicking on the image.
- size
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The size of the image.
-'contain': Scale the image to fit entirely within the component; the component may have empty spaces. Default value.
-'cover': Scale the image to cover the component entirely; parts of the image may be invisible.
-'auto': Original image size.
-'25%': Display at 25% scale.
-'50%': Display at 50% scale.
-'75%': Display at 75% scale.
-'2em auto': Width 2em, height scales proportionally automatically.
-'25% 75%': Width 25%, height 75%.
- position
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The position of the image.
-'center': Center. Default value.
-'top': Top.
-'left': Left.
-'bottom': Bottom.
-'right': Right.
-'top right': Top right corner.
-'25% 75%': X at 25% position, Y at 75% position.
-'bottom 1em right 2.5em': 1em offset from the bottom, 2.5em offset from the right.
# Wb.Picture
Picture component, used to display images. The difference between {#Wb.Picture} and {#Wb.Image} is that {#Wb.Picture}
displays the image at its actual size, while {#Wb.Image} scales the image with the component by default.
See example: {#%visual.xwl|ide?openModule=example/comps/visual.xwl}
## Class Information
- class name
Wb.Picture
- Icon
picture
- cname
picture
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Picture
## Instance Properties
- src
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The URL of the image. Setting it to `null` will clear the image.
- clickPreview
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to preview the full image when clicking on the image.
## Instance Methods
- init
# Wb.Video
Video component, used to play videos. Use {#Wb.playAudio} to play audio.
## Class Information
- class name
Wb.Video
- Icon
video
- cname
video
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Video
## Instance Properties
- src
- Flags
Key
- Getter
- Type
Mix|String|Object|Array
- Setter
- Type
Mix|String|Object|Array
- Description
The URL or list of URLs for the video. If it is an object, `url` indicates the
URL and `type` indicates the media type. The following are all valid values:
'videos/flower.webm' // Single URL
{url: 'videos/flower.webm', type: 'video/webm'} // Specify media type
['videos/flower.webm', {url: 'videos/flower.mp4', type: 'video/mp4'}] // Multiple URLs
- controls
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to provide a control panel at the bottom of the video.
- autoplay
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to start playing automatically.
- loop
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to play in a loop.
- muted
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to initialize as muted.
- playsInline
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the video plays inline within its playback area instead of fullscreen..
- poster
- Getter
- Type
String
- Setter
- Type
String
- Description
The URL of the poster frame image.
# Wb.mixin.Icon
Mixin that adds icon display capability to a component, allowing it to render and manage an icon.
## Class Information
- class name
Wb.mixin.Icon
- Icon
undefined
- cname
iconMixin
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.mixin.Icon
## Instance Properties
- smallImg
- Type
Boolean
- Description
Whether to use a smaller size when using an image icon.
- isImageIcon
- Flags
Read-only
- Type
Boolean
- Description
Whether the current icon type is an image.
- iconEl
- Flags
Read-only
- Type
Element
- Description
The icon element.
- icon
- Flags
Key
- Getter
- Type
IconString
- Setter
- Type
IconString
- Description
Text font icon. If the encoding of the first character is >= 128 or the character starts
with "!", the text will be used as the icon directly (e.g., Emoji characters or "!U" are all valid icons). Sets
{#iconColor} for setting icon color. After the icon is destroyed, the value of {#iconColor} will also be reset. See
`value` of {#setIcon} for details.
- img
- Getter
- Type
ImgString
- Setter
- Type
ImgString
- Description
Image icon path. If the directory is not specified, it defaults to "wb/images"; if the image
path extension is not specified, it defaults to "png". See `value` of {#setIcon} for details.
- iconColor
- Getter
- Type
ColorString
- Setter
- Type
ColorString
- Description
Icon color.
- spin
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the icon is spinning.
- iconSize
- Getter
- Type
String
- Setter
- Type
Number|String
- Description
Sets the icon size. Numeric value is in px.
## Instance Methods
- setIcon
- Flags
Private
- Description
Sets the icon for the element.
- Parameters
- value
- Type
String
- Description
The value of the icon. If value is `null` or empty, the icon element will be destroyed. "null"
string indicates an empty icon.
- isImg
- Type
Boolean
- Description
Whether it is an image icon, `false` text font icon, `true` image icon.
# Wb.Icon
Icon component, used to display text and image icons.
See example: {#%visual.xwl|ide?openModule=example/comps/visual.xwl}
## Class Information
- class name
Wb.Icon
- Icon
logo
- cname
icon
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Icon
## Instance Methods
- init
# Wb.Action
User Action, it can be bound to buttons or menu items to perform actions. The properties defined by the action will be
directly set to the bound components, including at least the following properties:
-text
-html
-menuText
-tip
-icon
-img
-disabled
-visible
-appeared
-keys
-handler
## Class Information
- class name
Wb.Action
- Icon
undefined
- cname
action
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Action
## Static Properties
- proxyHandler
- Flags
Private
- Type
Object
- Description
The handler configuration object of the proxy.
## Instance Properties
- comps
- Flags
Private
- Type
Wb.Component[]
- Description
The list of bound components.
- props
- Flags
Private
- Type
Object
- Description
The object composed of bound properties.
## Instance Methods
- constructor
- bind
- Description
Binds the specified component to the current action.
- Parameters
- comp
- Type
Wb.Component
- Description
The component to be bound.
- unbind
- Description
Unbinds the specified component from the current action.
- Parameters
- comp
- Type
Wb.Component
- Description
The component to be unbound.
# Wb.Actions
User action list. For descriptions of action, please refer to {#Wb.Action}.
## Class Information
- class name
Wb.Actions
- Icon
undefined
- cname
action
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Actions
## Instance Methods
- constructor
- Description
Creates an instance of the user action list
- Parameters
- actions
- Type
Array
- Description
A list of actions or their configuration objects.
- scope
- optional
true
- Type
Object
- Description
The default scope when executing the handler.
- add
- Description
Adds the action with the specified name to the current list.
- Parameters
- name
- Type
String
- Description
The action name.
- action
- Type
Wb.Action|Object
- Description
The action instance or its configuration object.
- remove
- Description
Removes the action with the specified name from the current list.
- Parameters
- name
- Type
String
- Description
The action name.
# Wb.Button
Button component, which runs code or completes certain functions by Firing events on click.
See example: {#%button.xwl|ide?openModule=example/comps/button.xwl}
## Class Information
- class name
Wb.Button
- Icon
button
- cname
button
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button
## Instance Properties
- tapClick
- Type
Boolean
- Description
Whether to fire the click event when the mouse is pressed or touch starts
- repeatDelay
- Type
Number
- Description
The initial delay before the repeated firing of click events.
- menuButton
- Type
Boolean
- Description
Whether to display as a menu button when the {#menu} property is set. Defaults to `true`.
- stopEvent
- Type
Boolean
- Description
Whether to stop event after pressing keys when {#keys} is set. Defaults to `true`.
- keysTextTip
- Type
Boolean
- Description
Whether to display shortcut keys in the tip. Defaults to `true`.
- cname
- Type
Enum
- Description
The short name of the component:
-'tool': Tool button {#Wb.Tool}
-'padTool': Padded tool button {#Wb.PadTool}
-'iconButton': Icon button {#Wb.IconButton}
-'lightButton': Highlighted button {#Wb.LightButton}
-'simpleButton': Simple button {#Wb.SimpleButton}
-'item': Menu item {#Wb.Item}
-'closableButton': Closable button {#Wb.ClosableButton}
-'tagButton': Tag button {#Wb.TagButton}
- enterButton
- Type
Boolean
- Description
When the button is in {#Wb.Window}, setting it to `true` will fire
the button's click event when the Enter key is pressed in the window.
- escButton
- Type
Boolean
- Description
When the button is in {#Wb.Window}, setting it to `true` will fire
the button's click event when the ESC key is pressed in the window.
- groupName
- Type
String
- Description
Group name; only one button with the same group name in the same container can
be activated.
- allowDeactive
- Type
Boolean
- Description
Whether to allow deactive by clicking it:
-true: enabled
-false: disabled
-null: disabled when {#groupName} is set, otherwise enabled.
- enableToggle
- Type
Boolean
- Description
Whether to allow toggling the active state by clicking it.
-false: disabled
-true: enabled
-null: enabled when the {#active} or {#groupName} property is set, otherwise disabled.
- handler
- Type
Express/Function
- Description
The method to be executed when the button is clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- scope
- Flags
Code
- Type
Object
- Description
`this` in the {#handler} method.
- menuAlign
- Flags
Private
- Type
String
- Description
The alignment method for the {#menu}, see {#Element.alignTo} for details.
- action
- Flags
Code
- Getter
- Type
Wb.Action
- Setter
- Type
Wb.Action
- Description
The action bound to the button.
- menuText
- Getter
- Type
String
- Setter
- Type
String
- Description
The text displayed on the menu. If the button has no {#tip} property, this property will also
be used as {#tip} property.
- shortcutEl
- Flags
Private
- Type
Element
- Description
Element used to show the shortcut key text.
- keys
- Getter
- Type
String
- Setter
- Type
String
- Description
The shortcut key for the button. When pressed, the {#*click} event will be fired. If the key is
duplicated, the last one takes effect. See {#Wb.Keys.add} for details.
Example:
$text:Ctrl+A
Ctrl+Shift+Alt+Meta+S
Ctrl+V|Ctrl+Shift+V
- isOffenKeys
- Flags
Private
- Type
Boolean
- Description
Whether the shortcut is persistently effective. See {#offenKeys} for details.
- offenKeys
- Getter
- Type
String
- Setter
- Type
String
- Description
Persistently effective shortcut key for the button. Unlike {#keys}, this shortcut key remains
effective regardless of whether the button is valid.
- keysText
- Getter
- Type
String
- Setter
- Type
String
- Description
The text of the button's shortcut key.
- tip
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- menu
- Flags
Key
- Getter
- Type
Wb.Menu|Object
- Setter
- Type
Wb.Menu|Object
- Description
The menu component or configuration object associated with the button, which will be displayed
when the button is clicked. After setting a new menu, the menu will be used as a inner component of the button. The original
menu will not be automatically destroyed after setting a new menu.
- active
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Sets whether the button is activated. An activated button has the specified CSS style.
- activeBgColor
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to set the background color when the button is activated. Defaults to `true`.
- badgeText
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the text of the button label is in "badge" style.
- checked
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Sets whether the button is checked. Same as {#active} property.
- html
- Flags
Key
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- text
- Flags
Key
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- textEl
- Flags
Read-only
- Getter
- Type
(inherited)
- tailEl
- Flags
Private
- Type
Element
- Description
The additional element added to the tail. If this value is specified, {#iconEl} and {#textEl#}
will be added before this element.
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
The element that displays the icon.
- iconAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The position of the icon.
-'top': Top
-'right': Right
-'bottom': Bottom
-'left': Left
- type
- Flags
Key
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The style type of the button. `null` indicates using the default style.
-'primary': Primary button
-'tool': Tool button. A normal button with transparent background and smaller padding values, such as the button style\
under the toolbar.
-'icon': Icon button. Usually contains only an icon and removes the button's own color, e.g., the trigger button style.
-'light': Highlight button. The button background is highlighted when the mouse hovers over or activates it, and other\
effects are the same as the icon button. Such as the close button of tab card.
-'plain': Plain button, without hover, focus and other effects.
- shape
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The shape type of the button.
-'circle': Circle
-'rect': Rectangle
-'round': Rounded corner
- repeatInterval
- Getter
- Type
Number
- Setter
- Type
Boolean|Number
- Description
The interval in ms for repeatedly firing the {#*click} event when the button is
pressed. `true` indicates 30 ms, `false` indicates that repeated firing is disabled.
- ignoreListenerClick
- Flags
Private
- Type
Boolean
- Description
Whether to ignore the click event of the listener.
## Instance Methods
- init
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed.
- Parameters
- e
- Type
Event
- Description
Event object.
- fireClick
- Description
Fires the click event of the button.
- Parameters
- e
- optional
true
- Type
Event
- Description
Event object. Defaults to `undefined`.
- onClickEvent
- Flags
Private
- Description
Method executed when the button's click event is fired.
- Parameters
- e
- optional
true
- Type
Event
- Description
Event object. Defaults to `undefined`.
- showMenu
- Flags
Private
- Description
Shows the menu associated with the button. This method is invalid if there is no associated menu.
- hideMenu
- Flags
Private
- Description
Hides the menu of the current button.
- destroy
- onClick
- Flags
Private
- Description
The method to be executed when the button is clicked.
- Parameters
- e
- Type
Event
- Description
The event object.
- onMouseEnter
- Flags
Private
- Description
The method executed when the mouse enters the button if a menu is set.
- setActive
- Description
Sets whether the button is activated. See {#active} for details.
- Parameters
- actived
- Type
Boolean
- Description
`true` to activate, `false` to deactivate.
- focused
- optional
true
- Type
Boolean
- Description
Whether to set focus to the button.
- updateTextEl
- Flags
Private
- Description
Removes the {#textEl} element if both text and html are empty.
- onTapDown
- Flags
Private
- Description
Method executed when the mouse is down.
- onTapUp
- Flags
Private
- Description
Method executed when the mouse is up.
- onDocTapUp
- Flags
Private
- Description
Method executed when the mouse is up on the document.
## Events
- click
- Flags
Key
- Description
Fired when the button is clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- beforeshowmenu
- Description
Fired before showing the associated menu. Returns `false` to prevent showing menu.
- activate
- Description
Fired when the button is activated.
- deactivate
- Description
Fired when the button is deactivated.
- toggle
- Description
Fired when the button's activation state is toggled.
- Parameters
- active
- Type
Boolean
- Description
Whether the button is activated.
# Wb.SimpleButton
Simple button which cannot receive focus.
## Class Information
- class name
Wb.SimpleButton
- Icon
undefined
- cname
simpleButton
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.SimpleButton
# Wb.Tool
Tool button which has {#type} "tool" and cannot receive focus.
## Class Information
- class name
Wb.Tool
- Icon
undefined
- cname
tool
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.SimpleButton -> Wb.Tool
# Wb.PadTool
Tool button component with padding.
## Class Information
- class name
Wb.PadTool
- Icon
undefined
- cname
padTool
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.SimpleButton -> Wb.Tool -> Wb.PadTool
# Wb.IconButton
Icon button which has {#type} "icon" and cannot receive focus.
## Class Information
- class name
Wb.IconButton
- Icon
undefined
- cname
iconButton
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.SimpleButton -> Wb.IconButton
# Wb.LightButton
Light button which has {#type} "light" and cannot receive focus.
## Class Information
- class name
Wb.LightButton
- Icon
undefined
- cname
lightButton
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.SimpleButton -> Wb.LightButton
# Wb.SplitButton
Split button which has a dropdown menu, consisting of two parts: a regular button on the left and a trigger button
on the right that shows the dropdown menu when clicked.
## Class Information
- class name
Wb.SplitButton
- Icon
split
- cname
splitButton
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.SplitButton
## Instance Properties
- autoTool
- Type
Boolean
- Description
Whether to automatically set the button as a tool button when added to a toolbar.
- splitButton
- Flags
Read-only
- Type
Wb.Button
- Description
The button on the right used to trigger the display of the menu.
- menu
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
## Instance Methods
- init
# Wb.ClosableButton
Button component with close functionality, which allows clicking the close element to perform an action.
## Class Information
- class name
Wb.ClosableButton
- Icon
undefined
- cname
closableButton
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.ClosableButton
## Instance Properties
- closeTip
- Type
String
- Description
The tooltip text on the close button.
- transientClose
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Specifies whether the close button is displayed when activated or on mouse hover.
- closable
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the button can be closed via the close button.
-true: The close button is enabled.
-false: The close button is disabled.
-null: No close button. Default value.
## Instance Methods
- onCloseClick
- Flags
Private
- Description
Method executed when the closable element is clicked.
- Parameters
- e
- optional
true
- Type
Event
- Description
Event object.
# Wb.TabButton
Tab button component.
## Class Information
- class name
Wb.TabButton
- Icon
undefined
- cname
tabButton
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.ClosableButton -> Wb.TabButton
## Instance Methods
- init
- intoView
- onKeyDown
- onActivate
- Flags
Private
- Description
Method executed when the button is activated.
- onCloseClick
# Wb.TagButton
Tag button, typically used for creating tags.
## Class Information
- class name
Wb.TagButton
- Icon
undefined
- cname
tagButton
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.ClosableButton -> Wb.TagButton
# Wb.Label
Tag component, used for displaying text.
## Class Information
- class name
Wb.Label
- Icon
label
- cname
label
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Label
## Instance Properties
- href
- Getter
- Type
String
- Setter
- Type
String
- Description
The URL of the link.
- target
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The target of the link.
-'_blank': Open in a new window.
-'_parent': Open in the parent window.
-'_top': Open in the top-level window.
-'_self': Open in the same window. Default value.
- textAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The alignment of the label.
-'left': Left alignment
-'center': Center alignment
-'right': Right alignment
- titleType
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Font title type:
-'title1': Level 1 title
-'title2': Level 2 title
-'title3': Level 3 title
-'title4': Level 4 title
-'title5': Level 5 title
- html
- Flags
Key
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- text
- Flags
Key
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- indent
- Flags
Write-only
- Setter
- Type
Boolean
- Description
Whether to indent by the specified size.
# Wb.BoxLabel
Box label component, used for displaying text. The difference between this component and {#Wb.Label} is that the `label`
element is a child element within the {#el}, allowing alignment and arrangement.
## Class Information
- class name
Wb.BoxLabel
- Icon
box-label
- cname
boxLabel
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.BoxLabel
## Instance Properties
- align
- Flags
Key
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The alignment of the label:
-'center': Center. Default value.
-'topLeft': Top left.
-'topCenter': Top center.
-'topRight': Top right.
-'centerLeft': Middle left.
-'centerRight': Middle right.
-'bottomLeft': Bottom left.
-'bottomCenter': Bottom center.
-'bottomRight': Bottom right.
- text
- Flags
Key
- Type
String
- html
- Flags
Key
- Type
HtmlString
## Instance Methods
- init
# Wb.Control
Control class, a component used for inputting and retrieving data.
## Class Information
- class name
Wb.Control
- Icon
undefined
- cname
control
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control
## Instance Properties
- originValue
- Flags
Private
- Type
Object
- Description
The original value.
- ignoreReset
- Type
Boolean
- Description
Whether calling {#reset} forces the value to null.
- labelSeparator
- Type
Boolean/String
- Description
The separator of the label. `false` means not to display the separator.
- groupTitle
- Flags
Read-only
- Type
String
- Description
The group title when using dictionary grouping.
- showEmptyLabel
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to allow displaying empty labels.
- wrapEl
- Flags
Read-only
- Type
Element
- Description
The element used to wrap DOM elements in the control.
- wrapBorder
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
The border of the component's wrapping element. Numeric value is in px.
-true: Set all borders to "thin".
-false: No borders.
-'top': Only the top border is set to "thin".
-'right': Only the right border is set to "thin".
-'bottom': Only the bottom border is set to "thin".
-'left': Only the left border is set to "thin".
- roundBorder
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- labelIcon
- Getter
- Type
IconString
- Setter
- Type
IconString
- Description
The icon on the label.
- labelImg
- Getter
- Type
ImgString
- Setter
- Type
ImgString
- Description
The image icon on the label.
- text
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The plain text label of the control.
- labelUp
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the label is displayed on top. `false` for display on the left, `true` for display
on top, `null` for following the container's default setting (default value).
- html
- Flags
Key
- Getter
- Type
HtmlString
- Setter
- Type
HtmlString
- Description
The HTML label of the control. If {$text} is specified, it takes precedence.
- required
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the control is required. Setting it as required will add an "*" mark to the
label.
- labelWidth
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
Label width. `-1` means "unset".
- labelAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Label alignment.
-'left': Left alignment
-'center': Center alignment
-'right': Right alignment
- maximizable
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to add a maximize button, which can maximize the control when clicked.
- hint
- Getter
- Type
String
- Setter
- Type
String
- Description
Prompt information. A question mark is displayed on the right side of the control, and the
prompt information is shown when the mouse hovers over the question mark.
- value
- Flags
Key
- Getter
- Type
Mix
- Setter
- Type
Mix
- Description
The value of the control.
## Instance Methods
- clearError
- Description
Clear all error messages.
- init
- setReadonly
- Description
Sets the {#readonly} property value of the control.
- Parameters
- value
- Type
Boolean
- Description
The value of the {#readonly}.
- setLabelIcon
- Flags
Private
- Description
Sets the icon for the label icon element. See {#Wb.PT.setIcon} for details.
- Parameters
- value
- Type
String
- Description
The value of the icon.
- isImg
- Type
Boolean
- Description
Whether it is an image, `false` for text, `true` for image.
- createLabelEl
- Flags
Private
- Description
Adds a label element to the header of the control. Returns the element directly if it already exists.
- Returns Value
- Type
Wb.Label
- Description
The added label component.
- setText
- Flags
Private
- Description
Sets the label content of the control.
- Parameters
- value
- Type
String
- Description
The label content.
- isHtml
- optional
true
- Type
Boolean
- Description
Whether content in HTML format, `false` for plain text, `true` for HTML.
- clear
- Description
Clears the value of the current control. Use the {#reset} method to reset the value.
- reset
- Description
Resets the value to the original value. Use the {#clear} method to clear the value.
- onMaxKeyDown
- Flags
Private
- Description
Key press method when {#maximizable} enabled.
- Parameters
- e
- Type
Event
- Description
Event object.
- getValue
- Description
Gets the value of the current control.
- Returns Value
- Type
Object
- Description
The value of the control.
- setValue
- Description
Sets the value of the current control.
- Parameters
- value
- Type
Object
- Description
The value to be set.
# Wb.DisplayField
Display control for showing text. The difference between this control and {#Wb.Label} is that this control contains
two parts of labels: the name label and the value label.
## Class Information
- class name
Wb.DisplayField
- Icon
label1
- cname
displayField
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.DisplayField
## Instance Properties
- htmlValue
- Type
Boolean
- Description
Whether {#value} is in HTML. `true` for HTML format, `false` for plain text format.
- value
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The content of the value label of the control.
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
Gets the icon element. Creates a new icon element if it does not exist.
## Instance Methods
- init
# Wb.Text
Text box control for inputting single-line text.
See example: {#%input.xwl|ide?openModule=example/comps/input.xwl}
## Class Information
- class name
Wb.Text
- Icon
text
- cname
text
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text
## Static Properties
- valueTypeDefines
- Flags
Private
- Type
Object
- Description
Predefined value type definition object. The name is the type name, and the value is an object
composed of `regex`, `fn`, and `msg`, representing regexp, validate function, and error message respectively.
## Instance Properties
- inputTagName
- Flags
Private
- Type
String
- Description
The tagName of the input element.
- autoPadding
- Type
Boolean
- Description
Whether to automatically set padding when embedded as an editor in a component.
- minLength
- Type
Number
- Description
Minimum number of characters.
- maxLength
- Type
Number
- Description
Maximum number of characters. `0` means no limit.
- sideErrorTip
- Type
Boolean
- Description
Whether the error message is displayed via a tooltip button next to the control (`true`)
or directly within the control (`false`). `null` means auto: `true` on mobile devices, and `false` on desktop.
- regex
- Type
RegExp
- Description
Regular expression used to verify if the value is valid. If the value is invalid, the prompt
message specified by {#regexText} will be displayed.
- regexText
- Type
String
- Description
Prompt message displayed when the value is invalid as verified by the regular expression
specified by {#regex}.
- basicErrors
- Flags
Private
- Type
Set
- Description
List of basic error messages.
- errors
- Flags
Private
- Type
Set
- Description
List of custom error messages.
- validator
- Type
Function
- Description
Validation function used to verify if the value is valid.
- Parameters
- value
- Type
Object
- Description
The value to be validated.
- Returns Value
- Type
Boolean|String
- Description
Returning a string indicates the value is invalid (the string is the error message). Returning
any other value indicates the value is valid.
- valueType
- Type
Enum
- Description
Predefined value type, including:
-'alpha': Letters and underscores
-'alphaNum': Letters, underscores and numbers
-'identifier': Unicode identifier
-'identifierDot': Unicode identifier allow dot
-'mark': Letters, underscores, numbers and hyphens
-'email': Email address
-'filename': File name
-'url': URL address
-'uri': Letters, underscores, numbers, hyphens and decimal points
-'express': JS expression, including JSON
- valueTypeText
- Type
String
- Description
Prompt message displayed when the value is invalid as verified by the type specified
by {#valueType}.
- inputEl
- Flags
Read-only
- Type
HTMLInputElement
- Description
Input DOM element.
- inactiveBorder
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to use a non-highlighted border when focused. Defaults to `false`.
- selectOnFocus
- Type
Boolean
- Description
Whether to select all text when focused.
- selectOnInit
- Type
Boolean
- Description
Whether to select all text when the control is ready.
- textAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Text alignment of the edit box.
-'left': Left alignment
-'center': Center alignment
-'right': Right alignment
- flat
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to use flat style.
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
Gets the element for displaying the icon.
- colorfulIcon
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the icon inside input box is displayed in color (defaults to placeholder color).
- prefixLabel
- Flags
Private
- Type
Wb.Label
- Description
Prefix label component.
- suffixLabel
- Flags
Private
- Type
Wb.Label
- Description
Suffix label component.
- prefix
- Getter
- Type
String
- Setter
- Type
String
- Description
Prefix text of the input box.
- suffix
- Getter
- Type
String
- Setter
- Type
String
- Description
Suffix text of the input box.
- placeholder
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Input placeholder text.
- lastValue
- Flags
Private
- Type
String
- Description
The last value of the control.
- lastInputValue
- Flags
Private
- Type
String
- Description
The last value in the input box.
- inputValue
- Getter
- Type
String
- Setter
- Type
String
- Description
Input value in the input box.
- clearButtonComp
- Flags
Read-only
- Type
Wb.Button
- Description
Clear button component.
- clearButton
- Type
Boolean
- Description
Whether to display the clear button.
- value
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Value of the input box.
- readonly
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the input box is read-only.
- password
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the control is a password input box.
- autocomplete
- Getter
- Type
String
- Setter
- Type
String
- Description
Autocomplete attribute name of the input box. For example, set to "username" for user name. Defaults
to `undefined` (automatic).
- eyeButtonComp
- Flags
Read-only
- Type
Wb.Button
- Description
Password visibility toggle button.
- eyeButton
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the password visibility toggle button. The button can be obtained via
{#eyeButtonComp}.
- blankText
- Type
String
- Description
The error text to display if the {#required} validation fails.
- isValid
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Determines whether the current control's value is valid.
## Instance Methods
- extraVerify
- Flags
Private
- Description
Performs additional validation.
- Parameters
- value
- Type
Object
- Description
The current value.
- basicErrors
- Type
Set
- Description
The collection of error messages.
- Returns Value
- Type
Boolean
- Description
Return `false` to prevent other default validations.
- init
- ready
- onInputFocus
- Flags
Private
- Description
Handler method when focused.
- Parameters
- e
- Type
Event
- Description
Event object.
- onInputBlur
- Flags
Private
- Description
Handler method when focus is lost.
- Parameters
- e
- Type
Event
- Description
Event object.
- mayFocusInputEl
- Flags
Private
- Description
Moves focus to the input box when focus is not on it.
- replaceSelection
- Description
Replace the selection text with the specified text. If no selection is made, new text will be inserted.
- Parameters
- text
- Type
String
- Description
New text to be replaced.
- focus
- Description
Sets focus to the component.
- Parameters
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrolling.
- selectText
- optional
true
- Type
Boolean|Number|Number[]
- Description
Whether to select text after setting focus.
-true: Select all text
-0: Cursor at the start
--1: Cursor at the end.
-Number[]: [start, end] indicates the start and end positions of the selected text.
- delay
- optional
true
- Type
Boolean|Number
- Description
Whether to set focus with a delay. `true` means a 50ms delay, other values represent
the delay in milliseconds.
- focusOnly
- Description
Sets focus to the component and prevents scrolling. See {#focus} for details.
- doFocus
- Flags
Private
- Description
Sets focus to the component. Params: (`selectText`, `preventScroll`). See {#focus} for details.
- select
- Description
Selects text in the current input box.
Example:
text1.select(); // Select all text
text1.select(false); // Deselect all text
text1.select(0); // Set cursor at the start only
text1.select(-1); // Set cursor at the end only
text1.select(2, 5); // Select characters from index 2 to 4 (i.e., 3rd to 5th characters).
- Parameters
- start
- optional
true
- Type
Number|Boolean
- Description
The index of the first selected character. `null` or `true` means select all; `false`
means deselect all; `-1` means the position of the last character.
- end
- optional
true
- Type
Number
- Description
The index of the character after the last selected character. Defaults to `start` parameter.
- direction
- optional
true
- Type
Boolean
- Description
Selection direction, `true` forward, `false` backward, `null` unknown (default value).
- onInput
- Flags
Private
- Description
Handler method executed when inputting a value.
- textChangeEvent
- Flags
Private
- Description
Handler method executed when the input value changes.
- canShowClear
- Flags
Private
- Description
Determines whether the clear button can be displayed.
- Returns Value
- Type
Boolean
- Description
`true` to display, `false` to hide.
- updateClearButton
- Flags
Private
- Description
Updates the display state of the clear button.
- canFireChange
- Flags
Private
- Description
Determines whether the change event can be fired when the text box value changes.
- Returns Value
- Type
Boolean
- Description
`true` to enable, `false` to disable.
- fixLength
- Flags
Private
- Description
Fixes the value length based on the value. Used to determine the total valid length of the value.
- Returns Value
- Type
Number
- Description
number of characters subtracted.
- isEmptyValue
- Flags
Private
- Description
Determines whether the current input value is empty.
- Returns Value
- Type
Boolean
- Description
`true` for empty value, `false` otherwise.
- verify
- Description
Validates the value of the current control. Displays an error text if the value is invalid, otherwise clears the error
text. For custom error texts, please use the {#addError}/{#removeError} methods.
- Returns Value
- Type
Boolean
- Description
`true` for valid, `false` for invalid.
- addError
- Description
Adds custom error messages to the control. Use the {#removeError} method to remove error messages.
- Parameters
- error
- Type
String|String[]
- Description
An error message or an array of error messages.
- removeError
- Description
Removes the specified custom error message from the control. Use the {#addError} method to add error messages.
- Parameters
- error
- optional
true
- Type
String
- Description
An error message. If omitted, all custom error messages will be removed.
- clearError
- checkError
- Flags
Private
- Description
Checks the control's error messages. If the control has errors in {#basicErrors} and {#errors}, the `w-invalid` class
and error tip will be added to the control; otherwise, the `w-invalid` class and error tip will be removed.
## Events
- keydown
- Description
Fired when a key is pressed down.
- Parameters
- e
- Type
Event
- Description
Event object.
- keyup
- Description
Fired when a key is released.
- Parameters
- e
- Type
Event
- Description
Event object.
- focus
- Description
Fired when focused.
- Parameters
- e
- Type
Event
- Description
Event object.
- blur
- Description
Fired when focus is lost.
- Parameters
- e
- Type
Event
- Description
Event object.
- change
- Description
Fired when the value changes.
- Parameters
- value
- Type
String
- Description
The new value.
- oldValue
- Type
String
- Description
The original value.
- clearclick
- Description
Fired when the clear button is clicked.
# Wb.TextArea
Text area control for entering multi-line text.
## Class Information
- class name
Wb.TextArea
- Icon
textarea
- cname
textArea
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.TextArea
## Instance Properties
- noWrap
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- autoResize
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to automatically adjust the control height based on content.
- tabAsInput
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to treat the Tab key press as character input.
- rows
- Getter
- Type
Number
- Setter
- Type
Number
- Description
Used to specify the number of rows for the default height.
- cols
- Getter
- Type
Number
- Setter
- Type
Number
- Description
Used to specify the number of columns for the default width.
## Instance Methods
- init
- onTabKeyDown
- Flags
Private
- Description
Handler method executed when a key is pressed for {#tabAsInput}.
- Parameters
- e
- Type
Event
- Description
Event object.
- onChange
- Flags
Private
- Description
Handler method executed when the content changes.
# Wb.Number
Number input control.
## Class Information
- class name
Wb.Number
- Icon
number-edit
- cname
number
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Number
## Instance Properties
- step
- Type
Number
- Description
Specifies a numeric interval by which the control's value will be incremented or decremented
when the user invokes the {#spinner}.
- accelerate
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Specifies whether to accelerate when clicking the increment/decrement buttons while holding
modifier keys. When `true`, holding Shift accelerates by 10x; other keys do not accelerate.
- upDownKey
- Type
Boolean
- Description
Specifies whether to allow increasing/decreasing the value by pressing the Up/Down arrow
keys. Defaults to `false` (allowed with Ctrl+Up/Down), `true` (allowed with Up/Down directly).
- intCount
- Flags
Key
- Type
Number
- Description
Maximum number of integer digits. 0 or `null` means no limit.
- autoFormat
- Flags
Key
- Type
Boolean
- Description
Whether to automatically format the input value.
- decimalCount
- Flags
Key
- Type
Number
- Description
Number of decimal places. 0 means integer only.
- fixedZero
- Type
Boolean
- Description
Whether to pad with trailing zeros when the decimal places are insufficient. Only
effective when {#decimalCount} is specified.
- minValue
- Type
Number
- Description
Minimum value.
- maxValue
- Type
Number
- Description
Maximum value.
- numberInput
- Type
Boolean
- Description
Whether to use a native number input for the control. Some features (e.g., {#autoFormat})
will be unavailable if set to `true`, because native number inputs do not allow non-numeric input.
- readonly
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- spinner
- Getter
- Type
Enum|Boolean
- Setter
- Type
Enum|Boolean
- Description
Style of the increment/decrement buttons:
-'upDown': Up and down
-'leftRight': Left and right
-'beforeAfter': Before and after
-'auto': Auto-detection, leftRight for mobile and upDown for desktop, default value, null is equivalent to 'auto'.
-false: No increment/decrement buttons
- repeatInterval
- Getter
- Type
Boolean|Number
- Setter
- Type
Boolean|Number
- Description
The interval in ms for repeatedly firing the {#*click} event when the button is
pressed. `true` indicates 30 ms, `false` indicates that repeated firing is disabled. Defaults to `true`.
- value
- Getter
- Type
Number
- Setter
- Type
Number
## Instance Methods
- init
- onInputBlur
- fixLength
- fixValue
- Flags
Private
- Description
Formats the input value to the specified format.
- Parameters
- value
- Type
Number|String
- Description
The numeric or string value to be formatted.
- Returns Value
- Type
Number|String
- Description
The formatted value. `null` for empty value, `undefined` for invalid value.
- onKeyDown
- Flags
Private
- Description
Handler method executed when key pressed on {#inputEl}.
- Parameters
- e
- Type
Event
- Description
Event object.
- extraVerify
- addValue
- Flags
Private
- Description
Adjusts the current control value by the specified step size.
- Parameters
- e
- Type
Event
- Description
Event object
- add
- Type
Boolean
- Description
Whether to increase the value, `true` for increase, `false` for decrease
- decStep
- Flags
Private
- Description
Handler method executed when clicking the decrement button.
- Parameters
- e
- Type
Event
- Description
Event object
- incStep
- Flags
Private
- Description
Handler method executed when clicking the increment button.
- Parameters
- e
- Type
Event
- Description
Event object
# Wb.Trigger
Input control with trigger buttons. Clicking the button triggers the associated event.
## Class Information
- class name
Wb.Trigger
- Icon
trigger
- cname
trigger
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger
## Instance Properties
- autoHideTrigger
- Type
Boolean
- Description
Whether to hide the trigger button when the control is {#readonly}. Defaults to `true`.
- enterTriggerClick
- Type
Boolean
- Description
Whether to trigger the {#*triggerclick} event when the Enter key is pressed.
- trigger
- Getter
- Type
Wb.Button
- Setter
- Type
Boolean|Object
- Description
Whether to create trigger button(s). An object indicates the button configuration. `null`
resets to the initial state.
- triggers
- Getter
- Type
Wb.Item|Wb.Item[]
- Setter
- Type
Wb.Item|Wb.Item[]
- Description
Additional trigger buttons.
- readonly
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- onTriggerClick
- Type
Function
- Description
Handler method executed when the trigger button is clicked.
- Parameters
- e
- Type
Event
- Description
Event object
- triggerIcon
- Getter
- Type
IconString
- Setter
- Type
IconString
- Description
Default icon for the trigger. `null` resets to the original icon.
- editable
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the control is editable. Defaults to `true`.
## Instance Methods
- addTrigger
- Description
Adds trigger buttons.
- Parameters
- buttons
- Type
Wb.Button|Wb.Button[]
- Description
Buttons to be added.
- onKeyDown
- Flags
Private
- Description
Handler method executed when a key is pressed on the input box.
- Parameters
- e
- Type
Event
- Description
Event object
- onInputClick
- Flags
Private
- Description
Handler method executed when the readonly input box is clicked.
- Parameters
- e
- optional
true
- Type
Event
- Description
Event object
## Events
- triggerclick
- Description
Fired when the trigger button is clicked.
- Parameters
- e
- Type
Event
- Description
Event object
# Wb.FileInput
File input control for selecting client-side files. Typically used for file uploads.
## Class Information
- class name
Wb.FileInput
- Icon
search-file
- cname
fileInput
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.FileInput
## Instance Properties
- excludeVirtual
- Type
Boolean
- Description
Whether to exclude virtual files when getting the {#value}. Virtual files are simulated
with `{name, size}` objects instead of real file objects. Defaults to `null` auto detect: exclude virtual files
for single selection, include for multiple selection.
- download
- Type
Boolean
- Description
Whether to initiate a download when clicking the file button. Only effective when editing
within a {#grid|Wb.Grid}.
- fileButtons
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the file button bar is visible. The button bar is hidden when {#browseMode} is `true`
and {#multiple} is `false`.
- browseMode
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to enable preview. Files such as images can be previewed in this mode.
- browseWidth
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
Preview element width. E.g.: "calc(100% - 1em)". Numeric value is in px.
- browseHeight
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
Preview element height. E.g.: "calc(100% - 1em)". Numeric value is in px.
- directory
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to select directories instead of files.
- accept
- Flags
Key
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Comma-separated list of file types or a unique file type specifier for the allowed file types.
-'image!/*': All images.
-'audio!/*': All audio files.
-'video!/*': All video files.
-'application!/zip': Zip files.
-'.doc, .docx': Word files.
-'.xls, .xlsx': Excel files.
-'.ppt, .pptx, .pps, .ppsx': Powerpoint files.
-'.pdf': Pdf files.
-'.png, .jpg, .jpeg': Files in png or jpg format.
- lastFiles
- Flags
Private
- Type
File[]
- Description
The last selected files before the change event.
- readonly
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- multiple
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether multiple files selection is enabled.
- value
- Getter
- Type
File|File[]|Object|Object[]
- Description
The selected file(s). If {#multiple} property is `true`, the `value` will be
an array. To get all values including virtual files, please use {#getFiles} method. See {#getFiles} for details.
- Setter
- Type
Mix|File|FileList|File[]|Object|Object[]
- Description
The selected file(s). If {#multiple} property is `true`, the
`value` will be an array.
-If the value is `null`, `undefined`, or an empty array, the control will be cleared.
-If the value is an object `{name, size}`, it represents a virtual file where `name` is the file name and `size` is the\
file size.
-If the value is a string, it represents a file name.
## Instance Methods
- init
- onInput
- onDestroy
- Flags
Private
- Description
Handler method executed on destruction.
- wrapElDblClick
- Flags
Private
- Description
The method to be executed when the wrapping element is double-clicked.
- Parameters
- e
- Type
Event
- Description
The event object.
- openDialog
- Description
Open the file dialog to select files.
- addFile
- Description
Add files or virtual files. Virtual files are represented by objects.
Example:
me.addFile([file1, {name: 'pic.png', size: 2345}]); // add virtual file
- Parameters
- files
- optional
true
- Type
File|FileList|File[]|Object|Object[]
- Description
The file(s) to add.
- downloadFile
- Flags
Private
- Description
Download the file when the control is used in {#Wb.Grid}.
- Parameters
- btn
- Type
Wb.TagButton
- Description
The file button.
- preview
- Description
Preview the specified file or URL resource on the preview element. Only valid when {#browseMode} is true.
- Parameters
- file
- optional
true
- Type
File|Object|String
- Description
The file or URL resource. If omitted, the preview will be cleared.
- onInputChange
- Flags
Private
- Description
Fired when a file is selected via the file input element.
- Parameters
- e
- optional
true
- Type
Event
- Description
The event object.
- silentClear
- Flags
Private
- Description
Clear all files without Firing the change event.
- clear
- reset
- canShowClear
- onChange
- Flags
Private
- Description
Method executed when the selected files change.
- Parameters
- files
- Type
File|File[]
- Description
The newly selected file(s).
- oldFiles
- Type
File|File[]
- Description
The originally selected file(s).
- onTriggerClick
- verify
- getFiles
- Description
Get The selected file(s). Returns array if {#multiple} property is `true`.
- Parameters
- excludeVirtual
- optional
true
- Type
Boolean
- Description
Whether to exclude virtual files. See {#excludeVirtual} for details.
- Returns Value
- Type
File|File[]|Object|Object[]
- Description
The selected file(s).
-Whether to exclude virtual files from the result is determined by {#excludeVirtual}.
-Returns `null` when no files are selected.
-Returns `undefined` if {#excludeVirtual} is `true` and only virtual files exist.
## Events
- buttonclick
- Description
Fired when the file button is clicked.
- Parameters
- button
- Type
Wb.TagButton
- Description
The file button.
- e
- Type
Event
- Description
The event object.
- change
- Description
Fired when the selected files change.
- Parameters
- files
- Type
File|File[]
- Description
The newly selected file(s).
- oldFiles
- Type
File|File[]
- Description
The originally selected file(s).
# Wb.Picker
Dropdown control. Clicking the trigger button displays a picker component for input selecting.
## Class Information
- class name
Wb.Picker
- Icon
picker
- cname
picker
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker
## Instance Properties
- collapseOnEsc
- Flags
Desktop
- Type
Boolean
- Description
Whether to collapse the picker when the `Esc` key is pressed. Defaults to `true`.
- autoExpand
- Flags
Private
- Type
Boolean
- Description
Whether to automatically expand/collapse the picker when clicking the trigger button or
pressing the `Down` key.
- autoDispatch
- Flags
Private
- Type
Boolean
- Description
Whether to automatically dispatch the `Up` and `Down` arrow key events to the picker when it is
expanded.
- lazyRender
- Type
Boolean
- Description
Whether to not add the picker to the parent before it is expanded. Defaults to `true`.
- lazyPicker
- Type
Boolean
- Description
Whether to not create the picker instance before it is expanded.
- matchWidth
- Type
Boolean
- Description
Whether the width of the picker matches the width of the control.
- arrowDownExpand
- Type
Boolean
- Description
Whether to expand when pressing the `Down` key. `true` expanding with `Down`, `false` expanding\
with `Ctrl+Down`.
- dockedPicker
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Specifies whether the picker is always docked at the bottom of the window.
-`true`: Always docked at the bottom.
-`false`: Not docked.
-'auto': Docked in touch mode, not docked in desktop mode.
- expanded
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the picker is expanded.
- picker
- Getter
- Type
Wb.Container|Wb.Component
- Setter
- Type
Wb.Container|Wb.Component
- Description
The dropdown picker or its configuration object.
- pickerMinHeight
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The minimum height of the picker. Numeric value is in px.
- pickerMaxHeight
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The maximum height of the picker. Numeric value is in px.
- pickerHeight
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The height of the picker. Numeric value is in px.
- pickerWidth
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The width of the picker. Numeric value is in px.
- pickerMinWidth
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The minimum width of the picker. Numeric value is in px.
- pickerMaxWidth
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The maximum width of the picker. Numeric value is in px.
- pickerConfig
- Getter
- Type
Object
- Setter
- Type
Object
- Description
The configuration object of the picker.
- noCollapseEl
- Flags
Private
- Type
Element/Element[]
- Description
The element(s) that will not hide the picker when clicked.
## Instance Methods
- init
- onDestroy
- Flags
Private
- Description
Method executed when the control is destroyed.
- instancePicker
- Flags
Private
- Description
Instantiate the picker and return the picker instance.
- Returns Value
- Type
Wb.Component
- Description
The picker instance.
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed on the control.
- Parameters
- e
- Type
Event
- Description
The event object.
- onTriggerClick
- expand
- Description
Expand the picker.
- collapse
- Description
Collapse the picker.
- onDocTapDown
- Flags
Private
- Description
Method executed when {#globalThis.DocEl} is clicked.
- Parameters
- e
- Type
Event
- Description
The event object.
- onDocKeyDown
- Flags
Private
- Description
Method executed when a key is pressed on {#globalThis.DocEl}.
- Parameters
- e
- Type
Event
- Description
The event object.
- onDocWheel
- Flags
Private
- Description
Method executed when the mouse wheel is scrolled on {#globalThis.DocEl}.
- Parameters
- e
- Type
Event
- Description
The event object.
- onDocResize
- Flags
Private
- Description
Method executed when {#globalThis.DocEl} is resized.
- alignPicker
- Flags
Private
- Description
Align the picker to {#wrapEl}.
- collapseOnBlur
- Flags
Private
- Description
Collapse the picker when any part of the control loses focus.
## Events
- beforeexpand
- Description
Fired before the picker is expanded. Returning `false` to cancel the expand.
- expand
- Description
Fired when the picker is expanded.
- beforecollapse
- Description
Fired before the picker is collapsed. Returning `false` to cancel the collapse.
- collapse
- Description
Fired when the picker is collapsed.
# Wb.Date
Date picker control, used for inputting date by selecting from the dropdown calendar.
See example: {#%date.xwl|ide?openModule=example/comps/date.xwl}
## Class Information
- class name
Wb.Date
- Icon
calendar
- cname
date
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Date
## Instance Properties
- altFormats
- Type
Express/Array
- Description
Valid date formats.
- shareView
- Type
Boolean
- Description
Whether to use a shared picker. If a shared picker is used, the picker configuration will be
invalid. Defaults to `true`.
- rangeOffset
- Type
Number
- Description
The minimum number of days between the begin and the end date when {#beginDate} is specified.
- forceDate
- Type
Boolean
- Description
Whether to force the date value to be a valid date format. Defaults to `true`.
- localFormat
- Type
Enum
- Description
Whether to use the local date and time format. If the value is a string, it indicates the date and
time format. After setting this property, {#editable} will be `false`.
-`true`: The date control uses "dateText", the time control uses "timeText", and the datetime control uses "dateTimeText".
-'dateText': Date format, see {#Date.dateText}.
-'timeText': 24-hour time format, see {#Date.timeText}.
-'timeTextHM': 24-hour hour and minute format, see {#Date.timeTextHM}.
-'timeText12': 12-hour time format, see {#Date.timeText12}.
-'timeText12HM': 12-hour hour and minute format, see {#Date.timeText12HM}.
-'dateTimeText': 24-hour datetime format, see {#Date.dateTimeText}.
-'dateTimeTextHM': 24-hour hour, minute and datetime format, see {#Date.dateTimeTextHM}.
-'dateTimeText12': 12-hour datetime format, see {#Date.dateTimeText12}.
-'dateTimeText12HM': 12-hour hour, minute and datetime format, see {#Date.dateTimeText12HM}.
-'dateTimeMilliText': 24-hour datetime and millisecond format, see {#Date.dateTimeMilliText}.
-'dateTimeMilliText12': 12-hour datetime and millisecond format, see {#Date.dateTimeMilliText12}.
-'prettyText': The optimal 24-hour representation displayed according to the current time in the local region. see\
{#Date.prettyText}.
-'prettyText12': The optimal 12-hour representation displayed according to the current time in the local region. see\
{#Date.prettyText12}.
-'autoText': A datetime string in the local region, represented in 24-hour format with 4-digit year, 2-digit month, day,\
hour, minute, and second. The date and time are separated by a space. If the hour, minute, and second are 0, only the date\
part is displayed.
- defaultNow
- Flags
Private
- Type
Boolean
- Description
Whether to use the current time for unspecified year, month, day, hour, minute, second, and
millisecond. See {#Wb.parseDate} for details.
- beginDate
- Flags
Key
- Getter
- Type
String|Wb.Date
- Setter
- Type
String|Wb.Date
- Description
The range start date control, which will form a date range together with this control. If
the value is a string, it indicates the {#cid} property of the control.
- minValue
- Type
Date
- Description
The minimum value.
- Getter
- Type
Date|String
- Setter
- Type
Date|String
- Description
The minimum date value or standard {#formatted|Date.dateTimeFormat} date string value.
- maxValue
- Type
Date
- Description
The maximum value.
- Getter
- Type
Date|String
- Setter
- Type
Date|String
- Description
The maximum date value or standard {#formatted|Date.dateTimeFormat} date string value.
- dateValue
- Flags
Private
- Type
Date
- Description
The date value stored after setting {#localFormat}.
- value
- Flags
Key
- Getter
- Type
Date
- Description
Gets the date value or null if the value is empty or invalid.
- Setter
- Type
Date|String
- Description
Sets the date value or standard {#formatted|Date.dateTimeFormat} date string value.
- format
- Getter
- Type
String
- Setter
- Type
String
- Description
The date format, e.g.: "y-MM-dd HH:mm:ss.SSS". See {#Date.format} for details. Defaults
to `Str.dateFormat`.
## Instance Methods
- init
- createDatePicker
- Flags
Private
- Description
Create the date picker.
- onBeginChange
- Flags
Private
- Description
Method executed when the start date value changes.
- onBeginSelect
- Flags
Private
- Description
Method executed when the start date value is selected.
- onEndChange
- Flags
Private
- Description
Method executed when the end date value changes.
- onExpand
- Flags
Private
- Description
Method executed before the picker is expanded.
- onCollapse
- Flags
Private
- Description
Method executed when the picker is collapsed.
- extraVerify
- getCompareValue
- Flags
Private
- Description
Get the date value used for comparison.
- Parameters
- date
- Type
Date
- Description
The date value.
- Returns Value
- Type
Date
- Description
The processed date value.
- onInputBlur
- onSelectDate
- Flags
Private
- Description
Method executed when a date is selected in the calendar.
- Parameters
- date
- Type
Date
- Description
The selected date.
- parseDate
- Description
Parses the text value to a Date value using formats {#format} and `Str.altDateFormats`.
- Parameters
- text
- Type
String
- Description
The text value.
- Returns Value
- Type
Date
- Description
The parsed date value or null if the format is invalid.
## Events
- select
- Description
Fired when a date is selected from the dropdown calendar.
- Parameters
- date
- Type
Date
- Description
The selected date.
# Wb.Time
Time picker control, used for inputting time by selecting from the dropdown time picker.
## Class Information
- class name
Wb.Time
- Icon
time
- cname
time
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Date -> Wb.Time
## Instance Properties
- value
- Flags
Write-only
- Setter
- Type
Time
- minValue
- Flags
Write-only
- Setter
- Type
Time
- maxValue
- Flags
Write-only
- Setter
- Type
Time
## Instance Methods
- createDatePicker
- getCompareValue
- onExpand
# Wb.YearMonth
Year and month picker control, used for inputting date by selecting from the dropdown year and month calendar.
## Class Information
- class name
Wb.YearMonth
- Icon
month
- cname
yearMonth
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Date -> Wb.Time -> Wb.YearMonth
## Instance Properties
- value
- Flags
Write-only
- Setter
- Type
YearMonth
- minValue
- Flags
Write-only
- Setter
- Type
YearMonth
- maxValue
- Flags
Write-only
- Setter
- Type
YearMonth
## Instance Methods
- createDatePicker
- getCompareValue
# Wb.Datetime
Datetime picker component for inputting date by selecting from the dropdown calendar.
## Class Information
- class name
Wb.Datetime
- Icon
dt-picker
- cname
datetime
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Date -> Wb.Datetime
## Instance Properties
- value
- Flags
Write-only
- Setter
- Type
DateTime
- minValue
- Flags
Write-only
- Setter
- Type
DateTime
- maxValue
- Flags
Write-only
- Setter
- Type
DateTime
## Instance Methods
- createDatePicker
- getCompareValue
- onExpand
# Wb.Color
Color picker component for inputting color by selecting from the dropdown palette.
## Class Information
- class name
Wb.Color
- Icon
color
- cname
color
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Color
## Instance Methods
- init
- onChange
- Flags
Private
- Description
Executed when value changes.
- Parameters
- value
- Type
String
- Description
Color value.
- onExpand
- Flags
Private
- Description
Executed before the picker expands.
- onPickerChange
- Flags
Private
- Description
Method executed when the picker value changes.
- Returns Value
- Type
String
- Description
value The color value.
- onCollapse
- Flags
Private
- Description
Method executed when the picker collapses.
# Wb.Select
Dropdown select control for inputting value by selecting from the dropdown list.
See example: {#%select.xwl|ide?openModule=example/comps/select.xwl}
## Class Information
- class name
Wb.Select
- Icon
combo
- cname
select
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Select
## Instance Properties
- textField
- Type
String
- Description
The display field name of the control. Defaults to "text".
- subtextField
- Type
String
- Description
The secondary text field name for dropdown items. Defaults to "subtext".
- useTag
- Type
Boolean
- Description
Whether to create a tag button after selecting an item. Defaults to `true` when
{#multiSelect} is `true`.
- tagWidth
- Type
Number/String
- Description
The maximum width of the tag button area when using {#useTag}. Defaults to auto.
- tagTipField
- Type
String
- Description
The tooltip field name of the tag button when using {#useTag}. Defaults to "tip".
- autoLoad
- Type
Enum
- Description
Whether to automatically load remote data:
-'all': Auto load. Automatically sets {#loadOnce} and {#showMask} to true, and auto update the text display in the control.
-true: Auto load. Automatically sets {#loadOnce} and {#showMask} to true.
-false: Do not auto load. Default value.
- tagSelectItem
- Type
Boolean
- Description
When {#useTag} is set to `true` and the input box is empty, whether to select the item
corresponding to the last tag button after the picker expands.
- multiSelect
- Flags
Key
- Type
Boolean/Number/String
- Description
Whether to allow multiple items selection. It will automatically set {#useTag}
to `true`.
- keepValue
- Type
Boolean
- Description
When {#useTag} is true, whether to retain the value in the input box after selecting an item.
- tagWrap
- Type
Boolean
- Description
When {#multiSelect} is enabled, whether to allow line wrapping for the selected tag buttons.
- matchMode
- Type
Enum
- Description
Mode for filtering local data. Fields to filter are specified by {#matchFields}. See related
property {#selectMode}.
-'startsWith': Matches string start.
-'includes': Matches any string part.
-'endsWith': Matches string end.
-'equals': Matches entire string.
-'startsWithIC': Matches string start (case-insensitive). Default value.
-'includesIC': Matches any string part (case-insensitive).
-'endsWithIC': Matches string end (case-insensitive).
-'equalsIC': Matches entire string (case-insensitive).
- selectMode
- Type
Enum
- Description
Mode for selecting matching item. Defaults to {#matchMode}.
-`false`: No auto-selection.
-'startsWith': Matches string start.
-'includes': Matches any string part.
-'endsWith': Matches string end.
-'equals': Matches entire string.
-'startsWithIC': Matches string start (case-insensitive).
-'includesIC': Matches any string part (case-insensitive).
-'endsWithIC': Matches string end (case-insensitive).
-'equalsIC': Matches entire string (case-insensitive).
- matchFields
- Type
Mix/String/String[]
- Description
Field names for filtering local data. Defaults to `null` means
using {#textField}.
- queryName
- Type
String
- Description
Parameter name to pass the typed string for querying remote data. Defaults to "query".
- queryDelay
- Type
Boolean/Number
- Description
The length of time in milliseconds to delay between the start of typing and querying to
filter the dropdown list. `true` means 500ms for remote data and 10ms for local data. `0` or `false` means no delay.
- treePicker
- Type
Boolean/Object
- Description
Whether the picker is a {#Wb.Tree}. If it is an object, it represents the
configuration object for the tree.
- loadOnce
- Type
Boolean
- Description
Whether to load data only once when remotely loading data. `true` means the loaded
data is treated as local data.
- bindField
- Type
String
- Description
The additional field name for getting or setting values in contexts such as {#Wb.getValue}
and {#Wb.setValue}:
-In `Wb.setValue(this, data)`: the set {#value} is constructed as `[value, text]`, where `value` is `data[bindField]`\
and `text` is `data[{#cid}]`.
-In `data = Wb.getValue(this)`: the retrieved data is constructed as `{ cid: {#inputValue}, bindField: {#value} }`,\
where `cid` is {#cid} value.
Please refer to {#valueMap} to get or set multiple values.
- valueMap
- Type
Express/Object
- Description
The mapping object for getting or setting values in contexts such as {#Wb.getValue}
and {#Wb.setValue}:
-In `Wb.setValue(this, data)`: the set {#value} is constructed by {#getMappedValue}(data).
-In `data = Wb.getValue(this)`: the retrieved data is constructed by {#getMappedValue}().
For example:
select.valueMap = {code: 'my_code', email: 'my_email', full_name: 'valueMapSelect' };
select.value = {code: '10001', full_name: 'Terri Duffy', email: 'terri0@geejing.com'};
// get value, data is: {my_code: '10001', my_email: 'terri0@geejing.com', valueMapSelect: 'Terri Duffy'}
let data = Wb.getValue(select);
// set value to the select control
Wb.setValue(select, { my_code: '10003', my_email: 'michael8@geejing.com', valueMapSelect: 'Michael Sullivan' });
Setting this property defaults {#useTag} to `true`. Please refer to {#bindField} to get or set simple values.
- url
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The URL for the dropdown list data source.
- listData
- Flags
Private Read-only
- Getter
- Type
Array
- Description
The complete list data. Only valid for non-tree lists.
- keyName
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The key name, used to specify that the dropdown list data is derived from the {#%key-value|kve}
list with the specified name. Please set {#value} as `[value, text]` before the key-value data is loaded. For example,
when the key name is "gender", set {#value} to `[1, 'Male']`.
- rawValue
- Flags
Private
- Type
Object
- Description
The raw value of the control which is initialized.
- inputChanged
- Flags
Private
- Type
Boolean
- Description
Whether the input value has changed since the last value was set.
- forceSelect
- Flags
Key
- Type
Boolean
- Description
Whether to enforce the selection of a value from the picker items; if the value is `true`
and no valid item is selected, the control will prompt an invalid value.
- params
- Type
Object
- Description
The parameter object for remote queries. This parameter can be dynamically set in the
{#*beforequery} event.
- lastQueryTime
- Flags
Private
- Type
Date
- Description
The last remote query time.
- showMask
- Getter
- Type
Boolean|Object
- Setter
- Type
Boolean|Object
- Description
Whether to show loading mask when loading. See {#Wb.mask} for details.
- valueField
- Getter
- Type
String
- Setter
- Type
String
- Description
The value field name of the control. Defaults to {#textField}.
- tagSortable
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the {#tags|useTag} button can be dragged to adjust their order.
- itemTpl
- Flags
Key
- Getter
- Type
Wb.Template
- Setter
- Type
HtmlString|Wb.Template|Function
- Description
The {#template|Wb.Template} for dropdown items display.
- itemTplFn
- Getter
- Type
Wb.Template
- Setter
- Type
Function
- Description
The {#template|Wb.Template} function for dropdown items display.
- data
- Flags
Key
- Getter
- Type
Array
- Setter
- Type
Array
- Description
The local data of the dropdown list.
- value
- Flags
Key
- Getter
- Type
Mix
- Description
Gets the value of the control.
-If {#useTag} is `true`: returns the selected tag button data, or an array of it if {#multiSelect} is `true` (empty\
array if not found).
-If {#useTag} is `false`: returns the {#rawValue}; if it is `null`, returns the matching dropdown item value specified\
by {#valueField}, or {#inputValue} if no match is found.
- Setter
- Type
Mix
- Description
Sets the value of the control. `null` clears the current value of the control. If {#useTag} is `true`:\
the value is the selected tag button data (or an array of it if {#multiSelect} is `true`). If {#useTag} is `false`:
-Value is Array: the format is `[value, text]`, where `value` is the underlying value specified by {#valueField}, and\
`text` is the display value specified by {#textField}.
-Value is Object: the format is `{ [valueField]: ..., [textField]: ... }`, where the property named by {#valueField} is\
the underlying value, and the property named by {#textField} is the display value.
-Other types: the value is used to match the dropdown item's {#valueField} value; if a match is found, the corresponding\
display value is set; otherwise, the value is assigned to {#inputValue}.
- valueIndex
- Getter
- Type
Number
- Description
Gets the index of the current value in the dropdown items. Returns `-1` if not found.
- Setter
- Type
Number
- Description
Sets the value of the dropdown item at the specified index as the current value. Sets to empty
string value if the value does not exist.
- noWrap
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the dropdown items text is non-wrapping.
## Instance Methods
- init
- ready
- getMappedValue
- Description
Retrieves the values defined by {#valueMap} from the specified object.
- Parameters
- data
- optional
true
- Type
Object
- Description
The object to extract values from. Defaults to the control's {#value} (reverses keys/values).
- Returns Value
- Type
Object|Array
- Description
If `data` is specified and {#multiSelect} is `true`, returns Array; otherwise returns Object. Returns
`null` if no valid values in the specified `data`.
- onBeforeLoad
- Flags
Private
- Description
Method executed before the list data is loaded.
- onLoadSuccess
- Flags
Private
- Description
Method executed after the list data is loaded successfully.
- onLoadFailure
- Flags
Private
- Description
Method executed after the list data fails to load.
- canFireChange
- inList
- Description
Determines whether the display value exists in its dropdown list.
- Parameters
- text
- Type
String
- Description
The display value to check.
- Returns Value
- Type
Boolean
- Description
`true` if the value is in the list, `false` otherwise.
- onKeyDown
- onTriggerClick
- onInput
- Flags
Private
- Description
The method executed when the control receives input.
- extraVerify
- query
- Description
Queries the dropdown list of local or remote data and auto selects the matching dropdown item. See {#localQuery} and
{#remoteQuery} for details.
- Parameters
- value
- optional
true
- Type
String
- Description
The query value.
- localQuery
- Description
Queries the local dropdown items according to the specified {#matchMode} and {#matchFields}. If matching items are found,
the dropdown picker will be displayed; otherwise, it will be collapsed. The matching dropdown item will be automatically
selected by {#selectMode}.
- Parameters
- value
- optional
true
- Type
String
- Description
The query value. If the value is an empty string, the dropdown picker will be collapsed directly. If
the value is `null`, all localitems will be fetched.
- remoteQuery
- Description
Queries the remote dropdown items. The parameter specified by {#queryName} will be passed, and the matching dropdown item
will be automatically selected by {#selectMode}.
- Parameters
- value
- optional
true
- Type
String
- Description
The query value. If the value is an empty string, the dropdown picker will be collapsed directly. If
the value is null, the {#queryName} parameter will be passed as an empty string.
- saveInput
- Description
Saves the current input content to the dropdown list. If an item with the same content already exists, it will be moved
to the target position.
- Parameters
- toLast
- optional
true
- Type
Boolean
- Description
Whether to save to the last item. `false` saves to the first, `true` saves to the last.
- selectItem
- Flags
Private
- Description
Selects the matching item in the dropdown picker based on the input, {#matchFields}, {#matchMode} and {#selectMode}.
- onItemClick
- Flags
Private
- Description
The method executed when a dropdown item is clicked.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The clicked item.
- e
- Type
Event
- Description
The event object.
- handleSelect
- Flags
Private
- Description
Handles the selection operation.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The dropdown item.
- e
- Type
Event
- Description
The event object.
- batchSelect
- optional
true
- Type
Boolean
- Description
Whether to perform batch selection. `true` for select all, `false` for deselect all. The
default value is `null` (no batch processing).
- canShowClear
- addItemTag
- Flags
Private
- Description
Adds the specified item data to the tag button container.
- Parameters
- itemData
- Type
Object
- Description
The item data.
- destroyItemTag
- Flags
Private
- Description
Destroys the specified item tag.
- Parameters
- tag
- Type
Wb.TagButton|Boolean
- Description
The tag. `true` indicates all tags.
- prepareData
- Flags
Private
- Description
Processes the data, converts it into a valid format, and automatically sets {#textField} and {#valueField}.
- Parameters
- data
- Type
Array
- Description
The data.
- Returns Value
- Type
Array
- Description
The processed data.
- refresh
- Description
Refreshes the dropdown list data.
- isEmptyValue
- getListValue
- Flags
Private
- Description
Gets the value corresponding to the current input text that exists in the list.
- Parameters
- returnText
- optional
true
- Type
Boolean
- Description
Whether to return the input text if the corresponding value is not found in the
list. `true` returns the text, `false` returns `null`.
- Returns Value
- Type
Object
- Description
The value.
## Events
- beforeload
- Description
Fired before initiating a remote data request. Returning `false` to cancel the request.
- Parameters
- configs
- Type
Object
- Description
The loading options object.
- params
- Type
Object
- Description
The extra parameter object submitted with the request. These parameters with the same name have
higher priority than {#params}.
- loadsuccess
- Description
Fired after the remote data is loaded successfully.
- Parameters
- parent
- Type
Wb.SelectView
- Description
The dropdown picker.
- items
- Type
Wb.ViewItem[]
- Description
The dropdown picker items.
- response
- Type
Object
- Description
The returned value object.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
- loadfailure
- Description
Fired after the remote data fails to load.
- Parameters
- parent
- Type
Wb.SelectView
- Description
The dropdown picker.
- items
- Type
Wb.ViewItem[]
- Description
The dropdown picker items. This value is always `null` when the request fails.
- response
- Type
Object
- Description
The returned value object.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
- action
- Description
Fired when an action is executed. Setting this event prevents the picker expanding when clicking the
trigger. Actions includes:
-clicks on the trigger button
-clicks on the clear button
-selections of dropdown items
-Presses the Enter key in the input box if {#enterTriggerClick} is `true`
- beforequery
- Description
Fired before querying the dropdown data. Returning `false` will prevent the default querying.
Example:
// Customize local query data in the beforequery event
this.params = {abc: 123}; // Set parameters for remote query
this.data = [{ text: 'item1' }, { text: 'item2' }]; // Dynamically set dropdown data
this.localQuery(); // Query all local data
return false; // Prevent the default query
- Parameters
- value
- Type
String
- Description
The value to be queried.
- select
- Flags
Key
- Description
Fired when a dropdown item is selected. This event will be fired regardless of whether the value has changed
or not. See also the {#*change} event.
- Parameters
- data
- Type
Object
- Description
The data of the selected item.
- item
- Type
Wb.ViewItem
- Description
The selected item.
- e
- Type
Event
- Description
The event object.
- beforeselect
- Description
Fired before a dropdown item is selected. Returns `false` to prevent the selection.
- Parameters
- data
- Type
Object
- Description
The data of the selected item.
- item
- Type
Wb.ViewItem
- Description
The selected item.
- e
- Type
Event
- Description
The event object.
# Wb.ColorSelect
Color picker control.
## Class Information
- class name
Wb.ColorSelect
- Icon
brush
- cname
colorSelect
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Select -> Wb.ColorSelect
## Instance Properties
- defaultButton
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to add a default color button at the bottom.
## Instance Methods
- init
- onChange
- Flags
Private
- Description
The method executed when the value changes.
- Parameters
- value
- Type
String
- Description
The color value.
# Wb.BoolSelect
Boolean value selector. The difference between this control and {#Wb.Check} / {#Wb.Toggle} is that it can set and return
a `null` value.
## Class Information
- class name
Wb.BoolSelect
- Icon
check8
- cname
boolSelect
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Select -> Wb.BoolSelect
## Instance Properties
- returnType
- Type
Enum
- Description
The value type of the return value:
- 'int': Integer value, which is 0 or 1.
- 'string': String value, which is "false" or "true".
- 'bool': Boolean value. This is the default.
- value
- Flags
Key
- Getter
- Type
Boolean|Object
- Setter
- Type
Boolean|Object
- Description
The control value. Non-null value will be {#converted|Wb.parseBool} to Boolean.
## Instance Methods
- init
# Wb.Viewer
Viewer component, used for displaying content. It has a border, inner padding, and automatic scrolling by default.
## Class Information
- class name
Wb.Viewer
- Icon
desktop
- cname
viewer
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Viewer
# Wb.Container
Container component which can add one or more child components, and can set different layout types for the child components.
See example: {#%container.xwl|ide?openModule=example/comps/container.xwl}
## Class Information
- class name
Wb.Container
- Icon
container
- cname
container
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container
## Instance Properties
- copyApp
- Flags
Private
- Type
Boolean
- Description
Whether to copy the {#app} reference to child components when adding them.
- bodyEl
- Flags
Read-only
- Type
Element
- Description
The element under which all child component elements are added. Defaults to {#el}.
- tableStyle
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether to use a table style to display all child components. Usually used in grid {#layout}.
-`true`: Table style
-`false`: Normal style
-'simple': Simple table style
- labelUp
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the labels of the child components are displayed on top. `false` displays labels on the
left; `true` displays labels on top.
- labelAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The alignment of child component labels.
-'left': Left alignment
-'center': Center alignment
-'right': Right alignment
- verticalSort
- Type
Boolean
- Description
Whether only vertical dragging is allowed when adjusting the order of child
components. `false` for only horizontal direction, `true` for only vertical direction, `null` for all directions. For
enabling component order adjustment in the container, please refer to {#itemsSortable}.
- itemsSortable
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the order of child components can be adjusted via dragging.
- defaults
- Getter
- Type
Object
- Setter
- Type
Object
- Description
Default properties for child components, merged with parent's `defaults`. To clear this property
value, please use the {#clearDefaults} method.
- items
- Flags
Code
- Getter
- Type
Wb.Component[]
- Description
Gets the child components list.
- Setter
- Type
Object|Wb.Component|Array
- Description
Sets the child component(s) configuration objects, instances, or an array
of them.
- hasChild
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the container contains any child components. See also {#has}, {#hasSub}, and {#hasItem}.
- allItems
- Flags
Read-only
- Getter
- Type
Wb.Component[]
- Description
Gets all descendant components of the container.
- layout
- Flags
Key
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The predefined layout name of the container, used to specify the arrangement of its child
components. Multiple layout names are separated by spaces.
See example: {#%layout.xwl|ide?openModule=example/basic/layout.xwl}
-'fit': Child components fill the container.
-'row': flex row.
-'column': flex column.
-'center': Child components are horizontally and vertically centered. When child components overflow, they will be\
clipped to keep their center aligned with the container's center at all times.
-'vcenter': Centered layout. The difference from "center" is that the `flex-direction` is column.
-'form': Auto form. Child components are horizontally tiled according to their original width.
-'form1': Single-column form. The difference between this layout and `grid1` is that it can be flex stretched vertically.
-'grid': Auto grid. Child components are horizontally tiled according to the specified width and aligned to the grid.
-'grid1': Single-column grid.
-'grid2': Two-column grid.
-'grid3': Three-column grid.
-'grid4': Four-column grid.
-'grid5': Five-column grid.
-'grid6': Six-column grid.
-'grid7': Seven-column grid.
-'grid8': Eight-column grid.
-'grid9': Nine-column grid.
-'grid10': Ten-column grid.
-'grid11': Eleven-column grid.
-'grid12': Twelve-column grid.
-'grid13': Thirteen-column grid.
-'grid14': Fourteen-column grid.
-'grid15': Fifteen-column grid.
-'grid16': Sixteen-column grid.
-'grid17': Seventeen-column grid.
-'grid18': Eighteen-column grid.
-'grid19': Nineteen-column grid.
-'grid20': Twenty-column grid.
-'form-compact': Compact form. Child components are horizontally tiled according to their original width.
-'grid-compact': Compact grid. Child components are horizontally tiled according to the specified width and aligned to\
the grid.
-'middle': Child components are horizontally and vertically centered. When child components overflow, they will not be\
clipped, and their center will not be aligned with the container's center at this time.
-'hmiddle': Child components are horizontally centered. When child components overflow, they will not be clipped, and\
their center will not be horizontally aligned with the container's center at this time.
-'vmiddle': Child components are vertically centered. When child components overflow, they will not be clipped, and\
their center will not be vertically aligned with the container's center at this time.
- autoGrid
- Getter
- Type
Enum|Boolean
- Setter
- Type
Enum|Boolean
- Description
Whether to dynamically adjust to a single-column grid layout based on window size when
{#layout} uses `grid` layout.
-true: Use a single-column grid when the window is smaller than the specified width, otherwise revert to the setting\
`grid` layout.
-false: Revert to the setting `grid` layout.
-'up': Has the same effect as the `true` value and forces the label to be displayed above the control.
- gap
- Getter
- Type
Boolean|Number|String
- Setter
- Type
Boolean|Number|String
- Description
Whether to add gaps between child components. `true` explicitly adds gaps of default
size, `false` explicitly removes gaps. A number/string indicates the gap size. The default value is `null` meaning unset.
- wideLabel
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to set a widened label width for child components.
-`false` for normal width
-`true` for widened width.
- padding
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- bodyCls
- Getter
- Type
String
- Description
The CSS class name of the container's {#bodyEl} element, consistent with the `className` property.
- Setter
- Type
String
- Description
Multiple space-separated CSS class names to be added to the container's {#bodyEl} element. Unlike
the element's className property, setting this property will incrementally add class names.
- bodyStyle
- Getter
- Type
String
- Description
The style string of the container's {#bodyEl} element, consistent with the `style.cssText` property.
- Setter
- Type
String
- Description
Multiple styles separated by semicolons to be added to the container's {#bodyEl} element. Setting
this property will incrementally add styles.
- grid
- Getter
- Type
TextString
- Setter
- Type
TextString
- Description
The grid style of the container's {#bodyEl} element. Setting this property will also set the
display style to `grid`, see {#%css:grid} for details.
- gridTplColumns
- Getter
- Type
String
- Setter
- Type
String
- Description
The `grid-template-columns` style of the container's {#bodyEl} element.
- gridTplRows
- Getter
- Type
String
- Setter
- Type
String
- Description
The `grid-template-rows` style of the container's {#bodyEl} element.
- gridAutoFlow
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The `grid-auto-flow` style of the container's {#bodyEl} element, see {#%css:grid-auto-flow} for details.
-'row': Arrange elements by filling rows sequentially, adding new rows when necessary.
-'column': Arrange elements by filling columns sequentially, adding new columns when necessary.
-'dense': Use the "dense" packing algorithm.
-'row dense': Combination of row and dense.
-'column dense': Combination of column and dense.
- justify
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Alignment of child components along the main axis when the container uses `flex` layout.
-'start': Start
-'center': Center
-'end': End
-'space-between': Space between
-'space-around': Space around
- align
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Alignment of child components along the cross axis when the container uses `flex` layout.
-'start': Start
-'center': Center
-'end': End
-'baseline': Text baseline
-'stretch': Stretch
- shrink
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether child components automatically shrink when the container uses `flex` layout.
- flexWrap
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether child components automatically wrap when the container uses `flex` layout.
- alignContent
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
How space is distributed between and around rows of child components when the container uses `flex`
layout and wraps into multiple lines automatically.
-'start': Start
-'center': Center
-'end': End
-'between': Space between
-'around': Space around
-'stretch': Stretch
- firstItem
- Flags
Read-only
- Getter
- Type
Wb.Component
- Description
The first child component of the container or `undefined` if not found.
- lastItem
- Flags
Read-only
- Getter
- Type
Wb.Component
- Description
The last child component of the container or `undefined` if not found.
## Instance Methods
- init
- clearDefaults
- Description
Clears the default properties for child components. See the related {#defaults} property.
- setItems
- Description
Removes all child components and adds new child components.
- Parameters
- items
- Type
Object|Wb.Component|Array
- Description
The child component(s) configuration objects, instances, or an array of them.
- hasItem
- Description
Determines whether the container contains a specific child component. See also {#has}, {#hasSub} and {#hasChild}.
- Parameters
- comp
- Type
Wb.Component
- Description
The component to check.
- Returns Value
- Type
Boolean
- Description
`true` if contained, `false` otherwise.
- has
- Description
Determines whether the current container contains a specific child component or inner component. See also {#hasChild},
{#hasSub}, and {#hasItem}.
- Parameters
- comp
- Type
Wb.Component
- Description
The component to check.
- Returns Value
- Type
Boolean
- Description
`true` if contained, `false` otherwise.
- insertAfter
- Description
Inserts child components to the container after the specified child component.
Example:
panel.insertAfter({cname: 'text'}, text1); // Insert a new text box after `text1` control
- Parameters
- comps
- Type
Object|Wb.Component|Array
- Description
The component to be inserted, which can be a component configuration object,
a component instance, or an array composed of both.
- refItem
- optional
true
- Type
Wb.Component
- Description
- Insert after this component. If omitted, it will be appended to the container.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The inserted child components; returns an array if multiple components are inserted.
- insert
- Description
Inserts child components to the container at the specified index.
Example:
panel.insert(2, {cname: 'text'}); // Insert a new text box at the position of the 2nd child component
- Parameters
- index
- Type
Number
- Description
The index position to insert at.
- comps
- Type
Object|Wb.Component|Array
- Description
The component to be inserted, which can be a component configuration object,
a component instance, or an array composed of both.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The inserted child components; returns an array if multiple components are inserted.
- add
- Description
Add components to the end of the container.
Example:
// add component via object configured
container.add({cname: 'button', text: 'My Button'});
// add component via instance
container.add(new Wb.Button({text: 'My Button'}));
- Parameters
- comps
- Type
Object|Wb.Component|Array
- Description
The component to be inserted, which can be a component configuration object,
a component instance, or an array composed of both.
- Returns Value
- Type
Wb.Component|Wb.Component[]
- Description
The inserted child components; returns an array if multiple components are inserted.
## Events
- keydown
- Description
Fired when a key is pressed down.
- Parameters
- e
- Type
Event
- Description
The event object.
- keyup
- Description
Fired when a key is released.
- Parameters
- e
- Type
Event
- Description
The event object.
- add
- Description
Fired when a child component is added to this container.
- Parameters
- child
- Type
Wb.Component
- Description
The child component.
- position
- Type
Number
- Description
The index of the position where the component is added.
- beforeremove
- Description
Fired before a child component of this container is removed.
- Parameters
- child
- Type
Wb.Component
- Description
The child component.
- remove
- Description
Fired after a child component of this container is removed.
- Parameters
- child
- Type
Wb.Component
- Description
The child component.
- position
- Type
Number
- Description
The index of the position where the component is removed.
- buttonclick
- Description
Fired when a child button in the container is clicked.
- Parameters
- button
- Type
Wb.Button
- Description
The button.
- e
- Type
Event
- Description
The event object.
- buttontoggle
- Description
Fired when a child button in the container toggles its {#active|Wb.Button.active}state.
- Parameters
- button
- Type
Wb.Button
- Description
The button.
- active
- Type
Boolean
- Description
Whether the button is active.
- beforesort
- Description
Fired before adjusting the order of child components via dragging. Return `false` to prevent dragging.
- Parameters
- dragComp
- Type
Wb.Button
- Description
The dragged component.
- draggable
- Type
Wb.Draggable
- Description
The drag object.
- e
- Type
Event
- Description
The event object.
- sort
- Description
Fired after adjusting the order of child components via dragging.
- Parameters
- dragComp
- Type
Wb.Button
- Description
The dragged component.
- refComp
- Type
Wb.Button
- Description
The component before which the dragged component is placed. `null` indicates the last position.
- sorting
- Description
Fired when adjusting the order of child components via dragging. Return `false` to prevent dropping.
# Wb.ProgressBar
Progress bar for displaying progress.
## Class Information
- class name
Wb.ProgressBar
- Icon
progress
- cname
progressBar
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.ProgressBar
## Instance Properties
- percentEl
- Flags
Private
- Type
Element
- Description
Element for displaying progress.
- progressText
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Progress text.
- showPercent
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the progress percentage label.
- value
- Flags
Key
- Getter
- Type
Number
- Setter
- Type
Number
- Description
Progress value. Maximum value is 100, minimum value is 0.
## Instance Methods
- updateProgress
- Flags
Private
- Description
Updates the progress.
# Wb.Carousel
Auto-scroll playback container for timing-based scroll switching display of components inside the container,
e.g., scroll carousel for multiple images.
## Class Information
- class name
Wb.Carousel
- Icon
play1
- cname
carousel
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Carousel
## Instance Properties
- duration
- Type
Number
- Description
Duration of the sliding effect when switching components, in milliseconds, default is 500.
- navigateButtons
- Type
Boolean
- Description
Whether to display navigation buttons.
- items
- Flags
Code Write-only
- Setter
- Type
Object|Wb.Component|Array
- Description
Sets the child component(s) configuration objects, instances, or an array of
them. The `carouselCls` property of a child component is the {#cls} property of the container when the child component is
activated.
- interval
- Getter
- Type
Number
- Setter
- Type
Number
- Description
Interval in ms for switching component. If the value <= 0 will stop switching. Defaults to 5000.
- scrollButtons
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display manual scroll buttons.
- activeIndex
- Getter
- Type
Number
- Setter
- Type
Number
- Description
Index of the currently displayed child component. -1 means no child component is displayed.
## Instance Methods
- init
- onAdd
- Flags
Private
- Description
Method executed when adding a child component.
- Parameters
- comp
- Type
Wb.Component
- Description
The component to be added.
- onRemove
- Flags
Private
- Description
Method executed when removing a child component.
- Parameters
- comp
- Type
Wb.Component
- Description
The component to be removed.
- resetInterval
- Description
Restart auto-scroll switching.
- next
- Description
Switch to the next component.
- previous
- Description
Switch to the previous component.
# Wb.Fieldset
Fieldset container. Typically used to add multiple components and group these controls together.
## Class Information
- class name
Wb.Fieldset
- Icon
fieldset
- cname
fieldset
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Fieldset
## Instance Properties
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
Get the element for displaying the icon.
- title
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Title of the container.
- collapsible
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the container displays a button for collapsible operation.
- collapsed
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the container is collapsed; the container's {#bodyEl} will be hidden when collapsed.
## Instance Methods
- init
# Wb.Line
Divider line, typically used to separate content.
## Class Information
- class name
Wb.Line
- Icon
line
- cname
line
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Line
## Instance Properties
- dashed
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display dashed line.
- dimTitle
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display a dimmed title.
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
Get the element for displaying the icon.
- title
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Title of the component.
## Instance Methods
- init
# Wb.Title
Title component, typically displayed as a title with a divider line. It can be used to group different categories of
components in containers. The top margin will be automatically added to non-first title components; setting {#fixedMargin}
to `true` disables this default behavior.
## Class Information
- class name
Wb.Title
- Icon
title
- cname
title
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Title
## Instance Properties
- marker
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the marker before the title. The marker will not be displayed if an icon is
shown. Defaults to `true`.
- fixedMargin
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to use fixed margins. `true` for fixed margins, `false` for a larger top margin than
bottom margin when the component is not the first one.
- line
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the divider line.
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
Get the element for displaying the icon.
- title
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The title of the component.
# Wb.ScrolledCt
A scrollable container. When the container overflows, scroll buttons will be displayed on the left/right or (and)
top/bottom; these buttons replace the traditional scrollbar buttons for scrolling.
## Class Information
- class name
Wb.ScrolledCt
- Icon
position
- cname
scrolledCt
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ScrolledCt
## Instance Properties
- scrollStep
- Type
Number
- Description
The scroll step, the pixel length scrolled per button click. Defaults to 30.
- moniteWheel
- Flags
Private
- Type
Boolean
- Description
Whether wheel event listening has been enabled.
- scrollOnHover
- Type
Boolean
- Description
Whether to scroll automatically when the mouse hovers over the scroll buttons.
- verticalSort
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether only vertical reordering of child components is allowed. `false` for horizontal,
`true` for vertical.
- beforeBtn
- Flags
Read-only
- Getter
- Type
Wb.IconButton
- Description
Get the button for scrolling forward.
- afterBtn
- Flags
Read-only
- Getter
- Type
Wb.IconButton
- Description
Get the button for scrolling backward.
- vertical
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether scrolling is vertical. `true` for vertical, `false` for horizontal.
## Instance Methods
- init
- onResize
- Flags
Private
- Description
Method executed when resizing.
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- onWheel
- Flags
Private
- Description
Method executed when the mouse wheel is scrolled.
- Parameters
- e
- Type
Event
- Description
The event object.
- createScrollButton
- Flags
Private
- Description
Create a scroll button.
- Parameters
- isBefore
- optional
true
- Type
Boolean
- Description
Whether to create a button for scrolling forward.
- doScroll
- Flags
Private
- Description
Sets the scroll position.
- Parameters
- dir
- Type
Boolean
- Description
`true` for forward, `false` for backward.
- scrollToBefore
- Flags
Private
- Description
Scrolls the position forward.
- scrollToAfter
- Flags
Private
- Description
Scrolls the position backward.
- updateButtons
- Description
Updates the scroll buttons to show/destroy or enable/disable them.
## Events
- togglebutton
- Description
Fired when scroll buttons are shown or destroyed.
- Parameters
- visible
- Type
Boolean
- Description
Whether the scroll buttons are visible.
# Wb.Panel
Panel container, which includes {#title}, {#buttonsBar}, {#tbar}, {#bbar}, etc.
## Class Information
- class name
Wb.Panel
- Icon
panel
- cname
panel
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel
## Instance Properties
- ctEl
- Flags
Private
- Type
Element
- Description
Container element. The {#titleBar}, {#buttonsBar}, {#bodyEl} and other elements are appended
to this element.
- autoContextMenu
- Type
Boolean
- Description
Whether to automatically retrieve the buttons in the {#tbar} as the context menu.
- background
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- onButtonClick
- Flags
Code
- Type
Function
- Description
Method executed when a button in the {#buttonsBar} is clicked.
- minButtonWidth
- Type
Number|String
- Description
The minimum button width in the {#buttonsBar}. Numeric value is in px.
- buttonsBar
- Flags
Read-only
- Getter
- Type
Wb.Toolbar
- Description
Gets the dedicated bottom button toolbar.
- buttonAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Alignment of buttons in the {#buttonsBar} toolbar.
-'left': Align to the left
-'center': Align to the center
-'right': Align to the right
- plainTitle
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display a plain {#titleBar}, and it has a specified background color by default.
- maximized
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the panel is maximized, and `true` means maximized while `false` restores to the size
before maximization.
- maximizeBtn
- Flags
Private Read-only
- Getter
- Type
Wb.Button
- Description
Gets the maximize button.
- maximizable
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the panel has maximize/restore buttons which can perform related operations.
-true: Maximize button is enabled.
-false: Maximize button is disabled.
-null: No maximize button. Default value.
- minimizeBtn
- Flags
Private Read-only
- Getter
- Type
Wb.Button
- Description
Gets the minimize button.
- minimizable
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the panel has minimize button which can perform related operations.
-true: Minimize button is enabled.
-false: Minimize button is disabled.
-null: No Minimize button. Default value.
- collapsible
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the panel can be collapsed/expanded via the collapse button, and only the {#titleBar} is
visible after collapsing.
-true: Add a collapse button to the right of the {#titleBar} to provide collapse functionality.
-'tree': Add a tree-node-like expander to the left of the {#titleBar} to provide collapse functionality. Clicking the title\
bar also toggles collapse.
-'accordion': Like 'tree' type, except that clicking expands the panel and collapses all other panels in the same panel.
-false: No collapse button.
- collapsed
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the panel is collapsed, and only the {#titleBar} is visible after collapsing.
- titleBar
- Getter
- Type
Wb.Container
- Description
Gets the title bar container.
- Setter
- Type
Boolean
- Description
Sets whether the {#titleBar} is visible.
- titleLabel
- Flags
Read-only
- Getter
- Type
Wb.Label
- Description
Gets the title label in the {#titleBar}.
- titleCenter
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the {#title} of the panel is displayed centered.
- backBtn
- Flags
Read-only
- Type
Wb.Button
- Description
The button for close back operation.
- backButton
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to add a {#back button|backBtn} to the top-left corner of the title bar, and clicking the
button will close the window. Returning `false` in the {#beforeclose} event can prevent closing.
- menuBtn
- Flags
Read-only
- Type
Wb.Button
- Description
The menu button for creating {#menu}.
- menu
- Flags
Key
- Getter
- Type
Wb.Menu
- Setter
- Type
Wb.Menu
- Description
The panel menu. After setting this property, a {#menu button|menuBtn} will be created in the
top-right corner of the {#titleBar} and associated with this menu. The original menu will not be automatically destroyed
when setting a new menu.
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
Gets the element for displaying the icon in the {#titleBar}.
- toolsBar
- Flags
Read-only
- Getter
- Type
Wb.Container
- Description
Gets the tools bar in the {#titleBar}.
- tools
- Getter
- Type
Wb.Component[]
- Setter
- Type
Wb.Item[]|Wb.Component[]
- Description
The tool components in {#toolsBar}.
- buttons
- Flags
Key
- Getter
- Type
Wb.Component[]
- Setter
- Type
Wb.Button[]|Wb.Button
- Description
The buttons in the {#buttonsBar}.
- tbar
- Flags
Key
- Getter
- Type
Wb.Toolbar|Wb.Container|Wb.Component|Wb.Toolbar[]
- Setter
- Type
Wb.Toolbar|Wb.Container|Wb.Component|Wb.Toolbar[]
- Description
Top component bar(s), which are located below the title
bar and have a default {#weight} of 100.
- bbar
- Flags
Key
- Getter
- Type
Wb.Toolbar|Wb.Container|Wb.Component|Wb.Toolbar[]
- Setter
- Type
Wb.Toolbar|Wb.Container|Wb.Component|Wb.Toolbar[]
- Description
Bottom component bar(s), which are located at the
bottommost position and have a default {#weight} of 100.
- htmlTitle
- Type
Boolean
- Description
Whether {#title} is in HTML format, `true` HTML format, `false` plain text format.
- title
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The panel title. Setting it to `null` will destroy the title bar.
- closeBtn
- Flags
Private Read-only
- Getter
- Type
Wb.Button
- Description
Gets the close button in the {#titleBar}.
- closable
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the panel can be closed via the close button.
-true: The close button is enabled.
-false: The close button is disabled.
-null: No close button. Default value.
## Instance Methods
- init
- ready
- onToggleCollapse
- Flags
Private
- Description
Clicks to toggle the collapse/expand state of the panel.
- onCloseClick
- Flags
Private
- Description
The method executed when the close button is clicked.
## Events
- buttonclick
- Description
Fired when a button in the {#buttonsBar} is clicked.
- Parameters
- button
- Type
Wb.Button
- Description
The clicked button.
- e
- Type
Event
- Description
The event object.
# Wb.Menu
Menu container that can add menu {#items|Wb.Item} to provide selection interaction functionality.
See example: {#%toolbar-menu.xwl|ide?openModule=example/comps/toolbar-menu.xwl}
## Class Information
- class name
Wb.Menu
- Icon
menu2
- cname
menu
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ScrolledCt -> Wb.Menu
## Static Properties
- contextCard
- Flags
Read-only
- Type
Wb.Card
- Description
The card associated when the menu is used as {#Wb.Tab.tabMenu}.
## Instance Properties
- autoHideSC
- Type
Boolean
- Description
Whether to automatically hide the element showing shortcut keys when all menu items have no
shortcut keys. Defaults to `true`.
- ignoreInputMenu
- Type
Boolean
- Description
Whether to ignore displaying this menu on input boxes, replaced with displaying default menu.
- hideSystemMenu
- Type
Boolean
- Description
Whether to also prevent the display of the default context menu when the menu is prevented from
being displayed as a context menu.
- menuButton
- Type
Wb.Button
- Description
The button associated when the menu is displayed via the menu button.
- contextTarget
- Flags
Read-only
- Getter
- Type
Element
- Description
The target element associated with the root menu when displayed as a context
menu. Returns `null` if not found.
- visible
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- activeItem
- Flags
Read-only
- Getter
- Type
Wb.Item
- Description
The activated menu item of the menu. Returns `null` if not found.
## Static Methods
- hideMenus
- Flags
Private
- Description
Hides all menus except the specified one.
- Parameters
- menu
- optional
true
- Type
Wb.Menu
- Description
The menu to keep displayed. All other menus except this one will be hidden. `null` will hide all menus.
## Instance Methods
- init
- hide
- onSubRemoved
- Flags
Private
- Description
Method executed when the component is removed as a child component.
- destroy
- onRemove
- Flags
Private
- Description
Method executed when removing child components.
- onAdd
- Flags
Private
- Description
Method executed when adding child components.
- onDocWheel
- Flags
Private
- Description
Method executed when the mouse wheel scrolls on {#globalThis.DocEl}.
- Parameters
- e
- Type
Event
- Description
The event object.
- doHideMenu
- Flags
Private
- Description
Hides the current menu when the document is clicked.
- onDocKeyDown
- Flags
Private
- Description
Method executed when a key is pressed on the document.
- Parameters
- e
- Type
Event
- Description
The event object.
- walkingItem
- Flags
Private
- Description
Navigates the activated menu in the specified key direction.
- Parameters
- dir
- Type
String
- Description
Navigation direction.
-'left': Left
-'right': Right
-'up': Up
-'down': Down
## Events
- menuclick
- Flags
Key
- Description
Fired when a menu item is clicked.
- Parameters
- item
- Type
Wb.Item
- Description
The menu item.
- e
- Type
Event
- Description
The event object.
# Wb.Item
Menu sub item, usually added to the menu {#Wb.Menu} component. When designing in the IDE, its {#cname} property will be
default, so it can represent any button type. Its actual {#cname} property depends on the parent container by default. For
example, adding it in a menu represents a menu item, and adding it in a toolbar represents a tool button.
## Class Information
- class name
Wb.Item
- Icon
item
- cname
item
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Button -> Wb.SimpleButton -> Wb.Item
## Instance Properties
- isMenuItem
- Flags
Read-only
- Type
Boolean
- Description
Identifier indicating whether it is a menu item.
- shortcutSite
- Type
Boolean
- Description
Whether to reserve the placeholder width for displaying shortcut keys. Defaults to
`null` which means automatic judgment.
- clickHide
- Type
Boolean
- Description
Whether to hide the menu after clicking. `false` means not to hide, `true` means to hide,
default is `null` which means not to hide if there are submenus, otherwise hide.
- contextTarget
- Flags
Read-only
- Getter
- Type
Element
- Description
The target element associated with the root menu. Returns `null` if not found.
- ellipsis
- Type
Boolean
- Description
Adds a "..." suffix to the menu item text, usually indicating that clicking the menu will
pop up a dialog box.
- menuText
- Getter
- Type
String
- Setter
- Type
String
- Description
The text on the menu item.
- text
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- checkGroup
- Flags
Key
- Type
String
- Description
The group name. Only one menu item with the same group is allowed to be checked.
- checked
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display a check icon in the menu item. Each click will toggle the check state. Use
{#checkGroup} to set a group of checks, only one menu item with the same group is allowed to be checked. `true` displays
the checked icon, `false` displays the unchecked icon, `null` does not display the check icon.
## Instance Methods
- init
- onMouseLeave
- Flags
Private
- Description
Method executed when the mouse leaves.
- onClickEvent
## Events
- checkchange
- Description
Fired when the check state changes.
- Parameters
- checked
- Type
Boolean
- Description
Whether it is checked. `null` means not to display the check icon.
# Wb.Option
Option component, used to perform an action when clicked or associate a component to set a value.
See example: {#%option.xwl|ide?openModule=example/comps/option.xwl}
## Class Information
- class name
Wb.Option
- Icon
options
- cname
option
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.mixin.Icon -> Wb.Option
## Instance Properties
- textWrapEl
- Flags
Private
- Type
Element
- Description
The wrapper element for the title.
- allowClick
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the component allows clicks. Components that do not allow clicks will not have
foreground/background colors on hover and click, and click events on the component itself will be ignored. However,
click events can still be triggered by clicking {#flagEl}. The default value is automatically determined: it is `true`
when there are triggerable events or {#editor} is {#Wb.Toggle}, otherwise it is `false`.
- labelWidth
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The width of the {#text} label.
- description
- Getter
- Type
String
- Setter
- Type
String
- Description
Descriptive text for the {#text}, displayed beneath it.
- buttonStyle
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether it is in button style. This style is displayed centered and does not show the marker
icon.
- iconEl
- Flags
Read-only
- Getter
- Type
Element
- Description
Gets the element that displays the icon.
- flagEl
- Flags
Code
- Type
Element
- Description
The marker icon element on the right side of the component.
- flagIcon
- Getter
- Type
IconString
- Setter
- Type
IconString
- Description
The marker icon on the right side of the option. By default, the value is "right2" when the
{#handler} or {#click} event is set. Setting it to `null` will destroy the icon.
- text
- Flags
Key
- Getter
- Type
String
- Description
Text title.
- Setter
- Type
String
- Description
Text title.
- html
- Getter
- Type
String
- Description
HTML title.
- Setter
- Type
String
- Description
HTML title.
- valueText
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Text displayed on the right side, usually used to show values.
- handler
- Type
Express/Function
- Description
Sets the execution method when the component is clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- editor
- Flags
Key
- Getter
- Type
Wb.Toggle|Wb.Text|Wb.Number|Wb.Select|Wb.Date|Wb.Component
- Setter
- Type
Wb.Toggle|Wb.Text|Wb.Number|Wb.Select|Wb.Date|Wb.Component
- Description
The editor component displayed on the left side,
whose value is the component value. Note that clicking on this component will not trigger the {#click} event.
- value
- Flags
Key
- Getter
- Type
Boolean|Object
- Setter
- Type
Boolean|Object
- Description
The value of the component. When the {#editor} property is set, the value is the value of the
editor. When the {#options} property is set, the value is the value of the option; otherwise, it is `undefined`.
- options
- Flags
Key
- Getter
- Type
Array
- Setter
- Type
Array
- Description
The list of optional items. The selected value will be bound to the {#value} property of the
component. If the option value is {#Object}:
-"value" property represents the value.
-"text" property represents the display text.
-"_icon" property represents the icon,
-"_img" property represents the image icon.
- optionsTitle
- Getter
- Type
String
- Setter
- Type
String
- Description
The title of the option list {#drawer|Wb.Drawer}.
## Instance Methods
- init
- ready
## Events
- click
- Flags
Key
- Description
Fired when the component is clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- change
- Flags
Key
- Description
Fired when the value changes. Only effective after the {#editor} or {#options} property is set.
- Parameters
- value
- Type
String
- Description
New value.
- oldValue
- Type
String
- Description
old value.
# Wb.Viewport
Viewport panel. By default, it is a panel with the {#full} property set to `true`. This component is displayed in full
screen within its parent container.
## Class Information
- class name
Wb.Viewport
- Icon
viewport
- cname
viewport
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Viewport
# Wb.Toolbar
Toolbar, a container with a specific layout and buttons as its default child components.
See example: {#%toolbar-menu.xwl|ide?openModule=example/comps/toolbar-menu.xwl}
## Class Information
- class name
Wb.Toolbar
- Icon
toolbar
- cname
toolbar
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ScrolledCt -> Wb.Toolbar
## Instance Properties
- overflowMenu
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the overflow menu for displaying all items when the buttons overflow.
- type
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Predefined toolbar styles.
-'menu': Menu list style.
-'padding': Increase the gap between buttons under the toolbar.
## Instance Methods
- onToggleButton
- Flags
Private
- Description
The method executed when the scroll button visible is toggled.
- Parameters
- visible
- Type
Boolean
- Description
Whether the button is visible.
- onBeforeshowmenu
- Flags
Private
- Description
The method executed before the overflow menu is displayed.
# Wb.PagingBar
Pagination toolbar, used for paginated display of the view {#Wb.View} and its descendant components.
## Class Information
- class name
Wb.PagingBar
- Icon
pagenum
- cname
pagingBar
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ScrolledCt -> Wb.Toolbar -> Wb.PagingBar
## Instance Properties
- pageButtonsCount
- Type
Number
- Description
The number of page number buttons.
- showNavigate
- Type
Boolean
- Description
Whether to display the navigation buttons. Defaults to `true`.
- showFirstButton
- Type
Boolean
- Description
Whether to display the first page button. Defaults to `true`.
- showLastButton
- Type
Boolean
- Description
Whether to display the last page button. Defaults to `true`.
- showPageEdit
- Type
Boolean
- Description
Whether to display the page number edit box. Defaults to `true`.
- showRefreshButton
- Type
Boolean
- Description
Whether to display the refresh button. Defaults to `true`.
- showPageSizeMenu
- Type
Boolean
- Description
Whether to display the menu for the number of rows per page. Defaults to `true`.
- showExportMenu
- Type
Boolean
- Description
Whether to display the export menu. Defaults to `true`.
- showSelectMenu
- Type
Boolean
- Description
Whether to display the menu for allowing text selection. Defaults to `true`.
- showColumnsMenu
- Type
Boolean
- Description
Whether to display the column settings menu. Defaults to `true`.
- showInfoLabel
- Type
Boolean
- Description
Whether to display the info label. Defaults to `true`.
- totalOnly
- Type
Boolean
- Description
Whether the info label only displays the total number of rows. By default, it displays
the record range and total number.
- showPageButtons
- Type
Boolean
- Description
Whether to display the page number buttons.
- docked
- Type
Enum
- Description
The docking position of the toolbar when it is added to the table. Defaults to `top`.
-'top': Top.
-'bottom': Bottom.
- view
- Flags
Code
- Type
Wb.View
- Description
The view object that requires pagination.
## Instance Methods
- init
- ready
- destroy
- onColumnMenuShow
- Flags
Private
- Description
The method executed when the column menu is displayed.
- onColumnMenuClick
- Flags
Private
- Description
The method executed when the column menu is clicked.
- Parameters
- item
- Type
Wb.Item
- Description
Menu item.
- e
- Type
Event
- Description
Event object.
- onButtonClick
- Flags
Private
- Description
The method executed when the button is clicked.
- updateInfo
- Description
Update the content of the statistical info label.
- refresh
- Description
Refresh the pagination toolbar based on local or remote data.
- onViewSuccess
- Flags
Private
- Description
The method executed when the data of the view associated with the toolbar is loaded successfully.
- loadPageButtons
- Flags
Private
- Description
Creates the pagination buttons based on the associated view.
# Wb.TabBar
Tab button toolbar for the {#Tab|Wb.Tab} component.
## Class Information
- class name
Wb.TabBar
- Icon
undefined
- cname
tabBar
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ScrolledCt -> Wb.Toolbar -> Wb.TabBar
## Instance Methods
- onResize
# Wb.mixin.View
A mixin class for view access, which can be mixed into {#Wb.View} and {#Wb.TreeItem}.
## Class Information
- class name
Wb.mixin.View
- Icon
undefined
- cname
viewMixin
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.mixin.View
## Instance Methods
- insertDataBefore
- Description
Inserts child items into the current view from the provided data before the specified {#item|Wb.ViewItem}.
Example:
// Insert a single item
view.insertDataBefore({text: 'foo', myProp: 'bar'});
// Insert multiple items
view.insertDataBefore([{text: 'foo1', myProp: 'bar1'}, {text: 'foo2', myProp: 'bar2'}]);
- Parameters
- data
- Type
Object|Array
- Description
Data to insert. Can be a single object or array of objects.
- refItem
- optional
true
- Type
Wb.ViewItem
- Description
Reference item to insert before. If omitted, it will be added to the view.
- Returns Value
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The inserted child item(s) or `null`; returns an array if `data` is array.
- insertDataAfter
- Description
Inserts child items into the current view from the provided data after the specified {#item|Wb.ViewItem}.
Example:
// Insert a single item
view.insertDataAfter({text: 'foo', myProp: 'bar'}, refItem);
// Insert multiple items
view.insertDataAfter([{text: 'foo1', myProp: 'bar1'}, {text: 'foo2', myProp: 'bar2'}], refItem);
- Parameters
- data
- Type
Object|Array
- Description
Data to insert. Can be a single object or array of objects.
- refItem
- optional
true
- Type
Wb.ViewItem
- Description
Reference item to insert before. If omitted, it will be added to the view.
- Returns Value
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The inserted child item(s) or `null`; returns an array if `data` is array.
- insertData
- Description
Inserts child items into the current view from the provided data at the specified index.
Example:
// Insert a single item
view.insertData(1, {text: 'foo', myProp: 'bar'});
// Insert multiple items
view.insertData(1, [{text: 'foo1', myProp: 'bar1'}, {text: 'foo2', myProp: 'bar2'}]);
- Parameters
- index
- Type
Number
- Description
The index position to insert at.
- data
- Type
Object|Array
- Description
Data to insert. Can be a single object or array of objects.
- Returns Value
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The inserted child item(s) or `null`; returns an array if `data` is array.
- addData
- Description
Appends child items into the current view from the provided data.
Example:
// Add a single item
view.addData({text: 'foo', myProp: 'bar'});
// Add multiple items
view.addData([{text: 'foo1', myProp: 'bar1'}, {text: 'foo2', myProp: 'bar2'}]);
- Parameters
- data
- Type
Object|Array
- Description
Data to insert. Can be a single object or array of objects.
- Returns Value
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The inserted child item(s) or `null`; returns an array if `data` is array.
- setData
- Description
Sets the data of the view. The differences between this method and methods such as {#addData} and {#insertDataBefore} are
as follows:
-After using this method, the {#rendered} property will be set to `true`, indicating that the data has been rendered.
-Clears all existing items if the `add` parameter is `null`.
-It will not fire the {#itemchange} event. When {#recordChanges} is `true` and the `add` parameter is `null`, the history\
of additions, deletions, and modifications will be cleared.
-The first item will be selected according to the {#autoSelect} property.
-If the view is a {#grid|Wb.Grid} and cell merging configuration is set, this method will perform cell merging.
- Parameters
- data
- Type
Object|Array
- Description
Data to insert. Can be a single object or array of objects.
- add
- optional
true
- Type
Boolean
- Description
Whether to add data items to the begin:
-true: Add to the begin.
-false: Add to the end.
-null: Clear the existing items before adding new items.
- Returns Value
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The inserted child item(s) or `null`; returns an array if `data` is array.
- getData
- Description
Gets an array of data copies for the descendant items of the current view.
- Parameters
- deep
- optional
true
- Type
Boolean
- Description
Whether to deeply get the data of all descendant components. `true` for all descendant,
`false` for all child.
- excludeItems
- optional
true
- Type
Wb.ViewItem[]
- Description
Exclude the data of these items.
- removeEmptyItems
- optional
true
- Type
Boolean
- Description
Whether to remove the `items` property for empty nodes.
- Returns Value
- Type
Array
- Description
An array of data copies or an empty array if there is no data.
- sortItems
- Description
Sorts the view items by the specified method. See {#Wb.View.sort} for reload data to sort.
- Parameters
- fn
- Type
Function
- Description
The sorting method; see the {#%Array.sort|obj:Array/sort} for details.
- .a
- optional
true
- Type
Wb.ViewItem
- Description
Sorting record A.
- .b
- optional
true
- Type
Wb.ViewItem
- Description
Sorting record B.
- findItem
- Description
Finds the first child item in the view with the specified field value.
Example:
view.findItem('field1', 'value1');
- Parameters
- fieldName
- Type
String
- Description
The field name.
- value
- Type
Object
- Description
The value.
- Returns Value
- Type
Wb.ViewItem
- Description
The found item or `null` if not found.
- findItems
- Description
Finds all child items in the view with the specified field value.
- Parameters
- fieldName
- Type
String
- Description
The field name.
- value
- Type
Object
- Description
The value.
- Returns Value
- Type
Wb.ViewItem[]
- Description
An array of all found items or an empty array if not found.
- downItem
- Description
Finds the first descendant item in the view with the specified field value.
- Parameters
- fieldName
- Type
String
- Description
The field name.
- value
- Type
Object
- Description
The value.
- Returns Value
- Type
Wb.ViewItem
- Description
The found item or `null` if not found.
- downItems
- Description
Finds all descendant items in the view with the specified field value.
- Parameters
- fieldName
- Type
String
- Description
The field name.
- value
- Type
Object
- Description
The value.
- Returns Value
- Type
Wb.ViewItem[]
- Description
An array of all found items or an empty array if not found.
# Wb.View
View component: a component for displaying data using custom templates and formatting.
See example: {#%view.xwl|ide?openModule=example/comps/view.xwl}
## Class Information
- class name
Wb.View
- Icon
list-view
- cname
view
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View
## Instance Properties
- isView
- Flags
Read-only
- Type
Boolean
- Description
Identifier for whether it is a view.
- keyWalking
- Type
Boolean/String
- Description
Whether to automatically select the first found item based on the key input
content. `true` means the lookup content is the `text` property of the item; a string means the lookup content
is this property of the item. Set {#keyWalkingSensitive} to enable case sensitivity.
- keyWalkingSensitive
- Type
Boolean
- Description
Whether {#keyWalking} is case sensitivity.
- autoToBottom
- Type
Enum
- Description
Whether to automatically scroll to the bottom after loading data.
-true: Scroll to the bottom only on first load.
-false: Do not scroll.
-'always': Scroll to the bottom after each load.
- reserveScrollbar
- Type
Enum
- Description
Whether to retain the scrollbar position after the view content is updated.
-true: Retain both horizontal and vertical scrollbar positions.
-false: Reset both horizontal and vertical scrollbar positions.
-'y': Retain only the vertical scrollbar position.
-'x': Retain only the horizontal scrollbar position.
- reverseData
- Type
Boolean
- Description
Whether to reverse the data when using the {#setData} method to load data.
- timeout
- Type
Number
- Description
The maximum request time in milliseconds when requesting remote data. If this time is exceeded,
the request will be terminated. `null` or 0 means no timeout. Defaults to `null`.
- clickSelect
- Type
Enum
- Description
The method for selecting items when the mouse is clicked or pressed (on mouse down).
-false: Do not select items when the mouse is clicked or pressed.
-true: Select items on mouse click (default for touch mode).
-null: Select items on mouse press (mouse down, default for desktop mode).
- contextSelect
- Type
Boolean
- Description
Whether to auto select the item when the context menu is displayed. Defaults to `true`.
- recordChangesCt
- Flags
Private
- Type
Number
- Description
Counter for executing {#recordChanges}; execution is allowed when the counter is 0.
- localData
- Flags
Key
- Type
Array
- Description
Local data for the view. The difference between this property and {#data} is that
`localData` is all page data stored locally, while {#data} is the current page data.
- allowDeselect
- Type
Boolean
- Description
Whether to allow deselecting items by clicking.
-false: disabled
-true: enabled
-null: auto determine, disabled for single selection, enabled for multiple selection.
- autoLoad
- Flags
Key
- Type
Boolean
- Description
Whether to automatically load remote data after the view is ready. Only effective when
the view has no data. Defaults to `true`.
- autoSelect
- Type
Boolean
- Description
Whether to automatically select the first valid item after data is loaded.
- defaultFields
- Type
Object
- Description
Default field metadata, which will be automatically merged into {#fields}.
- fireSelected
- Type
Boolean
- Description
Whether to trigger the event for all selected items.
- true: The event is triggered for all selected items.
- false: The event is only triggered for the target item (default).
For example, when double-clicking an item in a multi-select view:
- If set to `true`, the event will be triggered for all selected items.
- If set to `false` (default), the event will only be triggered for the double-clicked item.
- itemsPath
- Type
String
- Description
Path to the field that stores the data node in the response data object. Defaults to "items"
- totalPath
- Type
String
- Description
Path to the field that stores the total count in the response data object. Defaults to "total".
- fieldsPath
- Type
String
- Description
Path to the field that stores the field meta in the response data object. Defaults to "fields".
- pageCount
- Flags
Read-only
- Type
Number
- Description
Total number of pages of the current view.
- pageSize
- Flags
Key
- Type
Number
- Description
Number of items displayed per page. -1 means displaying all items (no pagination). Defaults
to 100 if {#pagingBar} exists, otherwise -1.
- fromName
- Type
String
- Description
Parameter name for the starting row number when requesting remote data (0-based). Defaults to
"_from".
- toName
- Type
String
- Description
Parameter name for the ending row number when requesting remote data (0-based). Defaults to
"_to".
- pageSizeName
- Type
String
- Description
Parameter name for the number of items per page when requesting remote data. Defaults to "_size".
- sortName
- Type
String
- Description
Parameter name for the sorting when requesting remote data. Defaults to "_sort".
- pageIndexName
- Type
String
- Description
Parameter name for the page index when requesting remote data (0-based).
- showMask
- Type
Boolean/Object
- Description
Whether to show loading mask when loading data. See {#Wb.mask} for details.
- suspendSelChange
- Flags
Private
- Type
Number
- Description
Suspend firing the selectionchange event when the value is greater than `0`.
- params
- Type
Express/Object
- Description
Default parameter object passed when requesting remote data.
- cached
- Flags
Key
- Type
Boolean
- Description
Whether to cache the remote data loaded via {#url} locally as {#localData} after the first
load. To reload data from the remote server, set {#localData} to `null` and then call the {#load} method. Setting this
property to `true` will not pass pagination-related parameters.
- url
- Flags
Key
- Type
String
- Description
Default URL for loading remote data. See {#localData} for loading local data.
- fields
- Type
Object
- Description
Metadata definition object for the field of data fields in the view. The keys of the object
are field names, and the values are configuration objects.
Example:
{field1: {type: 'date', format: 'y-M-d'}, field2: 'float'}
The properties of the configuration object are:
- Parameters
- type
- optional
true
- Type
String
- Description
Field type, including:
-'string': String
-'int': Integer
-'float': Floating-point number
-'bool': Boolean value, see the {#Wb.parseBool} method for the conversion rules of Boolean values.
-'date': Date, set the format property for the date format. By default, if the value length is less than 8, it uses\
{#Date.ymFormat}; if less than 11, it uses {#Date.dateFormat}; otherwise, it uses {#Date.dateTimeFormat}.
- format
- optional
true
- Type
String
- Description
Date format, only applicable when type is "date". Refer to {#Date.format} for date format rules.
- value
- optional
true
- Type
Object
- Description
Default value. The value when the field value is `undefined`.
- convert
- optional
true
- Type
Function
- Description
Value conversion function. It takes `value` and `data` as input parameters, and returns the
converted value.
- .value
- Type
Object
- Description
The value of the current field based on the metadata.
- .data
- Type
Object
- Description
The object of all field values of the current record.
- keyFields
- Type
Boolean/String/Array
- Description
List of key field names in the view. When getting the original value of a
record, only the field in this list will be obtained. If it is a string, it represents an array separated by
commas. `true` means all fields are key fields, `false` means no fields are key fields. The default is that all fields
with a value length not exceeding 500 are key fields.
- smartNavigate
- Type
Enum
- Description
Direction for using smart navigation. It is used to find the nearest item in the specified direction
when navigating in that direction.
-'horizontal': Horizontal.
-'vertical': Vertical. Default value.
-'both': Horizontal and vertical.
-'none'/null: None. The UP/LEFT keys select the previous item, and the DOWN/RIGHT keys select the next item.
- circleNavigate
- Type
Boolean
- Description
Whether to enable circular navigation. The previous item of the first item is
the last item, and the next item of the last item is the first item.
- enterEvent
- Type
Boolean/String
- Description
Name of the event triggered when pressing Enter on an item. `true` means auto-judge:
check the "itemclick" and "itemdblclick" events in sequence, and trigger the event if it is registered. `false` means
no event will be triggered. Defaults to `true`.
- multiSelect
- Flags
Key
- Type
Boolean
- Description
Whether multiple items in the view can be selected.
- rectSelect
- Flags
Desktop
- Type
Boolean
- Description
Whether to allow selecting items by dragging to draw a box.
- total
- Flags
Read-only
- Type
Number
- Description
Total number of items to be loaded in the view. Usually returned by the server and used for
pagination.
- loading
- Flags
Read-only
- Type
Boolean
- Description
Whether the view is loading.
- oldBodyEl
- Flags
Private
- Type
Element
- Description
The original {#bodyEl}.
- emptyHint
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display a prompt message when the view content is empty.
- selectColor
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the item uses the specified font color and background color when selected and hovered
over.
-'active': Use the specified colors when clicked, and also when hovered over in desktop mode.
-'hover': Use the specified colors only when hovered over.
-'select': Use the specified colors only when selected.
-'none': Do not use the specified colors for selection or hover.
-null: Use the specified colors for both selection and hover. Default value.
- cursorPointer
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to use a pointer cursor for view items.
- captureClass
- Getter
- Type
String
- Setter
- Type
String
- Description
CSS class name for the specified DOM element. When clicking on these elements, the default click
and item selection behaviors are not executed, and the {#captureclick} event is triggered.
- data
- Getter
- Type
Array
- Setter
- Type
Array
- Description
Data displayed on the current page of the view. To access local data, set the {#localData} property;
to access remote data, set the {#url} property. See the {#setData} method for details.
- mouseDownEl
- Flags
Private
- Type
Element
- Description
The element on which the mouse is pressed down.
- sorterList
- Flags
Private
- Type
Array
- Description
The sorted array of sorting fields.
- sorters
- Flags
Key
- Getter
- Type
Mix|String|Object|Array
- Setter
- Type
Mix|String|Object|Array
- Description
The sorting field(s). If the value is a string, it represents the field
name; if the value is an object `{name, desc}`, `name` indicates the field name, `desc` indicates whether to sort
in descending order. `null` means no sorting fields are specified. Setting this property will not reload the data,
if you need to sort and reload data please use the {#sort} method.
Example:
view.sorters = 'field1'; // Specify the name of the sorting field
view.sorters = {name: 'field2', desc: true}; // Specify the sorting field name and sorting method
view.sorters = ['field3', {name: 'field4', desc: true}]; // Specify multiple sorting fields
- isModified
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Determines whether the current view data has been modified since the last {#commit}. Only valid
when the {#recordChanges} property is `true`.
- modifiedData
- Flags
Read-only
- Getter
- Type
Object
- Description
An object `{insert, update, del}` of copies of all added, deleted, and modified data since the last
{#commit}. Only valid when the {#recordChanges} property is `true`.
-insert: Newly added data.
-update: Updated data. The field names starting with "#" are the original values.
-del: Deleted data. The field names starting with "#" are the original values.
- recordChanges
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to record the add, delete, and modify operations on the view data. Access {#modifiedData}
to get the added, deleted, and modified data. Call the {#commit} method to submit the data.
- draggable
- Getter
- Type
Boolean|Object
- Setter
- Type
Boolean|Object
- Description
Whether the view items can be dragged. An object value indicates the configuration object
for {#Wb.Draggable}. Access {#draggableComp} to get the {#Wb.Draggable} object. Set {#droppable} to `true` to allow
dropping after dragging. See {#*itemdrag} for details.
- candidateSelection
- Flags
Read-only
- Getter
- Type
Wb.ViewItem
- Description
The recommended candidate item to be selected when the selected item is deleted. Returns
`null` if there is no candidate item.
- lastParams
- Flags
Private
- Type
Object
- Description
The parameter object used in the last remote request.
- loaded
- Flags
Read-only
- Type
Boolean
- Description
Whether the remote data of the current view has been loaded.
- rendered
- Flags
Read-only
- Type
Boolean
- Description
Whether the current view data has been rendered.
- xhr
- Flags
Read-only
- Type
XMLHttpRequest
- Description
The AJAX request object used for loading data.
- keyNavigate
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether keyboard navigation and related operations are allowed. Defaults to `true`.
- firstEditColumn
- Flags
Read-only
- Getter
- Type
Wb.Column
- Description
The first editable column or `null` if not found.
- pagingBar
- Flags
Key
- Getter
- Type
Wb.PagingBar
- Setter
- Type
Enum|Object
- Description
Pagination toolbar. An object value represents the toolbar configuration object, where its
{#docked|Wb.PagingBar.docked} property indicates the position.
-true: Generate the bottom toolbar.
-false: Do not generate the toolbar.
-'top': Generate the top toolbar.
-'pageNums': Generate the bottom toolbar with page number buttons.
- pendPageIndex
- Flags
Private
- Type
Number
- Description
Pending current page index. The index is confirmed after successful loading, otherwise
it is rejected. `undefined` indicates the index has been confirmed.
- pageIndex
- Flags
Code
- Getter
- Type
Number
- Setter
- Type
Number
- Description
Current page index of the view (0-based).
- autoPaging
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to automatically load the next page when the view scrolls to the top or bottom:
-true: Load the next page and append data to the bottom when scrolling to the bottom
-false: Load the next page and prepend data to the top when scrolling to the top
-null: Do not load new pages. Default value.
- onPagingScroll
- Flags
Private
- Type
Boolean
- Description
The method executed when the view scrolls after setting {#autoPaging} to `true`.
- html
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- itemTpl
- Flags
Key
- Getter
- Type
Wb.Template
- Setter
- Type
HtmlString|Wb.Template|Function
- Description
View item template {#Wb.Template}, used to generate view items. The first
defined element that contains the "w-item" class name will be used as the element for the entire item.
- itemTplFn
- Flags
Key
- Getter
- Type
Wb.Template
- Setter
- Type
Function
- Description
View item template function.
- selection
- Flags
Code
- Getter
- Type
Wb.ViewItem
- Description
Get the selected item with focus. If none of the items have focus, return the first selected
item. Return `null` if no items are selected.
- Setter
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
Set the selected item(s) in the view.
- selections
- Getter
- Type
Wb.ViewItem[]
- Setter
- Type
Wb.ViewItem[]
- Description
The selected items. Returns an empty array if no items are selected.
- selectionData
- Flags
Read-only
- Getter
- Type
Object
- Description
Get the data object of the first selected item or `undefined` if no items are selected.
- selectionsData
- Flags
Read-only
- Getter
- Type
Array
- Description
Get the data objects from all selected items or an empty array if no items are selected.
- stickSelect
- Type
Boolean
- Description
When clicking to select view item, whether to invert the selection and not deselect the
existing selection items.
- allowHandleSelect
- Flags
Private
- Type
Boolean
- Description
Whether to allow handling selection operations.
## Instance Methods
- init
- ready
- setScrollPos
- Flags
Private
- Description
Set the position of the scrollbar after loading data.
- captureTapDown
- Flags
Private
- Description
Method executed on tap down when the {#captureClass} property is set.
- Parameters
- e
- Type
Event
- Description
Event object.
- captureTapUp
- Flags
Private
- Description
Method executed on tap up when the {#captureClass} property is set.
- Parameters
- e
- Type
Event
- Description
Event object.
- saveConfirm
- Description
Displays a save confirmation dialog box and executes the save method after confirmation.
- Parameters
- saveBtn
- Type
Wb.Button
- Description
Save button.
- callback
- Type
Function
- Description
Save method to be executed after confirmation.
- .reload
- Type
Function
- Description
The {#reload} method for reloading the view.
- name
- optional
true
- Type
String
- Description
Keyword name for the prompt. Defaults to `Str.list`.
- Returns Value
- Type
Boolean
- Description
Returns `false` after displaying the prompt box, otherwise returns `undefined`.
- onMouseDown
- Flags
Private
- Description
Method executed when the mouse is pressed down.
- Parameters
- e
- Type
Event
- Description
Event object.
- onDocMouseMove
- Flags
Private
- Description
Method executed when the mouse moves over DocEl when {#rectSelect} is enabled.
- Returns Value
- Type
e
- Description
Event object.
- onDocMouseUp
- Flags
Private
- Description
Method executed when the mouse is released over DocEl when {#rectSelect} is enabled.
- Returns Value
- Type
e
- Description
Event object.
- sort
- Description
Sort the view data by the specified fields and reload the data. If you only need to sort the view items, please use the
{#sortItems} method.
- Parameters
- sorters
- optional
true
- Type
String|Object|Array
- Description
The sorting fields, see {#sorters} for details. Default means no sorting.
- addRecord
- Description
Add a new row into the current view and select the row. If it is an editable grid, the editing of the first valid
cell will be automatically activated. The pagination bar will be updated.
- Parameters
- data
- optional
true
- Type
Object
- Description
Row data. Defaults to an empty row. The value of the `blob` property in the object will be
automatically converted to the "(blob)" text.
- append
- optional
true
- Type
Boolean|Wb.ViewItem
- Description
Whether to append. `true` to append to the last row, `false` to insert to the first
row. If it is an {#item|Wb.ViewItem} object, insert it before the item. Defaults to adding after the selected row.
- node
- optional
true
- Type
Wb.TreeItem
- Description
The parent node when adding a node. Only valid when operating tree nodes.
- Returns Value
- Type
Wb.ViewItem
- Description
The newly added row.
- appendRecord
- Description
Append a new row as the last row to the current view and select this new row. See {#addRecord} for details.
- Parameters
- data
- optional
true
- Type
Object
- Description
Row data.
- Returns Value
- Type
Wb.ViewItem
- Description
The newly added row.
- delRecords
- Description
Delete all selected rows and update the pagination bar.
- Parameters
- noFocus
- optional
true
- Type
Boolean
- Description
Whether to skip setting the focus.
- removeRecords
- Description
Display a confirmation window, and send a remote request after confirmation to delete all selected rows.
Example:
app.grid1.removeRecords(xpath + '/del', 'title');
- Parameters
- url
- Type
String|Object
- Description
The URL address submitted to the server or the request configuration object.
- fieldName
- optional
true
- Type
String
- Description
The field name for prompt information.
- params
- optional
true
- Type
Object
- Description
The parameters submitted to the server.
- callback
- optional
true
- Type
Function
- Description
The callback method after successful execution.
- isUpload
- optional
true
- Type
Boolean
- Description
Whether to submit parameters via file upload method. Defaults to `true`.
- action
- optional
true
- Type
String
- Description
The action name for prompt information. Defaults to `Str.del`.
- insertRecord
- Description
Display a dialog window, and send a remote request after confirmation to add a record.
Example:
app.grid1.insertRecord(url, app.editWin);
- Parameters
- url
- Type
String|Object
- Description
The URL address submitted to the server or the request configuration object.
- win
- Type
Wb.Window
- Description
The window for editing data.
- subTitle
- optional
true
- Type
String
- Description
The subtitle of the edit window.
- params
- optional
true
- Type
Object
- Description
The parameters submitted to the server.
- callback
- optional
true
- Type
Function
- Description
The callback method after successful execution.
- .view
- optional
true
- Type
Wb.View
- Description
The current view.
- .item
- optional
true
- Type
Wb.ViewItem
- Description
The newly added row.
- isUpload
- optional
true
- Type
Boolean
- Description
Whether to submit parameters via file upload method. Defaults to `true`.
- append
- optional
true
- Type
Boolean|Wb.ViewItem
- Description
Whether to append. `true` to add to the last row, `false` to insert to the first
row. If it is an {#item|Wb.ViewItem} object, insert it before the item. Defaults to `true`.
- node
- optional
true
- Type
Wb.TreeItem
- Description
The parent node when adding a node. Only valid when operating tree nodes.
- editRecord
- Description
Display a dialog window, and send a remote request after confirmation to modify a record.
Example:
app.grid1.editRecord(url, app.editWin, 'user_name');
- Parameters
- url
- Type
String|Object
- Description
The URL address submitted to the server or the request configuration object.
- win
- Type
Wb.Window
- Description
The window for editing data.
- fieldName
- optional
true
- Type
String
- Description
The field name used as the subtitle of the window.
- params
- optional
true
- Type
Object
- Description
The parameters submitted to the server.
- callback
- optional
true
- Type
Function
- Description
The callback method after successful execution.
- .view
- optional
true
- Type
Wb.View
- Description
The current view.
- .item
- optional
true
- Type
Wb.ViewItem
- Description
The edited row.
- isUpload
- optional
true
- Type
Boolean
- Description
Whether to submit parameters via file upload method. Defaults to `true`.
- localSort
- Flags
Private
- Description
The default method for local sorting. To sort and reload data, please use the {#sort} method; to sort view items,
please call the {#sortItem} method. To customize the sorting logic, please handle it in the {#beforesort} event.
- Parameters
- data
- Type
Array
- Description
The data to be sorted.
- sorters
- Type
Array
- Description
The sorting field data, see {#sorters} for details.
- getModifiedData
- Description
Get all modified data. The difference from {#modifiedData} is that the content of the `blob` field will be read in the
callback function.
- Parameters
- fn
- optional
true
- Type
Function
- Description
Callback function to read blob data.
- .data
- Type
Object
- Description
Modified data. See {#modifiedData} for details.
- Returns Value
- Type
Boolean
- Description
Whether the `blob` field exists, `true` exists, `false` otherwise.
- onAddData
- Flags
Private
- Description
Method executed when adding data.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The view item to be added.
- onRemoveData
- Flags
Private
- Description
Method executed when deleting data.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The view item to be deleted.
- onUpdateData
- Flags
Private
- Description
Method executed when updating data.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The view item to be updated.
- data
- Type
Object
- Description
New data.
- oldData
- Type
Object
- Description
Original data.
- commit
- Description
Submit all add, delete, and modify operations on the view data. If there are values of type `Blob`, they will be converted
to "(blob)". Only valid when the {#recordChanges} property is set to `true`.
- destroySelections
- Description
Destroy all selected items and select the candidate node specified by {#candidateSelection}.
- Parameters
- noFocus
- optional
true
- Type
Boolean
- Description
Whether to skip setting the focus.
- refresh
- Description
Refresh the view based on the current view data.
- getResponseColumns
- Flags
Private
- Description
Get the columns list from the response object data.
- Parameters
- response
- Type
Object
- Description
The response object.
- rows
- Type
Array
- Description
The row array.
- Returns Value
- Type
Array
- Description
The columns list. Returns `null` if not found.
- load
- Description
Load data into the view. Set {#url} to load remote data, set {#localData} to load local data, and then call the {#load}
method to update the view.
Parameters can be passed in the following ways, from lowest to highest priority:
-set the {#params} property.
-the `params` in the configs parameter of the {#load} method.
-the `params` in the {#*beforeload} event.
Example:
view.load({params: {foo: 123, bar: 'abc'}, success(){doSomething();}});
- Parameters
- configs
- Type
Object|String
- Description
The configuration object or the URL address. See {#Wb.ajax} for more `configs` options.
- .node
- optional
true
- Type
Wb.Container
- Description
Parent node for data-generated items. Defaults to the view itself.
- .keepPageIndex
- optional
true
- Type
Boolean
- Description
Whether to keep the current page index.
- .add
- optional
true
- Type
Boolean
- Description
Whether to add data items to the begin:
-true: Add to the begin.
-false: Add to the end.
-null: Clear the existing items before adding new items. Default value.
- .callback
- optional
true
- Type
Function
- Description
The method called after data loading is completed, regardless of whether the loading
succeeds or fails. See {#*callback} for details.
- .success
- optional
true
- Type
Function
- Description
The method called after data is loaded successfully. See {#*success} for details.
- .failure
- optional
true
- Type
Function
- Description
The method called after data loading fails. See {#*failure} for details.
- resolve
- optional
true
- Type
Function
- Description
The method called after data loading is completed, regardless of whether the loading
succeeds or fails.
- Returns Value
- Type
Boolean
- Description
`true` for loading executed normally, `false` for loading cancelled.
- delayLoad
- Description
Execute the {#load} method after a 380ms delay.
- Parameters
- args
- Type
...Object
- Description
The parameter list of the {#load} method.
- delayReload
- Description
Execute the {#reload} method after a 380ms delay.
- Parameters
- args
- Type
...Object
- Description
The parameter list of the {#reload} method.
- loadx
- Description
Promise-based version of the {#load} method. The Promise will always resolve, regardless of whether the request succeeds
or fails. If the method is cancelled, the Promise will resolve with `{canceled: true}`. The `this` context of the Promise
callback points to the current view. The result object contains the following parameters:
-parent: The container object to which view items are added after successful loading.
-items: The list of added view items.
-response: The object returned by the request.
-xhr: The XHR object.
-e: The event object.
-ok: Whether the loading was successful.
-cancel: Whether the loading was canceled.
Example:
view.loadx({params: {p1: 'abc', p2:123}}).then(
result => {
if(result.ok)
this.doSomething(); // `this` points to view
else if(result.canceled)
console.warn('canceled');
else
console.warn('failed');
}
);
- Returns Value
- Type
Promise
- Description
The Promise object.
- reload
- Description
Reload data into the view using the parameters from the last request. See {#load} for details.
- Parameters
- configs
- optional
true
- Type
Object
- Description
Configuration object whose options will override those from the last request. Refer to the
configs parameter of the {#load} method for details.
- resolve
- optional
true
- Type
Function
- Description
The method called after data loading is completed, regardless of whether the loading
succeeds or fails.
- reloadx
- Description
Promise-based version of the {#reload} method. See {#loadx} for details.
- getPrevItem
- Flags
Private
- Description
Get the nearest previous item relative to the specified item.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The reference item.
- Returns Value
- Type
Wb.ViewItem
- Description
The previous item.
- getNextItem
- Flags
Private
- Description
Get the nearest next item relative to the specified item.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The reference item.
- Returns Value
- Type
Wb.ViewItem
- Description
The next item.
- findClosestItem
- Description
Find the nearest item in the specified direction relative to the given item.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The target item.
- direction
- Type
String
- Description
Navigation direction:
- 'up': Up
- 'down': Down
- 'left': Left
- 'right': Right
- smartMode
- optional
true
- Type
String
- Description
Smart navigation mode. See {#smartNavigate} for details.
- circleMode
- optional
true
- Type
Boolean
- Description
Circular navigation mode. See {#circleNavigate} for details.
- containsInvalid
- optional
true
- Type
Boolean
- Description
Whether to include disabled and hidden items.
- Returns Value
- Type
Wb.ViewItem
- Description
The found item. Returns `null` if not found. If the `item` parameter is `null`, this method will
return the first item directly.
- doFindClosestItem
- Flags
Private
- Description
Find the nearest item in the specified direction relative to the given item. See {#findClosestItem} for details.
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed on the view.
- Parameters
- e
- Type
Event
- Description
The event object.
- onKeyWalking
- Flags
Private
- Description
Automatically select the first item whose specified property matches the pressed key content.
- Parameters
- e
- Type
Event
- Description
The event object.
- loadPage
- Description
Load data for the specified page index.
- Parameters
- pageIndex
- Type
Number
- Description
Page index (0-based).
- add
- optional
true
- Type
Boolean|Object
- Description
Whether to add data items to the begin:
-true: Add to the begin.
-false: Add to the end.
-null: Clear the existing items before adding new items.
-Object: The `configs` parameter for the {#load} method.
- previousPage
- Description
Load data for the previous page.
- Parameters
- add
- optional
true
- Type
Boolean|Object
- Description
Whether to add data items to the begin:
-true: Add to the begin.
-false: Add to the end.
-null: Clear the existing items before adding new items.
-Object: The `configs` parameter for the {#load} method.
- nextPage
- Description
Load data for the next page.
- Parameters
- add
- optional
true
- Type
Boolean|Object
- Description
Whether to add data items to the begin:
-true: Add to the begin.
-false: Add to the end.
-null: Clear the existing items before adding new items.
-Object: The `configs` parameter for the {#load} method.
- firstPage
- Description
Navigate to the first page.
- lastPage
- Description
Navigate to the last page.
- doSelect
- Description
Set the selection status of the specified items.
- Parameters
- items
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
List of items.
- selected
- Type
Boolean
- Description
Whether to select the items. `true` select, `false` deselect.
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to retain the selection status of previously selected items. Only valid when
the `selected` parameter is `true`.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- preventFocus
- optional
true
- Type
Boolean
- Description
Whether to prevent setting focus on the first item.
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrollbar scrolling.
- preventForceView
- optional
true
- Type
Boolean
- Description
Whether to prevent forcing parent nodes to expand and become visible. Defaults to
`false` for a single item and `true` for multiple items. Only available in tree.
- select
- Description
Select the specified view items. For single item operations, directly access the item's
{#selected|Wb.ViewItem.selected} property.
- Parameters
- items
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The item(s) to be selected.
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to retain the selection status of previously selected items. Only valid when
the `selected` parameter is `true`.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- preventFocus
- optional
true
- Type
Boolean
- Description
Whether to prevent setting focus on the first item.
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrollbar scrolling.
- preventForceView
- optional
true
- Type
Boolean
- Description
Whether to prevent forcing parent nodes to expand and become visible. Defaults to
`false` for a single item and `true` for multiple items. Only available in tree.
- selectNoFocus
- Description
Select the specified items and prevent setting focus.
- Parameters
- items
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The item(s) to be selected.
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to retain the selection status of previously selected items. Only valid when
the `selected` parameter is `true`.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- selectNoScroll
- Description
Select the specified items and prevent scrolling.
- Parameters
- items
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The item(s) to be selected.
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to retain the selection status of previously selected items. Only valid when
the `selected` parameter is `true`.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- deselect
- Description
Deselect the specified view items.
- Parameters
- items
- Type
Wb.ViewItem|Wb.ViewItem[]
- Description
The item(s) to be deselected.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- selectAll
- Description
Select all non-disabled and non-hidden view items.
- Parameters
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- deselectAll
- Description
Deselect all view items.
- Parameters
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- slice
- Description
Gets all items between the begin item and the end item.
- Parameters
- beginItem
- Type
Wb.ViewItem
- Description
The begin item.
- endItem
- Type
Wb.ViewItem
- Description
The end item.
- Returns Value
- Type
Wb.ViewItem[]
- Description
The obtained items.
- findItemByEl
- Description
Finds the view item that contains the specified element.
- Parameters
- el
- Type
Element
- Description
The contained element.
- Returns Value
- Type
Wb.ViewItem
- Description
The found view item or null if not found.
- handleSelect
- Flags
Private
- Description
Handle the selection operation.
- Parameters
- target
- Type
Element
- Description
The target element.
- item
- Type
Wb.ViewItem
- Description
The view item.
- e
- Type
Event
- Description
The event object.
- onClick
- Flags
Private
- Description
Method executed when the view is clicked.
- Parameters
- e
- Type
Event
- Description
The event object.
- onDblClick
- Flags
Private
- Description
Method executed when the view is double-clicked.
- Parameters
- e
- Type
Event
- Description
The event object.
- triggerClick
- Flags
Private
- Description
Fire the click event.
- Parameters
- eventName
- Type
String
- Description
The event name.
- e
- Type
Event
- Description
The event object.
## Events
- update
- Description
Fired when the view item data is updated via the {#Wb.ViewItem.set} method. Only effective when the
{#recordChanges} property is set to `true`.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The view item.
- data
- Type
Object
- Description
New data.
- oldData
- Type
Object
- Description
Old data.
- itemdblclick
- Description
Fired when a view item is double-clicked.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The view item that was double-clicked.
- e
- Type
Event
- Description
Event object.
- itemclick
- Description
Fired when a view item is clicked.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The view item that was clicked.
- e
- Type
Event
- Description
Event object.
- select
- Description
Fired when an item is selected.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The selected item. To get all selected items, refer to the {#selections} property.
- deselect
- Description
Fired when an item is deselected.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The deselected item. To get all selected items, refer to the {#selections} property.
- beforeselect
- Description
Fired before an item is selected. Returning `false` cancels the operation.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The item to be selected.
- beforedeselect
- Description
Fired before an item is deselected. Returning `false` cancels the operation.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The item to be deselected.
- selectionchange
- Description
Fired when an item is selected or deselected; this event is fired only once for batch
selection/deselection. To get all selected items, refer to the {#selection} or {#selections} property.
- render
- Description
Fired when a view item is rendered.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The view item.
- value
- Type
Object
- Description
The data value of the item.
- el
- Type
Element
- Description
The DOM element of the item.
- captureclick
- Description
Fired when clicking on the specified DOM element after setting the {#captureClass} property.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The clicked view item.
- e
- Type
Event
- Description
Event object.
- beforesort
- Description
Fired before local sorting. Returning `false` will prevent the default sorting behavior.
- Parameters
- data
- Type
Array
- Description
The data to be sorted.
- sorters
- Type
Array
- Description
The sorting field data, see {#sorters} for details.
- itemchange
- Description
Fired when view items are added, deleted, or modified. Only valid when the {#recordChanges} property is
set to `true`.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The changed item.
- itembeforedrag
- Description
Fired before an item is dragged. Returning `false` can prevent dragging.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
The drag object.
- .source
- Type
Wb.ViewItem[]
- Description
The source items being dragged.
- e
- Type
Event
- Description
The event object.
- itemdrag
- Description
Fired when an item is dragged.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
The drag object.
- .source
- Type
Wb.ViewItem[]
- Description
The source items being dragged.
- .dest
- Type
Wb.Component
- Description
The target component to drag to.
- .allowDrop
- Type
Boolean
- Description
Whether to allow dropping. By default, dropping is allowed if the component's {#droppable}
is `true`.
- .copy
- Type
Boolean
- Description
Whether to copy the item after drag and drop.
- .flatten
- Type
Boolean
- Description
Whether to flatten all items after drag and drop.
- .mode
- Type
String|Boolean
- Description
The drag and drop mode.
-'before': Drop before the target node
-'after': Drop after the target node
-'append': Append to the target node
-false: Will cancel the default drag and drop behavior. For example, set to `false` if dragging only copies data.
- .autoDrop
- Type
Boolean
- Description
Whether to automatically drop the item after drag and drop ends. Defaults to `true`; if set
to `false`, the item will not be dropped automatically. Call the `draggable.acceptDrop()` method to drop the item at an
appropriate time; calling the `draggable.acceptDrop()` method on an unloaded node will only remove the source node.
- .unselectItems
- Type
Boolean
- Description
Whether to skip automatically selecting the dropped items after dropping.
- e
- Type
Event
- Description
The event object.
- itemdrop
- Description
Fired when an item is dropped after dragging. See {#*itemdrag} for related events.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
The drag object.
- e
- Type
Event
- Description
The event object.
- beforeload
- Description
Fired before requesting remote data. Returning `false` will cancel the request. Parameters can be
passed through this event.
- Parameters
- configs
- Type
Object
- Description
The loading options object.
- .node
- Type
Wb.TreeItem
- Description
The tree node that requests remote data. Only valid when the request is initiated by
{#Wb.TreeItem}.
- params
- Type
Object
- Description
The parameter object submitted with the request. Parameters with the same name set in this object
have higher priority than those specified in the {#params} property and {#load} method.
- startload
- Description
Fired when a remote data request starts to be initiated. Parameters can be passed through this event.
- Parameters
- configs
- Type
Object
- Description
The loading options object.
- .node
- Type
Wb.TreeItem
- Description
The tree node that requests remote data. Only valid when the request is initiated by
{#Wb.TreeItem}.
- params
- Type
Object
- Description
The parameter object submitted with the request. Parameters with the same name set in this object
have higher priority than those specified in the {#params} property and {#load} method.
- callback
- Description
Fired after remote data loading is completed, regardless of whether the loading succeeds or fails.
- Parameters
- parent
- Type
Wb.View|Wb.TreeItem
- Description
The container to which child items are added after successful loading.
- items
- Type
Wb.ViewItem[]
- Description
The added child items.
- response
- Type
Object
- Description
The response object from the AJAX request.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
- successful
- Type
Boolean
- Description
Whether the loading is successful, `true` success, `false` failure.
- success
- Description
Fired after remote data is loaded successfully.
- Parameters
- parent
- Type
Wb.View|Wb.TreeItem
- Description
The container to which child items are added after successful loading.
- items
- Type
Wb.ViewItem[]
- Description
The added child items.
- response
- Type
Object
- Description
The response object from the AJAX request.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
- failure
- Description
Fired after remote data loading fails.
- Parameters
- parent
- Type
Wb.View|Wb.TreeItem
- Description
The container to which child items are added after successful loading.
- items
- Type
Wb.ViewItem[]
- Description
The added child items.
- response
- Type
Object
- Description
The response object from the AJAX request.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
- beforenavigate
- Description
Fired before a keyboard navigation operation. Return `false` to cancel keyboard navigation. Keyboard
navigation is allowed only when {#keyNavigate} is `true`.
- Parameters
- e
- Type
Event
- Description
The event object.
# Wb.GridHeader
Grid header, used to manage and maintain the grid header. The grid header can display multi-level columns.
## Class Information
- class name
Wb.GridHeader
- Icon
undefined
- cname
gridHeader
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.GridHeader
## Instance Properties
- columns
- Type
Wb.Column[]
- Description
List of columns. The child columns can be obtained by {#Wb.Column.items} property.
- leafColumns
- Type
Wb.Column[]
- Description
List of all leaf columns.
- tableEl
- Type
Element
- Description
The table element.
- fitTable
- Type
Boolean
- Description
Whether the table adapts to the width automatically.
- grid
- Type
Wb.Grid
- Description
The associated grid object.
## Instance Methods
- constructor
- Description
Grid header constructor.
- Parameters
- grid
- Type
Wb.Grid
- Description
The grid header is rendered to this grid.
- columns
- Type
Array
- Description
The original column data of the grid.
- copyColumns
- Flags
Private
- Description
Create copy columns to to avoid contaminating the original column data.
- Parameters
- columns
- Type
Array
- Description
The original column data.
- Returns Value
- Type
Array
- Description
The copy of column data.
- renderColumns
- Flags
Private
- Description
Render the column header table to the element.
- Returns Value
- Type
Array
- Description
The list of column objects corresponding to the generated td cells.
- createColumns
- Flags
Private
- Description
Create grid column objects.
- Parameters
- columns
- Type
Array
- Description
The original column data.
- parent
- Type
Wb.Column
- Description
The parent column.
- app
- Type
Object
- Description
The {#app|Wb.Component.app} object.
- prepareColumns
- Flags
Private
- Description
Get the preprocessed column data consisting of all visible columns based on the original column data.
- Parameters
- columns
- Type
Array
- Description
The original column data.
- parent
- Type
Object
- Description
The parent column.
- depth
- Type
Number
- Description
The current column depth.
- Returns Value
- Type
Array
- Description
The processed column data consisting of all visible columns.
# Wb.Column
Grid column. Used to configure and operate on grid columns.
## Class Information
- class name
Wb.Column
- Icon
column
- cname
column
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Column
## Instance Properties
- items
- Flags
Read-only
- Type
Wb.Column[]
- Description
The child columns.
- resizable
- Type
Boolean
- Description
Whether the column width can be resized.
- noExport
- Type
Boolean
- Description
Specifies whether the column is not exported when exporting grid data.
- sortable
- Type
Boolean
- Description
Whether the column can be sorted by clicking. Defaults to `true`.
- checkRefresh
- Type
Boolean
- Description
Whether to refresh the entire item when the column has {#checkBox} and the check state changes
by clicking.
- headerCheck
- Type
Boolean
- Description
Whether to display a checkbox in the header when {#checkBox} is set to
editable. Defaults to `true`.
- menuText
- Type
String
- Description
The text displayed on the menu item.
- mergeRows
- Type
Boolean
- Description
Whether to allow merging rows for cells with the same content.
- mergeColsGroup
- Type
String
- Description
The group name for column merging. When this value is specified, adjacent columns
with the same group name and identical cell content will be merged.
- draggable
- Type
Boolean
- Description
Whether the column position can be adjusted by dragging. Defaults to `true`.
- tagProperties
- Type
Object
- Description
The property configuration object added directly to the column.
- tagEvents
- Type
Object
- Description
The event configuration object added directly to the column.
- format
- Type
String
- Description
The output format when the value is a date or number. Please refer to {#Date.format} or
{#Number.format} respectively.
- align
- Type
Enum
- Description
The alignment of column content. See {#titleAlign} for title alignment.
-'left': Left alignment
-'center': Center alignment
-'right': Right alignment
- titleAlign
- Type
Enum
- Description
The alignment of the column title. See {#align} for content alignment, defaults to {#align}.
-'left': Left alignment
-'center': Center alignment
-'right': Right alignment
- verticalAlign
- Type
Enum
- Description
The vertical alignment of column content.
-'top': Top alignment
-'middle': Center alignment
-'bottom': Bottom alignment
- buttons
- Type
Wb.Item/Wb.Item[]
- Description
The column button(s). The button's `gridItem` property is the corresponding
{#item|Wb.GridItem}, and the `data` property is the data object of the item.
- checkBox
- Flags
Key
- Type
Enum
- Description
The method type for converting values to checkboxes. By default, the entire {#item|Wb.ViewItem}
will not be updated when checked. To enable auto updates, set the {#checkRefresh} property to true.
-'bool': Reads the value and converts it to a boolean using the {#Wb.parseBool} method, and writes a boolean value.
-'int': Reads the value and converts it to a boolean using the {#Wb.parseBool} method, and writes an integer value (0 or 1).
-'string': Reads the value and converts it to a boolean using the {#Wb.parseBool} method, and writes a string\
value ("false" or "true").
-'roTrue': Read-only mode. Reads the value and converts it to a boolean using the {#Wb.parseBool} method, only displays\
`true` values, and does not write values.
-'roAll': Read-only mode. Reads the value and converts it to a boolean using the {#Wb.parseBool} method, displays all\
values, and does not write values.
- expander
- Flags
Key
- Type
Boolean
- Description
Whether the column has an expander/collapser. Only valid when applied to columns of
{#Wb.Tree}.
- fieldName
- Flags
Key
- Type
String
- Description
The field name associated with the row data.
- autoWrap
- Type
Enum
- Description
The auto-wrap mode for column content. To set auto-wrap for title, please refer to the
{#titleAutoWrap} property.
-'normal': Normal wrap mode.
-'break-word': If there is not enough space in the line to accommodate the word to the end, those normally unbreakable\
words will be forced to break and wrap.
-'break-all': Line breaks can occur at any character.
-'nowrap': Similar to normal, consecutive whitespace characters are merged. However, line breaks within the text are\
invalid.
-'pre': Consecutive whitespace characters are preserved. Line breaks only occur when encountering a newline character\
or br element.
-'pre-wrap': Consecutive whitespace characters are preserved. Line breaks occur when encountering a newline character,\
br element, or when needed to fill line boxes.
-'pre-line': Consecutive whitespace characters are merged. Line breaks occur when encountering a newline character,\
br element, or when needed to fill line boxes.
-'break-spaces': Behaves the same as pre-wrap, except for line breaks at trailing spaces.
- titleAutoWrap
- Type
Enum
- Description
The auto-wrap mode for column title. To set auto-wrap for content, please refer to the
{#autoWrap} property.
-'normal': Normal wrap mode.
-'break-word': If there is not enough space in the line to accommodate the word to the end, those normally unbreakable\
words will be forced to break and wrap.
-'break-all': Line breaks can occur at any character.
-'nowrap': Similar to normal, consecutive whitespace characters are merged. However, line breaks within the text are\
invalid.
-'pre': Consecutive whitespace characters are preserved. Line breaks only occur when encountering a newline character\
or br element.
-'pre-wrap': Consecutive whitespace characters are preserved. Line breaks occur when encountering a newline character,\
br element, or when needed to fill line boxes.
-'pre-line': Consecutive whitespace characters are merged. Line breaks occur when encountering a newline character,\
br element, or when needed to fill line boxes.
-'break-spaces': Behaves the same as pre-wrap, except for line breaks at trailing spaces.
- summary
- Type
Enum
- Description
The summary method for the current column when counting {#localData} or current page data:
-'sum': Sum
-'avg': Average
-'count': Count
-'max': Maximum value
-'min': Minimum value
- hideInMenu
- Type
Boolean
- Description
Whether to hide the column in the menu.
- keyValue
- Type
Boolean
- Description
Whether to display the corresponding key value, equivalent to setting {#fieldName}
to `fieldName$`.
- rowNum
- Flags
Key
- Type
Boolean
- Description
Whether the column is a row number column. When columns are generated via {#Query|Wb.Query}
APIs, a row number column is added automatically. To disable it, set the "_rowNum" entry in the {#%dictionary|dict}: edit
hidden (no column added) or display hidden (hidden column created).
- isLeaf
- Flags
Read-only
- Type
Boolean
- Description
Whether it is a leaf column.
- editorInstance
- Flags
Private
- Type
Wb.Text
- Description
The editor instance associated with the column.
- gridHeader
- Flags
Read-only
- Type
Wb.GridHeader
- Description
The associated grid header object.
- colspan
- Flags
Read-only
- Type
Number
- Description
The column span.
- rowspan
- Flags
Read-only
- Type
Number
- Description
The row span.
- leafColumn
- Flags
Read-only
- Type
Wb.Column
- Description
The leaf column represented by the current column. For non-multi-level columns, it is
the column itself.
- leafIndex
- Flags
Read-only
- Type
Number
- Description
The index number of the leaf column(0-based). Only numbers the displayed columns.
- realWidth
- Flags
Read-only
- Type
String
- Description
The actual width of the column.
- td
- Flags
Read-only
- Type
Element
- Description
The `TD` cell element where the column is located.
- x
- Flags
Private
- Type
Number
- Description
The x coordinate of the cell.
- y
- Flags
Private
- Type
Number
- Description
The y coordinate of the cell.
- type
- Flags
Key
- Type
Enum
- Description
The column data type. Setting this property will automatically set the display format of the data,
and the {#format} property will be invalid.
-'text': Numeric value formatted to string in the current locale.
-'intText': Numeric value formatted to integer string in the current locale.
-'floatText': Numeric value formatted to floating-point string in the current locale.
-'percent': Numeric value formatted to percentage string in the current locale, with 2 fixed decimal places.
-'percentInt': Numeric value formatted to percentage string in the current locale, with no decimal places.
-'percentAuto': Numeric value formatted to percentage string in the current locale, with up to 2 decimal places.
-'boolText': Boolean text. `true` means `Str.yes`, `false` means `Str.no`.
-'enableText': Enabled text. `true` means `Str.enable`, `false means `Str.disable`.
-'usd': Numeric value formatted to USD currency string in the current locale.
-'cny': Numeric value formatted to CNY currency string in the current locale.
-'eur': Numeric value formatted to EUR currency string in the current locale.
-'gbp': Numeric value formatted to GBP currency string in the current locale.
-'jpy': Numeric value formatted to JPY currency string in the current locale.
-'cad': Numeric value formatted to CAD currency string in the current locale.
-'aud': Numeric value formatted to AUD currency string in the current locale.
-'hkd': Numeric value formatted to HKD currency string in the current locale.
-'dateText': Date format, see {#Date.dateText}.
-'timeText': 24-hour time format, see {#Date.timeText}.
-'timeTextHM': 24-hour hour-minute time format, see {#Date.timeTextHM}.
-'timeText12': 12-hour time format, see {#Date.timeText12}.
-'timeText12HM': 12-hour hour-minute time format, see {#Date.timeText12HM}.
-'dateTimeText': 24-hour date-time format, see {#Date.dateTimeText}.
-'dateTimeTextHM': 24-hour hour-minute date-time format, see {#Date.dateTimeTextHM}.
-'dateTimeText12': 12-hour date-time format, see {#Date.dateTimeText12}.
-'dateTimeText12HM': 12-hour hour-minute date-time format, see {#Date.dateTimeText12HM}.
-'dateTimeMilliText': 24-hour date-time and millisecond format, see {#Date.dateTimeMilliText}.
-'dateTimeMilliText12': 12-hour date-time and millisecond format, see {#Date.dateTimeMilliText12}.
-'prettyText': 24-hour time representation displayed based on the current time in the locale, see {#Date.prettyText}.
-'prettyText12': 12-hour time representation displayed based on the current time in the locale, see {#Date.prettyText12}.
-'autoText': Date-time string represented as 4-digit year, 2-digit month/day, hour/minute/second in 24-hour format in\
the locale. Date and time are separated by a space. If the hour/minute/second are 0, only the date part is displayed, see\
{#Date.autoText}.
-'kb': String represented in KB units in the locale.
-'mb': String represented in MB units in the locale.
-'fileSize': String represented in MB/KB/B units in the locale. The specific unit used depends on the actual size.
-'none': Do not apply any default type settings.
- titleEl
- Flags
Private
- Type
Element
- Description
The title element. This property is valid when {#headerCheck} exists.
- text
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Plain text column title. To set an HTML title, please refer to {#html}.
- html
- Getter
- Type
String
- Setter
- Type
String
- Description
HTML-formatted column title. To set a plain text title, please refer to {#text}.
- visible
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the column is visible. All columns will be regenerated after setting this property.
- freeze
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the column is frozen. Frozen columns will be fixed on both sides and not scroll with
the scrollbar when invisible. This property is only valid for leaf columns. Do not set flex (width < 0) columns as
frozen columns. All columns will be regenerated after setting this property.
- render
- Flags
Key
- Getter
- Type
Function|String
- Setter
- Type
Function|String
- Description
Custom render function. The `this` of the function refers to the {#item|Wb.ViewItem}.
Example:
data._icon = 'user'; // Set icon
return 'user: '+ value; // Add 'user: ' prefix before the output value
- Returns Value
- Type
Object
- Description
The output value for the current cell. Returning `undefined` means no value will be output.
- summaryRender
- Getter
- Type
Function|String
- Setter
- Type
Function|String
- Description
Custom render function for summary row. The `this` of the function refers to the grid.
Example:
return 'avg: '+ data.summaryField / data.countField;
- Returns Value
- Type
Object
- Description
The output value for the current cell. Returning `undefined` means no value will be output.
- editor
- Flags
Key
- Getter
- Type
Wb.Text|Wb.Number|Wb.Date|Boolean
- Setter
- Type
Wb.Text|Wb.Number|Wb.Date|Boolean
- Description
The default editor used for cells in this column. Set to `false` to
disable editing.
- minWidth
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
Minimum width of the column. Only applicable to {#grid|Wb.Grid} columns.
- width
- Flags
Key
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
Width of the current column. A negative value indicates a flex column; for example, if three
columns have widths of -1, -2, -3 respectively, their actual widths will be 1/6, 2/6, and 3/6 of the remaining available
width. Non-negative numeric value is in px.
## Static Methods
- base64DownloadRender
- Description
Rendering method for Base64 download.
- Parameters
- value
- Type
Object
- Description
The current value.
- data
- Type
Object
- Description
The record data.
- col
- Type
Wb.Column
- Description
The current column.
- div
- Type
Element
- Description
The element used to render content.
- createDownload
- Description
Create a download link on the specified element.
- Parameters
- div
- Type
Element
- Description
The element where the link is created under.
- fieldName
- Type
String
- Description
The download field name.
- filename
- optional
true
- Type
String
- Description
The download file name.
- filesize
- optional
true
- Type
String
- Description
The download file size.
- text
- optional
true
- Type
String
- Description
The text of the download link. Defaults to `filename` or `Str.download`.
- Returns Value
- Type
Element
- Description
The created link element.
- addSubText
- Description
Add a text node containing sub-text under the specified text element node.
- Parameters
- el
- Type
Element
- Description
The text element.
- text
- Type
String
- Description
The main text.
- subText
- Type
String
- Description
The sub-text.
- downloadHandler
- Flags
Private
- Description
Method executed when the download link is clicked.
- blobRender
- Description
Rendering method for binary columns.
- Parameters
- value
- Type
Object
- Description
The current value.
- buttonRender
- Flags
Private
- Description
Button rendering method.
- Parameters
- value
- Type
Object
- Description
The current value.
- data
- Type
Object
- Description
The record data.
- col
- Type
Wb.Column
- Description
The current column.
- div
- Type
Element
- Description
The element used to render content.
- checkRender
- Flags
Private
- Description
Checkbox rendering method.
- Parameters
- value
- Type
Object
- Description
The current value.
- data
- Type
Object
- Description
The record data.
- col
- Type
Wb.Column
- Description
The current column.
- div
- Type
Element
- Description
The element used to render content.
- onCheckClick
- Flags
Private
- Description
Method executed when the check box element is clicked.
- onHeaderCheckClick
- Flags
Private
- Description
Method executed when the check box element in the grid header is clicked.
## Instance Methods
- init
- syncHeaderCheck
- Description
Synchronize the checkbox state of the grid header according to the checkbox states of all items in the current column.
- show
- Description
Show the column.
- hide
- Description
Hide the column.
- isVisible
- Description
Recursively determine whether the column is hidden. The column is hidden if any parent column is hidden.
- Returns Value
- Type
Boolean
- Description
`true` visible, `false` hidden.
- refreshColumns
- Flags
Private
- Description
Update grid columns if the grid is not in an updating state.
- formatValue
- Description
Format value according to {#type} and {#format} properties.
- Parameters
- value
- Type
Object
- Description
Value.
- Returns Value
- Type
String
- Description
Formatted value.
# Wb.Grid
Grid component, a view for two-dimensional row and column display.
See example: {#%grid.xwl|ide?openModule=example/comps/grid.xwl}
## Class Information
- class name
Wb.Grid
- Icon
grid
- cname
grid
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.Grid
## Instance Properties
- isGrid
- Flags
Read-only
- Type
Boolean
- Description
Identifier for grid type.
- downloadName
- Type
String
- Description
Parameter name submitted when downloading via the {#file|Wb.FileInput} control associated with
an editable grid. Defaults to "download".
- clickHeaderRipple
- Type
Boolean
- Description
Whether to display ripple effect when clicking column header to toggle sorting. Defaults
to `true`.
- showIcon
- Type
Boolean
- Description
Whether to display an icon for the items. The icon is specified by the {#itemIcon} property.
- columnsSortable
- Flags
Key
- Type
Boolean
- Description
Whether columns can be sorted by clicking column headers.
- itemIcon
- Type
IconString
- Description
Default icon displayed for the items. Whether to display the icon is specified by the
{#showIcon} property.
- subtextField
- Type
String
- Description
The subtext field name for the items. Defaults to "subtext".
- columnsPath
- Type
String
- Description
Path to the field that stores the {#columns} in the response data object. Defaults to "columns".
- defaultColWidth
- Type
Number/String
- Description
Default width of grid columns. Defaults to "10em".
- editable
- Flags
Key
- Type
Boolean
- Description
Whether to enable grid editing. Setting this value to `true` sets the {#recordChanges} property
to `true` by default.
- reloadColumns
- Type
Boolean
- Description
Whether to reload grid columns when the grid already contains {#columns} and remote data returns
grid columns.
- headerScrollStep
- Type
Number
- Description
Scroll step in pixels when scrolling with the mouse wheel on the header. Defaults to 30.
- autoDestroyEditors
- Type
Boolean
- Description
Whether to automatically destroy column editors when the columns is updated. Defaults to `true`.
- oldScrolled
- Flags
Private
- Type
Boolean
- Description
Original scroll state.
- exportFilename
- Type
String
- Description
File name used when exporting grid data, excluding the extension.
- exportTitle
- Type
String
- Description
Title used when exporting grid data.
- enterEdit
- Type
Boolean
- Description
Whether to start editing the first valid cell when pressing Enter key while the grid is
{#editable} and not in editing state.
- enterAsTab
- Type
Boolean
- Description
Whether to treat Enter key as Tab key when editing the grid.
- enterAppend
- Type
Boolean
- Description
Whether to automatically add a row when pressing Enter key on the last row while editing the
grid. This property is invalid if {#enterAsTab} is `false`.
- arrowDownAppend
- Type
Boolean
- Description
Whether to automatically add a row when pressing Down Arrow key on the last row while editing
the grid. This property is invalid if {#enterAsTab} is `false`.
- navigateEdit
- Type
Boolean
- Description
Whether to keep editing state when pressing navigation keys. `null` means the
opposite value of {#keyWalking}. Defaults to `null`.
- headerEl
- Flags
Read-only
- Type
Element
- Description
Grid header element.
- contentEl
- Flags
Read-only
- Type
Element
- Description
Grid content wrapper element.
- contentTableEl
- Flags
Read-only
- Type
Element
- Description
Grid content element.
- sorters
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- originData
- Flags
Read-only
- Getter
- Type
Object|Array
- Description
Original {#keyFields} values of selected rows, with "$" prepended to field names. Returns
an array for multiple selections.
- fullData
- Flags
Read-only
- Getter
- Type
Object|Array
- Description
Original {#keyFields} and all new values of selected rows, with "$" prefix to original value
field names. Returns an array for multiple selections.
- rawColumns
- Flags
Private
- Type
Array
- Description
Original raw columns. Only valid when {#stateId} is set.
- lastColumns
- Type
Array
- Description
Raw columns after the last update of grid columns.
- cloneColumns
- Flags
Private
- Type
Array
- Description
Cloned copy of the original columns; the copy will adjust its content as columns are
configured. Only valid when {#stateId} is set.
- dictWin
- Flags
Read-only
- Type
Wb.Window
- Description
Generated dictionary dialog window.
- compact
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the grid content is displayed compactly.
- editRow
- Flags
Read-only
- Type
Wb.GridItem
- Description
The editing row.
- editCol
- Flags
Read-only
- Type
Wb.Column
- Description
The editing column.
- leafColumns
- Flags
Read-only
- Type
Wb.Column[]
- Description
All leaf columns.
- stateId
- Type
String
- Description
The ID used to save the grid state. Grids with the same ID will share states. Setting this
value will enable the grid to save its state, such as the adjusted column order, width, display status, etc. Each user's
state is independent.
- columnsLoading
- Flags
Private
- Type
Boolean
- Description
Whether columns are being loaded.
- columns
- Flags
Key
- Getter
- Type
Wb.Column[]
- Setter
- Type
Wb.Column[]
- Description
Array of grid columns, used to specify the columns of the grid. For single column settings,
please refer to {#Wb.Column}; for multiple column setting, please refer to {#lastColumns}.
Example:
// Access single column
grid.leafColumns[1].text = 'New text';
// Access multiple columns
let cols = grid.lastColumns;
cols.forEach(col => col.visible == col.fieldName?.startsWith('state'));
grid.columns = cols;
- summaryData
- Flags
Private
- Type
Object
- Description
The rendered summary row data. Returns `undefined` if there is no summary row.
- summarySource
- Type
Enum
- Description
The data source used when updating summary row data:
-'localData': Local data source {#localData}
-'data': Current grid data {#data}
-null: Prioritizes using {#localData}; uses {#data} if {#localData} is unavailable. Default value.
- disableMouseEvent
- Flags
Private
- Type
Boolean
- Description
Whether to disable the execution of the `onColsMouseMove` and `onColsMouseLeave`
methods.
- currentColumn
- Flags
Private
- Type
Wb.Column
- Description
The column being resized at the current mouse position.
- plainTable
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the grid uses simple style whose header is not displayed and the width is adaptive. It is
usually applicable to single-column tables.
-`true`: Simple style
-`false`: Normal style
-`'auto'`: Auto. If the view is a tree and there is only one column, it will be set to `true`; otherwise, it will be `false`.
- stripeRows
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to stripe the rows. Defaults to `true`.
- gridLine
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The cell line display mode for the content table.
-`true`: Display horizontal and vertical lines (Default value)
-`false`: Hide horizontal and vertical lines
-`'vertical'`: Display only vertical lines
-`'horizontal'`: Display only horizontal lines
- headerLine
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The cell line display mode for header table.
-`true`: Display horizontal and vertical lines (Default value)
-`false`: Hide horizontal and vertical lines
-`'vertical'`: Display only vertical lines
-`'horizontal'`: Display only horizontal lines
- header
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the grid header is visible.
- columnsDraggable
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether column order can be adjusted by dragging. Defaults to `true`.
## Instance Methods
- init
- resetRowNum
- Flags
Private
- Description
Reset the row number.
- exportData
- Description
Export grid data to a file and download it.
- Parameters
- filename
- optional
true
- Type
String
- Description
Exported file name, excluding the extension. Defaults to "data".
- format
- optional
true
- Type
Enum
- Description
Format of the exported data.
-'xlsx': Excel xlsx format file. Default value.
-'csv': CSV file.
- allPages
- optional
true
- Type
Boolean
- Description
Whether to export all page data. `true` all pages, `false` current page.
- localData
- optional
true
- Type
Boolean|Array
- Description
Whether to export using local data. Only valid when exporting the current page. Defaults
to `true` if pageSize is -1, otherwise `false`. If it is an array, it represents the exported data.
- title
- optional
true
- Type
String
- Description
Title of the exported Excel file.
- exportFile
- Description
Export grid data to a file and download it using grid configuration. See the {#exportData} method for details.
- Parameters
- allPages
- optional
true
- Type
Boolean
- Description
Whether to export all page data. `true` all pages, `false` current page.
- format
- optional
true
- Type
Enum
- Description
Format of the exported data.
-'xlsx': Excel xlsx format file.
-'csv': CSV file. Default value.
- exportExcel
- Description
Export grid data to a Excel file and download it using grid configuration. See the {#exportData} method for details.
- Parameters
- allPages
- optional
true
- Type
Boolean
- Description
Whether to export all page data. `true` all pages, `false` current page.
- mergeRows
- Flags
Private
- Description
Merge rows with the same value in the grid into a single row. This method will scan all columns; if a specified column
allows row merging, rows with the same value in that column will be merged. Set the {#Wb.Column.mergeRow} property of
the column object to `true` to enable row merging for that column.
- mergeCols
- Flags
Private
- Description
Merge columns with the same value in the grid into a single column. This method will scan all rows; if a specified column
allows column merging, columns with the same value will be merged. Set the {#Wb.Column.mergeRowGroup} property of the
column object to identify the group name for column merging. After using this method, all columns with the same
`mergeColsGroup` property will perform column merging operations.
- addColumn
- Description
Add a new blank column to the current grid. All columns will be regenerated after this method is successfully executed.
- saveColumns
- Description
Save the current column state to the database.
- Parameters
- asDefault
- optional
true
- Type
Boolean
- Description
Whether to save as the default state.
- resetColumns
- Description
Reset the grid's column state to the original state.
- Parameters
- resetDefault
- optional
true
- Type
Boolean
- Description
Whether to reset to the default state.
- dictAdd
- Description
Display a dictionary dialog window based on {#%dictionary|dict} configuration for adding a new record. This dialog is
singleton and is automatically destroyed when the grid is destroyed.
- Parameters
- url
- Type
String|Object
- Description
URL address to the server or request configuration object.
- subTitle
- optional
true
- Type
String
- Description
Subtitle of the edit window.
- params
- optional
true
- Type
Object
- Description
Parameters submitted to the server.
- callback
- optional
true
- Type
Function|Object
- Description
Callback method after successful execution or window configuration object.
- .grid
- Type
Wb.Grid
- Description
The grid component.
- .item
- Type
Wb.GridItem
- Description
The item item.
- configs
- optional
true
- Type
Object
- Description
Window configuration object.
- isUpload
- optional
true
- Type
Boolean
- Description
Whether to submit parameters via file upload method. Defaults to `true`.
- append
- optional
true
- Type
Boolean|Wb.ViewItem
- Description
Whether to append. `true` to add to the last row, `false` to insert to the first
row. If it is an {#item|Wb.ViewItem} object, insert it before the item. Defaults to `true`.
- node
- optional
true
- Type
Wb.TreeItem
- Description
The parent node when adding a node. Only valid when operating tree nodes.
- Returns Value
- Type
Wb.Window
- Description
Displayed window. Access this window via the {#dictWin} property.
- dictEdit
- Description
Display a dictionary dialog window based on {#%dictionary|dict} configuration for modifying a record. This dialog is
singleton and is automatically destroyed when the grid is destroyed.
- Parameters
- url
- Type
String|Object
- Description
URL address to the server or request configuration object.
- fieldName
- optional
true
- Type
String
- Description
Field name used as the subtitle of the window.
- params
- optional
true
- Type
Object
- Description
Parameters submitted to the server.
- callback
- optional
true
- Type
Function|Object
- Description
Callback method after successful execution or window configuration object.
- .grid
- Type
Wb.Grid
- Description
The grid component.
- .item
- Type
Wb.GridItem
- Description
The item item.
- configs
- optional
true
- Type
Object
- Description
Window configuration object.
- isUpload
- optional
true
- Type
Boolean
- Description
Whether to submit parameters via file upload method. Defaults to `true`.
- Returns Value
- Type
Wb.Window
- Description
Displayed window. Access this window via the {#dictWin} property.
- createWindow
- Flags
Private
- Description
Create a dialog window using dictionary data in the grid.
- Parameters
- configs
- optional
true
- Type
Object
- Description
Window configuration object.
- Returns Value
- Type
Wb.Window
- Description
Generated dialog instance.
- onHeaderClick
- Flags
Private
- Description
Method executed when the grid header is clicked.
- updateSortFlags
- Flags
Private
- Description
Update sort indicators in the grid header based on field sorting information.
- onHeaderWheel
- Flags
Private
- Description
Method executed when scrolling with the mouse wheel on the grid header.
- Parameters
- e
- Type
Event
- Description
Event object.
- addTableEl
- Flags
Private
- Description
Add content table element.
- setTableFit
- Flags
Private
- Description
Set whether the content table is auto fit based on the grid header settings.
- verify
- Description
Validate whether the data of the editable grid is valid; if invalid, move the edit focus to the first invalid cell. For
non-editable grids, this method always returns `true`.
- Parameters
- noFocus
- Type
Boolean
- Description
Whether to prevent setting focus.
- Returns Value
- Type
Boolean
- Description
Whether the data is valid.
- sync
- Description
Submit pending add/delete/update data in the grid to the server specified by {#url}. The {#commit} method will be
automatically called to submit data after success. If the server returns a JSON object `{insert, update}`, `insert`
represents new data to be synced to the client, and `update` represents updated data to be synced to the client.
- Parameters
- configs
- Type
Object
- Description
Configuration object. See {#Wb.ajax} for details. `this` keyword in all functions refers to
the current grid by default.
- .autoCommit
- optional
true
- Type
Boolean
- Description
Whether to automatically submit client-side data. Defaults to `true`.
- onContentElScroll
- Flags
Private
- Description
Method executed when {#contentEl} is scrolled.
- onHeaderElScroll
- Flags
Private
- Description
Method executed when {#headerEl} is scrolled.
- onContentElResize
- Flags
Private
- Description
Method executed when the size of {#contentEl} changes.
- getCell
- Description
Get the cell element of the specified row and column.
- Parameters
- row
- Type
Wb.GridItem
- Description
Row object.
- column
- Type
Wb.Column
- Description
Column object.
- Returns Value
- Type
Element
- Description
Cell element.
- onContentElMouseDown
- Flags
Private
- Description
Method executed when mousedown is triggered on {#contentEl}.
- Parameters
- e
- Type
Event
- Description
Event object.
- onContentElMouseUp
- Flags
Private
- Description
Method executed when mouseup is triggered on {#contentEl}.
- Parameters
- e
- Type
Event
- Description
Event object.
- startEdit
- Description
Start editing the specified cell. Complete editing by calling the {#completeEdit} method or cancel editing by calling the
{#cancelEdit} method.
Example:
view.startEdit(view.selection, 'name'); // Edit the "name" column of the selected row
- Parameters
- row
- Type
Wb.GridItem|Number
- Description
The edited row or index.
- The
- Type
Wb.Column|Number|String
- Description
edited column, index or field name.
- callback
- optional
true
- Type
Function
- Description
Callback method after successful completion of editing. `this` refers to the grid
object. Returning `false` will prevent the value from being set to the grid.
- .value
- Type
Object
- Description
Edited value.
- .row
- Type
Wb.GridItem
- Description
The editing row.
- .column
- Type
Wb.Column
- Description
The editing column.
- doCancel
- optional
true
- Type
Boolean
- Description
Whether to cancel current editing if the cell is being edited. `false` to complete editing,
`true` to cancel editing.
- Returns Value
- Type
Boolean
- Description
`true` if editing starts successfully, `false` if editing does not start.
- doKeyNavigate
- Flags
Private
- Description
Navigation method executed when pressing tab/shift+tab, enter, and up/down arrow navigation keys on the editor.
- Parameters
- e
- Type
Event
- Description
The event object.
- Returns Value
- Type
Boolean
- Description
Whether the key press has been handled.
- completeEdit
- Description
Completes the current editing. This method has no effect if the grid is not in edit mode.
- cancelEdit
- Description
Cancels the current editing. This method has no effect if the grid is not in edit mode.
- adjustColGutter
- Flags
Private
- Description
Adjusts the grid header to fit the width of the content.
- setContentColumns
- Flags
Private
- Description
Sets the content columns.
- setColumns
- Description
Sets the columns of the grid.
- Parameters
- columns
- Type
Wb.Column[]
- Description
Grid columns.
- refreshColumns
- Description
Refreshes the current columns.
- setSummary
- Flags
Private
- Description
Sets the total row.
- onSummarySuccess
- Flags
Private
- Description
The method executed after data is successfully loaded when the grid contains summary rows.
- updateSummary
- Description
Updates the summary row data for the data source specified by {#summarySource}.
- syncHeaderChecks
- Description
Synchronizes the state of all header checkboxes based on the state of all checkboxes in the current grid.
- destroyRowEditors
- Flags
Private
- Description
Destroys all row editors.
- destroyColumnsEditors
- Flags
Private
- Description
Destroys the editors associated with all columns.
- destroy
- setColumnWidth
- Flags
Private
- Description
Sets the width of content columns. To set the width of grid columns, please refer to the {#Wb.Column.width} property.
- Parameters
- index
- Type
Number
- Description
Column index.
- width
- Type
Number|String
- Description
Column width. A negative value indicates a flex column.
- resizeFrozenColumns
- Flags
Private
- Description
Adjusts the starting frozen position of this column and subsequent frozen columns.
- Parameters
- index
- Type
Number
- Description
Column index.
- findColumn
- Description
Finds the first column whose fieldName or text matches the specified value.
- Parameters
- value
- Type
String
- Description
The value to match.
- isText
- optional
true
- Type
Boolean
- Description
`false` indicates the value matches fieldName, `true` indicates it matches text.
- Returns Value
- Type
Wb.Column
- Description
The matched column or `null` if not found.
- findColumnByEl
- Description
Finds the column that contains the specified element.
- Parameters
- el
- Type
Element
- Description
The contained element.
- Returns Value
- Type
Wb.Column
- Description
The found column object or `null` if not found.
- findCell
- Flags
Private
- Description
Finds the TD cell element that contains the specified element.
- Parameters
- el
- Type
Element
- Description
The contained element.
- Returns Value
- Type
Element
- Description
The cell element. Returns `null` if not found.
- getCurrentColumn
- Flags
Private
- Description
Gets the column being resized at the current mouse position.
- Parameters
- e
- Type
Event
- Description
The event object.
- Returns Value
- Type
Wb.Column
- Description
Returns the column object if the column is found and resizable, otherwise returns `null`.
- onColsMouseMove
- Flags
Private
- Description
The method executed when the mouse is moved.
- Parameters
- e
- Type
Event
- Description
The event object.
- onColsMouseLeave
- Flags
Private
- Description
The method executed when the mouse leaves.
- Parameters
- e
- Type
Event
- Description
The event object.
- onColsMouseDown
- Flags
Private
- Description
The method executed when the mouse is pressed down.
- Parameters
- e
- Type
Event
- Description
The event object.
- onColsDocMouseUp
- Flags
Private
- Description
The method executed when the mouse button is released on the document.
- onColsDocMouseMove
- Flags
Private
- Description
The method executed when the mouse is moved on the document.
- Parameters
- e
- Type
Event
- Description
The event object.
## Events
- headerclick
- Description
Fired when the grid header is clicked.
- Parameters
- column
- Type
Wb.Column
- Description
The column.
- td
- Type
Element
- Description
Header cell TD element.
- e
- Type
Event
- Description
Event object.
- beforeedit
- Description
Fired before starting grid editing. Returning `false` will prevent editing.
- Parameters
- row
- Type
Wb.GridItem
- Description
The editing row.
- column
- Type
Wb.Column
- Description
The editing column.
- configs
- Type
Object
- Description
Configuration object.
- .value
- Type
Object
- Description
Edited value. Reset this value to modify the editing value.
- edit
- Description
Fired when grid editing is completed. Returning `false` will prevent the value from being set to the grid.
- Parameters
- value
- Type
Object
- Description
Edited value.
- row
- Type
Wb.GridItem
- Description
The edited row.
- column
- Type
Wb.Column
- Description
The edited column.
- editing
- Description
Fired when editing grid data.
- Parameters
- row
- Type
Wb.GridItem
- Description
The editing row.
- column
- Type
Wb.Column
- Description
The editing column.
- beforeloadcolumns
- Description
Fired before columns are loaded. Returning `false` will prevent loading.
- Parameters
- columns
- Type
Array
- Description
Loading columns.
- columnbeforedrag
- Description
Fired before a column is dragged. Returning `false` prevents dragging.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
The drag object.
- .sourceCol
- Type
Wb.Column
- Description
The dragged source column.
- columndrag
- Description
Fired when a column is being dragged.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
The drag object.
- .sourceCol
- Type
Wb.Column
- Description
The dragged source column.
- .destCol
- Type
Wb.Column
- Description
The target column where the source column is dragged to.
- columndrop
- Description
Fired when a column is dropped after.
- Parameters
- draggable
- Type
Wb.Draggable
- Description
The drag object.
- .sourceCol
- Type
Wb.Column
- Description
The dragged source column.
- .destCol
- Type
Wb.Column
- Description
The target column where the source column is dragged to.
# Wb.Tree
Tree component displayed in hierarchical multi-level structure.
See example: {#%tree.xwl|ide?openModule=example/comps/tree.xwl}
## Class Information
- class name
Wb.Tree
- Icon
tree-view
- cname
tree
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.Grid -> Wb.Tree
## Instance Properties
- pageSize
- Flags
Private
- Type
Boolean
- isTree
- Flags
Read-only
- Type
Boolean
- Description
Identifier indicating whether it is a tree.
- serverExport
- Type
Boolean
- Description
Whether to allow exporting data in the background when there are unloaded nodes.
- defaultColumns
- Type
Boolean
- Description
Whether to create default tree columns when {#columns} is not explicitly specified for the
tree. Defaults to `true`.
- autoPostParams
- Type
Boolean
- Description
Whether to automatically submit the original type data of the node as parameters
when loading the node.
-`true`: The current node merges data from all parent nodes as parameters. If parameter names are duplicated, child\
nodes take precedence.
-`false`: Do not submit node data.
-`null`: Use current node data as parameters. Default value.
- dblclickExpand
- Type
Boolean
- Description
Whether to expand/collapse the folder node when double-clicking on it. Defaults to `true`.
- pathSeparator
- Type
String
- Description
Node path separator. Defaults to "/".
- textField
- Type
String
- Description
Default text field name of nodes. Defaults to "text".
- folderIcon
- Type
IconString
- Description
Default folder node icon. Defaults to "folder1".
- leafExpander
- Type
Boolean
- Description
Whether leaf nodes reserve space for the node expander. Defaults to `true`.
- leafIndent
- Type
Boolean
- Description
Whether leaf nodes are indented. Defaults to `true`.
- loadingIcon
- Type
IconString
- Description
Loading icon displayed when nodes are loading. Defaults to "loading".
- loadingIconDelay
- Type
Number
- Description
Delay (in milliseconds) for displaying the Loading icon. Defaults to {#Wb.configs}.maskDelay.
- rightExpander
- Type
Boolean
- Description
Whether the node expander is displayed on the right side.
- grouping
- Type
Boolean
- Description
Whether to display data in groups based on the first sorted field.
- treeStyle
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Tree style.
-'menu': Menu style.
- linkedCheck
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to automatically synchronize the check state of all ancestor and descendant nodes when
a node is checked.
- checkedNodes
- Flags
Read-only
- Getter
- Type
Wb.TreeItem[]
- Description
Gets checked nodes or an empty array if none are selected.
- topSelections
- Flags
Read-only
- Getter
- Type
Wb.TreeItem[]
- Description
Gets the top-level nodes among all selected nodes.
- candidateSelection
- Flags
Read-only
- Getter
- Type
(inherited)
- itemsName
- Flags
Read-only
- Getter
- Type
String
- Description
Gets the property name of the child node list. For example, if itemsPath is "foo.bar.items",
itemsName returns "items".
- path
- Flags
Read-only
- Getter
- Type
String
- Description
Gets the path of the first selected node. See {#Wb.TreeItem.path} for details.
## Static Methods
- getTopNodes
- Description
Gets all top-level nodes in the node list. A node will be excluded if its parent node exists in the list.
- Parameters
- nodes
- Type
Wb.TreeItem[]
- Description
The node list.
- Returns Value
- Type
Wb.TreeItem[]
- Description
The top-level node list.
## Instance Methods
- setContentColumns
- init
- setData
- findCell
- onKeyDown
- onCheckChange
- Flags
Private
- Description
The method executed when the node check state changes when {#linkedCheck} is enabled.
- refresh
- expandAll
- Description
Expands all loaded nodes.
- collapseAll
- Description
Collapses all loaded nodes.
- onItemDblClick
- Flags
Private
- Description
The method executed when a double-click event is triggered on a tree item.
- Parameters
- item
- Type
Wb.TreeItem
- Description
The tree item.
- e
- Type
Event
- Description
The event object.
- getCell
- addTableEl
- setTableFit
- setColumnWidth
- resizeFrozenColumns
- loadSelect
- Description
Reloads nodes and restores the previously selected path. If the path does not exist, no selection will be set.
- Parameters
- field
- optional
true
- Type
String
- Description
The field name used for the path. Defaults to {#Wb.Tree.textField}.
- success
- optional
true
- Type
Function
- Description
The callback method after successful execution. See `success` in the {#load} method.
- getPath
- Description
Gets the path of the first selected node.
- Parameters
- fieldName
- optional
true
- Type
String
- Description
Node property field name for path composition. Defaults to {#textField}.
- pathSeparator
- optional
true
- Type
String
- Description
The path separator. Defaults to {#pathSeparator}.
- Returns Value
- Type
String
- Description
The path or `null` if no selected node.
- findPath
- Description
Finds the node by the specified path. This method only searches in loaded nodes, see {#selectPath} for all node.
Example:
node = tree.findPath('/root/wb/ide');
- Parameters
- path
- Type
String
- Description
The node path.
- field
- optional
true
- Type
String
- Description
The field name used for the path. Defaults to {#Wb.Tree.textField}.
- separator
- optional
true
- Type
String
- Description
The path separator. Defaults to {#Wb.Tree.pathSeparator}.
- Returns Value
- Type
Wb.TreeItem
- Description
The found tree node or null if not found.
- selectPath
- Description
Expands the tree and finds the node by the path. If the node exists, it will be selected.
Example:
tree.selectPath('/root/wb/ide');
- Parameters
- path
- Type
String
- Description
The node path.
- callback
- optional
true
- Type
Function
- Description
The callback method executed after the operation is completed.
- .node
- optional
true
- Type
Wb.TreeItem
- Description
The found node or null if not found.
- field
- optional
true
- Type
String
- Description
The field name used for the path. Defaults to {#Wb.Tree.textField}.
- separator
- optional
true
- Type
String
- Description
The path separator. Defaults to {#Wb.Tree.pathSeparator}.
- scope
- optional
true
- Type
Object
- Description
`this` in the callback method. Defaults to the current tree.
- unselect
- optional
true
- Type
Boolean
- Description
Whether not to select the node after it is found. `true` not selecting, `false` selecting.
## Events
- beforecheckchange
- Description
Fired before the check state of a node is changed. Returning `false` prevents the change.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The node.
- checked
- Type
Boolean|String
- Description
Check status. `true` for checked, `false` for unchecked, "half" for half-checked.
- checkchange
- Description
Fired when the check state of a node is changed.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The node.
- checked
- Type
Boolean|String
- Description
Check status. `true` for checked, `false` for unchecked, "half" for indeterminate.
- toggleexpand
- Description
Fired when a node is expanded or collapsed.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The node.
# Wb.ViewItem
View item component that is used in the {#view|Wb.View}.
## Class Information
- class name
Wb.ViewItem
- Icon
undefined
- cname
viewItem
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ViewItem
## Instance Properties
- isViewItem
- Flags
Read-only
- Type
Boolean
- Description
Identifier indicating whether it is a view item.
- isDirty
- Type
Boolean
- Description
Whether the data has been modified but not submitted. Valid when the
{#Wb.View.recordChanges} property is set to `true`.
- isNew
- Type
Boolean
- Description
Whether it is a newly added item that has not been submitted. Valid when
the {#Wb.View.recordChanges} property is set to `true`.
- oldData
- Type
Object
- Description
The original data before modification. Valid when the {#Wb.View.recordChanges} property
is set to `true`.
- originData
- Flags
Read-only
- Getter
- Type
Object
- Description
An object composed of the original values of {#keyFields} before modification, with a "$"
prepended to the field names.
- fullData
- Flags
Read-only
- Getter
- Type
Object
- Description
An object composed of the original values of {#keyFields} and all new value data, with a "$"
prepended to the names of original value fields.
- itemCls
- Getter
- Type
String
- Setter
- Type
String
- Description
The CSS class names separated by spaces to be added to the DOM element of the item.
- fixed
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether this is a fixed item that cannot be selected, edited, or navigated to by clicking,
and has a fixed background color.
- data
- Getter
- Type
Object
- Setter
- Type
Object
- Description
The data of the item. The following properties have designated meanings:
-_cls: The CSS class names separated by spaces added to the item DOM element.
-_disabled: Whether it is disabled.
-_selected: Whether it is selected.
-_visible: Whether it is hidden.
-_fixed: Whether it is a fixed item. Fixed items cannot be selected, edited, or navigated by clicking, and have a fixed\
background color.
-_tip: Tip text.
-_icon: Icon name. Only applicable to {#Wb.GridItem} and its subclasses, and {#Wb.SelectView}.
-_color: Icon color. Only applicable to {#Wb.GridItem} and its subclasses, and {#Wb.SelectView}.
-_img: Image icon name. Only applicable to {#Wb.GridItem} and its subclasses, and {#Wb.SelectView}.
-subtext: Item subtext. Only applicable to {#Wb.GridItem} and its subclasses. The name can be specified via\
{#Wb.Grid.subtextField}.
-_expanded: Whether the node is expanded. Only applicable to {#Wb.TreeItem} and its subclasses.
-_checked: Whether the node displays a check box. `false` displays an unchecked box, `true` displays a checked box,\
"half" displays a indeterminate box, and `null` does not display a check component. To get checked nodes, access the\
{#Wb.Tree.checkedNodes} property. Only applicable to {#Wb.TreeItem} and its subclasses.
-_leaf: Whether the node is a leaf. Only applicable to {#Wb.TreeItem} and its subclasses.
-items: Child node list. Only applicable to {#Wb.TreeItem} and its subclasses.
-text: The node text. Only applicable to {#Wb.TreeItem} and its subclasses. This name can be specified via\
{#Wb.Tree.textField}.
- view
- Flags
Read-only
- Getter
- Type
Wb.View
- Description
Gets the view component of the item or null if not found.
- selected
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the item is selected. If `true`, all other items are deselected. See {#doSelect} for details.
- proxy
- Flags
Read-only
- Getter
- Type
Proxy
- Description
The proxy of the item data, through which data property values can be directly read and written.
## Instance Methods
- destroy
- getDiffer
- Description
Gets an object containing differing field values between the specified object and current record, merged with original
key field values (prefixed with "$").
- Parameters
- newData
- Type
Object
- Description
The new data object to compare against current record.
- Returns Value
- Type
Object
- Description
Merged object of diff values and original values.
- preprocess
- Flags
Private
- Description
Preprocesses data and converts the field values by the {#fields} and {#defaultFields}.
- Parameters
- view
- Type
Wb.View
- Description
The view object.
- data
- Type
Object
- Description
The data object to be set.
- Returns Value
- Type
Object
- Description
A copy of the preprocessed data object.
- applyProperties
- Flags
Private
- Description
Sets the specified properties in the data to the current component.
- findSibling
- Description
Finds the nearest item in the specified direction of the current item.
- Parameters
- position
- Type
String
- Description
The direction to search.
-'up': Up
-'down': Down
-'left': Left
-'right': Right
- Returns Value
- Type
Wb.ViewItem
- Description
The found item or `null` if not found.
- refresh
- Description
Refreshes the current view item with the provided data.
- insertRefresh
- doFocusScroll
- Flags
Private
- Description
Sets the focus and scrolls the item into view.
- Parameters
- preventFocus
- optional
true
- Type
Boolean
- Description
Whether to prevent setting focus.
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrollbar scrolling.
- deselectOthers
- Flags
Private
- Description
Deselects all items except the current item in the specified view.
- Parameters
- view
- Type
Wb.View
- Description
The view.
- suppressEvent
- Type
Boolean
- Description
Whether to prevent event triggering.
- Returns Value
- Type
Boolean
- Description
`true` if the item selection has changed, `false` if the item selection has not changed.
- doSelect
- Description
Sets the selection state of the current item.
- Parameters
- selected
- Type
Boolean
- Description
The selection state, `true` for selected, `false` for unselected.
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to keep other items selected. Only valid when the `selected` parameter is `true`.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- preventFocus
- optional
true
- Type
Boolean
- Description
Whether to prevent setting focus.
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrollbar scrolling of the parent view component.
- Returns Value
- Type
Boolean
- Description
Whether the setting is successful. `true` for success, `false` for cancellation.
- select
- Description
Selects the current item. For more options, please use the {#doSelect} method.
- Parameters
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to keep other items selected.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- preventFocus
- optional
true
- Type
Boolean
- Description
Whether to prevent setting focus.
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrollbar scrolling of the parent view component.
- selectNoFocus
- Description
Selects the current item without setting focus. For more options, please use the {#doSelect} method.
- Parameters
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to keep other items selected.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- selectNoScroll
- Description
Selects the current item without scrollbar scrolling. For more options, please use the {#doSelect} method.
- Parameters
- keepExisting
- optional
true
- Type
Boolean
- Description
Whether to keep other items selected.
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- deselect
- Description
Deselects the current item.
- Parameters
- suppressEvent
- optional
true
- Type
Boolean
- Description
Whether to suppress the triggering of selection events.
- set
- Description
Sets values on the current item. Supports setting a single field or multiple fields at once. This method will fire the
{#Wb.View.*update} event.
Example:
item.set('fieldName', value); // Set a single value
item.set({field1: 'abc', field2: 123}); // Set multiple values
- Parameters
- fieldName
- Type
String|Object
- Description
The name of the field to set, or an object containing key-value pairs to update.
- value
- Type
*
- Description
The value to set. Ignored if `fieldName` is an object.
- get
- Description
Gets the value of the specified field from the current item.
- Parameters
- fieldName
- Type
String
- Description
The field name.
- Returns Value
- Type
*
- Description
The value of the field or `undefined` if the field does not exist.
- update
- Description
Updates the current item by the specified data. This method will not fire the {#Wb.View.*update} event.
- Parameters
- data
- Type
Object
- Description
The new values to update. Blob values will be automatically converted to the string "(blob)".
# Wb.GridItem
Grid item component, also known as a grid row. Each grid item corresponds to a row in the grid.
## Class Information
- class name
Wb.GridItem
- Icon
undefined
- cname
gridItem
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ViewItem -> Wb.mixin.Icon -> Wb.GridItem
## Instance Properties
- data
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- icon
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- iconColor
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- img
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
## Instance Methods
- setChecked
- Description
Sets the checked state of the specified column for the current item. This method is a lightweight implementation
for setting the checked state and has higher performance than the {#set} method.
- Parameters
- col
- Type
Wb.Column|String
- Description
The column or the fieldName.
- checked
- Type
Boolean|String|Number
- Description
Whether it is checked. The value will be {#converted|Wb.parseBool} to a boolean.
- applyProperties
# Wb.TreeItem
Tree item component, also known as a tree node. Each tree item corresponds to a node in the tree.
## Class Information
- class name
Wb.TreeItem
- Icon
undefined
- cname
treeItem
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ViewItem -> Wb.mixin.Icon -> Wb.GridItem -> Wb.mixin.View -> Wb.TreeItem
## Instance Properties
- isNode
- Type
Boolean
- Description
Identifier indicating whether it is a tree node.
- contentEl
- Flags
Private
- Type
Element
- Description
Content element of the node.
- data
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- itemsData
- Flags
Read-only
- Getter
- Type
Object
- Description
Gets a copy data of the all descendant nodes including the current node.
- checked
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Checkbox state of the current node:
-false: Display as unchecked
-true: Display as checked
-null: Do not display the checkbox
-'half': Display as indeterminate
- leaf
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current node is a leaf node.
- loading
- Flags
Read-only
- Type
Boolean
- Description
Whether the node is being loaded.
- loaded
- Type
Boolean
- Description
Whether the node has finished loading. Only valid for folder nodes.
- iconEl
- Type
Element
- Description
The node icon element.
- expanded
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the node is expanded.
- allData
- Flags
Read-only
- Getter
- Type
Object
- Description
Retrieves a merged data object containing data from the current node and all its ancestors. If
duplicate keys exist, values from descendant nodes override those from ancestor nodes.
- depth
- Flags
Read-only
- Getter
- Type
Number
- Description
Gets the depth of the node. The root node has a depth of 0.
- path
- Flags
Read-only
- Getter
- Type
String
- Description
Gets the path of the node by default `fieldName` and `pathSeparator`. See {#getPath} for details.
- text
- Getter
- Type
String
- Setter
- Type
String
- Description
Title of the node.
- rootNode
- Flags
Read-only
- Getter
- Type
Wb.TreeItem
- Description
The root node of the tree to which the current node belongs.
## Instance Methods
- onAdd
- Flags
Private
- Description
Method executed when adding a child node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
Child node.
- onRemove
- Flags
Private
- Description
Method executed when removing a child node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
Child node.
- removeExpander
- Description
Move the node expander. If the node has been loaded, all child nodes will be cleared; if the node has not been loaded,
it will be set as loaded.
- selectChild
- Description
Expands the node and finds the node by the specified field value. If the node exists, it will be selected.
Example:
node.selectChild('text');
- Parameters
- value
- Type
String
- Description
The field value of the child node.
- callback
- optional
true
- Type
Function
- Description
The callback method executed after the operation is completed.
- .node
- optional
true
- Type
Wb.TreeItem
- Description
The found node or null if not found.
- field
- optional
true
- Type
String
- Description
The field name used to retrieve the value. Defaults to {#Wb.Tree.textField}.
- scope
- optional
true
- Type
Object
- Description
`this` in the callback method. Defaults to the current node.
- unselect
- optional
true
- Type
Boolean
- Description
Whether not to select the node after it is found. `true` not selecting, `false` selecting.
- doSelect
- Description
Sets the selection state of the current node. See {#Wb.ViewItem.doSelect} for details.
- Parameters
- otherParams
- Type
...Object
- Description
`selected`, `keepExisting`, `suppressEvent`, `preventFocus`, `preventScroll` see
{#Wb.ViewItem.doSelect}.
- preventForceView
- optional
true
- Type
Boolean
- Description
Whether to prevent forcing the expansion of parent nodes and making them visible.
- select
- Description
Selects the current node. See {#Wb.ViewItem.select} for details.
- Parameters
- otherParams
- Type
...Object
- Description
`keepExisting`, `suppressEvent`, `preventFocus`, `preventScroll` see {#Wb.ViewItem.select}.
- preventForceView
- optional
true
- Type
Boolean
- Description
Whether to prevent forcing the expansion of parent nodes and making them visible.
- updateExpander
- Flags
Private
- Description
Sets the visibility of the column expander based on whether the current node has child nodes.
- forceView
- Description
Forces the node to be visible. This method will expand all parent nodes.
- Parameters
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrolling.
- getItemsData
- Description
Gets a copy data of the all descendant nodes including the current node.
- Parameters
- excludeItems
- optional
true
- Type
Wb.ViewItem[]
- Description
Exclude the data of these items.
- removeEmptyItems
- optional
true
- Type
Boolean
- Description
Whether to remove the `items` property for folder nodes that have no child nodes.
- Returns Value
- Type
Object
- Description
Node data.
- onCheckClick
- Flags
Private
- Description
Method executed when the check icon is clicked.
- Parameters
- e
- Type
Event
- Description
Event object.
- refreshAll
- Description
Refreshes the current node and all its descendant nodes.
- insertRefresh
- load
- Description
Loads remote data and populates the current node with child nodes. See {#Wb.View.load} for details.
- loadSelect
- Description
Reloads child nodes and restores the previously selected path in the node.
- Parameters
- field
- optional
true
- Type
String
- Description
The field name used for the path. Defaults to {#Wb.Tree.textField}.
- success
- optional
true
- Type
Function
- Description
The callback method after successful execution. See `success` in the {#load} method.
- loadx
- Description
Promise-based version of the {#load} method. See {#Wb.View.loadx} for details.
- Returns Value
- Type
Promise
- Description
The Promise object.
- reload
- Description
Reload data into the node using the parameters from the last request. See {#Wb.View.reload} for details.
- reloadx
- Description
Promise-based version of the {#reload} method. See {#Wb.View.reloadx} for details.
- createParams
- Description
Creates a parameter object composed of the primitive data type properties of the current node.
- Parameters
- containsAncestor
- optional
true
- Type
Boolean
- Description
Whether to include parameters of all ancestor nodes.
- Returns Value
- Type
Object
- Description
The resulting parameter object.
- expand
- Description
Expands the current node. If the child nodes are not loaded, they will be loaded first.
- Parameters
- callback
- Type
Function
- Description
The callback method after the node is successfully expanded.
- Returns Value
- Type
Boolean
- Description
`true` means the loading is executed normally, `false` means the loading is canceled.
- expandx
- Description
Promise-based version of the {#expand} method. If the expansion is canceled, the Promise resolves with `{canceled: true}`.
- Returns Value
- Type
Promise
- Description
The Promise object.
- showLoadingIcon
- Flags
Private
- Description
Displays the loading icon.
- hideLoadingIcon
- Flags
Private
- Description
Hides the loading icon.
- doExpand
- Flags
Private
- Description
Performs the node expansion operation, and child nodes must have been loaded.
- collapse
- Description
Collapses the node and hides all child nodes.
- toggleExpand
- Description
Toggles the expanded state of the node.
- getPath
- Description
Gets the path of the current node.
- Parameters
- fieldName
- optional
true
- Type
String
- Description
Node property field name for path composition. Defaults to {#Wb.Tree.textField}.
- pathSeparator
- optional
true
- Type
String
- Description
The path separator. Defaults to {#Wb.Tree.pathSeparator}.
- Returns Value
- Type
String
- Description
The path.
# Wb.DateView
A calendar view component that displays dates in a list format.
## Class Information
- class name
Wb.DateView
- Icon
undefined
- cname
dateView
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.DateView
## Static Properties
- picker
- Flags
Read-only
- Getter
- Type
Wb.DateView
- Description
Gets the shared date view component.
- weekdays
- Type
Array
- Description
A list consisting of abbreviations from Sunday to Saturday.
## Instance Properties
- nowButton
- Type
Boolean
- Description
Whether to create the "Now" button.
- startDay
- Type
Number
- Description
Specifies the starting day of the week, where 0 is Sunday, 1 is Monday, and so on.
- maxValue
- Type
Date
- Description
The maximum value.
- minValue
- Type
Date
- Description
The minimum value.
- The
- Flags
Key
- Type
Date
- Description
date value. Defaults to today if `null`.
- currentDate
- Flags
Read-only
- Getter
- Type
(inherited)
- value
- Flags
Read-only
- Getter
- Type
(inherited)
## Instance Methods
- init
- prevPage
- Flags
Private
- Description
Turns the calendar to the previous page.
- nextPage
- Flags
Private
- Description
Turns the calendar to the next page.
- onKeyDown
- onItemClick
- Flags
Private
- Description
Method executed when an item is clicked.
- onItemSelect
- Flags
Private
- Description
Method executed when an item is selected.
- selectToday
- Flags
Private
- Description
Selects today as the date value.
- prevYear
- Description
Navigates to the previous year.
- nextYear
- Description
Navigates to the next year.
- prevMonth
- Description
Navigates to the previous month.
- nextMonth
- Description
Navigates to the next month.
## Events
- selectdate
- Description
Fired when a date is selected.
- Parameters
- date
- Type
Date
- Description
The selected date.
# Wb.SelectView
Select view component, the dropdown component of the {#Wb.Select}.
## Class Information
- class name
Wb.SelectView
- Icon
undefined
- cname
selectView
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.SelectView
## Instance Properties
- textField
- Type
String
- Description
The display field name of the view.
- valueField
- Type
String
- Description
The value field name of the view.
- prepareMethod
- Flags
Private
- Type
Function
- Description
The method for preparing data.
- prepareScope
- Flags
Private
- Type
Object
- Description
The `this` object of the {#prepareMethod} method.
- defaultTpl
- Flags
Read-only
- Type
Wb.Template
- Description
The default item rendering template.
- itemTpl
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
## Instance Methods
- init
- renderFn
- Flags
Private
- Description
Rendering method for the view items.
- Parameters
- data
- Type
Object
- Description
The item data.
- el
- Type
Element
- Description
The item element.
- prepareData
- Flags
Private
- Description
Prepares data after remote loading.
- Parameters
- resp
- Type
Array
- Description
Response data.
- Returns Value
- Type
Array
- Description
Prepared data.
# Wb.CheckView
Check view component, allowing single or multiple selection of items via checkboxes. The following properties in the view
item data have specific meanings:
-'text': Text title
-'value': Value
-'_icon': Icon
-'_img': Image icon
See {#Wb.ViewItem.data} for details.
See example: `Check view` of {#%view.xwl|ide?openModule=example/comps/view.xwl}
## Class Information
- class name
Wb.CheckView
- Icon
check7
- cname
checkView
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.CheckView
## Instance Properties
- textField
- Type
String
- Description
Text field name, defaults to "text".
- valueField
- Type
String
- Description
Value field name, defaults to "value".
- iconField
- Type
String
- Description
Icon field name, defaults to "_icon".
- imgField
- Type
String
- Description
Image icon field name, defaults to "_img".
- value
- Getter
- Type
Object|Array
- Setter
- Type
Object|Array
- Description
Component value. For single selection, returns the value of the selected item or `undefined`
if none selected. For multiple selection, returns an array of selected item values, or an empty array if none selected.
- data
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
## Instance Methods
- init
# Wb.ListView
List view component, displays items in a list format. Item style is set by the {#viewType} property. The following default
field names in the view item have specific meanings:
-'text': Text
-'subtext': Subtext displayed below the text
-'_icon': Icon
-'_img': Image icon
-'textvalue': Text value displayed on the right
-'datevalue': Date/time value displayed on the right
-'iconvalue': Icon displayed on the right
-'badge': Badge count displayed on the icon or image icon; this property is invalid if no icon or image icon exists.
For other properties, refer to {#Wb.ViewItem.data}.
See example: `List view` of {#%view.xwl|ide?openModule=example/comps/view.xwl}
## Class Information
- class name
Wb.ListView
- Icon
list1
- cname
listView
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.ListView
## Instance Properties
- textField
- Type
String
- Description
Text field name, defaults to "text".
- subtextField
- Type
String
- Description
Subtext field name displayed below the text, defaults to "subtext".
- iconField
- Type
String
- Description
Icon field name, defaults to "_icon".
- imgField
- Type
String
- Description
Image icon field name, defaults to "_img".
- textvalueField
- Type
String
- Description
Text value field name displayed on the right, defaults to "textvalue".
- datevalueField
- Type
String
- Description
Date time value field name displayed on the right, defaults to "datevalue".
- iconvalueField
- Type
String
- Description
Icon value field name displayed on the right, defaults to "iconvalue".
- badgeField
- Type
String
- Description
Badge displayed on the icon; this property is invalid if no icon exists, defaults to "badge".
- viewType
- Flags
Key
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
View type, sets the display style of view items.
-'smallList': List style, typically includes an icon on the left and text on the right. Items are displayed in a vertical\
list, one per row.
-'list': List style, typically includes an icon on the left and text on the right. Items are displayed in a vertical list,\
one per row.
-'smallIcon': Small icon style, typically includes a small icon on the left and text on the right. Items are displayed in\
a horizontal tiled layout by default.
-'mediumIcon': Medium icon style, typically includes a medium icon above and text below. Items are displayed in a\
horizontal tiled layout by default.
-'bigIcon': Large icon style, typically includes a large icon above and text below. Items are displayed in a horizontal\
tiled layout by default.
- noDivider
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to hide dividing line between each item. Only available for some {#viewType}.
## Instance Methods
- init
# Wb.IconView
Icon list view component, typically includes an icon above and text below for each item. Items are displayed in a horizontal
tiled layout by default. This component corresponds to the "mediumIcon" style of the {#Wb.ListView} component's {#viewType}.
See {#Wb.ListView} for details.
## Class Information
- class name
Wb.IconView
- Icon
icon-list
- cname
iconView
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.ListView -> Wb.IconView
# Wb.SlotView
Slot view component, used to add to a slot container to display slot data.
## Class Information
- class name
Wb.SlotView
- Icon
list
- cname
slotView
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.mixin.View -> Wb.View -> Wb.SelectView -> Wb.SlotView
## Instance Properties
- isTapDown
- Flags
Private
- Type
Boolean
- Description
Whether the mouse button is pressed.
- topTitle
- Getter
- Type
String
- Setter
- Type
String
- Description
Top title.
## Instance Methods
- init
- onSvDocTapUp
- Flags
Private
- Description
Method executed when the mouse is released on {#globalThis.DocEl} when acting as a SlotView.
- onItemSelect
- Flags
Private
- Description
Method executed when an item is selected.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The item.
- onScrollEnd
- Flags
Private
- Description
Method executed after scrolling ends.
- realign
- Description
Realigns the selected item to center it.
# Wb.Slot
Slot container, can contain one or more slots, used to select data within slots via scrolling.
See example: {#%slot.xwl|ide?openModule=example/comps/slot.xwl}
## Class Information
- class name
Wb.Slot
- Icon
slots
- cname
slot
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Slot
## Instance Properties
- stripe
- Flags
Read-only Private
- Type
Wb.component
- Description
Stripe used to highlight selected data.
- titlePlace
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to reserve the slot title bar height to adjust the {#stripe} position. Defaults to `null`,
auto-detected.
- data
- Flags
Key
- Getter
- Type
Array
- Setter
- Type
Array
- Description
Slot data list.
Example:
[[{text: 'a1'}, {text:'a2'}], [{text: 'b1'}, {text:'b2'}]] // Defines 2 slots
- value
- Flags
Key
- Getter
- Type
Array
- Setter
- Type
Array
- Description
Array composed of the {#value|Wb.SelectView.valueField} or {#text|Wb.SelectView.textField} property
values of all visible slot selected items. Values for unselected items are `null`.
## Instance Methods
- init
- ready
- createSlot
- Description
Creates a new slot, generating a slot view based on the slot data.
- Parameters
- data
- Type
Array
- Description
Slot data list.
- Returns Value
- Type
Wb.SlotView
- Description
Slot view.
## Events
- itemselect
- Description
Fired when any slot item is selected.
- Parameters
- item
- Type
Wb.ViewItem
- Description
The selected item.
# Wb.TimeSlot
Time slot container, can contain slots for hours, minutes, seconds, etc., used to select time via scrolling.
## Class Information
- class name
Wb.TimeSlot
- Icon
undefined
- cname
timeSlot
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Slot -> Wb.TimeSlot
## Static Properties
- picker
- Flags
Read-only
- Getter
- Type
Wb.TimeSlot
- Description
Gets the shared time slot component.
## Instance Properties
- nowButton
- Type
Boolean
- Description
Whether to create the "Now" button.
- okButton
- Type
Boolean
- Description
Whether to create the "OK" button.
- value
- Flags
Key
- Getter
- Type
Date
- Setter
- Type
Date
- Description
The time value. Defaults to current time if `null`.
- format
- Getter
- Type
String
- Setter
- Type
String
- Description
Time format, used to control whether to display hour, minute, and second slots.
## Instance Methods
- init
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed.
- onDblClick
- Flags
Private
- Description
Method executed on double-click.
- createButtons
- Flags
Private
- Description
Creates tool buttons.
- createSlotView
- Flags
Private
- Description
Creates the time slot view.
- Parameters
- length
- Type
Number
- Description
Item length.
- title
- Type
String
- Description
Slot title.
- Returns Value
- Type
Wb.SlotView
- Description
Slot view.
- createTimeSlot
- Flags
Private
- Description
Creates hour, minute, and second time slots.
## Events
- selectdate
- Description
Fired when a date is selected.
- Parameters
- date
- Type
Date
- Description
The selected date.
# Wb.DateSlot
Year-month-day slot container, can contain year, month, and day slots, used to select dates via scrolling.
## Class Information
- class name
Wb.DateSlot
- Icon
undefined
- cname
dateSlot
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Slot -> Wb.DateSlot
## Instance Properties
- beforeYears
- Type
Number
- Description
Number of years before the current date that can be selected.
- afterYears
- Type
Number
- Description
Number of years after the current date that can be selected.
- noDate
- Flags
Private
- Type
Boolean
- Description
Whether not to generate the day slot.
- nowButton
- Type
Boolean
- Description
Whether to create the "Now" button.
- okButton
- Type
Boolean
- Description
Whether to create the "OK" button.
- value
- Flags
Key
- Getter
- Type
Date
- Setter
- Type
Date
- Description
Component date value. Defaults to current date if `null`.
- format
- Getter
- Type
String
- Setter
- Type
String
- Description
Year-month-day format, used to control whether to display year, month, and day.
## Instance Methods
- init
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed.
- onDblClick
- Flags
Private
- Description
Method executed on double-click.
- createDateSlot
- Flags
Private
- Description
Creates the date slots.
- onMonthSelect
- Flags
Private
- Description
Method executed when the month changes.
## Events
- selectdate
- Description
Fired when a date is selected.
- Parameters
- date
- Type
Date
- Description
The selected date.
# Wb.MonthSlot
Year-month slot container, can contain year and month slots, used to select a date composed of year and month via scrolling.
## Class Information
- class name
Wb.MonthSlot
- Icon
undefined
- cname
monthSlot
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Slot -> Wb.DateSlot -> Wb.MonthSlot
## Static Properties
- picker
- Flags
Read-only
- Getter
- Type
Wb.TimeSlot
- Description
Gets the shared date slot.
# Wb.DatetimePanel
Date-time panel to be used to select date and time.
## Class Information
- class name
Wb.DatetimePanel
- Icon
undefined
- cname
datetimePanel
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.DatetimePanel
## Static Properties
- picker
- Flags
Read-only
- Getter
- Type
Wb.DatetimePanel
- Description
The shared date-time panel.
## Instance Properties
- nowButton
- Type
Boolean
- Description
Whether to create the "Now" button.
- okButton
- Type
Boolean
- Description
Whether to create the "OK" button.
- format
- Getter
- Type
String
- Setter
- Type
String
- Description
Date-time format.
- value
- Flags
Key
- Getter
- Type
Date
- Setter
- Type
Date
- Description
The date-time value. Defaults to current date-time if `null`.
- maxValue
- Getter
- Type
Date
- Setter
- Type
Date
- Description
The maximum value.
- minValue
- Getter
- Type
Date
- Setter
- Type
Date
- Description
The minimum value.
## Instance Methods
- init
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
## Events
- selectdate
- Description
Fired when a date is selected.
- Parameters
- date
- Type
Date
- Description
The selected date.
# Wb.CardCt
Card container. Child components under this container are also called cards. This container displays only a single card
at a time; all other cards are hidden.
## Class Information
- class name
Wb.CardCt
- Icon
win-restore
- cname
cardCt
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.CardCt
## Instance Properties
- orderCards
- Flags
Private
- Type
Array
- Description
List maintaining card sorting.
- useHash
- Type
Enum
- Description
Whether to add the specified hash of child components to the history to support
forward/backward navigation. Hash is set by {#hashName}.
-`true`: Used in both touch and desktop modes.
-`'touch'`: Used only in touch mode.
-`'desktop'`: Used only in desktop mode.
- hashName
- Type
String
- Description
When using {#useHash}, the property value of this name for child components serves as the
hash, defaults to "cid".
- activeCard
- Flags
Code
- Getter
- Type
Wb.Component
- Setter
- Type
Wb.Component
- Description
The currently active card or `null` if no cards are activated.
- activeIndex
- Getter
- Type
Number
- Setter
- Type
Number|String
- Description
The currently active card index. If the value exceeds the maximum index, it is treated as the
maximum index value. `-1` indicates no cards are activated. A string represents the card's {#cid} value.
## Static Methods
- getHashId
- Flags
Private
- Description
Gets the Hash Id of the specified component.
- Parameters
- component
- Type
Wb.Component
- Description
The component.
- Returns Value
- Type
String
- Description
Hash id.
## Instance Methods
- init
- onCardChange
- Flags
Private
- Description
Method executed when the card changes.
- Parameters
- newCard
- Type
Wb.Component
- Description
The new card.
- oldCard
- Type
Wb.Component
- Description
The old card.
- onAdd
- Flags
Private
- Description
Method executed when a new child component is added.
- Parameters
- child
- Type
Wb.Component
- Description
The added card.
- onRemove
- Flags
Private
- Description
Method executed when a child component is removed.
- Parameters
- child
- Type
Wb.Component
- Description
The removed card.
- gotoHash
- Description
Navigates to the child component with the specified hash. This method can be overridden to implement custom hash
navigation logic.
- Parameters
- id
- Type
String
- Description
The Hash id.
## Events
- cardchange
- Description
Fired after the card switches.
- Parameters
- newCard
- Type
Wb.Component
- Description
The new card, `null` if no card exists.
- oldCard
- Type
Wb.Component
- Description
The old card, `null` if no card existed.
# Wb.Tab
Tabbed card container.
## Class Information
- class name
Wb.Tab
- Icon
tab
- cname
tab
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.CardCt -> Wb.Tab
## Instance Properties
- mainTab
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether this is the main tab used to open modules via {#Wb.open} and related methods.
- tabSortable
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether child tab cards can be sorted by dragging.
- highlightText
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the active card title text is highlighted.
- dblclickFull
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the child card in full screen when its tab button is double-clicked.
- tabRestoreBtn
- Flags
Private
- Type
Wb.Button
- Description
Button to restore the state before maximization, see {#dblclickFull}.
- tabMenu
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the context menu for card management on the {#tabBar}.
- tabPosition
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Position of the {#tabBar}.
-`'top'`: Top
-`'bottom'`: Bottom
-`'left'`: Left
-`'right'`: Right
- touchStyle
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to enable the touch-optimized layout. When enabled, the Tab bar is displayed at the bottom
with labels positioned below the icons.
- shrinkTabButton
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether buttons in the tab bar automatically shrink.
- clipTabText
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to clip the text when button text in the tab bar exceeds the length.
- wrapTab
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether buttons in the tab bar automatically wrap lines.
- tabBar
- Flags
Read-only
- Getter
- Type
Wb.TabBar
- Description
Gets the Tab bar used to display card buttons for switching tab cards.
- tabBarEl
- Flags
Code
- Getter
- Type
Element
- Setter
- Type
Element
- Description
The element where the {#tabBar} is rendered.
## Instance Methods
- init
- onTabBarBeforeSort
- Flags
Private
- Description
Method executed before adjusting the order of {#tabBar} child components.
- Parameters
- dragBtn
- Type
Wb.Button
- Description
The dragged button.
- onTabBarSorting
- Flags
Private
- Description
Method executed while adjusting the order of {#tabBar} child components.
- Parameters
- dragBtn
- Type
Wb.Button
- Description
The dragged button.
- refBtn
- Type
Wb.Button
- Description
The button before which the drag occurs.
- onTabBarSort
- Flags
Private
- Description
Method executed after adjusting the order of {#tabBar} child components.
- Parameters
- dragBtn
- Type
Wb.Button
- Description
The dragged button.
- refBtn
- Type
Wb.Button
- Description
The button before which the drag occurred.
- onBackClick
- Flags
Private
- Description
Method executed when the navigation back button is clicked.
- onForwardClick
- Flags
Private
- Description
Method executed when the navigation forward button is clicked.
- setNavigate
- Description
Sets navigation operations for the current tab to facilitate going back and forward to the previous tab.
- Parameters
- backBtn
- Type
Wb.Button
- Description
The back button.
- forwardBtn
- Type
Wb.Button
- Description
The forward button.
- onTabBarDblClick
- Flags
Private
- Description
Method executed when TabBar is double-clicked if {#dblclickFull} is enabled.
- Parameters
- e
- Type
Event
- Description
The event object.
- setFullWin
- Flags
Private
- Description
Sets whether the tab container is displayed in full screen.
- Parameters
- isFull
- Type
Boolean
- Description
Whether to display in full screen. `true` for full screen, `false` for normal.
- closeCards
- Description
Closes child cards.
- Parameters
- mode
- Type
String
- Description
The close mode.
-'active'/falsy: Close the currently active card.
-'all'/true: Close all cards. Default value.
-'others': Close other cards.
-'left': Close all cards to the left.
-'right': Close all cards to the right.
- card
- optional
true
- Type
Wb.Card
- Description
The reference card, defaults to the currently displayed card.
# Wb.Card
Tab card, used as a child component of {#Wb.Tab}, representing a tab card.
## Class Information
- class name
Wb.Card
- Icon
card
- cname
card
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Card
## Instance Properties
- sortable
- Type
Boolean
- Description
Whether dragging the card to adjust its position in the container is enabled. Only effective when
the container's {#Wb.Tab.tabSortable} property is set to `true`.
- tabButton
- Flags
Read-only
- Type
Wb.TabButton
- Description
The tab button of the card.
- cardVisible
- Getter
- Type
Boolean
- Description
Whether the {#tabButton} of the current card is visible.
- Setter
- Type
Boolean
- Description
Whether both the current card and its {#tabButton} are visible.
- title
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
Title of the tab button of the card.
- icon
- Flags
Key
- Getter
- Type
IconString
- Setter
- Type
IconString
- Description
The tab button icon of the card.
- img
- Flags
Key
- Getter
- Type
ImgString
- Setter
- Type
ImgString
- Description
The tab button image icon of the card.
- spin
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the tab button icon is spinning.
- closable
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether the card can be closed via the close button. Setting to `null` destroys the close button.
-`true`: Close button is enabled.
-`false`: Close button is disabled.
-`null`: No close button. Default.
- tabTip
- Getter
- Type
String|Wb.Tip
- Setter
- Type
String|Object|Wb.Tip
- Description
Tip for the tab button of the card.
- tabOverflowTip
- Getter
- Type
Boolean|Wb.OverTip
- Setter
- Type
Boolean|Object|Wb.OverTip
- Description
Tip displayed when text overflows for the tab button of the card.
- disabled
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
## Instance Methods
- init
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- show
- onAdded
- Flags
Private
- Description
Method executed when added to a container.
- Parameters
- parent
- Type
Wb.Tab
- Description
The parent tab card container.
- index
- Type
Number
- Description
The index position where it is added.
- onRemoved
- Flags
Private
- Description
Method executed when removed from the container.
- onDestroy
- Description
Method executed when the component is destroyed.
- confirmClose
- Description
Shows a confirmation dialog with "Yes", "No", and "Cancel" buttons before closing the card. Executes the specified method
when "Yes" is clicked.
- Parameters
- fn
- Type
Function
- Description
The method executed when "Yes" is clicked.
- .card
- Type
Wb.Card
- Description
The card being closed.
- .callback
- Type
Function
- Description
The passed callback method for closing the card.
- scope
- optional
true
- Type
Object
- Description
The `this` object for the `fn` method. Defaults to the closed card.
- propName
- optional
true
- Type
String
- Description
The name of the closing card property used as the prompt message. Defaults to the "title".
- Returns Value
- Type
Boolean
- Description
Whether closing is allowed.
- onShow
- Flags
Private
- Description
Method executed when the card is shown.
- onHide
- Flags
Private
- Description
Method executed when the card is hidden.
# Wb.Window
A specialized panel intended for use as an application window. Windows are {#floating}, {#resizable}, and {#movable} by
default. Windows can be maximized to fill the viewport, restored to their prior size, and can be minimized.
By default, Windows will be rendered to `document.body`. Constrains the Window to a specified container by adding it to
that container and setting the container's cls to "w-rel".
See example: {#%window.xwl|ide?openModule=example/comps/window.xwl}
## Class Information
- class name
Wb.Window
- Icon
window
- cname
window
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Window
## Static Properties
- messageWindows
- Flags
Private
- Type
Object
- Description
Object composed of all message window instances with a name, where key is the name and value is the
window instance.
- tipWindows
- Flags
Private
- Type
Object
- Description
Array composed of all tip window instances.
## Instance Properties
- maximizable
- Flags
Write-only
- Setter
- Type
Enum
- Description
Whether the window is maximizable.
-`true`: Maximize button is enabled. Default value.
-`false`: Maximize button is disabled.
-`null`: No maximize button.
- autoCenter
- Type
Boolean
- Description
Whether to automatically center after showing the window.
- closeAction
- Flags
Key
- Type
Enum
- Description
Action executed when the {#close} method is called. Defaults to 'hide'.
-'hide': Calls the {#hide} method to hide.
-'destroy': Calls the {#destroy} method to destroy.
- focusControl
- Type
Enum/String
- Description
Whether to set focus to a specified component when showing the window. A string
value specifies the {#cid} of the descendant component to focus.
-`true`: Sets focus to the last focused control {#Wb.Control}. If no control was previously focused, sets focus to the\
first valid component with the {#allowFocus} property.
-`false`: Sets focus to the window itself.
-`null`: Sets focus to the first valid component with the {#allowFocus} property. Default value.
- isEdit
- Flags
Read-only
- Type
Boolean
- Description
Whether the current window is an editing window. `false` for adding, `true` for editing. Only
applicable in dictionary mode.
- closeOnEsc
- Type
Boolean
- Description
Whether to close the window when Esc is pressed. This property is invalid if {#onEsc}
is already set.
- okOnEnter
- Type
Boolean
- Description
Whether to trigger the {#ok} event when Enter is pressed. This property is invalid if
{#onEnter} is already set. Defaults to `true`.
- dialog
- Flags
Key
- Type
Boolean
- Description
Sets whether the window acts as a dialog with 'OK' and 'Cancel' buttons in modal
mode. Setting this property will default {#modal}, {#closeOnEsc} and {#okOnEnter} properties to `true`.
- resetDialog
- Flags
Key
- Type
Boolean
- Description
Sets whether it is a reset dialog window. The difference from {#dialog} is that it
automatically resets component values inside the window after hiding.
- clearDialog
- Flags
Key
- Type
Boolean
- Description
Sets whether it is a clear dialog window. The difference from {#dialog} is that it
automatically clears component values inside the window after hiding.
- groupTitle
- Flags
Code
- Type
Boolean
- Description
Whether to display the group title when grouping dictionaries. Defaults to
auto-detection. Specifying this value defaults {#tableStyle} to `true`.
- background
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- x
- Type
Number/String
- y
- Type
Number/String
- onEnter
- Type
Function
- Description
Method executed when Enter is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- onEsc
- Type
Function
- Description
Method executed when Esc is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- ctEl
- Flags
Read-only
- Getter
- Type
(inherited)
- okHandler
- Flags
Code
- Type
Function
- Description
Method executed when the OK button is clicked. It will be cleared after the window is
hidden each time.
- Parameters
- .win
- Type
Wb.Window
- Description
The current window.
- .values
- Type
Object
- Description
Object composed of all component values in the current window.
- closeOnBack
- Type
Boolean
- Description
Whether to close the window when the browser's back button is clicked while the window
is modal. Invalid for non-modal windows. When this property is `true` and multiple windows are continuously closed or
shown, due to the asynchronous nature of navigation operations, please delay executing the {#close} and {#show} methods;
otherwise, it may cause abnormalities in the browser's back button functionality. For example, use the following code
to close multiple windows and show a new one:
Example:
win2.close(); // close win2
win1.close.delay(win1, 100); // delay in closing win1
win3.show.delay(win3, 200); // delay in showing win3
-`true`: Close the window.
-`false`: Do not close the window.
-`null`: Auto-detect. Allows closing only when in {#touch|Wb.isTouch} mode and the modal window has {#closable} set
to `true`; otherwise, closing is not allowed. Default value.
- visible
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- manualShow
- Type
Boolean
- Description
Whether to prevent automatic showing of the window when using the {#showDo}
method. Typically used for {#%dictionary|dict} windows.
- outActiveEl
- Flags
Private
- Type
Element
- Description
The external element activated before the window was activated.
- inActiveCtrl
- Flags
Private
- Type
Wb.Control
- Description
The last activated control inside the window.
- maskEl
- Flags
Read-only
- Type
Element
- Description
The mask element for modal dialogs.
- modal
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the window is displayed as a modal.
- movable
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
## Static Methods
- getMessageWin
- Flags
Private
- Description
Gets the message window.
- Parameters
- closeAction
- Type
String
- Description
The close action.
- Returns Value
- Type
Wb.Window
- Description
The new window.
- showMessage
- Description
Shows a message dialog.
Example:
Wb.Window.showMessage({title: 'Prompt', text: 'Saved successfully', buttons: [{text: 'OK', cid: 'ok'}]});
- Parameters
- configs
- Type
Object
- Description
The configuration object.
- .title
- optional
true
- Type
String
- Description
The title.
- .icon
- optional
true
- Type
String
- Description
The icon.
- .iconColor
- optional
true
- Type
String
- Description
The icon foreground color.
- .text
- optional
true
- Type
String
- Description
Plain text message.
- .html
- optional
true
- Type
String
- Description
HTML text message. Setting this parameter makes the text parameter invalid.
- .buttons
- optional
true
- Type
Array
- Description
Button list.
- .callback
- optional
true
- Type
Function
- Description
Callback method when a button is clicked. `this` points to the window.
- ..buttonCid
- optional
true
- Type
Function
- Description
The cid property of the button.
- .enterButton
- optional
true
- Type
String
- Description
The button name clicked when Enter is pressed. `null` indicates the first button. An empty
string means no response to Enter.
- .escButton
- optional
true
- Type
String
- Description
The button name clicked when Esc is pressed or the window is closed. `null` indicates the
last button. An empty string means no response to Esc, and the close button will be disabled.
- .name
- optional
true
- Type
Boolean
- Description
Window name; windows with the same name display as a singleton. If empty, a new window is created
each time.
- Returns Value
- Type
Wb.Window
- Description
The displayed window.
- getDialog
- Description
Gets the dialog window with the specified name.
- Parameters
- name
- optional
true
- Type
String
- Description
The window name. Defaults to 'sys.dialog'.
- Returns Value
- Type
Wb.Window
- Description
The window object or `undefined` if not found.
- showTip
- Description
Shows a tip message box that can automatically close after a specified duration. Clicking without pressing the Ctrl key
closes the box immediately.
- Parameters
- configs
- Type
Object
- Description
The configuration object.
- .icon
- optional
true
- Type
String
- Description
The icon.
- .iconColor
- optional
true
- Type
String
- Description
The icon foreground color.
- .text
- optional
true
- Type
String
- Description
Plain text message.
- .html
- optional
true
- Type
String
- Description
HTML text message. Setting this parameter makes the text parameter invalid.
- .dismissDelay
- optional
true
- Type
Number
- Description
Delay in milliseconds before auto-hiding. Defaults to 3500.
- .toast
- optional
true
- Type
Boolean
- Description
If set to `true`, displays the message using a shared box with fade-in/fade-out at the center
of the window.
- .callback
- optional
true
- Type
Function
- Description
Callback method executed after clicking the message text link.
- Returns Value
- Type
Wb.Container
- Description
The message box.
## Instance Methods
- init
- focus
- Description
Sets focus to the window's {#el}.
- Parameters
- preventScroll
- optional
true
- Type
Boolean
- Description
Whether to prevent scrolling when setting focus. Defaults to `true`.
- onTapDown
- Description
Method executed when clicked.
- Parameters
- e
- Type
Event
- Description
The event object.
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- onFocusIn
- Flags
Private
- Description
Method executed when focused.
- Parameters
- e
- Type
Event
- Description
The event object.
- onOk
- Flags
Private
- Description
Method executed when clicking the OK button for a dialog window, or when pressing Enter if {#okOnEnter} is set to
`true`.
- onCancel
- Flags
Private
- Description
Method executed when clicking the Cancel button for a dialog window, or when pressing Esc if {#closeOnEsc} is set
to `true`.
- remove
- ready
- setDefaultSize
- Flags
Private
- Description
The method to set size and position after the window is shown.
- close
- setWinFocus
- Flags
Private
- Description
Sets the window focus.
- onDocFocusIn
- Flags
Private
- Description
Method executed when the modal window gains focus.
- showDo
- Description
Shows the window, sets the title, and executes a callback method after clicking the OK button.
- Parameters
- title
- optional
true
- Type
String|Function
- Description
The window title or callback method.
- callback
- optional
true
- Type
Function
- Description
The callback method executed after clicking OK.
- .win
- Type
Wb.Window
- Description
The current window.
- .values
- Type
Object
- Description
Object composed of all component values in the current window.
- showAdd
- Description
Shows the window and sets the window title defaulting to "Str.add - subTitle". Resets the window scrollbar to the
start position.
- Parameters
- subTitle
- optional
true
- Type
String|Function
- Description
The window subtitle or `callback` method.
- callback
- optional
true
- Type
Function
- Description
The callback method executed after clicking OK.
- .win
- Type
Wb.Window
- Description
The current window.
- .values
- Type
Object
- Description
Object composed of all component values in the current window.
- showEdit
- Description
Shows the window and sets the window title defaulting to "Str.edit - subTitle". Sets focus to the control that last
gained focus.
- Parameters
- data
- Type
Object|Wb.Grid
- Description
The data object to edit.
- subTitle
- optional
true
- Type
String|Function
- Description
The window subtitle or callback method.
- callback
- optional
true
- Type
Function
- Description
The callback method executed after clicking OK.
- .win
- Type
Wb.Window
- Description
The current window.
- .values
- Type
Object
- Description
Object composed of all component values in the current window.
- focusOutEl
- Flags
Private
- Description
Sets focus to the external element that was focused before the window was shown.
- toFront
- Description
Brings the current window to the front.
## Events
- beforeok
- Flags
Key
- Description
Fired before clicking the OK button when the window is a dialog. Returning `false` prevents the {#ok}
event.
- ok
- Flags
Key
- Description
Fired when clicking the OK button when the window is a dialog, or when pressing Enter if {#okOnEnter} is set
to `true`. This event is triggered only when all control values inside the window are valid.
# Wb.AnimateWindow
A window with show/hide animations. Use the {#*shown} and {#*hidden} events to run code after the show and hide animations
complete.
## Class Information
- class name
Wb.AnimateWindow
- Icon
undefined
- cname
animateWindow
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Window -> Wb.AnimateWindow
## Instance Properties
- animateShow
- Type
Enum
- Description
Animation effect used when showing the window:
-'top': Slide in from the top.
-'right': Slide in from the right.
-'bottom': Slide in from the bottom.
-'left': Slide in from the left.
-`true`: Slide in from the right. Same as 'right'.
-`false`: No animation effect.
- animateHide
- Type
Enum
- Description
Animation effect used when hiding the window:
-'top': Slide out from the top.
-'right': Slide out from the right.
-'bottom': Slide out from the bottom.
-'left': Slide out from the left.
-`true`: Slide out from the right. Same as 'right'.
-`false`: No animation effect.
- isShowing
- Flags
Read-only
- Type
Boolean
- Description
Whether the window is currently showing.
- isHiding
- Flags
Read-only
- Type
Boolean
- Description
Whether the window is currently hiding.
- visible
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
## Instance Methods
- setVisible
- Description
Sets whether the window is visible.
- Parameters
- value
- Type
Boolean
- Description
Whether visible.
- callback
- optional
true
- Type
Function
- Description
Callback method after showing or hiding.
- .win
- optional
true
- Type
Function
- Description
The current window.
- close
- Description
Closes the current window.
- Parameters
- noAnimate
- optional
true
- Type
Boolean
- Description
Whether to disable animation effects.
- Returns Value
- Type
Boolean
- Description
`true` if the close operation was successfully executed, `false` if it was canceled.
- show
- Description
Shows the current window.
- Parameters
- noAnimate
- optional
true
- Type
Boolean
- Description
Whether to disable animation effects.
- Returns Value
- Type
Wb.AnimateWindow
- Description
The current window.
- hide
- Description
Hides the current window.
- Parameters
- noAnimate
- optional
true
- Type
Boolean
- Description
Whether to disable animation effects.
- Returns Value
- Type
Wb.AnimateWindow
- Description
The current window.
## Events
- shown
- Description
Fired after the show animation completes.
- hidden
- Description
Fired after the hide animation completes.
# Wb.Dialog
Modal full-screen dialog window. By default, it has a back button with close functionality in the top-left corner,
and the title is centered.
## Class Information
- class name
Wb.Dialog
- Icon
dialog
- cname
dialog
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Window -> Wb.AnimateWindow -> Wb.Dialog
# Wb.Drawer
Drawer component, a modal dialog window that can automatically collapse.
## Class Information
- class name
Wb.Drawer
- Icon
drawer
- cname
drawer
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.Window -> Wb.AnimateWindow -> Wb.Drawer
## Instance Properties
- closeOnClick
- Type
Boolean
- Description
Whether to automatically close the drawer when the mask is clicked.
- dockPosition
- Flags
Key
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Dock position of the drawer:
-'top': Top
-'right': Right
-'bottom': Bottom
-'left': Left
## Instance Methods
- ready
- onDocResize
- Flags
Private
- Description
Method executed when {#globalThis.DocEl} is resized.
- setDefaultSize
# Wb.Tip
Floating tip component.
## Class Information
- class name
Wb.Tip
- Icon
info
- cname
tip
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Tip
## Static Properties
- lastTip
- Type
Wb.Tip
- Description
The last displayed tip object.
## Instance Properties
- clickTip
- Type
Boolean
- Description
Whether to show the tip only when the target element is clicked. `null` means
auto-detect, show/hide on click for mobile devices, and show on mouse enter for desktops.
- showDelay
- Type
Number
- Description
Delay in milliseconds before showing the tip. Defaults to 600.
- hideDelay
- Type
Number
- Description
Delay in milliseconds before hiding the tip. Defaults to 200.
- dismissDelay
- Type
Number
- Description
Delay in milliseconds before auto-hiding. 0 or negative means no auto-hide. Defaults to 5000.
- enterEvent
- Flags
Private Desktop
- Type
String
- Description
Event name used for listening to mouse enter.
- leaveEvent
- Flags
Private Desktop
- Type
String
- Description
Event name used for listening to mouse leave.
- keydownDismiss
- Type
Boolean
- Description
Whether to automatically hide the tip after a key press.
- allowOtherTips
- Type
Boolean
- Description
Whether to allow multiple tips to be shown simultaneously.
- showAtCursor
- Type
Boolean
- Description
Whether to show the tip at the mouse position. `true` shows at the mouse position, `false`
aligns to the target component element based on `defaultAlign`.
- autoHide
- Type
Boolean
- Description
Whether to automatically hide when leaving the target component or the tip. Defaults to `true`.
- isHtml
- Type
Boolean
- Description
Whether the tip is in HTML format. `true` for HTML, `false` for plain text.
- allowComps
- Flags
Private
- Type
Set
- Description
Set of components allowed to display tips.
- moveDismiss
- Type
Boolean
- Description
Whether to automatically hide the tip after moving the mouse a specified distance.
- enterRetain
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to keep the tip visible when the mouse enters the tip component.
- currentComp
- Flags
Read-only
- Type
Wb.Component
- Description
The object associated with the currently displayed tip message.
- moveHideDone
- Flags
Private
- Type
Boolean
- Description
Whether the hide operation after moving is completed.
## Instance Methods
- init
- onShow
- Flags
Private
- Description
Method executed when showing the tip.
- onHide
- Flags
Private
- Description
Method executed when hiding.
- toggleRetain
- Flags
Private
- Description
Toggles whether the tip is retained.
- onTipEnter
- Flags
Private Desktop
- Description
Method executed when entering the tip component.
- onTipLeave
- Flags
Private Desktop
- Description
Method executed when leaving the tip component.
- doRegister
- Flags
Private
- Description
Registers or unregisters the target object for the tip.
- Parameters
- comp
- Type
Wb.Component
- Description
The target object.
- isReg
- Type
Boolean
- Description
`true` to register, `false` to unregister.
- onCompDestroy
- Flags
Private
- Description
Method executed when the target component is destroyed.
- register
- Description
Registers a new tip component.
- Parameters
- comp
- Type
Wb.Component
- Description
The target component.
- unregister
- Description
Unregisters an existing tip component.
- Parameters
- comp
- Type
Wb.Component
- Description
The target component.
- showTip
- Flags
Private
- Description
Immediately shows the current ti at the specified position based on the {#showAtCursor} setting.
- Parameters
- comp
- Type
Wb.Component
- Description
The target component associated with the tip.
- e
- Type
Event
- Description
The event object.
- hideTip
- Description
Immediately hides the current tip.
- getTipTarget
- Flags
Private
- Description
Gets the associated element where the tip is displayed on mouse enter.
- Parameters
- e
- Type
Event
- Description
The event object.
- onTryHideTip
- Flags
Private
- Description
Attempts to hide the tip on click or key press.
- onDocMouseMove
- Flags
Private
- Description
Method executed when the mouse moves on {#globalThis.DocEl}.
## Events
- beforetip
- Description
Fired before showing a tip via the {#showTip} method. Returning `false` prevents the display.
- Parameters
- comp
- Type
Wb.Component
- Description
The target component object associated with the tip.
- e
- Type
Event
- Description
The event object.
# Wb.Tooltip
Tooltip component that automatically reads target component properties as the tip content.
## Class Information
- class name
Wb.Tooltip
- Icon
undefined
- cname
tooltip
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Tip -> Wb.Tooltip
## Static Properties
- shareTip
- Flags
Read-only
- Getter
- Type
Wb.Tooltip
- Description
Gets the shared tip component.
- retainTip
- Flags
Read-only
- Getter
- Type
Wb.Tooltip
- Description
Gets the shared retainable tip component.
## Instance Properties
- tipName
- Type
String
- Description
The name of the target component property used to retrieve tip content.
## Static Methods
- toTip
- Description
Converts a specified value into a tip instance.
- Parameters
- tip
- Type
String|Object|Wb.Tip
- Description
The tip message content, configuration object, or tip instance.
- isHtml
- optional
true
- Type
Boolean
- Description
If the tip is String, whether it is in HTML format.
- Returns Value
- Type
Wb.Tip
- Description
The tip instance.
## Instance Methods
- ready
- onBeforeTip
- Flags
Private
- Description
Method executed before showing the tip.
- Parameters
- comp
- Type
Wb.Component
- Description
The target component object associated with the tip.
- e
- Type
Event
- Description
The event object.
# Wb.ErrorTip
Error tip component. A tip component with specified error styles.
## Class Information
- class name
Wb.ErrorTip
- Icon
undefined
- cname
errorTip
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Tip -> Wb.Tooltip -> Wb.ErrorTip
## Instance Methods
- tipName
- init
# Wb.OverTip
Floating tip component that triggers display when moving over different DOM elements. Unlike {#Wb.Tip} which uses
`mouseenter`/`mouseleave` to listen for move events, this object uses `mouseover`/`mouseout`.
## Class Information
- class name
Wb.OverTip
- Icon
undefined
- cname
overTip
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Tip -> Wb.OverTip
## Instance Methods
- getTipTarget
- Flags
Private
- Description
Gets the object element for displaying the tip message.
- Parameters
- e
- Type
Event
- Description
The event object.
# Wb.OverflowTip
Tooltip component that shows the full text when content overflows.
## Class Information
- class name
Wb.OverflowTip
- Icon
undefined
- cname
overflowTip
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Tip -> Wb.OverTip -> Wb.OverflowTip
## Static Properties
- shareTip
- Flags
Read-only
- Getter
- Type
Wb.OverflowTip
- Description
Gets the shared tip component.
## Instance Methods
- ready
- onBeforeTip
- Flags
Private
- Description
Method executed before showing the tip.
- Parameters
- comp
- Type
Wb.Component
- Description
The target component object associated with the tip.
- e
- Type
Event
- Description
The event object.
# Wb.ControlCt
A control that acts as a container, allowing child controls to be added inside. Unlike a standard {#container|Wb.Container},
this control inherits from {#Control|Wb.Control} but features container capabilities.
## Class Information
- class name
Wb.ControlCt
- Icon
model
- cname
controlCt
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.ControlCt
## Instance Properties
- bodyEl
- Flags
Read-only
- Type
Element
- Description
The body element of the container part.
- containerConfig
- Type
Object
- Description
Configuration options for the container part. See {#Wb.Container} for details.
- container
- Flags
Read-only
- Type
Wb.Container
- Description
The container part of the control.
- items
- Flags
Code
- Getter
- Type
Wb.Component[]
- Description
Gets the child components of the {#container}.
- Setter
- Type
Object|Wb.Component|Array
- Description
Sets the child component(s) of the {#container}.
- app
- Flags
Code
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- labelUp
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the child components labels of the {#container} are displayed on top. `false` displays
labels on the left; `true` displays labels on top.
- labelAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Label alignment for child components of the {#container}.
-'left': Left aligned
-'center': Centered
-'right': Right aligned
- grid
- Getter
- Type
TextString
- Setter
- Type
TextString
- Description
The grid style of the {#container}'s {#bodyEl} element. Setting this property will also set the
display style to `grid`, see {#%css:grid} for details.
- gridTplColumns
- Getter
- Type
String
- Setter
- Type
String
- Description
The `grid-template-columns` style of the {#container}'s {#bodyEl} element.
- gridTplRows
- Getter
- Type
String
- Setter
- Type
String
- Description
The `grid-template-rows` style of the {#container}'s {#bodyEl} element.
- gridAutoFlow
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The `grid-auto-flow` style of the {#container}'s {#bodyEl} element, see {#%css:grid-auto-flow} for
details.
-'row': Arrange elements by filling rows sequentially, adding new rows when necessary.
-'column': Arrange elements by filling columns sequentially, adding new columns when necessary.
-'dense': Use the "dense" packing algorithm.
-'row dense': Combination of row and dense.
-'column dense': Combination of column and dense.
- flexWrap
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether child components automatically wrap when the {#container} uses `flex` layout.
- justify
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Alignment of child components along the main axis when the {#container} uses `flex` layout.
-'start': Start
-'center': Center
-'end': End
-'space-between': Space between
-'space-around': Space around
- padding
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
The {#container} padding. Numeric value is in px.
-true: All padding to specified value.
-false: No padding.
-'top': Only top padding.
-'right': Only right padding.
-'bottom': Only bottom padding.
-'left': Only left padding.
- shrink
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether child components automatically shrink when the {#container} uses `flex` layout.
- bodyCls
- Getter
- Type
String
- Description
The CSS class name of the {#container}'s {#bodyEl} element, consistent with the `className` property.
- Setter
- Type
String
- Description
Multiple space-separated CSS class names to be added to the {#container}'s {#bodyEl} element. Unlike
the element's className property, setting this property will incrementally add class names.
- layout
- Flags
Key
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The predefined layout name of the {#container}, used to specify the arrangement of its child
components. Multiple layout names are separated by spaces.
See example: {#%layout.xwl|ide?openModule=example/basic/layout.xwl}
-'fit': Child components fill the container.
-'row': flex row.
-'column': flex column.
-'center': Child components are horizontally and vertically centered. When child components overflow, they will be\
clipped to keep their center aligned with the container's center at all times.
-'vcenter': Centered layout. The difference from "center" is that the `flex-direction` is column.
-'form': Auto form. Child components are horizontally tiled according to their original width.
-'form1': Single-column form. The difference between this layout and `grid1` is that it can be flex stretched vertically.
-'grid': Auto grid. Child components are horizontally tiled according to the specified width and aligned to the grid.
-'grid1': Single-column grid.
-'grid2': Two-column grid.
-'grid3': Three-column grid.
-'grid4': Four-column grid.
-'grid5': Five-column grid.
-'grid6': Six-column grid.
-'grid7': Seven-column grid.
-'grid8': Eight-column grid.
-'grid9': Nine-column grid.
-'grid10': Ten-column grid.
-'grid11': Eleven-column grid.
-'grid12': Twelve-column grid.
-'grid13': Thirteen-column grid.
-'grid14': Fourteen-column grid.
-'grid15': Fifteen-column grid.
-'grid16': Sixteen-column grid.
-'grid17': Seventeen-column grid.
-'grid18': Eighteen-column grid.
-'grid19': Nineteen-column grid.
-'grid20': Twenty-column grid.
-'form-compact': Compact form. Child components are horizontally tiled according to their original width.
-'grid-compact': Compact grid. Child components are horizontally tiled according to the specified width and aligned to\
the grid.
-'middle': Child components are horizontally and vertically centered. When child components overflow, they will not be\
clipped, and their center will not be aligned with the container's center at this time.
-'hmiddle': Child components are horizontally centered. When child components overflow, they will not be clipped, and\
their center will not be horizontally aligned with the container's center at this time.
-'vmiddle': Child components are vertically centered. When child components overflow, they will not be clipped, and\
their center will not be vertically aligned with the container's center at this time.
- autoGrid
- Getter
- Type
Enum|Boolean
- Setter
- Type
Enum|Boolean
- Description
Whether to dynamically adjust to a single-column grid layout based on window size when
{#layout} uses `grid` layout in the {#container}.
-true: Use a single-column grid when the window is smaller than the specified width, otherwise revert to the setting\
`grid` layout.
-false: Revert to the setting `grid` layout.
-'up': Has the same effect as the `true` value and forces the label to be displayed above the control.
- gap
- Getter
- Type
Boolean|Number|String
- Setter
- Type
Boolean|Number|String
- Description
Whether to add gaps between child components. See {#Wb.Container.gap} for details.
- wideLabel
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to set a widened label width for child components in the {#container}.
-`false` for normal width
-`true` for widened width.
- align
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Alignment of child components along the cross axis when the {#container} uses `flex` layout.
-'start': Start
-'center': Center
-'end': End
-'baseline': Text baseline
-'stretch': Stretch
- alignContent
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
How space is distributed between and around rows of child components when the {#container} uses `flex`
layout and wraps into multiple lines automatically.
-'start': Start
-'center': Center
-'end': End
-'between': Space between
-'around': Space around
-'stretch': Stretch
- tableStyle
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
Whether to use a table style to display all child components in the {#container}. Usually used in
grid {#layout}.
-`true`: Table style
-`false`: Normal style
-'simple': Simple table style
- defaults
- Getter
- Type
Object
- Setter
- Type
Object
- Description
Default properties for child components in the {#container}, merged with parent's `defaults`. To
clear this property value, please use the {#Wb.Container.clearDefaults} method.
## Instance Methods
- init
- setItems
- Description
Removes all child components of the {#container} and adds new child components.
- Parameters
- items
- Type
Object|Wb.Component|Array
- Description
The child component(s) configuration objects, instances, or an array of them.
- add
- Description
Add components to the end of the {#container}. See {#Wb.Container.add} for details.
# Wb.Slider
Slider control, used to set and display values via sliding.
See example: {#%check-slider.xwl|ide?openModule=example/comps/check-slider.xwl}
## Class Information
- class name
Wb.Slider
- Icon
slidebar
- cname
slider
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.Slider
## Instance Properties
- step
- Type
Number
- Description
The step size for each drag.
- maxValue
- Type
Number
- Description
The maximum value.
- minValue
- Type
Number
- Description
The minimum value.
- slideTip
- Type
Boolean
- Description
Whether to display a value tip on the slider handle while sliding. Default `null` means
display.
- boolValue
- Flags
Private
- Type
Boolean
- Description
Whether to return boolean values when the value is 0 or 1.
- track
- Type
Boolean
- Description
Whether to display the slider track.
- trackEl1
- Flags
Read-only
- Type
Element
- Description
The element representing the completed part of the slider track.
- trackEl2
- Flags
Read-only
- Type
Element
- Description
The element representing the unfinished part of the slider track.
- sliderEl
- Flags
Read-only
- Type
Element
- Description
The slider track element.
- handles
- Flags
Read-only
- Type
Element[]
- Description
The list of slider handle elements.
- percentUnit
- Flags
Private
- Type
Boolean
- Description
The percentage value of the minimum sliding unit.
- vertical
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the slider moves vertically.
- handleCount
- Flags
Private
- Type
Number
- Description
The number of slider handles.
- value
- Flags
Key
- Getter
- Type
Number|Number[]|Boolean
- Setter
- Type
Number|Number[]|Boolean
- Description
The current slider value(s). An array for multi-handle sliders; `null` if no
handles are present.
- isChanged
- Flags
Private
- Type
Boolean
- Description
Whether a {#*change} event has occurred after the mouse is pressed.
- dispatchHandle
- Flags
Private
- Type
Element
- Description
The element passed via the {#dispatchEvent} method.
- tipRender
- Type
Function
- Description
Custom method for rendering slider tip content. The return value serves as the tip text
during sliding.
- Parameters
- value
- Type
Number
- Description
The current value.
- diffTrackColor
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the track colors before and after the last slider handle are displayed differently.
- prefixEl
- Flags
Read-only
- Type
Element
- Description
The label element before the track, effective only when {#prefix} is set.
- prefix
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The label before the track.
- suffixWidth
- Type
String/Number
- Description
The width of the label after the track; a numeric value represents pixels.
- suffixEl
- Flags
Read-only
- Type
Element
- Description
The label element after the track, effective only when {#suffix} is set.
- suffix
- Flags
Key
- Getter
- Type
Boolean|String
- Setter
- Type
Boolean|String
- Description
The label after the track. Setting to `true` displays the current value and defaults
{#slideTip} to `false`.
## Instance Methods
- init
- fireChange
- Flags
Private
- Description
Fires the {#*change} event.
- Parameters
- newValue
- Type
Number
- Description
The new value.
- oldValue
- Type
Number
- Description
The old value.
- onTapDown
- Flags
Private
- Description
Method executed when the mouse is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- onTapUp
- Flags
Private
- Description
Method executed when the mouse is released.
- Parameters
- e
- Type
Event
- Description
The event object.
- moveHandle
- Flags
Private
- Description
Moves the slider handle to the specified position.
- Parameters
- handle
- Type
Element
- Description
The slider handle element.
- pos
- Type
Number
- Description
The position.
- onKeyDown
- Description
Method executed when a key is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- setTipPos
- Flags
Private
- Description
Sets the position of the slider tip.
- Parameters
- handle
- Type
Element
- Description
The slider handle element.
- setHandlePos
- Flags
Private
- Description
Sets the percentage position of the slider handle.
- Parameters
- handle
- Type
Element
- Description
The slider handle element.
- percent
- Type
Number
- Description
The percentage position.
- rebuildSlider
- Description
Rebuilds the slider.
## Events
- change
- Description
Fired when the value changes.
- Parameters
- value
- Type
Number
- Description
The current slider value. If there are multiple sliders, access all slider values via the {#value}
property.
- oldValue
- Type
Number
- Description
The previous slider value.
- startdrag
- Description
Fired when dragging starts.
- Parameters
- value
- Type
Number
- Description
The current value.
- enddrag
- Description
Fired after dragging ends.
- Parameters
- value
- Type
Number
- Description
The current value.
# Wb.AreaSlider
Area slider control that allows free sliding in horizontal and vertical directions, retrieving both horizontal and vertical
values.
## Class Information
- class name
Wb.AreaSlider
- Icon
check3
- cname
areaSlider
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.AreaSlider
## Instance Properties
- step
- Type
Number
- Description
The step size for each drag.
- maxValue
- Type
Mix/Number[]
- Description
The maximum values.
- minValue
- Type
Mix/Number[]
- Description
The minimum values.
- sliderEl
- Flags
Read-only
- Type
Element
- Description
The slider track element.
- handle
- Flags
Read-only
- Type
Element
- Description
The slider handle element.
- percentX
- Flags
Private
- Type
Boolean
- Description
The percentage value of the minimum horizontal sliding unit.
- percentY
- Flags
Private
- Type
Boolean
- Description
The percentage value of the minimum vertical sliding unit.
- value
- Flags
Key
- Getter
- Type
Mix|Number[]
- Setter
- Type
Mix|Number[]
- Description
The control values as an array [x, y].
- areaBorder
- Getter
- Type
Enum|Number|String
- Setter
- Type
Enum|Number|String
- Description
The area border. Numeric value is in px.
-`true`: Sets all borders to "thin".
-`false`: No border.
-'top': Only the top border is "thin".
-'right': Only the right border is "thin".
-'bottom': Only the bottom border is "thin".
-'left': Only the left border is "thin".
- dispatchHandle
- Flags
Private
- Type
Element
- Description
The element passed via the {#dispatchEvent} method.
## Instance Methods
- init
- fireChange
- Flags
Private
- Description
Fires the {#*change} event.
- Parameters
- newValue
- Type
Number[]
- Description
The new values.
- oldValue
- Type
Number[]
- Description
The old values.
- onTapDown
- Flags
Private
- Description
Method executed when the mouse is pressed.
- Parameters
- e
- Type
Event
- Description
The event object.
- onTapUp
- Flags
Private
- Description
Method executed when the mouse is released.
- Parameters
- e
- Type
Event
- Description
The event object.
- moveHandle
- Flags
Private
- Description
Moves the slider handle to the specified position.
- Parameters
- x
- Type
Number
- Description
The x position.
- y
- Type
Number
- Description
The y position.
- setHandlePos
- Flags
Private
- Description
Sets the percentage position of the slider handle.
- Parameters
- percentX
- Type
Number
- Description
The x percentage position.
- percentY
- Type
Number
- Description
The y percentage position.
## Events
- change
- Description
Fired when the value changes.
- Parameters
- value
- Type
Number[]
- Description
The new values.
- oldValue
- Type
Number[]
- Description
The old values.
- startdrag
- Description
Fired when dragging starts.
- Parameters
- value
- Type
Number[]
- Description
The current values as an array [x, y].
- enddrag
- Description
Fired after dragging ends.
- Parameters
- value
- Type
Number[]
- Description
The current values as an array [x, y].
# Wb.Toggle
Toggle control, used to switch state between "on" and "off".
## Class Information
- class name
Wb.Toggle
- Icon
switcher-on
- cname
toggle
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.Slider -> Wb.Toggle
## Instance Properties
- returnType
- Type
Enum
- Description
The data type of the value:
-'int': Integer value, either 0 or 1.
-'string': String value, either "false" or "true".
-'bool': Boolean value. Default value.
- clickToggle
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to toggle the switch on click. `true` allows toggling only by clicking, `false` allows
toggling only by dragging. Default is `null`, meaning both methods are allowed.
- toggleAlign
- Getter
- Type
Enum
- Setter
- Type
Enum
- Description
The alignment of the toggle button:
-'start': Start (default value)
-'center': Center
-'end': End
- value
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
The value of the toggle. `true` for on, `false` for off.
## Instance Methods
- onClick
- Flags
Private
- Description
Method executed when clicked.
- setHandlePos
# Wb.Chart
Chart component. This class is an adapter for the ECharts; see the ECharts documentation for details.
See example: {#%chart.xwl|ide?openModule=example/comps/chart.xwl}
## Class Information
- class name
Wb.Chart
- Icon
chart-bar
- cname
chart
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Chart
## Instance Properties
- autoLoad
- Flags
Key
- Type
Boolean
- Description
Whether to automatically load remote data after the component is ready. Only effective when
the component has no data. Defaults to `true`.
- instance
- Type
Object
- Description
The ECharts instance object.
- url
- Flags
Key
- Type
String
- Description
The default URL address for loading remote data. To set local data, access the {#option}
property.
- lastParams
- Flags
Private
- Type
Object
- Description
The parameter object used in the last remote request.
- option
- Flags
Key
- Getter
- Type
Object
- Setter
- Type
Object
- Description
Chart options and data. See {#setOption} for details.
## Instance Methods
- init
- ready
- load
- Description
Loads remote chart data into the current chart. See {#Wb.ajax} for details.
- Parameters
- configs
- Type
Object|String
- Description
The configuration object for the request or the request URL.
- Returns Value
- Type
XMLHttpRequest
- Description
The AJAX request object.
- reload
- Description
Reload data into the chart using the parameters from the last request. See {#load} for details.
- Parameters
- configs
- optional
true
- Type
Object
- Description
Configuration object whose options will override those from the last request. Refer to the
configs parameter of the {#load} method for details.
- setOption
- Description
Sets chart options and data. See `setOption` method of ECharts documentation for details.
- Parameters
- options
- Type
...Object
- Description
Options and data objects.
- getOption
- Description
Gets chart options and data. See `getOption` method of ECharts documentation for details.
- Returns Value
- Type
Object
- Description
Options and data.
- clear
- Description
Clears the chart. See `clear` method of ECharts documentation for details.
- destroy
## Events
- beforeload
- Description
Fired before requesting remote data. Returning `false` will cancel the request. Parameters can be
passed through this event.
- Parameters
- configs
- Type
Object
- Description
The loading options object.
- params
- Type
Object
- Description
The parameter object submitted with the request.
- callback
- Description
Fired after remote data loading is completed, regardless of whether the loading succeeds or fails.
- Parameters
- data
- Type
Object
- Description
The options and data.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
- successful
- Type
Boolean
- Description
Whether the loading is successful, `true` success, `false` failure.
- success
- Description
Fired after remote data is loaded successfully.
- Parameters
- data
- Type
Object
- Description
The options and data.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
- failure
- Description
Fired after remote data loading fails.
- Parameters
- data
- Type
Object
- Description
The options and data.
- xhr
- Type
XMLHttpRequest
- Description
The AJAX request object.
- e
- Type
Event
- Description
The event object.
# Wb.Graph
Graph component, used to draw various types of graphs including flowcharts. This class is an adapter for the `X6`
Graph; see the `X6` documentation for details.
## Class Information
- class name
Wb.Graph
- Icon
flow1
- cname
graph
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Graph
## Instance Properties
- nodeMovable
- Type
Boolean
- Description
Whether nodes are movable by default. Movable status can be disabled by setting the node's data
`nodeMovable` to `false`, or enabled with `true`.
- graphConfigs
- Type
Object
- Description
The configuration object for the graph. See X6 Graph's constructor configs.
- instance
- Flags
Code
- Type
Object
- Description
The Graph instance.
- showGrid
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display the grid line.
- panning
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether dragging the canvas is allowed. Setting to `true` will automatically set {#scroller}
to `false`.
- mousewheel
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether scrolling the mouse wheel to zoom the canvas is allowed.
- data
- Getter
- Type
Object
- Setter
- Type
Object
- Description
The flowchart data.
- snapLine
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to display alignment lines when a moved node aligns with other nodes.
- scroller
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to enable the canvas scrolling feature. Setting to `true` will automatically
set {#panning} to `false`.
## Static Methods
- registerNode
- Description
Registers a node. See X6 Graph's `registerNode` method for details.
## Instance Methods
- init
- addNode
- Description
Adds a node. See Graph's `addNode` method for details.
- addEdge
- Description
Adds an edge. See Graph's `addEdge` method for details.
- translate
- Description
Pans the canvas in the x and y directions.
Example:
graph.translate(10, 20);
- Parameters
- x
- Type
Number
- Description
The x coordinate.
- y
- Type
Number
- Description
The y coordinate.
- zoom
- Description
Increases or decreases the canvas zoom level.
- Parameters
- level
- Type
Number
- Description
The level to increase or decrease.
- zoomTo
- Description
Sets the canvas zoom level to a specified value.
- Parameters
- level
- Type
Number
- Description
The zoom level.
- zoomToFit
- Description
Scales the elements in the canvas up or down so that the canvas fits all elements perfectly.
- Parameters
- maxScale
- optional
true
- Type
Number
- Description
The maximum scale. Defaults to 1.
- centerContent
- Description
Centers the elements in the canvas.
- destroy
- clearCells
- Description
Clears the canvas.
# Wb.HtmlEditor
HTML Rich Text Editor. This class is an adapter for `Quill`; see the Quill documentation for details.
See example: {#%html-editor.xwl|ide?openModule=example/comps/html-editor.xwl}
## Class Information
- class name
Wb.HtmlEditor
- Icon
file-html
- cname
htmlEditor
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.HtmlEditor
## Instance Properties
- editor
- Flags
Code
- Type
Object
- Description
The editor instance.
- editorConfigs
- Type
Object
- Description
The editor configuration object.
- toolbar
- Getter
- Type
Wb.Toolbar
- Description
The toolbar object or `null` if no toolbar is created.
- Setter
- Type
Boolean
- Description
Whether to create the default toolbar.
- selection
- Getter
- Type
Object
- Setter
- Type
Object
- Description
The selection range.
- readonly
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the control is read-only.
- value
- Flags
Key
- Getter
- Type
HtmlString
- Setter
- Type
HtmlString
- Description
The HTML value of the control. For plain text value, see the {#textValue} property.
- textValue
- Flags
Key
- Getter
- Type
TextString
- Setter
- Type
TextString
- Description
The plain text value of the control. For HTML value, see the {#value} property.
## Instance Methods
- init
- initFontSize
- Flags
Private
- Description
Initializes fonts and sizes.
- focus
- editorChange
- Flags
Private
- Description
Method executed when the editor changes.
- verify
- setFormat
- Flags
Private
- Description
Set selection format.
- Parameters
- format
- Type
Object
- Description
Format type.
- value
- Type
Object
- Description
Format value.
- destroy
## Events
- change
- Description
Fired when the value changes. Access the HTML value via the {#value} property, and the text value via the
{#textValue} property.
- Parameters
- delta
- Type
Object
- Description
The new delta object.
- oldDelta
- Type
Object
- Description
The previous delta object.
- source
- Type
String
- Description
The source.
- selectionchange
- Description
Fired when the selection changes.
- Parameters
- range
- Type
Object
- Description
The new range object.
- oldRange
- Type
Object
- Description
The previous range object.
- source
- Type
String
- Description
The source.
- editorchange
- Description
Fired when either the value or the selection changes. This is a merge of the {#change} and
{#selectionchange} events.
- Parameters
- name
- Type
String
- Description
The event name.
- args
- Type
...Object
- Description
The argument list for the corresponding event.
# Wb.Check
Checkbox control, used for multiple selections.
See example: {#%check-slider.xwl|ide?openModule=example/comps/check-slider.xwl}
## Class Information
- class name
Wb.Check
- Icon
check6
- cname
check
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.Check
## Instance Properties
- returnType
- Type
Enum
- Description
The data type of the value:
-'int': Integer value, either 0 or 1.
-'string': String value, either "false" or "true".
-'bool': Boolean value. Default value.
- boxEl
- Flags
Read-only
- Type
Element
- Description
The check box element.
- value
- Flags
Key
- Getter
- Type
Boolean|Mix
- Setter
- Type
Boolean|Mix
- Description
The control value; `true` indicates checked, `false` indicates unchecked. Non-boolean value is
first converted via {#Wb.parseBool} method.
- label
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The label of the checkbox. Unlike the {#text} property, this label is a suffix to the
box.
## Instance Methods
- init
- onClick
- Flags
Private
- Description
Method executed when the component is clicked.
- Parameters
- e
- Type
Event
- Description
The event object.
- onKeyDown
- Flags
Private
- Description
Method executed when a key is pressed on the component.
- Parameters
- e
- Type
Event
- Description
The event object.
## Events
- change
- Description
Fired when the value changes.
- Parameters
- value
- Type
Boolean
- Description
The current value.
- oldValue
- Type
Boolean
- Description
The old value.
# Wb.Radio
Radio button control, used for single selection.
See example: {#%check-slider.xwl|ide?openModule=example/comps/check-slider.xwl}
## Class Information
- class name
Wb.Radio
- Icon
check2
- cname
radio
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.Check -> Wb.Radio
## Instance Properties
- group
- Flags
Key
- Type
String
- Description
The group name of the radio. Only one radio with the same group name within the same container
can be selected at a time.
- value
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
The control value; `true` indicates checked, `false` indicates unchecked.
## Instance Methods
- onClick
- onKeyDown
# Wb.CheckGroup
Checkbox group component, used to generate multiple check boxes.
## Class Information
- class name
Wb.CheckGroup
- Icon
checks
- cname
checkGroup
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.ControlCt -> Wb.CheckGroup
## Instance Properties
- returnArray
- Type
Boolean
- Description
Whether to return an array composed of the {#cid} properties of checked child boxes. `false`
returns an object, `true` returns an array.
- returnAll
- Type
Boolean
- Description
Whether to return all child boxes in {#value}; `false` returns selected only, `true` returns
all.
- fireChangeEvent
- Flags
Private
- Type
Boolean
- Description
Whether to trigger the {#*change} event.
- value
- Flags
Key
- Getter
- Type
Express|Object|Array
- Setter
- Type
Express|Object|Array
- Description
Object or array of {#cid} (or index if `cid` is missing) for all checked child
boxes. Returns empty object/array. Setting a falsy value unchecks all. Set {#returnArray} to `true` for array format.
Example:
[true, false, true] // Valid: values consist of check states
['check1', 'check3'] // Valid: values consist of cids
{check1: true, check3: true} // Valid: object composed of cid check states
[true, 'check3'] // Invalid
## Events
- change
- Description
Fired when the value of a check box within the container changes.
# Wb.RadioGroup
Radio button group component, used to generate multiple radio boxes.
## Class Information
- class name
Wb.RadioGroup
- Icon
radios
- cname
radioGroup
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.ControlCt -> Wb.RadioGroup
## Instance Properties
- returnName
- Type
Boolean
- Description
Whether to return the {#cid} of the checked child box. `false` returns the index, `true` returns
the {#cid} property.
- fireChangeEvent
- Flags
Private
- Type
Boolean
- Description
Whether to trigger the `change` event.
- value
- Flags
Key
- Getter
- Type
Number|String
- Setter
- Type
Number|String
- Description
The index or {#cid} of the checked child box, depending on {#returnName}. If no `cid`
exists, the index is used. Returns -1 if nothing is checked.
Example:
3 // Valid: value is the index of the checked item
-1/null // Valid: uncheck all
'radio2' // Valid: value is the cid of the checked item
## Events
- change
- Description
Fired when the value of a check box within the container changes.
# Wb.ColorComp
Color selection component, used to visually pick colors.
## Class Information
- class name
Wb.ColorComp
- Icon
undefined
- cname
colorComp
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.ColorComp
## Static Properties
- colorComp
- Flags
Read-only
- Getter
- Type
Wb.ColorComp
- Description
Gets the shared color selection component.
## Instance Properties
- suspendUpdate
- Flags
Private
- Type
Number
- Description
Counter for suspending color updates.
- originColor
- Type
String
- Description
The initial color when no value is set.
- colorText
- Type
Boolean
- Description
Whether to display a text box for the color value.
- value
- Flags
Key
- Getter
- Type
String
- Setter
- Type
String
- Description
The RGBA color value of the panel. Accepts valid 3, 4, 6, or 8-digit values, e.g., "#1a2", "#1a2b",
"#11aa22", "#11aa22bb".
## Instance Methods
- init
- updateColor
- Flags
Private
- Description
Updates the color.
- hsvToRgb
- Flags
Private
- Description
Converts HSV color to RGB color.
- Parameters
- h
- Type
Number
- Description
Hue. Range: 0 to 359.
- s
- Type
Number
- Description
Saturation. Range: 0 to 100.
- v
- Type
Number
- Description
Value (Brightness). Range: 0 to 100.
- Returns Value
- Type
Array
- Description
An array of RGB values. Range: 0 to 255.
- rgbToHsv
- Flags
Private
- Description
Converts RGB color to HSV color.
- Parameters
- r
- Type
Number
- Description
Red. Range: 0 to 255.
- g
- Type
Number
- Description
Green. Range: 0 to 255.
- b
- Type
Number
- Description
Blue. Range: 0 to 255.
- Returns Value
- Type
Array
- Description
An array of HSV values. `h` range: 0 to 359; `s` and `v` range: 0 to 100.
- fetchColor
- Flags
Private
- Description
Gets the current color value.
## Events
- change
- Description
Fired when the color value changes.
- Parameters
- value
- Type
String
- Description
The new value. A 6-digit RGB value (e.g., "#11aa33") or an 8-digit RGBA value (e.g., "#11aa33bb").
- oldValue
- Type
String
- Description
The previous value.
# Wb.Socket
A WebSocket component for real-time data push from backend to frontend.
See example: {#%web-socket.xwl|ide?openModule=example/comps/web-socket.xwl}
## Class Information
- class name
Wb.Socket
- Icon
plug
- cname
socket
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Socket
## Static Properties
- sockets
- Type
Set
- Description
A set of socket instances.
- protocols
- Type
String/String[]
- Description
A protocol string or an array of protocol strings.
## Instance Properties
- cid
- Flags
Key
- Type
String
- Description
The component identifier.
- name
- Flags
Key
- Type
PathString
- Description
The WebSocket name, used to identify the WebSocket. If it ends with ".xwl", it represents
a module file; if it starts with "$", it represents a module shortcut. When `name` identifies a module file, a connection
is only allowed after login and if the user has access permissions to that module.
- xwl
- Flags
Key
- Type
PathString
- Description
The module file executed when the WebSocket server receives a message. In this mode, the
server-side script of the module can access the following global variables:
- `data`: The data sent by the client.
- `event`: The event type: "message" (message received), "open" (connection established), "close" (connection closed),\
"error" (error occurred).
- `session`: The WebSocket session.
- `httpSession`: The associated HTTP session. `null` if no HTTP session exists. If the `close` event is triggered due\
to an expired HTTP session, this value will be invalid.
- `closeReason`: The reason for closure; valid only when `event` is "close".
- `error`: The exception object; valid only when `event` is "error".
- `inWSSession`: A flag indicating whether the module is running in a WebSocket session. If `true`, the module is running\
in a WebSocket session, and messages can be sent to the client using the {#Wb.send|Wb-Server.send} method.
- autoOpen
- Type
Boolean
- Description
Whether to automatically open the WebSocket after the component is created. Defaults to `true`.
- opened
- Type
Boolean
- Description
Whether the WebSocket is currently open.
- loginRequired
- Type
Boolean
- Description
Whether login is required to establish a connection. Note that this property is used only for
login validation; if the system allows connections, the client can still establish a connection by setting this
parameter to `false`. To prohibit connections without login, set the {#%configuration|config} item
"sys.session.anonymousWebsocket" to `false`.
- params
- Type
Express/Object
- Description
The parameter object used when sending data via WebSocket.
- autoReconnect
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether to automatically reconnect after the WebSocket connection is disconnected for reasons other
than HTTP session expiration.
- heartbeatInterval
- Getter
- Type
Number
- Setter
- Type
Number
- Description
The interval for sending heartbeat messages periodically, in seconds, used to maintain the WebSocket
session. When the interval elapses, the WebSocket automatically sends "ping"/"pong" messages, which are automatically
filtered by the system. A value less than or equal to 0 means no messages are sent. Defaults to -1.
- state
- Flags
Read-only
- Getter
- Type
Number
- Description
The state of the component. See {#%readyState|api:WebSocket/readyState} for details.
## Static Methods
- openAll
- Description
Opens all WebSocket instances.
## Instance Methods
- ready
- open
- Description
Opens the current WebSocket component.
- close
- Description
Closes the current WebSocket component.
- Parameters
- code
- optional
true
- Type
Number
- Description
Status code indicating the closure reason.
- reason
- optional
true
- Type
String
- Description
Human-readable description of the closure.
- destroy
- Description
Destroys the current WebSocket component. Unlike the {#close} method, this method removes the instance after
closing the WebSocket.
- onClose
- Flags
Private
- Description
Method executed when the component is closed.
- Parameters
- e
- Type
Event
- Description
The event object.
- onOpen
- Flags
Private
- Description
Method executed when the component is opened.
- Parameters
- e
- Type
Event
- Description
The event object.
- onError
- Flags
Private
- Description
Method executed when an error occurs in the component.
- Parameters
- e
- Type
Event
- Description
The event object.
- onMessage
- Flags
Private
- Description
Method executed when the component receives a message.
- Parameters
- e
- Type
Event
- Description
The event object.
- send
- Description
Sends data to the server. This method queues data for transmission to the server via the WebSocket connection.
Example:
WebSocket.send('Hello server');
- Parameters
- data
- Type
Object
- Description
The data to send. Can be of types such as String, ArrayBuffer, Blob, or ArrayBufferView.
## Events
- close
- Flags
Key
- Description
Fired when the component is closed.
- Parameters
- e
- Type
Event
- Description
The event object.
- failure
- Flags
Key
- Description
Fired when the component is closed and reconnection fails.
- Parameters
- e
- Type
Event
- Description
The event object.
- open
- Flags
Key
- Description
Fired when the component is opened.
- Parameters
- e
- Type
Event
- Description
The event object.
- error
- Description
Fired when an error occurs in the component.
- Parameters
- e
- Type
Event
- Description
The event object.
- message
- Flags
Key
- Description
Fired when the component receives a message.
- Parameters
- e
- Type
Event
- Description
The event object.
# Wb.App
Module application, used to define a module application.
## Class Information
- class name
Wb.App
- Icon
undefined
- cname
app
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.App
## Instance Properties
- configs
- Type
Object
- Description
Configuration parameters.
- mainCt
- Type
Wb.Component
- Description
The main component returned within the `main` method. Typically added to the context
container.
## Instance Methods
- main
- Description
The main method executed after the module is initialized, returning the application's main component.
- Parameters
- ct
- Type
Wb.Container
- Description
The container component. The module's main component will be added to this container.
- Returns Value
- Type
Wb.Component
- Description
The main component. If a component is returned, the system will automatically add it to
the container.
- ready
- Flags
Private
- Description
Method executed when the constructor finishes. Can be overridden to perform operations related to post-initialization.
- Parameters
- configs
- Type
Object
- Description
The configuration parameters.
- constructor
- Description
Constructor method.
- Parameters
- container
- optional
true
- Type
Wb.Container|Boolean
- Description
The container to which the application's main component will be added. If
`false`, it is not added; if omitted, the main component will be rendered to {#globalThis.BodyEl}.
- configs
- optional
true
- Type
Object
- Description
Configuration parameters. Will be directly set to the {#configs} property.
## Events
- ready
- Description
Fired after the object initialization is complete.
- Parameters
- configs
- Type
Object
- Description
The configuration parameters.
# Wb.Array
Array component; child components will be added to this array. As a property of a parent component, its {#cid} serves
as the property name. This class is used only for module design within the IDE.
## Class Information
- class name
Wb.Array
- Icon
array
- cname
array
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Array
## Instance Properties
- cid
- Flags
Key
- Type
String
- Description
The array identifier. Typically serves as the property name of the parent component.
- description
- Type
String
- Description
Description text.
# Wb.Script
Script component, used for custom scripts. This class is used only for module design within the IDE.
## Class Information
- class name
Wb.Script
- Icon
file-json
- cname
script
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Script
## Instance Properties
- cid
- Flags
Key
- Type
String
- Description
The script identifier.
- isProperty
- Type
Boolean
- Description
Indicates whether this component serves as a property of the parent component, with
its {#cid} acting as the property name.
- description
- Type
String
- Description
Description text.
- script
- Flags
Key
- Type
Object
- Description
Arbitrary JavaScript code output to the context, typically an object script.
# IconString
Icon string, equivalent to String. See {#String} for details.
## Class Information
- class name
IconString
- Icon
undefined
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
IconString
# ImgString
Image icon string, equivalent to String. See {#String} for details.
## Class Information
- class name
ImgString
- Icon
undefined
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
ImgString
# HtmlString
HTML script class, equivalent to String. See {#String} for details.
## Class Information
- class name
HtmlString
- Icon
undefined
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
HtmlString
# Wb.Module
Used to define a module. A module is a closure with an independent namespace. Server-side scripting can be performed within
the {#serverScript} property of the module; these scripts are executed when the module is invoked. {#initialize} is the
client-side initialization event; besides handling client-side initialization, it can also define public methods and
properties within the client-side module.
## Class Information
- class name
Wb.Module
- Icon
module
- cname
module
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Module
## Instance Properties
- description
- Type
TextString
- Description
A detailed description of the module.
- remark
- Type
String
- Description
A remark about the module.
- moduleType
- Type
Enum
- Description
The client-side target type for the module:
-'desktop': Targeted at desktops.
-'touch': Targeted at mobile touch devices.
-'any': Adapts to any type. Default value.
- serverScript
- Flags
Key
- Type
Function
- Description
The script executed on the server side. The system automatically runs this script on
the server when requesting or running the module.
- title
- Type
String
- Description
The module title.
- theme
- Type
Boolean/String
- Description
Specifies the UI theme name to use. `true` represents "classic", `false` represents
"dark".
- cid
- Flags
Key
- Type
String
- Description
The module identifier.
- cls
- Type
String
- Description
Space-separated CSS class names added to the {#globalThis.BodyEl} in the window.
- style
- Type
String
- Description
Semicolon-separated CSS styles added to the {#globalThis.BodyEl} in the window.
- bodyTag
- Type
String
- Description
Arbitrary script added to the {#globalThis.BodyEl} in the window.
- links
- Flags
Key
- Type
String[]
- Description
A list of JS/CSS resource links to be loaded before the module runs.
- loginRequired
- Flags
Key
- Type
Boolean
- Description
Whether login and permission check are required before accessing the module.
- language
- Type
String
- Description
The language to use. Defaults to the system setting.
- obfuscate
- Type
Boolean
- Description
Whether to obfuscate and encrypt the code when minifying files.
- head
- Type
HtmlString
- Description
Header information output to the page's `` node.
## Events
- beforeunload
- Description
Fired before the module closes. Returning `false` prevents the closure.
- initialize
- Flags
Key
- Description
Custom client-side script executed before the module loads. Public methods and properties within the
module can be defined here.
- finalize
- Description
Custom client-side script executed after the module loads.
# Wb.Xwl
Xwl module component, representing a static reference to an Xwl module. After execution, the module's client-side scripts
are embedded into this component.
## Class Information
- class name
Wb.Xwl
- Icon
module
- cname
xwl
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Xwl
## Instance Properties
- cid
- Flags
Key
- Type
String
- Description
The Xwl component identifier.
- path
- Flags
Key
- Type
PathString
- Description
The relative path to the module folder.
- remark
- Type
String
- Description
A remark about the module.
- params
- Type
Object
- Description
The parameter object passed to the module's `parentParams` variable.
- container
- Type
Object
- Description
The configuration object for the {#Wb.Container} wrapping the Xwl module.
- ready
- Type
Function
- Description
Fired after the component is instantiated. `this` points to the container wrapping the module.
- Parameters
- scope
- Type
Object
- Description
The app object pointing to the module.
- container
- Type
Wb.Container
- Description
The container wrapping the module.
# Wb.DualBox
Dual Box selector for selecting items.
See example: {#%dual-box.xwl|ide?openModule=example/comps/dual-box.xwl}
## Class Information
- class name
Wb.DualBox
- Icon
dual-box
- cname
dualBox
- file
wb/js/wb-client.js
- run at
client side only
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.DualBox
## Instance Properties
- autoLoad
- Type
Boolean
- Description
Whether to automatically load grid data. Defaults to `false`.
- searchName
- Type
String
- Description
The parameter name passed when searching via {#searchBar}. Defaults to "search".
- textField
- Type
String
- Description
The name of the text field.
- subtextField
- Type
String
- Description
The name of the sub-text field.
- sourceUrl
- Flags
Key
- Type
String
- Description
The URL address of the source grid.
- destUrl
- Flags
Key
- Type
String
- Description
The URL address of the destination grid.
- columns
- Flags
Key
- Type
Wb.Column[]
- Description
The array of grid columns.
- sourceGridConfigs
- Type
Wb.Grid
- Description
The configuration object for the source grid.
- destGridConfigs
- Type
Wb.Grid
- Description
The configuration object for the destination grid.
- sourceGrid
- Flags
Read-only
- Type
Wb.Grid
- Description
The source grid instance object.
- destGrid
- Flags
Read-only
- Type
Wb.Grid
- Description
The destination grid instance object.
- moveType
- Flags
Private
- Type
String
- Description
The type of move operation.
-'source': Move selected records from the source grid to the destination grid.
-'sourceAll': Move all records from the source grid to the destination grid.
-'dest': Move selected records from the destination grid to the source grid.
-'destAll': Move all records from the destination grid to the source grid.
- sourceData
- Flags
Key
- Getter
- Type
Array
- Setter
- Type
Array
- Description
The {#data} of the source grid.
- destData
- Flags
Key
- Getter
- Type
Array
- Setter
- Type
Array
- Description
The {#data} of the destination grid.
- value
- Getter
- Type
Array
- Setter
- Type
Array
- Description
The {#data} of the destination grid. Same as the {#destData} property.
- searchBar
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the search box is visible. When searching, a parameter with the name specified by
{#searchName} will be passed to the grid.
- gridHeader
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the grid headers are visible.
## Instance Methods
- init
- doMove
- Flags
Private
- Description
Executes the move operation.
- Parameters
- type
- Type
String
- Description
The type of move. See {#moveType} for details.
- acceptMove
- Description
Accepts the move operation.
## Events
- beforemove
- Flags
Key
- Description
Fired before moving. Returning `false` prevents the default move behavior. If asynchronous operations
are needed before moving, return `false` and call the {#acceptMove} method after the async operation completes to finish
the move.
- Parameters
- items
- Type
Array
- Description
The list of records being moved.
- include
- Type
Boolean
- Description
Whether it is an inclusion operation; `true` for include, `false` for exclude.
# Wb.tool.FlowDesigner
WorkFlow designer.
## Class Information
- class name
Wb.tool.FlowDesigner
- Icon
undefined
- cname
flowDesigner
- file
wb/js/flow-designer.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.tool.FlowDesigner
## Static Properties
- ports
- Flags
Private
- Type
Object
- Description
The graph ports.
## Instance Properties
- hintValue
- Type
String
- Description
The hint text for valued property.
- propsMap
- Type
Object
- Description
Flow node properties define map.
- propsType
- Type
Objec
- Description
Flow property types map.
- viewMode
- Type
Boolean
- Description
Whether is in view mode.
- editors
- Flags
Private
- Type
Object
- Description
Property grid editor map.
- flowData
- Getter
- Type
Object
- Setter
- Type
Object
- Description
Workflow data.
## Static Methods
- registerNodes
- Flags
Private
- Description
Register common graph nodes.
## Instance Methods
- init
- syncValues
- Flags
Private
- Description
Sync the specified value to the property grid bind data.
- Parameters
- name
- Type
String
- Description
Property name.
- value
- Type
Object
- Description
Property value.
- setLabel
- Flags
Private
- Description
Set the specified cell label text.
- Parameters
- cell
- Type
Object
- Description
Graph cell.
- text
- Type
String
- Description
Label text.
- createEditors
- Flags
Private
- Description
Create property grid editors.
- createTrigger
- Flags
Private
- Description
Create the specified trigger editor.
- Parameters
- url
- Type
String
- Description
Editor url.
- showValue
- optional
true
- Type
String
- Description
Whether to show the value.
- Returns Value
- Type
Wb.Trigger
- Description
The new trigger.
- fixBox
- Flags
Private
- Description
Fix the stencil box.
- initGraph
- Flags
Private
- Description
Init workflow graph.
- doSelect
- Flags
Private
- Description
Select the specified node.
- Parameters
- selected
- Type
Array
- Description
Selected node. Empty array means select the flow.
- setPorts
- Flags
Private
- Description
Set graph ports visibility.
- Parameters
- show
- Type
Boolean
- Description
Whether to show or hide the ports.
- initPorts
- Flags
Private
- Description
Init graph ports.
- createStencil
- Flags
Private
- Description
Create stencil box.
- copy
- Description
Copy the specified cells.
- Parameters
- cells
- Type
Array
- Description
The cells to be copied.
- Returns Value
- Type
Array
- Description
Copied cells.
- cut
- Description
cut the specified cells.
- Parameters
- cells
- Type
Array
- Description
The cells to be cut.
- Returns Value
- Type
Array
- Description
Cut cells.
- paste
- Description
Paste clone cells to the current graph.
- Parameters
- cells
- Type
Array
- Description
The cells to paste.
- Returns Value
- Type
Array
- Description
The paste cells.
- completeEdit
- Description
Complete edit.
- destroy
# Wb.ide.Designer
Visual UI Designer, designed and edited interfaces through drag and drop.
## Class Information
- class name
Wb.ide.Designer
- Icon
undefined
- cname
ideDesigner
- file
wb/js/ide.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.ide.Designer
## Instance Properties
- xwl
- Type
Wb.ide.XwlEditor
- Description
Xwl module file Editor.
- propTree
- Flags
Read-only
- Getter
- Type
Wb.Tree
- Description
Property tree of the designer.
- compTree
- Flags
Read-only
- Getter
- Type
Wb.Tree
- Description
Component tree of the designer.
- designCt
- Type
Wb.Container
- Description
The component to design.
- bindNode
- Type
Wb.TreeItem
- Description
The component nodes associated with the designer.
- allowHandleSelect
- Flags
Private
- Type
Boolean
- Description
Whether to handle selection.
- selNodes
- Flags
Read-only
- Getter
- Type
Wb.TreeItem[]
- Description
The associated nodes of selection componentsm.
- selComps
- Flags
Read-only
- Getter
- Type
Wb.Component[]
- Description
The selection components. Returns empty array if no selection.
- selComp
- Flags
Read-only
- Getter
- Type
Wb.Component
- Description
The first selection component. Returns null if no selection.
- allowClick
- Flags
Private
- Type
Boolean
- Description
Whether to allowed to fire click event.
- startSelComps
- Flags
Private
- Type
Wb.Component[]
- Description
The list of selected components when begin selection.
## Instance Methods
- init
- notifyChangeProperty
- Flags
Private
- Description
Handler for property changes.
- Parameters
- nodes
- Type
Wb.TreeItem|Wb.TreeItem[]
- Description
Component nodes or their list.
- name
- Type
String
- Description
Attribute name, default updates all attributes.
- notifyDestroy
- Flags
Private
- Description
Handler for nodes destroy.
- Parameters
- nodes
- Type
Wb.TreeItem|Wb.TreeItem[]
- Description
Destroyed nodes.
- notifyReset
- Flags
Private
- Description
Handler for properties reset.
- Parameters
- node
- Type
Wb.TreeItem
- Description
Reset node.
- props
- Type
Object
- Description
Original properties.
- notifyDrop
- Flags
Private
- Description
Handler for node drop.
- Parameters
- data
- Type
Object
- Description
Drag and drop data.
- onDesignFocusIn
- Flags
Private
- Description
Fires when the designer receives focus.
- Parameters
- e
- Type
Event
- Description
Event object.
- onDesignSelChange
- Flags
Private
- Description
Fires after a selection change has occurred.
- syncSelection
- Flags
Private
- Description
Synchronize the selection of the current component to it's node.
- onDesignClick
- Flags
Private
- Description
The method to execute after clicking on the design panel.
- Parameters
- e
- Type
Event
- Description
Event object.
- onDesignMouseDown
- Flags
Private
- Description
The method to execute after pressing mouse down on the design panel.
- Parameters
- e
- Type
Event
- Description
Event object.
- handleSelect
- Flags
Private
- Description
Handle components selections.
- Parameters
- e
- Type
Event
- Description
Event object.
- onDesignKeyDown
- Flags
Private
- Description
Fires after pressing key down of the design panel.
- Parameters
- e
- Type
Event
- Description
Event object.
- onDesignMouseMove
- Flags
Private
- Description
Fires when moving the mouse on DocEl in the designer.
- Parameters
- e
- Type
Event
- Description
The event object.
- onDesignMouseUp
- Flags
Private
- Description
Fires when mouse up on DocEl in the designer.
- Parameters
- e
- Type
Event
- Description
The event object.
- load
- Description
Load compnent node and it's children nodes, and start to visual design.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The component node to design.
- selectComp
- Description
Select a component.
- Parameters
- comp
- Type
Wb.Component
- Description
Selected component.
- deselectComp
- Description
Deselect a component.
- Parameters
- comp
- Type
Wb.Component
- Description
Deselected component.
- selectAll
- Description
Select all components in the designer.
- deselectAll
- Description
Deselect all components in the designer.
- Parameters
- selComp
- optional
true
- Type
Wb.Component|Wb.Component[]
- Description
The exceptional component to be selected.
- rebuild
- Description
Rebuild the designed components and their child components.
- getPropValue
- Description
Convert the specified design time value to runtime value.
- Parameters
- cls
- Type
String
- Description
The component class name.
- name
- Type
String
- Description
The property name.
- value
- Type
String
- Description
Design time value.
- Returns Value
- Type
Object
- Description
Convered runtime value, returns undefined means invalid.
- createComp
- Flags
Private
- Description
Create a new design time component from it's node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The component node.
- isCt
- optional
true
- Type
Boolean
- Description
true if it is a container.
- Returns Value
- Type
Wb.Component
- Description
The component instance.
- onCompDestroy
- Flags
Private
- Description
Fires after the component is destroyed.
## Events
- designselchange
- Description
Fires when designed component selection changes.
# Wb.ide.IconSelect
Vector icon selector, used to input vector icons.
## Class Information
- class name
Wb.ide.IconSelect
- Icon
undefined
- cname
iconSelect
- file
wb/js/ide.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Select -> Wb.ide.IconSelect
## Static Properties
- iconsData
- Flags
Read-only
- Getter
- Type
Array
- Description
Icon list data.
## Instance Methods
- init
- onChange
- Flags
Private
- Description
Fires when the value of the input is changed.
- Parameters
- value
- Type
String
- Description
New value.
# Wb.ide.ImgSelect
Imae icon selector, used to input image icons.
## Class Information
- class name
Wb.ide.ImgSelect
- Icon
undefined
- cname
imgSelect
- file
wb/js/ide.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.Select -> Wb.ide.ImgSelect
## Static Properties
- imgsData
- Flags
Read-only
- Getter
- Type
Array
- Description
Image list data.
## Instance Methods
- init
- onChange
- Flags
Private
- Description
Fires when the value of the input is changed.
- Parameters
- value
- Type
String
- Description
New value.
# Wb.ide.XwlEditor
Xwl file editor.
## Class Information
- class name
Wb.ide.XwlEditor
- Icon
undefined
- cname
xwlEditor
- file
wb/js/ide.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.mixin.Icon -> Wb.Panel -> Wb.CardCt -> Wb.Tab -> Wb.ide.XwlEditor
## Static Properties
- typeIconMap
- Flags
Private
- Type
Object
- Description
Edit type and icon map.
- typeScriptMap
- Flags
Private
- Type
Object
- Description
Edit type and script type map.
## Instance Properties
- ide
- Type
Wb.ide.IDE
- Description
Integrated development environment instance.
- designerActive
- Type
Boolean
- Description
Whether the designer is active at last.
- lastFocusComp
- Flags
Private
- Type
Wb.Component
- Description
The last focused component.
- homeActivate
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Indicates that the home card of XWL editor is currently active.
- activePropTree
- Flags
Read-only
- Getter
- Type
Wb.Tree
- Description
The active property editor or null if not found.
- activeDesigner
- Flags
Read-only
- Getter
- Type
Wb.Tree
- Description
The active designer or null if not found.
- mainEditor
- Flags
Read-only
- Getter
- Type
Wb.CodeEditor
- Description
The main code editor in the current tab card.
- backComps
- Flags
Private
- Type
Wb.TreeItem[]
- Description
Back component nodes list.
- forwardComps
- Flags
Private
- Type
Wb.TreeItem[]
- Description
Forward component nodes list.
- items
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- value
- Getter
- Type
Object
- Setter
- Type
Object
- Description
Xwl module data object.
## Static Methods
- isScriptType
- Flags
Private
- Description
Determines whether the specified editing type is a script editor type.
- Parameters
- editType
- Type
String|Wb.TreeItem
- Description
Edit type or edit property item.
- Returns Value
- Type
Boolean
- Description
true is script type, false otherwise.
- isString
- Description
Determines whether the specified value type is string type.
- Parameters
- type
- Type
String
- Description
The value type.
- v
- Type
String
- Description
The value.
- Returns Value
- Type
Boolean
- Description
true String type, false otherwise.
- getIcon
- Flags
Private
- Description
Gets the icon by edit type.
- Parameters
- editType
- Type
String
- Description
Edit type.
- Returns Value
- Type
String
- Description
The icon.
- getScriptType
- Flags
Private
- Description
Gets the script type by edit type.
- Parameters
- editType
- Type
String
- Description
Edit type.
- Returns Value
- Type
String
- Description
The script type.
- getEditType
- Flags
Private
- Description
Gets the edit type by property node.
- Parameters
- propNode
- Type
Wb.TreeItem
- Description
The property node.
- Returns Value
- Type
String
- Description
The edit type.
- getEditor
- Flags
Private
- Description
Gets the editor by property node.
- Parameters
- propNode
- Type
Wb.TreeItem
- Description
Property node.
- Returns Value
- Type
Wb.Text
- Description
The editor, or String editor if not found.
- staticInit
- Description
Static init.
- Parameters
- configs
- Type
Object
- Description
IDE configs object.
- createScriptEditor
- Flags
Private
- Description
Create script editor of the specified script language.
- Parameters
- language
- Type
String
- Description
Script language.
- Returns Value
- Type
Wb.ide.CodeSelect
- Description
The new script editor.
- getPropTitle
- Flags
Private
- Description
Gets property title.
- Parameters
- compNode
- Type
Wb.TreeItem
- Description
The component node.
- propName
- Type
String
- Description
Property or event node.
- Returns Value
- Type
String
- Description
The title.
- getPropPath
- Flags
Private
- Description
Gets the full path from the specified node property.
- Parameters
- compNode
- Type
Wb.TreeItem
- Description
The component node.
- propType
- Type
String
- Description
Property type.
- propName
- Type
String
- Description
Property name.
- Returns Value
- Type
String
- Description
Full path.
- isHintProp
- Description
Whether the name is a hint property.
- Parameters
- name
- Type
String
- Description
Property name.
- Returns Value
- Type
Boolean
- Description
The result.
- setValue
- Description
Set the value for the property row.
- Parameters
- row
- Type
Wb.TreeItem
- Description
Property row.
- value
- Type
Object
- Description
The value to set.
## Instance Methods
- init
- designSelNode
- Description
Design the selection node.
- designNode
- Description
Design the specified node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The node to design.
- silent
- optional
true
- Type
Boolean
- Description
Whether not show hints.
- setValue
- Description
Set the specified value into the component node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The component node.
- name
- Type
String
- Description
The property name.
- value
- Type
Object
- Description
The value to set.
- isEvent
- optional
true
- Type
Boolean
- Description
Whether is event.
- onSourceShow
- Flags
Private
- Description
Fires after source code page is shown.
- focus
- checkDupCid
- Flags
Private
- Description
Determines whether there are components with the same CID in the component tree.
- removeSelComps
- Description
Remove selection components in the tree.
- Parameters
- noFocus
- optional
true
- Type
Boolean
- Description
Whether to not set focus.
- removeBindings
- Flags
Private
- Description
Remove the components bound to the node and all its child nodes. These components include
script editor opened in a separate card.
- Parameters
- nodes
- Type
Wb.TreeItem|Wb.TreeItem[]
- Description
The nodes to remove.
- keepDesign
- optional
true
- Type
Boolean
- Description
Whether to keep components in the designer.
- getPropNode
- Flags
Private
- Description
Gets the specified node by property name and type.
- Parameters
- propName
- Type
String
- Description
The property name.
- propType
- Type
String
- Description
The property type.
- Returns Value
- Type
Wb.TreeItem
- Description
The property node.
- editProp
- Flags
Private
- Description
Edit the properties of the specified component.
- Parameters
- compNode
- Type
String|Wb.TreeItem
- Description
The edited component or its path, if it is a path separated by "/".
- propName
- Type
String
- Description
The property name.
- propType
- Type
String
- Description
The property type.
- inPropEditor
- optional
true
- Type
Boolean
- Description
Whether open in the embedded property editor.
- Returns Value
- Type
Wb.Text|Wb.CodeEditor
- Description
The matching editor or null.
- editScript
- Flags
Private
- Description
Edit the script property.
- Parameters
- compNode
- Type
Wb.TreeItem
- Description
The component node.
- propNode
- Type
Wb.TreeItem
- Description
The property node.
- propName
- Type
String
- Description
Property name.
- propType
- Type
String
- Description
Property type.
- language
- Type
String
- Description
Script language.
- icon
- Type
String
- Description
Card icon.
- Returns Value
- Type
Wb.Card
- Description
The opened card of the script editor.
- ready
- onCardChange
- Flags
Private
- Description
Fires when a new tab card is activated.
- Parameters
- newCard
- Type
Wb.Component
- Description
The newly activated card.
- oldCard
- Type
Wb.Component
- Description
The previously active card.
- completeEdit
- Description
Completes the edit if there is an active edit in progress.
- compBack
- Description
Back to the last selected component node.
- compForward
- Description
Forward to the backed component node.
- getPropTree
- Flags
Private
- Description
Get property editor tree configs object.
- Returns Value
- Type
Object
- Description
Configs object.
- onPropBeforeEdit
- Flags
Private
- Description
Fires before editing is triggered in property editor.
- Parameters
- row
- Type
Wb.TreeItem
- Description
Tree row.
- col
- Type
Wb.Column
- Description
Tree column.
- configs
- Type
Object
- Description
Configs object.
- options
- Type
Object
- Description
Event options.
- setSelectData
- Flags
Private
- Description
Set the select component data.
- Parameters
- select
- Type
Wb.Select
- Description
Select component.
- meta
- Type
Object
- Description
Property meta data.
- onPropEditing
- Flags
Private
- Description
Fires when the property editor is editing.
- onPropEdit
- Flags
Private
- Description
Fires after the property editor is edited.
- Parameters
- value
- Type
Object
- Description
Property value.
- row
- Type
Wb.TreeItem
- Description
Tree row.
- col
- Type
Wb.Column
- Description
Tree column.
- onToggleExpand
- Flags
Private
- Description
Fires after expand or collapse on the property node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
Toggle node.
- onPropSelectionChange
- Flags
Private
- Description
Fires after property selection changes.
- onBeforeNavigate
- Flags
Private
- Description
Fires before navigate keys on the property editor.
- Parameters
- e
- Type
Event
- Description
Event object.
- inspectNodes
- Flags
Private
- Description
Inspect nodes values to the property editor.
- Parameters
- nodes
- Type
Wb.TreeItem[]
- Description
Component nodes list.
- selfOnly
- Type
Boolean
- Description
Show self owned property only.
- valuedOnly
- Type
Boolean
- Description
Show not null value property.
- keyOnly
- Type
Boolean
- Description
Show key value property.
- reloadProperties
- Flags
Private
- Description
Reload selection nodes properties/events.
- getMembers
- Flags
Private
- Description
Get members from the sepcified class.
- Parameters
- cls
- Type
String
- Description
Class name.
- type
- Type
String
- Description
Data type:
-properties: Property
-events: Event
- selfOnly
- Type
Boolean
- Description
Show self owned property only.
- keyOnly
- Type
Boolean
- Description
Show key value property.
- Returns Value
- Type
Object
- Description
The members list.
- setPropData
- Flags
Private
- Description
Set property editor data.
- Parameters
- items
- Type
Array
- Description
Component array list.
- result
- Type
Array
- Description
The result array.
- type
- Type
String
- Description
Data type:
-properties: Property
-events: Event
- text
- Type
String
- Description
Type label.
- selfOnly
- Type
Boolean
- Description
Show self owned property only.
- valuedOnly
- Type
Boolean
- Description
Show not null value property.
- keyOnly
- Type
Boolean
- Description
Show key value property.
- Returns Value
- Type
Array
- Description
Property event list data.
## Events
- change
- Description
Fires after XWL values is changed.
- cursorchange
- Description
Fires after cursor is changed in code editors.
- Parameters
- cursor
- Type
Object
- Description
Cursor object.
- focuseditor
- Description
Fires when any editor in XWL receives focus.
- Parameters
- editor
- Type
Wb.CodeEditor
- Description
Code editor.
# Wb.ide.CodeSelect
Code select component, used to edit code in the select.
## Class Information
- class name
Wb.ide.CodeSelect
- Icon
undefined
- cname
codeSelect
- file
wb/js/ide.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.mixin.Icon -> Wb.Text -> Wb.Trigger -> Wb.Picker -> Wb.ide.CodeSelect
## Instance Properties
- language
- Type
String
- Description
Edit language type.
- value
- Getter
- Type
String
- Setter
- Type
String
- Description
Edited script value.
- types
- Type
String
- Description
Edited property types. Use "/" to separate multiple types.
- compNodes
- Getter
- Type
Wb.TreeItem[]
- Setter
- Type
Wb.TreeItem[]
- Description
Edited component nodes list.
## Instance Methods
- init
- onKeyDown
- expandEdit
- Flags
Private
- Description
Open new card editor to edit the script.
- onExpand
- Flags
Private
- Description
Fires when the picker is expanded.
- onCollapse
- Flags
Private
- Description
Fires when the picker is collapsed.
- onChange
- Flags
Private
- Description
Fires after value is changed.
- addPropComp
- Flags
Private
- Description
Add property component.
# Wb.ide.IDE
WebBuilder IDE client.
## Class Information
- class name
Wb.ide.IDE
- Icon
undefined
- cname
ideApp
- file
wb/js/ide.js
- hierarchy
Wb.Base -> Wb.App -> Wb.ide.IDE
## Instance Properties
- inIDE
- Type
Boolean
- Description
Whether is in the IDE.
- configs
- Type
Object
- Description
Configs object.
- socket
- Flags
Private
- Type
Wb.Socket
- Description
Websocket component.
- forwardList
- Flags
Private
- Type
Array
- Description
Forward list for navigation.
- backList
- Flags
Private
- Type
Array
- Description
Back list for navigation.
- hint
- Getter
- Type
String
- Setter
- Type
String
- Description
The hint information of the bottom bar.
- activeCard
- Flags
Read-only
- Getter
- Type
String
- Description
Active card or null if not found.
- activeModule
- Flags
Read-only
- Getter
- Type
Object
- Description
The currently opened module app scope or null if not found.
- activeFile
- Flags
Read-only
- Getter
- Type
String
- Description
The currently opened file path or null if not found.
- mainEditor
- Flags
Read-only
- Getter
- Type
Wb.CodeEditor
- Description
The main editor of currently opened tab card or null if not found.
- activeXwl
- Flags
Read-only
- Getter
- Type
Wb.ide.XwlEditor
- Description
The currently opened xwl editor or null if not found.
- debugUrl
- Flags
Read-only
- Getter
- Type
String
- Description
The selected debugging URL. Returns null means no selection, returns empty string
means selection but not in debug progress.
- selCompActivated
- Flags
Private Read-only
- Description
Determines whether the selection component is activated.
- Getter
- Type
(inherited)
- Returns Value
- Type
Boolean
- Description
Returns true is activated, false otherwise.
- fileClipboard
- Flags
Private
- Type
Object
- Description
File clipboard.
- selModules
- Flags
Read-only
- Getter
- Type
Wb.TreeItem[]
- Description
Get all selected module file nodes.
- selFiles
- Flags
Read-only
- Getter
- Type
String[]
- Description
Get all selected file paths list.
## Static Methods
- gotoLink
- Description
Goto the specified location in the code editor by the link express.
- Parameters
- url
- Type
String
- Description
Link url express.
- basePath
- Type
String
- Description
Current file path.
- parseUrl
- Description
Parse the specified URL express to real URL.
- Parameters
- url
- Type
String
- Description
URL express.
- basePath
- Type
String
- Description
Base path.
- returnParams
- optional
true
- Type
Boolean
- Description
Whether to return params.
- Returns Value
- Type
String
- Description
Real url. Returns null if parse error.
- setAutoComplete
- Description
Set code auto complete feature.
- extractTypes
- Flags
Private
- Description
Extract type map from context code.
- Parameters
- code
- Type
String
- Description
Context code.
- predefinedCls
- optional
true
- Type
String[]
- Description
Predefined class list.
- Returns Value
- Type
Object
- Description
Type map.
- findControlMeta
- Description
Find the specified control meta data by class name.
- Parameters
- cls
- Type
String
- Description
Class name.
- name
- Type
String
- Description
Property/event name.
- isEvent
- optional
true
- Type
Boolean
- Description
Whether is event.
- Returns Value
- Type
Object
- Description
Returns "params" for event, returns {type, design, params} for otherwise.
- canDesign
- Description
Determines whether the specified class is designable.
- Parameters
- cls
- Type
String
- Description
Class name.
- Returns Value
- Type
Boolean
- Description
Returns true means designable.
## Instance Methods
- main
- getFileTreeCols
- Flags
Private
- Description
Get File tree columns.
- Returns Value
- Type
Array
- Description
File tree columns array.
- checkIn
- Description
Check in selection files and folders to the lib.
- checkOut
- Description
Open {{Version Manager}} module.
- importFiles
- Description
Import files to the selection folder.
- Parameters
- unzip
- optional
true
- Type
Boolean
- Description
Whether to unzip files.
- exportFiles
- Description
Export selection files.
- Parameters
- zip
- optional
true
- Type
Boolean
- Description
Whether to zip files. Auto set to true if multiple files or directories are selected.
- doImport
- Flags
Private
- Description
Do import operation.
- Parameters
- comps
- Type
Wb.Component|Wb.Component[]
- Description
Imported components.
- unzip
- optional
true
- Type
Boolean
- Description
Whether to unzip files.
- callback
- optional
true
- Type
Boolean
- Description
The function to execute once the import completes.
- charset
- optional
true
- Type
String
- Description
The file name charset.
- createWizard
- Flags
Private
- Description
Create wizard.
- Parameters
- mode
- optional
true
- Type
String
- Description
Wizard mode.
-"crud": crud creation wizard
-"query": query creation wizard.
-"source": table, view, sp, module source.
- fn
- optional
true
- Type
Function
- Description
Callback function.
- values
- optional
true
- Type
Object
- Description
Default values.
- addComps
- Flags
Private
- Description
Add component nodes to current node.
- addCompNodes
- Flags
Private
- Description
Add component nodes to the current select node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
The node to be add comps.
- nodes
- Type
Array
- Description
Component nodes list.
- editors
- Type
Array
- Description
Prepared editors.
- xwl
- Type
Wb.XwlEditor
- Description
Xwl editor.
- editorOnly
- optional
true
- Type
Boolean
- Description
Whether to create editor only.
- editable
- optional
true
- Type
Boolean
- Description
Whether columns is editable.
- refreshTools
- Flags
Private
- Description
Refresh tool buttons on the context tool bar.
- Parameters
- belongTo
- optional
true
- Type
String
- Description
Which category does the tool buttons belong to.
- setModified
- Description
Set the modified status to the specified tab card.
- Parameters
- card
- Type
Wb.Card
- Description
Tab card.
- unModified
- Description
Set the unmodified status to the specified tab card.
- Parameters
- card
- Type
Wb.Card
- Description
Tab card.
- setActions
- Description
Set actions status.
- onUnload
- Description
Fires before the module is closed.
- createControl
- Flags
Private
- Description
Create a unique control data object for CID based on the control data template.
- Parameters
- data
- Type
Object
- Description
Control data object.
- node
- Type
Wb.TreeItem
- Description
Parent node.
- Returns Value
- Type
Object
- Description
Created control data.
- createActions
- Flags
Private
- Description
Create actions for menus and tool buttons.
- Returns Value
- Type
Wb.Actions
- Description
The created actions.
- createDebugActions
- Flags
Private
- Description
Create actions for debug operation.
- Returns Value
- Type
Wb.Actions
- Description
The created debug actions.
- toOfficialSite
- Description
Open a new window and go to the official website.
- inModule
- Description
Determines whether the specified path is located in the module folder(including itself).
- Parameters
- path
- Type
String
- Description
The file path.
- Returns Value
- Type
Boolean
- Description
Returns true in the module folder, false otherwise.
- inApp
- Description
Determines whether the specified path is located in the app folder(including itself).
- Parameters
- path
- Type
String
- Description
The file path.
- Returns Value
- Type
Boolean
- Description
Returns true in the app folder, false otherwise.
- recordActivity
- Flags
Private
- Description
Record the position of the tab and edit cursor, which is used for location navigation.
- back
- Flags
Private
- Description
Back to the previous tab card or cursor position in sequence.
- forward
- Flags
Private
- Description
Forward to the last backed tab card or cursor position.
- navigate
- Flags
Private
- Description
Navigate to the specified tab card or cursor position by the given information.
- Parameters
- info
- Type
Object
- Description
Tab card or cursor position.
- Returns Value
- Type
Boolean
- Description
Returns true on success, false otherwise.
- focusCard
- Description
Set the focus to the specified card.
- Parameters
- card
- optional
true
- Type
Wb.Card
- Description
Focused card.
- setCharset
- Description
Set charset of currently opened file.
- isModule
- Description
Determines whether the specified path is a module path.
- Parameters
- path
- Type
String|Wb.Card
- Description
Path or tab card which contains path.
- Returns Value
- Type
Boolean
- Description
Returns true is module path, false otherwise.
- getDebugUrl
- Flags
Private
- Description
Get debugging URL address of the specified record data.
- Parameters
- data
- Type
Object
- Description
Record data.
- Returns Value
- Type
String
- Description
Debugging URL or nll if not found.
- refresh
- Description
Do refresh action in the context.
- refreshDebugGrid
- Description
Refresh debugging grid.
- copyDebugUrl
- Flags
Private
- Description
Copy current debugging url to the clipboard.
- Parameters
- succ
- Type
Function
- Description
The function to execute after success.
- copyDebugUrlNewWin
- Flags
Private
- Description
Copy current debugging url to the clipboard and open a new window for debugging purpose.
- setDebugActions
- Flags
Private
- Description
Set debug actions status.
- doDelete
- Flags
Private
- Description
Do delete selection objects in the context.
- doCut
- Description
Do cut operation in the context.
- doCopy
- Description
Do copy operation in the context.
- doPaste
- Description
Do paste operation in the context.
- Parameters
- e
- Type
Event
- Description
Event object.
- copyFiles
- Description
Copy files to the clipboard.
- Parameters
- isCut
- Type
Boolean
- Description
True to cut files.
- pasteFiles
- Description
Paste files from the clipboard.
- Parameters
- append
- Type
Boolean
- Description
True to append files to the current node.
- doOpenFile
- Flags
Private
- Description
Do open selection files.
- clearCompValues
- Description
Clear all selection components.
- linkToControl
- Flags
Private
- Description
Link selected node to the tool box.
- toDesignPage
- Description
Turn to design page.
- rebuildDesign
- Description
Rebuild design page.
- getFilename
- Description
Get filename from path.
- Parameters
- path
- Type
String
- Description
File path.
- returnParent
- optional
true
- Type
Boolean
- Description
True to return parent path if path endswith "/", otherwise return empty string.
- Returns Value
- Type
String
- Description
filename.
- deleteFiles
- Description
Delete selection files.
- getSelFiles
- Description
Get all selected files path list.
- Returns Value
- Type
Array
- Description
File path list.
- folderize
- Description
Append "/" to the path if it doesn't end with "/".
- Parameters
- path
- Type
String
- Description
Path string.
- Returns Value
- Type
String
- Description
Folder path.
- getFilePromptItems
- Flags
Private
- Description
Get file prompty dialog components.
- Parameters
- inModule
- Type
Boolean
- Description
Whether in the module.
- isFolder
- Type
Boolean
- Description
Whether is folder.
- path
- optional
true
- Type
String
- Description
File path, only in set property.
- showTotal
- Type
Boolean
- Description
Whether to show total information.
- Returns Value
- Type
Array
- Description
Component items list.
- setProperty
- Description
Show dialog for setting file properties.
- addFile
- Description
Show dialog to add a new file to the current node.
- addFolder
- Description
Show dialog to add a new folder to the current node.
- checkValues
- Flags
Private
- Description
Verify all values in the window.
- Parameters
- win
- Type
Wb.Window
- Description
The window.
- values
- Type
Object
- Description
The values to verify.
- Returns Value
- Type
Boolean
- Description
Return true is valid, false otherwise
- doAddFile
- Flags
Private
- Description
Show dialog for creating a new file/folder in the current node.
- Parameters
- isFolder
- optional
true
- Type
Boolean
- Description
Whether to create a folder.
- logHandler
- Description
Show log data to the console
- Parameters
- data
- Type
Object
- Description
Log data.
- addDebugHandler
- Flags
Private
- Description
Add debug handler from debugging data.
- Parameters
- data
- Type
Object
- Description
Debugging data.
- removeDebugHandler
- Flags
Private
- Description
Remove debug handler from debugging data.
- Parameters
- data
- Type
Object
- Description
Debugging data.
- setDebugHandler
- Flags
Private
- Description
Set debug handler from debugging data.
- Parameters
- data
- Type
Object
- Description
Debugging data.
- setDebugStatusHandler
- Flags
Private
- Description
Set debug status handler from debugging data.
- Parameters
- data
- Type
Object
- Description
Debugging data.
- notifyProgressHandler
- Flags
Private
- Description
Update progress handler from debugging data.
- Parameters
- data
- Type
Object
- Description
Debugging data.
- searchKey
- Description
Search key word in the context.
- searchReplace
- Description
Execute search and replace operation.
- Parameters
- replace
- Type
Boolean
- Description
True to execute replace, false to execute search.
- title
- optional
true
- Type
String
- Description
Window title.
- searchValue
- optional
true
- Type
String
- Description
Default search value.
- run
- Description
Run the current file.
- runNew
- Description
Run the current file in new window.
- doRun
- Description
Do run file.
- Parameters
- newWin
- optional
true
- Type
Boolean
- Description
Whether to run in new window.
- runModule
- Description
Run a module file.
- Parameters
- path
- Type
String
- Description
Module relative path.
- params
- optional
true
- Type
Object
- Description
Run params.
- runFile
- Description
Run a file.
- Parameters
- path
- Type
String
- Description
File path
- params
- optional
true
- Type
Object
- Description
Run params.
- tags
- optional
true
- Type
String
- Description
Extra options.
- toggleDebug
- Description
Toggle debug status of the selected modules.
- setDebugStatus
- Flags
Private
- Description
Set status of the selected debug files.
- Parameters
- type
- Type
String
- Description
Operation type:
-'remove': Remove
-'disable': Disable
-'enable': Enable
- removeDebug
- Flags
Private
- Description
Remove debug status of the selected files.
- reloadSystem
- Description
Reload server system.
- getRelativePath
- Description
Get relative path from the specified file/folder.
- Parameters
- path
- Type
String
- Description
Full path.
- Returns Value
- Type
String
- Description
Relative path.
- getUrlPath
- Description
Get url of the specified running file.
- Parameters
- path
- Type
String
- Description
File full path.
- returnEmpty
- optional
true
- Type
Boolean
- Description
true to returns empty string if outside app folder.
- xwlPath
- optional
true
- Type
Boolean
- Description
false returns URL, true returns path.
- currentPath
- optional
true
- Type
String
- Description
Current path of the edited file.
- inSub
- optional
true
- Type
Boolean
- Description
Whether the file in same name sub folder.
- useRelative
- optional
true
- Type
Boolean
- Description
Whether use ralative path.
- Returns Value
- Type
String
- Description
URL path or empty string.
- getFullPath
- Description
Get module full path from it's relative path.
- Parameters
- relPath
- optional
true
- Type
String
- Description
Module file relative path.
- Returns Value
- Type
String
- Description
Full path.
- updateCursor
- Description
Update editor cursor position to the label.
- Parameters
- cursor
- Type
Object
- Description
Cursor position object.
- getXwlEditor
- Description
Create a new XWL editor from the content.
- Parameters
- content
- Type
String
- Description
Xwl content.
- Returns Value
- Type
Wb.ide.XwlEditor
- Description
New XWL editor.
- getCodeEditor
- Description
Create a new code editor.
- Parameters
- content
- Type
String
- Description
Edited script.
- language
- Type
String
- Description
Code language.
- ss
- Type
Boolean
- Description
Whether is server script.
- Returns Value
- Type
Wb.CodeEditor
- Description
New created code editor.
- findCard
- Description
Find card by file path.
- Parameters
- path
- Type
String
- Description
File path.
- Returns Value
- Type
Wb.Card
- Description
The found card or null if not found.
- selectPath
- Description
Select file node by file path.
- Parameters
- path
- Type
String
- Description
File path.
- callback
- Type
Function
- Description
Callback function.
- openFile
- Description
Open the specified file.
- Parameters
- path
- Type
String
- Description
File full path.
- callback
- optional
true
- Type
Function
- Description
The function to execute after success.
- callback.card
- Type
Wb.Card
- Description
File card.
- charset
- optional
true
- Type
String
- Description
File content string charset, defaults to UTF-8.
- createDocs
- Description
Create docs from all XWL & js files in app folder.
- openDocs
- Description
Open the docs page.
- openDesign
- Flags
Private
- Description
Open UI designer.
- createTheme
- Description
Recreate wb css files.
- createRelease
- Description
Create release version files.
- compressScript
- Description
Compress JS/CSS script files in the app folder.
- save
- Description
Save current edited file.
- saveAll
- Description
Save all edited files.
- changePath
- Description
Change the specified file card path.
- Parameters
- files
- Type
String[]
- Description
File path list.
- path
- Type
String
- Description
Dest path.
- renameNode
- Description
Rename file node.
- Parameters
- node
- Type
Wb.TreeItem
- Description
File node.
- newFileName
- Type
String
- Description
New file name
- lastModified
- optional
true
- Type
String
- Description
Last modified date.
- rename
- Description
Execute rename operation.
- Parameters
- e
- Type
Event
- Description
Event object.
- renameFile
- Description
Rename current selected file.
- cardNavigate
- Description
Do card navigation.
- saveCard
- Description
Save file from it's opened card.
- Parameters
- card
- optional
true
- Type
Wb.Card
- Description
The card to save, defaults to the current card.
- callback
- optional
true
- Type
Function
- Description
The function to execute after success.
- saveFile
- Description
Save file handler.
- Parameters
- isAll
- optional
true
- Type
Boolean
- Description
True to save all files.
- callback
- optional
true
- Type
Function
- Description
The callback function.
- noConfirm
- optional
true
- Type
Boolean
- Description
Whether to show confirm dialog if the file is modified.
- card
- optional
true
- Type
Wb.Card
- Description
File card to save, defaults to the current card.
- monChangeMarkers
- Flags
Private
- Description
Monite marker changes of monaco editors.
- getMarkers
- Flags
Private
- Description
Get all markers from the code editors.
- Parameters
- editor
- Type
Wb.CodeEditor
- Description
The code editors.
- refreshFileFlag
- Flags
Private
- Description
Refresh file card flag.
- Parameters
- path
- Type
String
- Description
File path.
- removeMarkers
- Flags
Private
- Description
Remove all marker records in the grid.
- Parameters
- editor
- Type
Wb.CodeEditor
- Description
The code editor.
- locateLine
- Description
Open file and locate to the specified position.
- Parameters
- data
- Type
Object
- Description
Locate data object.
- .path
- Type
String
- Description
File path.
- .compNode
- optional
true
- Type
Wb.TreeItem|Boolean
- Description
The component node, true means the root node.
- .compPath
- optional
true
- Type
String
- Description
The component path.
- .propName
- optional
true
- Type
String
- Description
Property name.
- .propType
- optional
true
- Type
String
- Description
Property type.
- .lineNumber
- optional
true
- Type
Number
- Description
Line number, 1 based.
- .column
- optional
true
- Type
Number
- Description
Column number, 1 based.
- callback
- optional
true
- Type
Function
- Description
The callback function.
- noEmpty
- optional
true
- Type
Boolean
- Description
Whether not allowed empty value.
- loadControls
- Description
Reload all controls in the control tree.
- clearDebugStatus
- Flags
Private
- Description
Clear debug status.
- refreshToolCard
- Description
Refresh tool card in the context.
- createWebSocket
- Flags
Private
- Description
Create a new websocket.
- Parameters
- mainCt
- Type
Wb.Container
- Description
The main container.
# Wb.Code
A component for displaying code, used to highlight code according to the specified code language.
## Class Information
- class name
Wb.Code
- Icon
undefined
- cname
code
- file
wb/js/monaco.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Code
## Instance Properties
- lang
- Getter
- Type
String
- Setter
- Type
String
- Description
The language MimeType, for example: js is text/javascript, css is text/css.
- value
- Flags
Key
- Getter
- Type
TextString
- Setter
- Type
TextString
- Description
The code to be displayed.
## Static Methods
- colorize
- Description
Syntax coloring the script code in the specified element according to the specified language.
- Parameters
- el
- Type
Element
- Description
Element used for coloring.
- mimeType
- optional
true
- Type
String
- Description
The used language, which is specified by default by the data-lang attribute of the element.
# Wb.CodeEditor
A control for editing code in the specified code language.
Examples: {#%code-editor.xwl|ide?openModule=example/comps/code-editor.xwl}
## Class Information
- class name
Wb.CodeEditor
- Icon
edit
- cname
codeEditor
- file
wb/js/monaco.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Control -> Wb.CodeEditor
## Static Properties
- sqlKeyWords
- Flags
Private
- Type
Array
- Description
SQL key word list.
- editors
- Flags
Private
- Type
Object
- Description
All editors object, k is path, v is the editor.
## Instance Properties
- language
- Flags
Key
- Type
Enum
- Description
The type of code language, defaults to "JavaScript".
-'javascript': javaScript
-'css': CSS
-'json': JSON
-'html': HTML
-'sql': SQL
-'txt': Text
-'xml: XML
-'java': Java
-'python': Python
-'php': PHP
-'ruby': Ruby
-'r': R
-'csharp': C#
-'c': C
-'cpp': C++
- tabSize
- Type
Number
- Description
How many spaces the tab key occupies, the default is 2.
- editorConfigs
- Type
Object
- Description
Editor configs object.
- allowChange
- Type
Boolean
- Description
Whether allowed to fire {#*change} event.
- sqlDb
- Type
String
- Description
The name of the database associated with the SQL editor when the {#language} is set to
"sql". Specifying this value enables SQL auto-completion. An empty string indicates the default database.
- autoComplete
- Flags
Code
- Type
Boolean
- Description
Whether to enable automatic code completion feature. Applicable
only in IDE.
- serverScript
- Flags
Code
- Type
Boolean
- Description
Whether it is a server-side code editor. Applicable only in IDE.
- xwlTree
- Flags
Code
- Type
Wb.Tree
- Description
Module tree for automatic code completion. Applicable only in IDE.
- minimap
- Flags
Key
- Type
Boolean
- Description
Whether to display the code map.
- lineNumbers
- Flags
Key
- Type
Boolean
- Description
Whether to display the line number.
- popupMenu
- Flags
Key
- Type
Boolean
- Description
Whether to display the context menu. true displays native context menus,
false does not display context menus. Default null displays a custom context menu.
- uri
- Flags
Read-only
- Getter
- Type
String
- Description
Editor URI.
- path
- Flags
Read-only
- Getter
- Type
String
- Description
Editor path id, which uniquely identifies the editor.
- validator
- Type
Function
- Description
A validation function to be called during control validation.
- Parameters
- value
- Type
Object
- Description
The current editor value.
- Returns Value
- Type
Boolean|String
- Description
The returned string indicates that the value is illegal, the string is an error message,
and other values indicate that the value is valid.
- cursor
- Flags
Code
- Getter
- Type
Object
- Setter
- Type
Object
- Description
Cursor position.
- cursorCopy
- Flags
Read-only
- Getter
- Type
Object
- Description
A copy of the cursor position.
- value
- Flags
Key
- Getter
- Type
TextString
- Setter
- Type
TextString
- Description
The code text
- rawValue
- Getter
- Type
TextString
- Setter
- Type
TextString
- Description
Raw code text. The difference with the {#value} property is that setting this property
does not trigger the {#*change} event.
- disabled
- Getter
- Type
(inherited)
- Setter
- Type
(inherited)
- readonly
- Flags
Key
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
true to mark the control as readOnly.
- selectedText
- Flags
Code
- Getter
- Type
String
- Setter
- Type
String
- Description
The selected text.
## Static Methods
- initMonaco
- Description
Init Monaco.
- initTheme
- Description
Init theme.
- Parameters
- reinit
- optional
true
- Type
Boolean
- Description
Whether repeated initialization is allowed.
- findEditor
- Description
Finds the editor for the specified path.
- Parameters
- path
- Type
String
- Description
The path to find.
- Returns Value
- Type
Wb.CodeEditor
- Description
The found editor or null if none was found.
- formatCss
- Description
Automatically format CSS scripts.
- Parameters
- script
- Type
String
- Description
The script string to be formatted.
- Returns Value
- Type
String
- Description
The formatted string.
## Instance Methods
- init
- registerSqlProvider
- Description
Register SQL provider.
- autoFormat
- Description
Execute automatic formatting on scripts.
- Returns Value
- Type
Promise
- Description
The promise object.
- createEditor
- Flags
Private
- Description
Create the code editor.
- Parameters
- configs
- Type
Object
- Description
Configs object.
- gotoLink
- Description
Open the linked file and goto the definition based on the url link context at the current cursor.
Only available in IDE.
- verify
- clearError
- completeEdit
- Description
Complete the editing operation. Usually, after executing this method, the pop-up widgets will be hidden.
- clear
- Description
Clears the value of the current control. To reset the value, please use the {#reset} method.
- reset
- Description
Resets the value to the initialized value. If initialized value is null, this method is equivalent to
the {#clear} method. To clear the value, please use the {#clear} method.
- onKeyDown
- Flags
Private
- Description
Fires when a key is pressed in the editor.
- Parameters
- e
- Type
Event
- Description
Event object.
- focus
- getOffset
- Description
Gets the offset of the specified position relative to the first character.
- Parameters
- position
- Type
Object
- Description
The position.
- Returns Value
- Type
Number
- Description
Offset at position.
- toLastCursor
- Description
Turn the cursor to the last edit.
- insertText
- Description
Inserts text at the specified cursor.
- Parameters
- text
- Type
String
- Description
The inserted text.
- cursor
- optional
true
- Type
Object
- Description
Cursor. The default is the current cursor.
- cursor.lineNumber
- Type
Number
- Description
Line number.
- cursor.column
- Type
Number
- Description
Column number.
- cut
- Description
Perform a cut operation.
- copy
- Description
Perform a copy operation.
- paste
- Description
Perform a paste operation.
- insertBlock
- Description
Inserts paragraph text at the specified cursor. The difference between this method and {#insertText} is
that text starting from the second line automatically adds spaces at the beginning of each line to
align with the first line of text.
- Parameters
- lines
- Type
String
- Description
Inserted lines text.
- cursor
- optional
true
- Type
Object
- Description
Cursor. The default is the current cursor.
- cursor.lineNumber
- Type
Number
- Description
Line number.
- cursor.column
- Type
Number
- Description
Column number.
- getCursorText
- Description
Get the text at the cursor.
- Parameters
- offset
- optional
true
- Type
Number
- Description
Offset of cusor column.
- Returns Value
- Type
String
- Description
The text from column 0 to the cursor.
## Events
- cursorchange
- Description
Triggered when the cursor position changes.
- Parameters
- cursor
- Type
Object
- Description
Cursor position object. {{lineNumber}} is row number, {{column}} is column number.
- change
- Description
Fires when the text in the editor changes.
- Parameters
- text
- Type
String
- Description
Changed text.
- focus
- Description
Fires when the editor receives focus.
# Wb.ss.dbe
Database explorer utilities.
## Class Information
- class name
Wb.ss.dbe
- Icon
undefined
- file
wb/ss/dbe.mjs
- run at
server side only
- hierarchy
Wb.ss.dbe
## Static Properties
- noSizeTypes
- Type
Array
- Description
No length data type.
## Static Methods
- getDbNames
- Description
Get a list of all accessible database names.
- Parameters
- leaf
- optional
true
- Type
Boolean
- Description
whether the database name is a leaf node.
- Returns Value
- Type
Array
- Description
dt list.
- getSchemas
- Description
Get schem list.
- Returns Value
- Type
Array
- Description
schem list.
- getCategory
- Description
Get category list.
- Parameters
- db
- Type
String
- Description
database name.
- schem
- Type
String
- Description
schem name.
- mode
- Type
Number
- Description
1: hide func. 2: show table only. default show all.
- Returns Value
- Type
Array
- Description
category
- extractName
- Flags
Private
- Description
Gets the name part of the string.
- Parameters
- str
- Type
String
- Description
string.
- Returns Value
- Type
String
- Description
name.
- getTables
- Description
Get Table List.
- Parameters
- db
- Type
String
- Description
database name.
- schem
- Type
String
- Description
schem name.
- isView
- optional
true
- Type
Boolean
- Description
whether to get view.
- checkExists
- optional
true
- Type
Boolean
- Description
checking presence only.
- Returns Value
- Type
Array|Boolean
- Description
tables or whether table exist.
- getColumns
- Description
Get a list of fields.
- Parameters
- db
- Type
String
- Description
database name.
- schem
- Type
String
- Description
schem name.
- tableName
- Type
String
- Description
table name.
- fetchIndex
- Type
Boolean
- Description
whether to get index.
- Returns Value
- Type
Array
- Description
columns list.
- getIndex
- Description
Get a list of indexes.
- Parameters
- db
- Type
String
- Description
database name.
- schem
- Type
String
- Description
schem name.
- tableName
- Type
String
- Description
table name.
- pkIndexName
- Type
String
- Description
PK index name.
- Returns Value
- Type
Array
- Description
Index list.
- getProcs
- Description
Get a list of procs.
- Parameters
- db
- Type
String
- Description
database name.
- schem
- Type
String
- Description
schem name.
- checkExists
- optional
true
- Type
Boolean
- Description
checking presence only.
- Returns Value
- Type
Array|Boolean
- Description
procs or whether proc exist.
- getProcColumns
- Description
Get a list of process columns.
- Parameters
- db
- Type
String
- Description
database name.
- schem
- Type
String
- Description
schem name.
- procName
- Type
String
- Description
procedure name.
- checkExists
- optional
true
- Type
Boolean
- Description
checking presence only.
- Returns Value
- Type
Array|Boolean
- Description
proc columns or whether proc exist.
- getFuncs
- Description
Get a list of functions.
- Parameters
- db
- Type
String
- Description
Database name.
- schem
- Type
String
- Description
schem name.
- checkExists
- optional
true
- Type
Boolean
- Description
checking presence only.
- Returns Value
- Type
Array|Boolean
- Description
funcs or whether function exist.
# Context
Object for storing global variables of the execution context. This object will be released after the execution
context finishes.
## Class Information
- class name
Context
- Icon
undefined
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Context
## Static Properties
- maxRows
- Type
Number
- Description
Maximum number of records allowed to returns from database ResultSet.
- path
- Flags
Read-only
- Type
String
- Description
Current context path.
- rsClosable
- Flags
Private
- Type
Set
- Description
All closable ResultSet instances.
- stClosable
- Flags
Private
- Type
Set
- Description
All closable Statement instances.
- closable
- Flags
Private
- Type
Set
- Description
All other closable instances excluding ResultSet and Statement.
- payloadParams
- Flags
Private
- Type
Object
- Description
`application/json` request payload params. Invalid for other request.
- payload
- Flags
Private
- Type
String
- Description
Request payload text.
# Classes
Common classes are stored in this object.
## Class Information
- class name
Classes
- Icon
undefined
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Classes
## Static Properties
- UUID
- Type
Function
- Description
`java.util.UUID` class.
- GZIPInputStream
- Type
Function
- Description
`java.util.zip.GZIPInputStream` class.
- GZIPOutputStream
- Type
Function
- Description
`java.util.zip.GZIPOutputStream` class.
- List
- Type
Function
- Description
`java.util.List` class.
- URI
- Type
Function
- Description
`java.net.URI` class.
- Proxy
- Type
Function
- Description
`java.net.Proxy` class.
- InetSocketAddress
- Type
Function
- Description
`java.net.InetSocketAddress` class.
- VirtualRequest
- Type
Function
- Description
`com.wb.tool.VirtualRequest` class.
- VirtualResponse
- Type
Function
- Description
`com.wb.tool.VirtualResponse` class.
- NullPointerException
- Type
Function
- Description
`java.lang.NullPointerException` class.
- StringArray
- Type
Function
- Description
`java.lang.String[]` class.
- Timestamp
- Type
Function
- Description
`java.sql.Timestamp` class.
- Date
- Type
Function
- Description
`java.sql.Date` class.
- Time
- Type
Function
- Description
`java.sql.Time` class.
- StringReader
- Type
Function
- Description
`java.io.StringReader` class.
- Executor
- Type
Function
- Description
`com.wb.graal.Executor` class.
- ContextPool
- Type
Function
- Description
`com.wb.graal.ContextPool` class.
- Reader
- Type
Function
- Description
`java.io.Reader` class.
- Clob
- Type
Function
- Description
`java.sql.Clob` class.
- Blob
- Type
Function
- Description
`java.sql.Blob` class.
- InetAddress
- Type
Function
- Description
`java.net.InetAddress` class.
- SessionListener
- Type
Function
- Description
`com.wb.common.SessionListener` class.
- Cms
- Type
Function
- Description
`com.wb.tool.Cms` class.
- Throwable
- Type
Function
- Description
`java.lang.Throwable` class.
- Properties
- Type
Function
- Description
`java.util.Properties` class.
# Wb-Server
WebBuilder server side javascript library.
## Class Information
- class name
Wb-Server
- Icon
undefined
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb-Server
## Static Properties
- utf8
- Type
Charset
- Description
UTF-8 encoding charset.
- payloadParams
- Flags
Read-only
- Getter
- Type
Object
- Description
Payload parameters for requests with application/json Content-Type. Returns `undefined` for
non-application/json Content-Type.
- payload
- Flags
Read-only
- Getter
- Type
String
- Description
Raw payload text submitted via the request body.
- maxRows
- Flags
Read-only
- Getter
- Type
Number
- Description
Maximum number of records allowed to returns from database ResultSet. Specified by
{#Context.maxRows}, defaults to the config item `sys.db.maxRows`.
- username
- Flags
Read-only
- Getter
- Type
String
- Description
Username of the current user. Returns null if not found.
- dispname
- Flags
Read-only
- Getter
- Type
String
- Description
Display name of the current user. Returns null if not found.
- userid
- Flags
Read-only
- Getter
- Type
String
- Description
User ID of the current user. Returns null if not found.
- deptid
- Flags
Read-only
- Getter
- Type
String
- Description
Department ID of the current user. Returns null if not found.
- roles
- Flags
Read-only
- Getter
- Type
Array
- Description
Role IDs of the current user. Returns null if not found.
- isAdmin
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current user has the "admin" role.
## Static Methods
- getId
- Description
Gets a unique, incrementing 13-digit string composed of 26 uppercase letters and 10 digits.
Example:
let id = Wb.getId();
- Returns Value
- Type
String
- Description
The generated 13-digit unique incrementing string.
- encodeBase64
- Description
Encodes a string to a Base64 string.
- Parameters
- text
- Type
String
- Description
The string to be converted.
- Returns Value
- Type
String
- Description
The converted string.
- decodeBase64
- Description
Decodes a Base64 string to a string.
- Parameters
- text
- Type
String
- Description
The string to be converted.
- Returns Value
- Type
String
- Description
The converted string.
- sleep
- Description
Pauses the thread execution for the specified number of milliseconds.
- Parameters
- milliSec
- Type
Number
- Description
Number of milliseconds.
- getUUID
- Description
Gets a random 32-character UUID string.
- Returns Value
- Type
String
- Description
A 32-character UUID string with hyphens removed.
- parse
- Description
Returns the JSON object or array represented by the script. The difference between this method and {#Wb.decode}
is that it allows the JSON format to be a JS expression.
Example:
Wb.parse('{foo: 123, bar: "abc"}');
- Parameters
- script
- Type
String
- Description
The script to parse.
- Returns Value
- Type
Object|Array
- Description
The object or array represented by the script. Returns null if the script is null.
- permit
- Description
Whether the current user is allowed to access the specified module.
Example:
result = Wb.permit('admin/dbe.xwl');
result = Wb.permit('dbe');
- Parameters
- path
- Type
String
- Description
The relative path or shortcut of the module.
- checkLogin
- Type
Boolean
- Description
Whether to check if the module requires login.
- Returns Value
- Type
Boolean
- Description
`true` if access is allowed, `false` otherwise.
- permitx
- Description
Whether the current user is allowed to access the specified module. It will throw an exception if access
is not allowed.
- Parameters
- path
- Type
String
- Description
The relative path or shortcut of the module.
- checkLogin
- Type
Boolean
- Description
Whether to check if the module requires login.
- Returns Value
- Type
Boolean
- Description
`true` if access is allowed, `false` otherwise.
- toJava
- Description
Converts a JS Object/Array to a Java JSONObject/JSONArray. If the parameter is not an Object/Array,
it will be returned directly. See {#toJs} for reverse method.
- Parameters
- object
- Type
Object|Array
- Description
The value to be converted.
- Returns Value
- Type
JSONObject|JSONArray
- Description
The converted value or the the object parameter itself.
- toJs
- Description
Converts a Java JSONObject/JSONArray to a JS Object/Array. If the parameter is not an JSONObject/JSONArray,
it will be returned directly. See {#toJava} for reverse method.
- Parameters
- object
- Type
JSONObject|JSONArray
- Description
The value to be converted.
- Returns Value
- Type
Object|Array
- Description
The converted value or the the object parameter itself.
- getProxy
- Description
Gets the Proxy of a JSONObject/JSONArray object, which is used to access the JSONObject/JSONArray object like
JavaScript object/array.
Example:
let json = new JSONObject("{a: 123}");
let proxy = Wb.getProxy(json);
let value = proxy.a;
- Parameters
- object
- Type
JSONObject|JSONArray
- Description
The object to access.
- Returns Value
- Type
Proxy
- Description
The proxy object.
- hasRole
- Description
Determines whether the current user has certain roles.
- Parameters
- roles
- Type
String|String[]
- Description
The role ID or a list of roles.
- Returns Value
- Type
Boolean
- Description
`true` if the user has the role(s), `false` otherwise.
- hasRolex
- Description
Determines whether the current user has certain roles or the "admin" role.
- Parameters
- roles
- Type
String|String[]
- Description
The role ID or a list of roles.
- Returns Value
- Type
Boolean
- Description
`true` if the user has the role(s), `false` otherwise.
- forbidRole
- Description
Throws an access denial exception if the current user has certain roles. Note that "admin" users are exempt from
this restriction.
- Parameters
- roles
- Type
String|String[]
- Description
The role ID or a list of roles.
- msg
- optional
true
- Type
String
- Description
The exception message.
- permitRole
- Description
Determines whether the current user does not have certain roles. If the user lacks all of these roles, an access denial
exception will be thrown. Note that "admin" users are exempt from this restriction.
- Parameters
- roles
- Type
String|String[]
- Description
The role ID or a list of roles.
- msg
- optional
true
- Type
String
- Description
The exception message.
- checkDemo
- Description
Throws an access denial exception if the current version is the demo version.
- isObject
- checkNull
- Description
Throws a NullPointerException with the specified message if the object is null/undefined.
- Parameters
- object
- Type
Object
- Description
The object to check.
- message
- optional
true
- Type
String
- Description
The exception message.
- checkId
- Description
Throws exception with the specified message if the string is not a {#identifier|Wb.isIdentifier}.
- Parameters
- string
- Type
String
- Description
The string to check.
- allowDot
- Type
Boolean
- Description
Whether dots are allowed in the identifier.
- message
- optional
true
- Type
String
- Description
The exception message. Defaults to `Str.invalidValue`.
- getConn
- Description
Gets the database connection for the specified name from the current execution context buffer. Returns a new
database connection from the connection pool if it does not exist.
- Parameters
- name
- optional
true
- Type
String
- Description
The database source name. Defaults to the default database.
- Returns Value
- Type
Wb.Connection
- Description
The database connection.
- startTrans
- Description
Starts a database transaction for the specified database connection. Changes the transaction mode of the connection
from automatic commit to manual commit, so that subsequent database operations under this connection will be grouped
into a single transaction and only take effect after explicit commit.
- Parameters
- name
- optional
true
- Type
String|Wb.Connection
- Description
The database connection or source name. Defaults to the default database.
- isolation
- optional
true
- Type
String
- Description
The transaction isolation level. See {#Wb.Connection.isolation} for details.
- commit
- Description
Commits the database transaction for the specified database connection and sets {#Wb.Connection.autoCommit} to `true`.
- Parameters
- name
- optional
true
- Type
String|Wb.Connection
- Description
The database connection or source name. Defaults to the default database.
- rollback
- Description
Rolls back the transaction for the specified database connection and sets {#Wb.Connection.autoCommit} to `true`.
- Parameters
- name
- optional
true
- Type
String|Wb.Connection
- Description
The database connection or source name. Defaults to the default database.
- sync
- Description
Alias of {#Wb.Query.sync}.
- syncFree
- Description
Alias of {#Wb.Query.syncFree}.
- homeInfo
- Description
Sends a message to the specified users and displays it on their homepage.
- Parameters
- msg
- Type
String|Object
- Description
The message to send. If it's an object, it represents the configuration object for opening
via the {#Wb.open|Wb-Client.open} method, where `msg` is the message content and `newWin` set to `true` means opening
via the {#Wb.openWin|Wb-Client.openWin} method.
- userid
- optional
true
- Type
String|HttpServletRequest|HttpSession|Boolean
- Description
The target recipients. A String represents the user ID;
an HttpServletRequest object represents the user associated with the request; an HttpSession object represents the user
associated with the session; `true` represents all users. If omitted, the message is sent to the current user.
- type
- optional
true
- Type
String
- Description
The message type, defaulting to "info".
-'info': Information
-'warn': Warning
-'error': Error
- homeWarn
- Description
Sends a warning message to the specified users and displays it on their homepage. See {#Wb.homeInfo} for details.
- homeError
- Description
Sends an error message to the specified users and displays it on their homepage. See {#Wb.homeInfo} for details.
- setValue
- Description
Sets short user-related value into the database table. See {#getValue} for getting value.
- Parameters
- name
- Type
String
- Description
The value name.
- value
- optional
true
- Type
String|Number|Boolean|Date
- Description
The value. Maximum length is 200 characters. The value will be deleted
if omitted or null.
- userid
- optional
true
- Type
String
- Description
User ID. Defaults to the current user.
- type
- optional
true
- Type
Number
- Description
Value type, defaults to the value parameter type:
-0: String
-1: Number
-2: Date
-3: Boolean
- getValue
- Description
Gets short user-related value(s) from the database table. See {#setValue} for setting value.
- Parameters
- names
- Type
String|String[]
- Description
The value name or list of names.
- userids
- optional
true
- Type
String|String[]
- Description
User ID or list of user IDs. Defaults to the current user.
- Returns Value
- Type
Object|Object[]
- Description
The value or list of values. Returns null if not found.
- setResource
- Description
Sets large user-related value into the database table. See {#getResource} for getting large value.
- Parameters
- name
- Type
String
- Description
The value name.
- value
- optional
true
- Type
String|Object|Array|byte[]|InputStream
- Description
The value. The value will be deleted if omitted or null.
- userid
- optional
true
- Type
String
- Description
User ID. Defaults to the current user.
- type
- optional
true
- Type
Number
- Description
Value type, defaults to the value parameter type:
-0: String
-1: Object or Array
-2: byte[]
-3: InputStream
- getResource
- Description
Gets large user-related value(s) from the database table. See {#setResource} for setting value.
- Parameters
- names
- Type
String|String[]
- Description
The value name or list of names.
- userids
- optional
true
- Type
String|String[]
- Description
User ID or list of user IDs. Defaults to the current user.
- Returns Value
- Type
Object|Object[]
- Description
The value or list of values. Returns null if not found.
- accessDenied
- Description
Throws access denied exception.
- Parameters
- msg
- optional
true
- Type
String
- Description
Additional message.
- getOrderSql
- Description
Alias of {#Wb.Query.getOrderSql}.
- getRows
- Description
Executes SQL and gets the specified number of rows from the first ResultSet. See {#Wb.Query.run} for details.
- getAllRows
- Description
See {#getRows} for details. The difference from {#getRows} is that it defaults to getting all rows.
- sendRows
- Description
See {#getRows} for details. The difference from {#getRows} is that the result is sent to the client.
- getRow
- Description
Executes SQL and gets the first row from the first ResultSet. See {#Wb.Query.run} for details.
- Returns Value
- Type
Object
- Description
The first row or null if empty.
- sendRow
- Description
See {#getRow} for details. The difference from {#getRow} is that the result is sent to the client.
- getRowx
- Description
Executes SQL and gets columns, fields and the specified number of rows from the first ResultSet. The
`configs.paging` parameter defaults to `true` (pagination is enabled). See {#Wb.Query.run} for details.
- sendRowx
- Description
See {#getRowx} for details. The difference from {#getRowx} is that the result is sent to the client.
- getRecordx
- Description
See {#getRowx} for details. The difference from {#getRowx} is that each row is an array.
- sendRecordx
- Description
See {#sendRowx} for details. The difference from {#sendRowx} is that each row is an array.
- getRecords
- Description
See {#getRows} for details. The difference from {#getRows} is that each row is an array.
- getAllRecords
- Description
See {#getAllRows} for details. The difference from {#getAllRows} is that each row is an array.
- sendRecords
- Description
See {#sendRows} for details. The difference from {#sendRows} is that each row is an array.
- getRecord
- Description
See {#getRow} for details. The difference from {#getRow} is that the row is an array.
- sendRecord
- Description
See {#sendRow} for details. The difference from {#sendRow} is that the row is an array.
- getDict
- Description
See {#getRowx} for details. The difference from {#getRowx} is that the `configs.dict` parameter defaults to
`true` (dictionary is enabled).
- sendDict
- Description
See {#getDict} for details. The difference from {#getDict} is that the result is sent to the client.
- getDictRecords
- Description
See {#getDict} for details. The difference from {#getDict} is that each row is an array.
- sendDictRecords
- Description
See {#getDictRecords} for details. The difference from {#getDictRecords} is that the result is sent to the client.
- sql
- Description
Alias of {#Wb.Query.run}.
- sendSql
- Description
Run sql and send the results to the client. See {#Wb.Query.run} for details.
- sqlAll
- Description
Run SQL and retrieve results. The difference between this method and the {#Wb.sql} is that it retrieves all
BLOB fields by default.
- sqlRS
- Description
Run SQL and retrieve results. The difference between this method and the {#Wb.sql} is that it returns the
ResultSet by default.
- getExcelHtml
- Description
Alias of {#Wb.ExcelUtil.getExcelHtml}.
- getExcelFile
- Description
Alias of {#Wb.ExcelUtil.getExcelFile}.
- info
- Description
Outputs the information message to the IDE console.
- Parameters
- object
- Type
Object
- Description
The object to output.
- userid
- optional
true
- Type
String|Boolean
- Description
The ID of the user to send to. See `userid` parameter of {#Wb.send} for details.
- warn
- Description
Outputs the warning message to the IDE console.
- Parameters
- object
- Type
Object
- Description
The object to output.
- userid
- optional
true
- Type
String|Boolean
- Description
The ID of the user to send to. See `userid` parameter of {#Wb.send} for details.
- error
- Description
Outputs the error message to the IDE console.
- Parameters
- object
- Type
Object
- Description
The object to output.
- userid
- optional
true
- Type
String|Boolean
- Description
The ID of the user to send to. See `userid` parameter of {#Wb.send} for details.
- table
- Description
Outputs the information message as a table to the IDE console.
- Parameters
- object
- Type
Object
- Description
The object to output.
- userid
- optional
true
- Type
String|Boolean
- Description
The ID of the user to send to. See `userid` parameter of {#Wb.send} for details.
- debug
- Description
Outputs the debug message to the IDE console.
- Parameters
- object
- Type
Object
- Description
The object to output.
- userid
- optional
true
- Type
String|Boolean
- Description
The ID of the user to send to. For unlogged-in users, the user ID is specified by
the configuration item `sys.ss.anonymousDebugUser`. See `userid` parameter of {#Wb.send} for details.
- log
- Description
Outputs the log message to the IDE console.
- Parameters
- object
- Type
Object
- Description
The object to output.
- userid
- optional
true
- Type
String|Boolean
- Description
The ID of the user to send to. See `userid` parameter of {#Wb.send} for details.
- type
- optional
true
- Type
Number
- Description
Log type:
-0: Infomation
-1: Warning
-2: Error
-3: Log, default value.
-4: Table
-5: Debug
- recordDebug
- Description
Logs object as debug and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- recordInfo
- Description
Logs object as information and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- recordInfox
- Description
Db-Logs object as information and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- type
- optional
true
- Type
String
- Description
Log content type.
- recordWarn
- Description
Logs object as warning and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- recordWarnx
- Description
Db-Logs object as warning and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- type
- optional
true
- Type
String
- Description
Log content type.
- recordError
- Description
Logs object as error and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- recordErrorx
- Description
Db-Logs object as error and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- type
- optional
true
- Type
String
- Description
Log content type.
- recordExcept
- Description
Logs throwable object and outputs it to the current IDE console.
- Parameters
- throwable
- Type
Throwable
- Description
Exception object.
- recordExceptx
- Description
Db-Logs throwable object and outputs it to the current IDE console.
- Parameters
- throwable
- Type
Throwable
- Description
Exception object.
- type
- optional
true
- Type
String
- Description
Log content type.
- recordFatal
- Description
Logs object as fatal and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- recordTrace
- Description
Logs object as trace and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- recordLog
- Description
Logs object as the specified type and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- type
- optional
true
- Type
Number
- Description
Log type:
-0: Infomation, default value.
-1: Warning
-2: Error
-3: Debug
-4: Fatal
-5: Trace
- recordLogx
- Description
Db-Logs object as the specified type and outputs it to the current IDE console.
- Parameters
- object
- Type
Object
- Description
Object to log.
- type
- optional
true
- Type
String
- Description
Log content type.
- level
- optional
true
- Type
String
- Description
Log level:
-0: Infomation, default value.
-1: Warning
-2: Error
- toText
- Description
Convert an object to a string. Unlike `String(object)`, this method uses the {#Wb.encode} method to encode
non-Java object and array.
- Parameters
- object
- Type
Object
- Description
The object to convert.
- Returns Value
- Type
String|Object
- Description
The converted text.
- setContentType
- Description
Set the "content-type" information in the Response header.
- Parameters
- filename
- optional
true
- Type
String
- Description
The exported file name. Defaults to "data".
- contentType
- optional
true
- Type
String|Boolean
- Description
The content type, e.g., "image/png" for PNG images. `true` means forcing
download with "application/force-download". Defaults to "application/octet-stream".
- size
- optional
true
- Type
Number
- Description
The "content-length" in the Response header.
- exportData
- Description
Export data to the client.
- Parameters
- data
- optional
true
- Type
InputStream|Wb.File|File|String|byte[]
- Description
The data to export. If it's a string, it represents a file
path. Defaults to null, indicating empty data.
- filename
- optional
true
- Type
String
- Description
The name of the exported file. Defaults to "data".
- size
- optional
true
- Type
Number
- Description
The size of the data in bytes.
- contentType
- optional
true
- Type
String|Boolean
- Description
The content type, e.g., "image/png" for PNG images. `true` means forcing
download with "application/force-download". Defaults to "application/octet-stream".
- raise
- load
- Description
Load the specified js or mjs script file. If the file has already been loaded, it will not be loaded again. If the
file does not exist, an exception will be thrown.
Example:
Wb.load('wb/ss/my.js'); // Load the file under the application root folder
Wb.load('./foo/bar.mjs'); // Load the foo/bar.mjs file in the current folder
let module = Wb.load('../foo/my.mjs'); // Load the foo/my.mjs module file in the parent folder
module.exportObject.method(); // Call the method of the exported exportObject in the module
- Parameters
- path
- Type
String
- Description
File path. A path starting with "./" or "../" is relative to the current file; otherwise, it is
relative to the application root folder.
- Returns Value
- Type
Object
- Description
When loading an mjs file, returns the exported module object or default object (when exported using
`export default`); returns null for all other files.
- run
- Description
Run the XWL module server-side script without permission verification. See also {#Wb.invoke}.
Example:
Wb.run('dbe'); // Run the module via module shortcut "dbe"
Wb.run('my/file.xwl'); // Run the my/file.xwl file under the module root folder
Wb.run('./my/file.xwl'); // Run the my/file.xwl file in the current folder
Wb.run('../my/file'); // Run the my/file file in the parent folder(the .xwl extension can be omitted)
Wb.run('m?xwl=my/file', {param1: 'abc'}); // Run the module via module URI with params
- Parameters
- path
- Type
String
- Description
Module path. It can be a file relative path, URI, or module shortcut. A path starting with
"./" or "../" is relative to the current file; otherwise, it is relative to the module root folder.
- params
- optional
true
- Type
Object
- Description
Parameters object.
- Returns Value
- Type
Object
- Description
The return value of the script.
- invoke
- Description
Run the XWL module server-side script and output client-side content to the client without permission
verification. See also {#Wb.run}.
Example:
let text = Wb.invoke('module', params, true); // Get module client-side content to text variable
- Parameters
- path
- Type
String
- Description
Module path. It can be a file relative path, URI, or module shortcut. A path starting with
"./" or "../" is relative to the current file; otherwise, it is relative to the module root folder.
- params
- optional
true
- Type
Object
- Description
Parameters object.
- returnType
- optional
true
- Type
String|Boolean
- Description
The type of return value:
-null: Return value of the server-side script. Client-side content is directly output to response. Default.
-'text'/true: All client-side UTF-8 string content. Setting this value will capture the client-side output into a variable.
-'bytes': Similar to 'text'/true mode. Replaces strings with bytes.
-'resultText': Array of server-side script's return value and client-side string([returnValue, text]).
-'resultBytes': Array of server-side script's return value and client-side bytes([returnValue, bytes]).
- isClosure
- optional
true
- Type
Boolean
- Description
Whether to return closure scripts. `true` returns only the closure part; `false` returns the
complete HTML; null automatically determines based on the request header. Defaults to null.
- Returns Value
- Type
Object|Array
- Description
Result based on the type specified by "returnType".
- execute
- Description
Run the XWL module server-side script and return client-side closure script without permission verification. See
also {#Wb.run} and {#Wb.invoke}.
Example:
let clientScript = Wb.execute('admin/dbe');
- Parameters
- path
- Type
String
- Description
Module path. It can be a file relative path, URI, or module shortcut. A path starting with
"./" or "../" is relative to the current file; otherwise, it is relative to the module root folder.
- params
- optional
true
- Type
Object
- Description
Parameters object.
- Returns Value
- Type
String
- Description
The client-side closure script.
- startThread
- Description
Create a new thread and run the function immediately. See also {#Wb.poolStart}.
Example:
let map = Wb.startThread(params => {
Wb.log(params.date);
return { result: 'ok' };
}, { foo: 'bar', abc: 123, date: new Date() });
map.thread.join(); // Wait for thread
Wb.log(map.result); // show result: {result: 'ok'}
- Parameters
- fn
- Type
Function
- Description
The function to run. Since fn runs in an independent thread and execution context, it cannot
reference external variables. Only parameters in `params` object can be used.
- .params
- Type
Object
- Description
The parameters object.
- params
- optional
true
- Type
Object
- Description
The parameters object passed to fn.
- noContext
- optional
true
- Type
Boolean
- Description
Whether not to pass the HttpSession to the new thread.
- Returns Value
- Type
Map
- Description
The returned map, consisting of the following members:
-"thread": Thread object.
-"result": The result of the execution. Accessible only after the thread has finished running.
-"e": Exception object, if an exception occur.
- poolStart
- Description
Schedule the function to run in the thread pool. If not all threads in the thread pool are running, it will be executed
immediately in another thread; otherwise, it will be queued for execution. See also {#startThread}.
Example:
Wb.poolStart(params => {
Wb.log(params.date);
}, { foo: 'bar', abc: 123, date: new Date() });
- Parameters
- fn
- Type
Function
- Description
The function to run. Since fn runs in an independent thread and execution context, it cannot
reference external variables. Only parameters in `params` object can be used.
- .params
- Type
Object
- Description
The parameters object.
- params
- optional
true
- Type
Object
- Description
The parameters object passed to fn.
- noContext
- optional
true
- Type
Boolean
- Description
Whether not to pass the HttpSession to the new thread.
- Returns Value
- Type
ScheduledFuture
- Description
Java ScheduledFuture object. Use `future.cancel(false)` to cancel execution.
- setInterval
- Description
Execute the function periodically. Leaked interval tasks can be cleared via [Run] -> [Reload System] in
the IDE.
Example:
let future = Wb.setInterval(params => {
Wb.log(params.date);
return { result: 'ok' };
}, 1000, { foo: 'bar', abc: 123, date: new Date() });
Wb.sleep(3000);
future.cancel(false); // cancel setInterval
- Parameters
- fn
- Type
Function
- Description
The function to run. Since fn runs in an independent thread and execution context, it cannot
reference external variables. Only parameters in `params` object can be used.
- .params
- Type
Object
- Description
The parameters object.
- interval
- optional
true
- Type
Number
- Description
The interval in milliseconds.
- params
- optional
true
- Type
Object
- Description
The parameters object passed to fn.
- noContext
- optional
true
- Type
Boolean
- Description
Whether not to pass the HttpSession to the new thread.
- Returns Value
- Type
ScheduledFuture
- Description
Java ScheduledFuture object. Use `future.cancel(false)` to cancel execution.
- setTimeout
- Description
Execute the function after a specified delay. Leaked interval tasks can be cleared via [Run] -> [Reload System] in
the IDE.
Example:
let future = Wb.setTimeout(params => {
Wb.log(params.date);
return { result: 'ok' };
}, 1000, { foo: 'bar', abc: 123, date: new Date() });
// future.cancel(false); // cancel setTimeout
- Parameters
- fn
- Type
Function
- Description
The function to run. Since fn runs in an independent thread and execution context, it cannot
reference external variables. Only parameters in `params` object can be used.
- .params
- Type
Object
- Description
The parameters object.
- delay
- optional
true
- Type
Number
- Description
The delay in milliseconds.
- params
- optional
true
- Type
Object
- Description
The parameters object passed to fn.
- noContext
- optional
true
- Type
Boolean
- Description
Whether not to pass the HttpSession to the new thread.
- Returns Value
- Type
ScheduledFuture
- Description
Java ScheduledFuture object. Use `future.cancel(false)` to cancel execution.
- getModulePath
- Description
Get the relative path of the module file.
Example:
Wb.getModulePath('m?xwl=admin/user'); // returns: "admin/user.xwl"
Wb.getModulePath('user'); // returns: "admin/user.xwl"
Wb.getModulePath('admin/user.xwl'); // returns: "admin/user.xwl"
- Parameters
- path
- Type
String
- Description
Module file path, url or shortcut.
- Returns Value
- Type
String
- Description
Module path.
- toByteStream
- Description
Convert an InputStream to ByteArrayInputStream.
- Parameters
- inputStream
- Type
InputStream
- Description
InputStream object.
- Returns Value
- Type
ByteArrayInputStream
- Description
ByteArrayInputStream object.
- get
- Description
Get the attribute/parameter value from the HttpSession attribute, HttpServletRequest attribute, or
HttpServletRequest parameter in order of priority from highest to lowest.
For multi-valued parameters, returns an ArrayList of them. For a file parameter, returns a
{stream, name, size} HashMap; for multiple files parameter, returns an ArrayList of such HashMaps.
For getting multi-valued parameters, see {#Wb.getParams} for details.
Example:
let param = Wb.get('param');
let username = Wb.get('sys.username');
let object = Wb.get(); // Returns an object composed of all attributes/parameters
- Parameters
- name
- optional
true
- Type
String
- Description
The name of the attribute or parameter. Omitted to return an object of all values.
- Returns Value
- Type
Object
- Description
Attribute or parameter value, null if not found.
- getx
- Description
Get the attribute or parameter value. The difference from the {#Wb.get} method is that this method first gets
the parameter value specified by `name`, and if it is null, then gets the parameter value specified by `$name`.
- Parameters
- name
- optional
true
- Type
String
- Description
The name of the attribute or parameter. Omitted to return an object of all values.
- Returns Value
- Type
Object
- Description
Attribute or parameter value, null if not found.
- setLike
- Description
Set the specified parameter's value to a "%" wrapped wildcard; if enclosed in "[]", use the value without "[]".
This feature is useful, such as in SQL LIKE wildcard queries.
Example:
Params.param1 = 'abc';
Wb.setLike('param1'); // param1 is: "%abc%"
Params.param1 = '[def]';
Wb.setLike('param1'); // param1 is: "def"
- Parameters
- name
- Type
String
- Description
Parameter name.
- loadCall
- Description
Load a module and call the method of the module.
- Parameters
- modulePath
- Type
String
- Description
Module path. See `path` parameter of {#Wb.load} for details.
- functionName
- optional
true
- Type
String
- Description
The name of the method to call. Defaults to "default" method returned by the module.
- args
- optional
true
- Type
...Object
- Description
The method parameters.
- Returns Value
- Type
Object
- Description
The value returned by the method.
- getConfig
- Description
Get the value of the specified configuration item.
Example:
title = Wb.getConfig('sys.app.title');
- Parameters
- name
- Type
String
- Description
The full name of the configuration item.
- Returns Value
- Type
Object
- Description
The value of the configuration item.
- setConfig
- Description
Set the value of the specified configuration item.
- Parameters
- name
- Type
String
- Description
The full name of the configuration item.
- value
- Type
Object
- Description
The value of the configuration item.
- getString
- Description
Get string parameter value. See {#Wb.get} for details.
- Parameters
- name
- Type
String
- Description
The name of the attribute or parameter.
- Returns Value
- Type
String
- Description
The String value, null if not found.
- getBool
- Description
Get boolean parameter value. See {#Wb.get} for details.
- Parameters
- name
- Type
String
- Description
The name of the attribute or parameter.
- Returns Value
- Type
Boolean
- Description
The Boolean value, null if not found.
- getInt
- Description
Get integer parameter value. See {#Wb.get} for details.
- Parameters
- name
- Type
String
- Description
The name of the attribute or parameter.
- Returns Value
- Type
Number
- Description
The Integer value, null if not found.
- getFloat
- Description
Get float parameter value. See {#Wb.get} for details.
- Parameters
- name
- Type
String
- Description
The name of the attribute or parameter.
- Returns Value
- Type
Number
- Description
The Float value, null if not found.
- getDate
- Description
Get date parameter value. See {#Wb.get} for details.
- Parameters
- name
- Type
String
- Description
The name of the attribute or parameter.
- Returns Value
- Type
Date
- Description
The Date value, null if not found or the parameter value is an empty string.
- getObject
- Description
Get object/array parameter value. See {#Wb.get} for details.
Example:
let object = Wb.getObject('jsonObject');
let array = Wb.getObject('jsonArray');
- Parameters
- name
- Type
String
- Description
The name of the attribute or parameter.
- Returns Value
- Type
Object|Array
- Description
The Object/Array value, null if not found or the parameter value is an empty string.
- anonymous
- Description
Get parameter value(s) and convert it to List/Array. See {#Wb.get} for details.
Example:
let files = Wb.getParams('fileInput');
files.forEach(file => Wb.log(file.name));
- Parameters
- name
- Type
String
- Description
The name of the attribute or parameter.
- Returns Value
- Type
List|Array
- Description
The List/Array value, empty array if not found.
- has
- Description
Determines whether the specified parameter or attribute exists.
- Parameters
- name
- Type
String
- Description
The name of the parameter or attribute.
- Returns Value
- Type
Boolean
- Description
`true` if it exists, otherwise returns `false`.
- getHeader
- Description
Gets the first header value with the specified name from the current HttpServletRequest. Use {#getHeaders} to
get multiple header values.
- Parameters
- name
- Type
String
- Description
The name of the header.
- Returns Value
- Type
String
- Description
The header value. Returns null if not found.
- getHeaders
- Description
Gets the header values with the specified name from thecurrent HttpServletRequest. Use {#getHeader} to get
simple header value.
- Parameters
- name
- Type
String
- Description
The name of the header.
- Returns Value
- Type
String[]
- Description
The header values. Returns an empty array if not found.
- set
- Description
Sets values to the request's attributes.
Example:
Wb.set('name', value);
Wb.set({name1: value1, name2: value2});
- Parameters
- object
- Type
Object|String
- Description
An object containing attribute names and values, or a string representing a single
attribute name.
- value
- optional
true
- Type
Object
- Description
The value to set for the attribute if `object` is a string.
- checkLogin
- Description
Checks whether the current user is logged into the system. If not logged in, sends "$$login" for AJAX requests,
otherwise forwards to the login page.
- Returns Value
- Type
Boolean
- Description
`true` if successfully logged in, `false` otherwise.
- send
- Description
Sends the specified object to client(s). This method is used for both HTTP responses and WebSocket messages. For
HTTP responses, the buffer is flushed immediately after sending. If {#globalThis.inWSSession} is true, the object
is sent to the current WebSocket session.
Example:
Wb.send('text'); // Sends text
Wb.send(123); // Sends a number as a string
Wb.send(new Date()); // Sends a date as a string
Wb.send({foo: 'bar'}); // Sends an object as an encoded string
Wb.send([1, 2, 3]); // Sends an array as an encoded string
Wb.send(inputStream); // Sends an input stream. For WebSocket, only the first client can receive the data (unidirectional)
Wb.send(bytes); // Sends a byte array (byte[])
Wb.send('text', 'mySocket'); // Sends content to the current user's WebSockets with the name 'mySocket'
Wb.send('text', 'mySocket', 'admin'); // Sends content to all WebSockets of "admin" users with the name 'mySocket'
Wb.send({ type: 'log', style: 3, data: 'msg' }, '$ide', true); // Sends content to the IDE's WebSockets
- Parameters
- object
- Type
Object
- Description
The object to be sent. The object can be of any data type.
- socketName
- optional
true
- Type
String
- Description
WebSocket client name for WebSocket messages.
- userid
- optional
true
- Type
String|HttpServletRequest|HttpSession|Boolean
- Description
Specifies the target recipients for the WebSocket
message. A String represents a user ID; an HttpServletRequest object represents the user associated with the request;
an HttpSession object represents the user associated with the session; `true` represents all logged-in users;
`false` represents all non-logged-in users; "*" represents all users (both logged-in and non-logged-in).
The default value is null, indicating the message is sent to the current user.
- submit
- Description
Initiates an HTTP request to the specified URL. See also {#fetch}.
Example:
let html = Wb.submit('https://developer.mozilla.org'); // Fetches the page content
let object = Wb.submit({ url: 'http://localhost/wb/m?xwl=test', params: { foo: 'bar' }, all: true });
let result = Wb.submit({ url: 'http://localhost:8095/m?xwl=test404', all: true, silent: true });
- Parameters
- configs
- Type
Object|String
- Description
The request configuration object or URL.
- .url
- Type
String
- Description
The URL for the request.
- .params
- optional
true
- Type
Object
- Description
The request parameters object. If the `data` property is specified or the request uses
the `GET` method, the parameters will be encoded into the URL.
- .data
- optional
true
- Type
String|Object|Array|InputStream|byte[]
- Description
The payload data to be submitted in the request body. If data
is an Object or Array, the contentType will default to "application/json".
- .method
- optional
true
- Type
String
- Description
The HTTP method to use for the request, such as "POST" or "GET". Defaults to "POST" if
params or data is specified, otherwise "GET".
- .header
- optional
true
- Type
Object
- Description
The request header configuration object.
- .form
- optional
true
- Type
Boolean
- Description
Whether to submit parameters using "multipart/form-data" encoding. Defaults to `true` if
`params` contains InputStream/byte[]. When this parameter is specified, the `data` parameter becomes invalid.
- .request
- optional
true
- Type
HttpServletRequest
- Description
Adds header from the request object to this request's headers.
- .charset
- optional
true
- Type
String
- Description
The character encoding for sending text. Defaults to "utf-8".
- .resultCS
- optional
true
- Type
String
- Description
The character encoding used when decoding the response result as text. Defaults to
automatic detection.
- .text
- optional
true
- Type
Boolean
- Description
Whether to return the result as text. `true` returns text, `false` returns a byte array,
null automatically determines. Defaults to null.
- .all
- optional
true
- Type
Boolean
- Description
Whether to return an object containing multiple values, including:
-"result": The response body
-"header": The header object
-"cookie": The cookie value
-"code": The response status code
- .cookie
- optional
true
- Type
String
- Description
The cookie value to set.
- .ajax
- optional
true
- Type
Boolean
- Description
Whether to add the XMLHttpRequest request marker in the header.
- .silent
- optional
true
- Type
Boolean
- Description
Whether to suppress exceptions when the returned status code is not 200.
- .gzip
- optional
true
- Type
Boolean
- Description
Whether to automatically decompress gzip-compressed content. Defaults to true.
- .length
- optional
true
- Type
Number
- Description
The length of the content to send in bytes.
- .timeout
- optional
true
- Type
Number
- Description
The timeout for connection and reading in ms. 0 means never timeout. Defaults to 30000.
- .callback
- optional
true
- Type
Function
- Description
A callback function for reading stream data, typically used for reading potentially
large streams. When specified, the returned data will be null.
- ..inputStream
- optional
true
- Type
InputStream
- Description
The input stream.
- ..code
- optional
true
- Type
Number
- Description
The response status code.
- .host
- optional
true
- Type
String
- Description
The proxy server address.
- .port
- optional
true
- Type
Number
- Description
The proxy server port number. Defaults to 8080.
- .proxyType
- optional
true
- Type
String
- Description
The proxy server type. Defaults to "HTTP".
- object
- optional
true
- Type
String|Object|Array|InputStream|byte[]
- Description
Request parameters or payload data. Object type is
treated as `params`, others as `data`.
- Returns Value
- Type
String|byte[]|Object
- Description
The request result, which depends on the settings of the `text` and `all`
parameters. Returns null if there is no content.
- fetch
- Description
Initiates an HTTP request to the specified URL. The difference between this method and the {#submit} method is that the
default values of the `all` and `silent` parameters are both true.
- Returns Value
- Type
String|byte[]|Object
- Description
The request result.
- onReady
- Description
Method called after the system is ready.
- flush
- Description
Flushes the underlying response buffer to send pending data immediately.
- str
- Description
Gets the text corresponding to the specified keyword, based on the current client language. Uses the default language
if the client language is unrecognized.
Example:
let text = Wb.str('minLength', 6);
- Parameters
- key
- Type
String
- Description
Predefined string keyword.
- params
- optional
true
- Type
...Object
- Description
The parameters to populate into the keyword.
- Returns Value
- Type
String
- Description
Corresponding text value, or an empty string if the keyword is not found.
- getLanguage
- Description
Gets the closest language supported by the system based on the client's language. Uses the default language
if the client language is unrecognized.
- Returns Value
- Type
String
- Description
The closest language matching the client.
# Wb.Closable
A class that automatically executes the close method. After the current execution context ends, the system will
automatically call the {#close} method. This method will be executed regardless of exceptions or forced interruptions.
## Class Information
- class name
Wb.Closable
- Icon
undefined
- cname
closable
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.Closable
## Instance Methods
- constructor
- close
- Description
Method automatically executed after the current execution context ends. Inherit this class and override this method
to ensure resource close and release. If this method has already been called, it will not execute again.
- Parameters
- hasExcept
- Type
Boolean
- Description
Whether an exception occurred during the session execution.
# Wb.File
Server side file and folder access.
## Class Information
- class name
Wb.File
- Icon
undefined
- cname
file
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.File
## Static Properties
- appFolder
- Flags
Read-only
- Getter
- Type
Wb.File
- Description
The application's root folder.
- wbFolder
- Flags
Read-only
- Getter
- Type
Wb.File
- Description
The `wb` folder in the `{#app|appFolder}` folder.
- moduleFolder
- Flags
Read-only
- Getter
- Type
Wb.File
- Description
The `module` folder in the `{#wb|wbFolder}` folder.
## Instance Properties
- file
- Type
java.io.File
- Description
The associated Java file object.
- fileLock
- Flags
Private
- Type
Wb.Lock
- Description
The file lock.
- uniqueFile
- Flags
Read-only
- Getter
- Type
Wb.File
- Description
A uniquely named file in the current folder.
- minFile
- Flags
Read-only
- Getter
- Type
Wb.File
- Description
The minimized file associated with the current file. Returns null if not found.
- isMinFile
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the file is a minimized file, ending with `.min.*`.
- realFile
- Flags
Read-only
- Getter
- Type
java.io.File
- Description
Actual file/folder if the system has a configured sync folder (null if not in it).
- realFilePath
- Flags
Read-only
- Getter
- Type
String
- Description
Get the path of {#realFile} ("/" as separator).
- inAppFolder
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current file/folder is located within the root application folder (inclusive).
- inModuleFolder
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current file/folder is located within the module folder (inclusive).
- extension
- Getter
- Type
String
- Setter
- Type
String
- Description
Filename extension.
- name
- Getter
- Type
String
- Setter
- Type
String
- Description
Filename without path.
- normalName
- Flags
Read-only
- Getter
- Type
String
- Description
Filename without path and extension.
- path
- Flags
Read-only
- Getter
- Type
String
- Description
Full absolute path ("/" as separator).
- relPath
- Flags
Read-only
- Getter
- Type
String
- Description
Relative path ("/" as separator) within the root application folder (null if outside).
- modulePath
- Flags
Read-only
- Getter
- Type
String
- Description
Relative path ("/" as separator) within the module folder (null if outside).
- type
- Flags
Read-only
- Getter
- Type
String
- Description
File type name.
- exists
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current file exists.
- text
- Getter
- Type
String
- Setter
- Type
String
- Description
File content as UTF-8 encoded string. Note: Accessing this property re-reads/writes the file.
- object
- Getter
- Type
Object|Array
- Setter
- Type
Object|Array
- Description
File content as JSON object or array. Note: Accessing this property re-reads/writes
the file.
- prettyObject
- Getter
- Type
Object|Array
- Setter
- Type
Object|Array
- Description
File content as pretty JSON object or array. Note: Accessing this property
re-reads/writes the file.
- bytes
- Getter
- Type
byte[]
- Setter
- Type
byte[]
- Description
File content as byte array. Note: Accessing this property re-reads/writes the file.
- byteStream
- Flags
Read-only
- Getter
- Type
ByteArrayInputStream
- Description
In-memory byte array input stream of whole file content. No need to close
after access.
- stream
- Getter
- Type
InputStream
- Description
Buffered input stream of the file. Must call `stream.close()` manually after use.
- Setter
- Type
InputStream
- Description
Sets InputStream to write to file. Auto-closes stream after writing.
- base64
- Getter
- Type
String
- Setter
- Type
String
- Description
File content as Base64 text. Note: Accessing this property re-reads/writes the file.
- lastModified
- Getter
- Type
Number
- Setter
- Type
Number
- Description
File last modified time (milliseconds since epoch).
- lastModifiedDate
- Getter
- Type
Date
- Setter
- Type
Date
- Description
File last modified date.
- items
- Flags
Read-only
- Getter
- Type
Wb.File[]
- Description
Gets sub files/folders. Returns null if not a folder.
- orderItems
- Flags
Read-only
- Getter
- Type
Wb.File[]
- Description
Gets sorted sub files/folders by name. Returns null if not a folder.
- isFile
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current object is a file.
- isFolder
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current object is a folder.
- isModuleFile
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the current object is a module file.
- length
- Flags
Read-only
- Getter
- Type
Number
- Description
File size in bytes.
- hasItems
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the object has sub files or folders.
- parent
- Flags
Read-only
- Getter
- Type
Wb.File
- Description
Parent file; returns null if none.
## Static Methods
- checkContains
- Description
Checks whether the specified parent folder contains the given child folder or file.
- Parameters
- parent
- Type
Wb.File|File|String
- Description
Parent folder. Folder starting with '|' is relative to the application root.
- child
- Type
Wb.File|File|String
- Description
Child folder or file. Folder starting with '|' is relative to the application root.
- listRoots
- Description
Gets the list of system root files/folders. Returns null if there are none.
- Parameters
- sortType
- optional
true
- Type
String
- Description
Sort type. Defaults to no sorting.
-'name': File name
-'size': File size
-'type': File type
-'date': Modification date
- desc
- optional
true
- Type
Boolean
- Description
Whether to sort in descending order.
- Returns Value
- Type
Wb.File[]
- Description
List of system root files/folders.
## Instance Methods
- constructor
- Description
Creates a file/folder object.
Example:
file = new Wb.File('foo/bar');
file = new Wb.File(parent, 'sub'); // parent can be Wb.File/File/String
file = new Wb.File(sysFile); // sysFile is Java file
file = new Wb.File(wbFile); // wbFile is {#Wb.File} oject
- Parameters
- path1
- Type
Wb.File|File|String|Boolean
- Description
Full path to a file/folder, parent folder, or `true`(represents {#appFolder}).
- path2
- optional
true
- Type
String
- Description
Child file/folder path.
- lock
- Description
Locks the current file. Subsequent lock attempts on files with the same path will be blocked until the
{#unlock} method is called.
- unlock
- Description
Unlocks the current file.
- match
- Description
Determines whether the current file name matches the specified wildcard.
- Parameters
- wildcard
- Type
String
- Description
Wildcard pattern.
- caseSensitivity
- optional
true
- Type
Boolean
- Description
Case sensitivity option:
-false: Case-insensitive (default)
-true: Case-sensitive
-null: Auto-detect based on the OS's filename case sensitivity
- Returns Value
- Type
Boolean
- Description
`true` if matched, `false` otherwise.
- createFile
- Description
Creates a new file.
- Parameters
- silent
- optional
true
- Type
Boolean
- Description
Whether to suppress exceptions if creation fails.
- Returns Value
- Type
Boolean
- Description
`true` if the file does not exist and is successfully created; `false` otherwise.
- createFolder
- Description
Creates a new folder.
- Parameters
- createParents
- optional
true
- Type
Boolean
- Description
Whether to create the parent folder(s) if they do not exist.
- silent
- optional
true
- Type
Boolean
- Description
Whether to suppress exceptions if creation fails.
- Returns Value
- Type
Boolean
- Description
`true` if the folder does not exist and is successfully created; `false` otherwise.
- remove
- Description
Deletes the current file/folder.
- Parameters
- silent
- optional
true
- Type
Boolean
- Description
Whether to suppress exceptions when deletion fails.
- Returns Value
- Type
Boolean
- Description
`true` if succeeds, `false` otherwise.
- contains
- Description
Determines whether the current folder contains the specified file/folder.
- Parameters
- file
- Type
Wb.File|String
- Description
The file/folder to check.
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the current folder itself.
- Returns Value
- Type
Boolean
- Description
`true` if contains, `false` otherwise.
- syncFile
- Flags
Private
- Description
Copies the file to the sync folder if the sync folder exists.
- writeTo
- Description
Writes the file to the specified OutputStream.
- Parameters
- os
- Type
OutputStream
- Description
Output stream.
- readFrom
- Description
Writes the specified InputStream to the file. Closes the stream after writing.
- Parameters
- is
- Type
InputStream
- Description
Input stream.
- readString
- Description
Gets the file content as text.
- Parameters
- charset
- optional
true
- Type
String
- Description
Content charset (defaults to "utf-8").
- Returns Value
- Type
String
- Description
File text content.
- writeString
- Description
Writes text content to the file.
- Parameters
- content
- Type
String
- Description
Text content to write.
- charset
- optional
true
- Type
String
- Description
Content charset (defaults to "utf-8").
- checkExists
- Description
Checks whether the file exists; throws an exception if not.
- clearBuffer
- Description
Clears the file from buffer if buffered.
- listFiles
- Description
Gets the current folder's file list. Returns null if it is a file.
- Parameters
- sortType
- optional
true
- Type
String
- Description
Sort type. Defaults to no sorting.
-'name': File name
-'size': File size
-'type': File type
-'date': Modification date
- desc
- optional
true
- Type
Boolean
- Description
Whether to sort in descending order.
- Returns Value
- Type
Wb.File[]
- Description
List of sub files/folders.
- equals
- Description
Checks whether the current file path matches another file's (OS-dependent).
- Parameters
- file
- Type
Wb.File
- Description
File to compare.
- Returns Value
- Type
Boolean
- Description
`true` if paths match, `false` otherwise.
- each
- Description
Traverses the current folder, executing the function for each direct sub file/folder.
Example:
folder.each(file => console.log(file));
- Parameters
- fn
- Type
Function
- Description
Function to execute. Stops traversal if returns `false`.
- fn.file
- Type
Wb.File
- Description
Current file/folder.
- fn.index
- Type
Number
- Description
Current index.
- scope
- optional
true
- Type
Object
- Description
`this` in fn (defaults to the current folder).
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- some
- Description
Determines whether at least one file/folder in the current folder matches.
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.file
- Type
Wb.File
- Description
Current file/folder.
- fn.index
- Type
Number
- Description
Current index.
- scope
- optional
true
- Type
Object
- Description
`this` in fn (defaults to the current folder).
- Returns Value
- Type
Boolean
- Description
`true` if at least one file/folder matches, `false` otherwise.
- every
- Description
Determines whether all files/folders in the current folder match.
- Parameters
- fn
- Type
Function
- Description
The test function returns `true` to indicate a match, `false` otherwise.
- fn.file
- Type
Wb.File
- Description
Current file/folder.
- fn.index
- Type
Number
- Description
Current index.
- scope
- optional
true
- Type
Object
- Description
`this` in fn (defaults to the current folder).
- Returns Value
- Type
Boolean
- Description
`true` if all files/folders match, `false` otherwise.
- cascade
- Description
Recursively traverses the current folder, executing the function for each descendant file/folder.
Example:
folder.cascade(file => console.log(file));
- Parameters
- fn
- Type
Function
- Description
Function to execute. Stops traversal if returns `false`; skips subitems if returns null.
- fn.file
- Type
Wb.File
- Description
Current file/folder.
- fn.parent
- Type
Wb.File
- Description
Parent folder.
- scope
- optional
true
- Type
Object
- Description
`this` in fn (defaults to the current folder).
- includeSelf
- optional
true
- Type
Boolean
- Description
Whether to include the folder itself.
- ordered
- optional
true
- Type
Boolean
- Description
Whether to sort by filename.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- cascadeSome
- Description
Recursively determines whether at least one descendant file/folder matches the condition. See {#some} for details.
- Returns Value
- Type
Boolean
- Description
`true` if at least one file/folder matches, `false` otherwise.
- cascadeEvery
- Description
Recursively determines whether all descendant files/folders match the condition. See {#every} for details.
- Returns Value
- Type
Boolean
- Description
`true` if all files/folders match, `false` otherwise.
- cascadeSelf
- Description
Recursively traverses the current folder (includes itself). See {#cascade} for details.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- bubble
- Description
Traverses upward from the current file/folder, executing the function for each parent folder.
- Parameters
- fn
- Type
Function
- Description
Function to execute. Stops traversal if returns `false`.
- fn.parent
- Type
Wb.File
- Description
Parent folder.
- scope
- optional
true
- Type
Object
- Description
`this` in fn (defaults to the current file/folder).
- excludeSelf
- optional
true
- Type
Boolean
- Description
Whether to exclude the current file/folder itself.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- bubbleSome
- Description
Traverses upward to check whether at least one parent folder matches the condition. See {#some} for details.
- Returns Value
- Type
Boolean
- Description
`true` if at least one folder matches, `false` otherwise.
- bubbleEvery
- Description
Traverses upward to check whether all parent folders match the condition. See {#every} for details.
- Returns Value
- Type
Boolean
- Description
`true` if all folders match, `false` otherwise.
- bubbleParent
- Description
Traverses upward through parent folders (excludes current item by default). See {#bubble} for details.
- Returns Value
- Type
Boolean
- Description
`true` if traversal completed, `false` if interrupted.
- toString
- toJSON
# Wb.Connection
Wrapper around a Java java.sql.Connection. Automatically closes when its execution
context ends, ensuring safe resource and transaction cleanup without explicit disposal.
## Class Information
- class name
Wb.Connection
- Icon
undefined
- cname
connection
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.Closable -> Wb.Connection
## Static Properties
- connections
- Flags
Private
- Type
Object
- Description
Cached connections by name.
- isolationMap
- Type
Object
- Description
Maps isolation level names to JDBC constants.
## Instance Properties
- connection
- Type
java.sql.Connection
- Description
Underlying Java database connection.
- name
- Type
String
- Description
Database source name, if constructed by name.
- autoCommit
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether SQL statements auto-commit after execution.
- isolation
- Getter
- Type
String
- Setter
- Type
String
- Description
Transaction isolation level. Valid values:
-'none': Transactions not supported.
-'uncommitted': Dirty reads, non-repeatable reads, and phantoms possible.
-'committed': Prevents dirty reads; non-repeatable reads and phantoms possible.
-'repeatable': Prevents dirty and non-repeatable reads; phantoms possible.
-'serializable': Prevents dirty reads, non-repeatable reads, and phantoms.
- metaData
- Flags
Read-only
- Getter
- Type
java.sql.DatabaseMetaData
- Description
Metadata of the underlying database.
- dbName
- Flags
Read-only
- Getter
- Type
String
- Description
Database product name with version.
- schema
- Flags
Read-only
- Getter
- Type
String
- Description
Default schema of the database.
## Static Methods
- get
- Description
Returns the connection for the given name in the current execution context; creates a new one if not exists.
- Parameters
- name
- optional
true
- Type
String
- Description
Database source name. Defaults to the default source.
- Returns Value
- Type
Wb.Connection
- Description
The database connection.
## Instance Methods
- constructor
- Description
Constructor for creating a database connection instance.
- Parameters
- name
- optional
true
- Type
String|java.sql.Connection
- Description
The database source name or an existing Java Connection object.
-If a `String` is provided: Creates a new connection using DataSource.getConnection(name).
-If a `java.sql.Connection` object is provided: Uses this object directly as the connection.
-If a `null` is provided: Uses `Config.defaultSource` as the connection.
- createStatement
- Description
Creates a SQL statement wrapper.
- Parameters
- sql
- Type
String
- Description
The SQL string.
- isCall
- optional
true
- Type
Boolean
- Description
Whether to create a CallableStatement.
- returnKeys
- optional
true
- Type
Boolean
- Description
Whether to return generated keys.
- Returns Value
- Type
Wb.Statement
- Description
The statement wrapper.
- startTrans
- Description
Starts a transaction. See {#Wb.startTrans} for details.
- rollback
- Description
Rolls back the current transaction and sets {#Wb.Connection.autoCommit} to `true`.
- commit
- Description
Commits the current transaction and sets {#Wb.Connection.autoCommit} to `true`.
- close
- match
- Description
Determines whether the database product name contains all the given string (case-insensitive).
- Parameters
- key
- Type
String
- Description
Keyword(s) to match; multiple keywords separated by commas.
- Returns Value
- Type
Boolean
- Description
`true` if matches, `false` otherwise.
# Wb.Statement
Wrapper around a Java java.sql.Statement. Automatically closes when its execution
context ends, ensuring safe resource cleanup without explicit disposal.
## Class Information
- class name
Wb.Statement
- Icon
undefined
- cname
statement
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.Statement
## Instance Properties
- statement
- Type
java.sql.Statement
- Description
Underlying Java Statement object.
- connection
- Flags
Read-only
- Getter
- Type
java.sql.Connection
- Description
Associated database connection object.
## Instance Methods
- constructor
- Description
Constructor for creating Statement instance.
- Parameters
- st
- Type
java.sql.Statement
- Description
Java Statement object.
- close
- Description
Close the resource. If this method is not called, the resource will be closed after the execution context ends. Please
call this method in a timely manner to release resources.
- getResultSet
- Description
Get the result set.
- Returns Value
- Type
Wb.ResultSet
- Description
Result set.
- executeQuery
- Description
Execute a query and return the result set.
- Returns Value
- Type
Wb.ResultSet
- Description
Result set.
# Wb.ResultSet
Wrapper around a Java java.sql.ResultSet. Automatically closes when its execution
context ends, ensuring safe resource cleanup without explicit disposal.
## Class Information
- class name
Wb.ResultSet
- Icon
undefined
- cname
resultSet
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.ResultSet
## Instance Properties
- resultSet
- Type
java.sql.ResultSet
- Description
Underlying database result set.
- statement
- Flags
Read-only
- Getter
- Type
java.sql.Statement
- Description
Associated statement object.
- connection
- Flags
Read-only
- Getter
- Type
java.sql.Connection
- Description
Associated database connection object.
- metaData
- Flags
Read-only
- Getter
- Type
java.sql,ResultSetMetaData
- Description
Result set metadata.
- fieldTypes
- Flags
Read-only
- Getter
- Type
Object[]
- Description
Array of fields in {name: string, type: number} format, where type is a SQL type code.
- length
- Flags
Read-only
- Getter
- Type
Number
- Description
Virtual result set length. Used for the {#forEach} method.
- xLikeArray
- Flags
Read-only
- Getter
- Type
Number
- Description
Flag indicating if the object can be treated as an array.
## Instance Methods
- constructor
- Description
Constructor for creating ResultSet instance.
- Parameters
- rs
- Type
java.sql.ResultSet
- Description
Result set object.
- close
- Description
Close the resource. If this method is not called, the resource will be closed after the execution context ends. Please
call this method in a timely manner to release resources.
- forEach
- Description
Iterate through the entire result set.
- Parameters
- fn
- Type
Function
- Description
Callback function.
- .row
- Type
Object
- Description
Row data object.
- .index
- Type
Number
- Description
Row index.
- copyTo
- Description
Copy current result set data to the specified database table.
- Parameters
- tableName
- Type
String
- Description
Target table name.
- db
- optional
true
- Type
String|Wb.Connection
- Description
Database name. Uses the default database if not specified.
- truncate
- optional
true
- Type
Boolean
- Description
Whether to clear the target table before copying.
- startTrans
- optional
true
- Type
Boolean
- Description
Whether to start transaction. Defaults to `true`.
# Wb.Query
Database Query Class. Encapsulates core SQL operation utilities.
## Class Information
- class name
Wb.Query
- Icon
undefined
- cname
query
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.Query
## Static Properties
- matchCallReg
- Type
RegExp
- Description
Regex for matching stored procedure call syntax.
- result
- Type
String
- Description
Return value type of the {#!run} method.
-null: No result returned (caused by returns=false in the {#!run} method).
-"value": Single affected row count, result set, or undefined (SQL returns no value).
-"array": Multiple affected row counts or result sets returned.
-"batch": Array of affected row counts from batch execution results.
-"object": Object containing affected row count, result set, and output parameter values. Format:
$text:{$return: [affected row counts and resultSets in order...], param1: value1, param2: value2, ...}
- keys
- Type
Array
- Description
All key values returned after executing the statement (e.g., auto-increment field
values when inserting records).
## Static Methods
- removeComments
- Description
Remove single-line and multi-line comments from SQL statements.
- Parameters
- sql
- Type
String
- Description
Original SQL statement.
- Returns Value
- Type
String
- Description
SQL statement without comments.
- getParamsIf
- Description
Get an expression composed of non-null parameters from the "name=param" formatted parameter list.
- Parameters
- paramList
- optional
true
- Type
Array
- Description
Parameter list.
- noWhere
- optional
true
- Type
Boolean
- Description
Whether to exclude the "where" keyword.
- useOr
- optional
true
- Type
Boolean
- Description
Whether to join parameters with "or". `false` = join with "and", `true` = join with "or".
- params
- optional
true
- Type
Object
- Description
Parameter object. Defaults to {#Params|globalThis.Params}.
- Returns Value
- Type
String
- Description
Expression with non-null parameters joined by " and " (or " or " if useOr is `true`).
- run
- Description
Executes arbitrary SQL statements and retrieves results. After execution, all closable resources excluding
database connection are closed immediately by default. Database connection is automatically closed when the
execution context ends. To close the connection (that is not explicitly specified) immediately, use {#Wb.getConn}
to get the connection and call its `close` method.
Example:
Wb.sql('delete from table1 where 1 = 0', 'my-oracle'); // Returns 0; Wb.sql is an alias for Wb.Query.run
Wb.sql({sql: 'select * from table1 where field={?param?}', db: 'my-oracle', fn(row){ process(row); }});
Wb.sql('{call sp({?timestamp|inParam?}, {*cursor|p1*}, {!double|3|p2!})}'); // Access stored procedure
- Parameters
- configs
- Type
Object|String
- Description
Config object or SQL statement to execute.
- .sql
- optional
true
- Type
String|Wb.Connection
- Description
SQL statement. Supports input/output parameters:
-Input: {?type|scale|name?}
-Output: {*type|scale|name*}
-Input/Output: {!type|scale|name!}
`type` is optional; omitted type uses object type. `scale` is optional, but the placeholder "|" must be retained
if specified.
- .db
- optional
true
- Type
String|Wb.Connection
- Description
Database source name or connection. A string specifies the target database's source
name for the shared connection in the current context; defaults to the default database.
- .params
- optional
true
- Type
Object|Array
- Description
Input parameters for the SQL. Use array or forEach-supported object for batch processing.
- .contextParams
- optional
true
- Type
Boolean
- Description
Whether to look up parameters from context such as session attributes, request
attributes, and request parameters. Lookup priority: `configs.params` > session attributes > request attributes >
request parameters. Defaults to true.
- .trans
- optional
true
- Type
Boolean|String
- Description
Transaction isolation level for the current database connection.
-Set to `true` to enable a transaction with the default isolation level.
-Set to a string to specify an explicit isolation level (see {#Wb.Connection.isolation}).
If a transaction is already active on the given connection, this setting has no effect. When `configs.params` is an array,
this defaults to `true`. For manual transaction control, use {#Wb.startTrans}, {#Wb.commit} and {#Wb.rollback}.
- .commit
- optional
true
- Type
Boolean
- Description
Whether to automatically commit the transaction upon successful completion. Only applies if the
transaction is active.
- .fn
- optional
true
- Type
Function
- Description
Callback function to process result rows and output parameters. The system passes each row or
output parameter to this function sequentially. When processing a result set, each row is passed as an argument;
returning `false` stops iteration of the current result set.
- ..item
- optional
true
- Type
Object|Number
- Description
The current row data, affected row count, or output parameter value.
- ..name
- optional
true
- Type
String|Number
- Description
Name of an output parameter or index of a result set. When multiple result sets are
returned, parameters with the same name or index belong to the same result set.
- ..index
- optional
true
- Type
Number
- Description
Current row index while processing a result set. This parameter is unused for non-result-set data.
- .unique
- optional
true
- Type
Boolean
- Description
When performing insert/update/delete operations, enforces that exactly one row is affected;
otherwise, throws an exception. Automatically starts a transaction if enabled.
- .batch
- optional
true
- Type
Boolean
- Description
Whether to use batch execution when `params` is an array. Defaults to true.
- .rs
- optional
true
- Type
Boolean|Number|Array
- Description
Controls whether and how result set records are fetched:
-false: Skip reading records entirely (useful for performance when results are irrelevant).
-true: Return a {#Wb.ResultSet} object instead of an array of rows. Note: Non-output-parameter result sets are closed\
when advancing to the next result set, so only the first result set is accessible. Output-parameter result sets remain\
available. The associated `ResultSet` and `Statement` will not be auto-closed; they are closed when the execution context\
ends. Explicitly closing is recommended.
-number: Maximum number of rows to read. Use `configs.fn` for large result sets to avoid memory overflow. -1 means read\
all rows.
-number[]: Array specifying max rows per result set, e.g., [0, 100, null, -1] means: skip first result set, read 100 rows\
from second, read {#Wb.maxRows} rows from third, read all from fourth.
-null: Reads all records if `configs.fn` is given; otherwise, read {#Wb.maxRows} rows. (default)
- .blob
- optional
true
- Type
Boolean|String
- Description
Whether to load BLOB field content into memory as a byte stream. If `'text'`, the content
is returned as a Base64-encoded string.
- .clob
- optional
true
- Type
Boolean|Number
- Description
Whether to load CLOB field content as a string. If a number, it specifies the maximum number
of characters to read. Defaults to `true`.
- .array
- optional
true
- Type
Boolean
- Description
Whether generated record data uses an array; `true` uses array, `false` uses object.
- .from
- optional
true
- Type
Number|Boolean
- Description
Starting row index (0-based) for each result set. Defaults to the context parameter
`_from`. If unset, starts from the first row. Effective range is limited by `configs.rs`. Set to `false` to disable the
start limit explicitly.
- .to
- optional
true
- Type
Number|Boolean
- Description
Ending row index (0-based) for each result set. Defaults to the context parameter `_to`. If
unset, ends at the last row. Effective range is limited by `configs.rs`. Set to `false` to disable the end
limit explicitly.
- .paging
- optional
true
- Type
Boolean|String
- Description
Whether to enable automatic pagination based on `configs.from` and `configs.to`. Set to
`true` to enable application-side pagination, or to "db" to enable simple sql database-side pagination.
- .long
- optional
true
- Type
Boolean
- Description
Whether to use long integer for row counts that may exceed java `Integer.MAX_VALUE`. Throws an
error if the underlying database does not support it.
- .fetchSize
- optional
true
- Type
Number
- Description
Number of rows to fetch from the database in each batch. Default (`null` or 0) means auto.
- .timeout
- optional
true
- Type
Number
- Description
SQL execution timeout in seconds. Default (`null` or 0) means no timeout.
- .returns
- optional
true
- Type
Boolean
- Description
Whether to return execution results (affected counts, result sets, output parameters). Defaults
to `false` if `configs.fn` is provided; otherwise `true`.
- .returnObject
- optional
true
- Type
Boolean
- Description
Whether to always return results as an object. See {#result} for details.
- .columns
- optional
true
- Type
Boolean|String
- Description
Whether to include column metadata in the result: `true` includes standard column
info; 'tree' includes the tree-control-specific column structure (row numbers are disabled). The default row number
column's {#dictionary|System.Development.Dictionary Config} is defined by "_rowNum". Defaults to `true`.
- .nullValue
- optional
true
- Type
Boolean
- Description
Whether to include `null` values in the result. Defaults to `true`;
- .dict
- optional
true
- Type
String|Array|Boolean
- Description
A list or array of {#dictionary|System.Development.Dictionary Config} group
names used sequentially when fetching data; separate multiple names with commas if specified as a string. Set to true
to use all dictionaries without a specified group name, and when multiple group names are specified, appending "false"
means excluding all dictionaries without a specified group name, otherwise fields not found will be searched in all
dictionaries that have no specified group name.
- .kv
- optional
true
- Type
Object|String
- Description
Mapping from field names to {#key names|System.Development.Key Value Editor}; a string
means field names equal key names, as a comma-separated list.
- .total
- optional
true
- Type
Number|Boolean|String|Object
- Description
Total record count (valid only when `configs.columns` is specified);
set to `false` to exclude it, `true` to return the result set's total count. A string is used to generate the total-record
count SQL; an object is the config object for the {#Wb.getRecord} method to retrieve the total record count. Defaults
to true.
- .dateFormat
- optional
true
- Type
Boolean
- Description
Whether to format datetime values using `Str.dateTimeFormat`.
- .returnKeys
- optional
true
- Type
Boolean|String
- Description
Whether to return automatically created key values, such as auto-increment field
values when adding records; the returned key values can be accessed via the {#keys} property. The value 'all' means
returning an array composed of the entire {#keys} result set.
- .readonly
- optional
true
- Type
Boolean
- Description
Whether to run in read-only mode. Enables special handling (e.g., creates read-only text
editors for VARCHAR fields >255 chars, disables BLOB editing, etc.).
- dbOrFn
- optional
true
- Type
String|Wb.Connection|Function
- Description
Database name/connection or callback function. See `configs.db` or
`configs.fn` for details; this parameter overrides them.
- fn
- optional
true
- Type
Function
- Description
Callback function. See `configs.fn` for details; this parameter overrides it.
- Returns Value
- Type
Object|Array
- Description
All return values after SQL execution, including the number of affected records, result sets,
output parameters, and arrays or objects composed of these values. The returned data has some possible types,
determinable via the {#result} property. Values are returned only when the `configs.returns` parameter is true;
otherwise undefined is returned.
- getPagingSql
- Description
Generates paginated SQL for database side pagination.
- Parameters
- originalSql
- Type
String
- Description
The original SQL without comments.
- begin
- Type
Number
- Description
The zero-based starting row index.
- end
- Type
Number
- Description
The zero-based ending row index.
- dbName
- Type
String
- Description
The database product name.
- Returns Value
- Type
Object
- Description
Paging SQL and total SQL in the format `{ sql, total }` or null if not created.
- loadKeys
- Description
Loads key-value pairs, such as auto-incremented primary key values when inserting records.
- Parameters
- st
- Type
java.sql.Statement
- Description
The statement object.
- type
- optional
true
- Type
String
- Description
If 'all', returns an array of all field values; otherwise, returns an array containing only the
first field value.
- getArraySql
- Description
Generates an SQL `in` clause expression and its corresponding parameter list from the given array.
Example:
let sqlMap = Wb.Query.getArraySql(['role1', 'role2', 'role3'], 'varchar');
let recs = Wb.getRecords({
sql: 'select role_name from wb_role where sid in (' + sqlMap.sql + ')',
params: sqlMap.params
});
- Parameters
- values
- Type
Array
- Description
The array of parameter values.
- type
- optional
true
- Type
String
- Description
The optional parameter type (e.g., 'varchar').
- Returns Value
- Type
Object
- Description
An object containing:
-sql: the generated SQL fragment for the IN clause
-params: the parameter value map
- getData
- Flags
Private
- Description
Gets data from a result set.
- Parameters
- resultSet
- Type
ResultSet
- Description
The result set to read from.
- configs
- optional
true
- Type
Object
- Description
The Configuration object. See `configs` parameter of {#run} method for details.
- rsName
- optional
true
- Type
String|Number
- Description
The name or index of the result set used in callback function.
- rs
- optional
true
- Type
Number
- Description
Maximum number of records to read. See `rs` parameter of {#run} method for details.
- Returns Value
- Type
Object
- Description
An object containing metadata and record data, or undefined if unavailable:
-columns: column metadata.
-fields: field metadata.
-items: array of record data.
-total: Total record count.
- getRows
- Description
Get records from the result set, where each record is composed of an object. The result set will be closed after
reading. See also {#getRecords}.
- Parameters
- resultSet
- Type
ResultSet
- Description
Result set.
- configs
- optional
true
- Type
Object
- Description
The Configuration object. See `configs` parameter of {#run} method for details.
- rs
- optional
true
- Type
Number
- Description
Maximum number of records to read. See `rs` parameter of {#run} method for details.
- Returns Value
- Type
Array
- Description
Array composed of record data object.
- getAllRows
- Description
Get all records from the result set, where each record is composed of an object. See {#getRows} for details.
- getRecords
- Description
Get records from the result set, where each record is composed of an array. The result set will be closed after
reading. See also {#getRows}.
- Parameters
- resultSet
- Type
ResultSet
- Description
Result set.
- configs
- optional
true
- Type
Object
- Description
The Configuration object. See `configs` parameter of {#run} method for details.
- rs
- optional
true
- Type
Number
- Description
Maximum number of records to read. See `rs` parameter of {#run} method for details.
- Returns Value
- Type
Array
- Description
Array composed of record data array.
- getAllRecords
- Description
Get all records from the result set, where each record is composed of an array. See {#getRecords} for details.
- createMeta
- Description
Creates metadata for the specified column of the result set.
- Parameters
- fieldName
- Type
String
- Description
Field name.
- dbType
- Type
String
- Description
Field type.
- meta
- Type
Object
- Description
Result set metadata.
- index
- Type
Number
- Description
Column index.
- useArray
- Type
Boolean
- Description
Whether the result uses array format.
- dateFormat
- Type
Boolean
- Description
Whether datetime-type data uses the local full format.
- readBlob
- Type
Boolean|String
- Description
Whether to read BLOB fields. Use "text" for base64 representation.
- roMode
- Type
Boolean
- Description
Whether in read-only mode.
- dict
- Type
Array|Boolean
- Description
Dictionary group name list.
- Returns Value
- Type
Object
- Description
Column metadata object.
- notUnique
- Flags
Private
- Description
Throws an update non-unique exception.
- setParams
- Flags
Private
- Description
Sets input and output parameters for the statement.
- Parameters
- st
- Type
Statement
- Description
Statement object.
- meta
- Type
Array
- Description
Parameter metadata.
- params
- Type
Object
- Description
Parameter object.
- contextParams
- Type
Boolean
- Description
Whether to automatically reference parameters from the context.
- sql
- Type
String
- Description
SQL text.
- getParams
- Flags
Private
- Description
Gets output parameter values of the statement.
- Parameters
- st
- Type
Statement
- Description
Statement object.
- meta
- Type
Array
- Description
Parameter metadata.
- result
- Type
Object
- Description
Output parameters are added to this object. The key is the parameter name and the value
is the parameter value.
- configs
- Type
Object
- Description
The Configuration object. See `configs` parameter of {#run} method for details.
- setObject
- Description
Sets the parameter value for the statement object.
- Parameters
- st
- Type
Statement
- Description
Statement object.
- index
- Type
Number
- Description
Index number(1-based).
- value
- Type
Object
- Description
Value to set.
- type
- optional
true
- Type
Number
- Description
Type of the value to set; defaults to auto.
- scale
- optional
true
- Type
Number
- Description
The number of digits after the decimal point.
- toNumber
- Flags
Private
- Description
Converts a value to the specified numeric type.
- Parameters
- value
- Type
Object
- Description
The value to convert.
- type
- Type
String
- Description
Target numeric type.
- Returns Value
- Type
Object
- Description
Numeric value of the specified type.
- getObject
- Description
Retrieves the value of the specified name or index from ResultSet/CallableStatement.
- Parameters
- st
- Type
ResultSet|Statement
- Description
Result set or statement object.
- index
- Type
String|Number
- Description
Field/parameter name or index number.
- type
- optional
true
- Type
Number
- Description
Value type; defaults to auto.
- readClob
- optional
true
- Type
Boolean|Number
- Description
Whether to read CLOB content. Returns "(clob)" if content exists but is
not read. Numeric value indicates maximum character count. Defaults to true.
- readBlob
- optional
true
- Type
Boolean|String
- Description
Whether to read BLOB content. Returns "(blob)" if content exists but is
not read. Use "text" for base64 representation.
- Returns Value
- Type
Object
- Description
Retrieved field/parameter value.
- readBlob
- Flags
Private
- Description
Reads content from the Blob and closes the Blob.
- Parameters
- blob
- Type
Blob
- Description
Blob object.
- read
- optional
true
- Type
Boolean|String
- Description
Whether to read the content. Use "text" for base64 representation.
- Returns Value
- Type
ByteArrayInputStream|String
- Description
ByteArrayInputStream, base64 text, or null.
- readStream
- Flags
Private
- Description
Reads content from the input stream and converts it to ByteArrayInputStream or base64 text.
- Parameters
- is
- Type
InputStream
- Description
Input stream.
- read
- optional
true
- Type
Boolean|String
- Description
Whether to read the content. Use "text" for base64 representation.
- Returns Value
- Type
ByteArrayInputStream|String
- Description
ByteArrayInputStream, base64 text, or null.
- readClob
- Flags
Private
- Description
Reads the string from the Clob and closes the Clob.
- Parameters
- clob
- Type
Clob
- Description
Clob object.
- read
- optional
true
- Type
Boolean
- Description
Whether to read the content.
- Returns Value
- Type
String
- Description
The string or null.
- readText
- Flags
Private
- Description
Reads the string from the Reader and closes the Reader.
- Parameters
- reader
- Type
Reader
- Description
String reader.
- read
- optional
true
- Type
Boolean|Number
- Description
Whether to read the content. Numeric value indicates the maximum number of characters to read.
- Returns Value
- Type
String
- Description
The string or null.
- compile
- Flags
Private
- Description
Compiles the SQL statement, processes its input and output parameters, and returns the statement object and parameter
list. Input parameters are represented by {?name?}, output parameters by {name}, and input-output parameters by
{!type|scale|name!}.
- Parameters
- conn
- Type
Wb.Connection
- Description
Connection object.
- sql
- Type
String
- Description
SQL statement.
- returnkeys
- optional
true
- Type
Boolean
- Description
Whether to return key values.
- commentsRemoved
- optional
true
- Type
Boolean
- Description
Whether the comments are removed.
- Returns Value
- Type
Array
- Description
Array consisting of the statement object, SQL, and parameter list.
- createSQL
- Description
Creates select, insert, update, and delete SQL for the specified table.
Example:
result = Wb.Query.createSQL({tableName: 'dbo.MyTable', db: 'myDb'});
- Parameters
- configs
- Type
Object|String
- Description
Configuration object or table name.
- .tableName
- Type
String
- Description
Table name. If the table name contains ".", the part before "." represents the schema name.
- .db
- optional
true
- Type
String|Wb.Connection
- Description
Database name or connection.
- .fields
- optional
true
- Type
String|String[]
- Description
Field list before the WHERE clause. If a string is provided, it represents a
comma-separated list of fields. All fields are used by default.
- .excludeFields
- optional
true
- Type
String|String[]
- Description
Fields to exclude from the list before the WHERE clause. If a string is
provided, it represents a comma-separated list of fields.
- .whereFields
- optional
true
- Type
String|String[]
- Description
Field list after the WHERE clause. If a string is provided, it represents
a comma-separated list of fields.
- .silent
- optional
true
- Type
Boolean
- Description
Whether to throw an exception when no available fields exist. Can be set to `true` when only
needing to generate an insert SQL.
- Returns Value
- Type
Object
- Description
Object containing {select, insert, update, del, updateFields, updateBegin, updateEnd} SQLs:
-select: select SQL.
-insert: insert SQL.
-update: update SQL.
-del: delete SQL.
-updateFields: update fields.
-updateBegin: update begin segment sql.
-updateEnd: update end segment sql.
- getUniqueFields
- Description
Retrieves the list of unique field names for the specified table.
- Parameters
- conn
- Type
Wb.Connection
- Description
Database connection.
- tableName
- Type
String
- Description
Table name.
- Returns Value
- Type
Array
- Description
List of unique field names. Returns null if none are found.
- sync
- Description
Performs CRUD operations on the specified table based on data. Insert data via the "insert" property, update data via
"update", and delete data via "del". Data can be record object or array. Each object property represents a field. Fields
prefixed with "$" indicate original field, used for the "WHERE" clause in "update" or "delete" statements.
Example:
// Batch insert/update/delete on the specified table within a transaction
Wb.sync({
tableName: 'my_table',
insert: [{ field1: 'ab', field2: 12 }, { field1: 'cd', field2: 34 }],
update: [{ field1: 'newValue', $field1: 'oldValue' }], // $field1 for WHERE clause in update
del: [{ $field1: 'xyz' }] // / $field1 for WHERE clause in delete
});
// Query data by condition
Wb.sync({
tableName: 'my_table',
fields: 'field1, field2',
select: {$field1: 'xyz'}
});
// Download specified BLOB field of target record as file
Wb.sync({
tableName: 'my_table',
download: { _meta: { fieldName: 'blob1', filename: 'file.png' }, $field1: 'abc' }
});
- Parameters
- configs
- Type
Object|String
- Description
Configuration object or table name. See `configs` of {#run} for details.
- .tableName
- Type
String
- Description
Table name.
- .db
- optional
true
- Type
String|Wb.Connection
- Description
Database name or connection.
- .insert
- optional
true
- Type
Array|Object|String
- Description
The inserted data or its list. If a string, must be JSON-stringified.
- .update
- optional
true
- Type
Array|Object|String
- Description
The updated data or its list. If a string, must be JSON-stringified.
- .del
- optional
true
- Type
Array|Object|String
- Description
The deleted data or its list. If a string, must be JSON-stringified.
- .select
- optional
true
- Type
Object|String
- Description
The selected parameter data. If a string, must be JSON-stringified.
- .download
- optional
true
- Type
Object|String
- Description
BLOB download config. "_meta" contains {fieldName: target field,
fileName: [file name], size: [file size]}; other properties are query params. If a string, must be JSON-stringified.
- .contextParams
- optional
true
- Type
Boolean
- Description
Whether to automatically reference parameters from the context.
- .trans
- optional
true
- Type
Boolean|String
- Description
Transaction isolation level.
- .commit
- optional
true
- Type
Boolean
- Description
Whether to automatically commit the transaction upon successful completion.
- .fields
- optional
true
- Type
String|String[]
- Description
Field list before the WHERE clause. If a string is provided, it represents a
comma-separated list of fields. All fields are used by default.
- .excludeFields
- optional
true
- Type
String|String[]
- Description
Fields to exclude from the list before the WHERE clause. If a string is
provided, it represents a comma-separated list of fields.
- .whereFields
- optional
true
- Type
String|String[]
- Description
Field list after the WHERE clause. If a string is provided, it represents
a comma-separated list of fields.
- .consistent
- optional
true
- Type
Boolean
- Description
Whether all UPDATE operations use the same fixed set of fields (enables batch optimization).
- `true`: The field list is fixed (typically from `configs.fields`). Any field not provided will be set to `NULL`.
- `false`: Records may contain different fields.
Defaults to `true` if `configs.fields` is specified; otherwise `false`.
- .unique
- optional
true
- Type
String|Boolean
- Description
Whether to enforce unique update/delete. Defaults to `true`.
- .batch
- optional
true
- Type
Boolean
- Description
Whether to use batch execution. Defaults to `true`.
- .returnKeys
- optional
true
- Type
Boolean|String
- Description
Whether to return automatically created key values. See `returnKeys` of {#run}.
- .paging
- optional
true
- Type
Boolean|String
- Description
Whether to enable automatic pagination. Defaults to `true`.
- .send
- optional
true
- Type
Object|Boolean
- Description
Object to send to the client after method completion, or `true` to flush the buffer
immediately.
- syncFree
- Description
Performs CRUD operations on the specified table. The difference from the {#sync} method is that the default value of
the `configs.unique` property is `false`.
- getOrderSql
- Description
Generates an `ORDER BY` SQL clause based on the specified parameters.
Example:
sql = Wb.getOrderSql({ field1: 'a.field1', field2: 'b.field3', $: 'a' });
- Parameters
- map
- optional
true
- Type
Object
- Description
Maps sorter fields to SQL column expressions; unmapped fields use `map.$` as table alias.
- sorters
- optional
true
- Type
Array
- Description
Sort field data. Defaults to the "_sort" parameter from the context.
- orderPrefix
- optional
true
- Type
Boolean
- Description
Whether to automatically add the "ORDER BY" prefix. Defaults to true.
- Returns Value
- Type
String
- Description
The ORDER BY SQL clause. Returns an empty string if there are no valid sort fields.
Generates an `ORDER BY` SQL clause based on the specified parameters.
- init
- Flags
Private
- Description
Init the db utils.
- make
- Description
Generates multiple SQL equality expressions of the form `name = {?...?}`, one for each value in the list,
joined by "or".
- Parameters
- name
- Type
String
- Description
The field name.
- values
- Type
Array
- Description
List of values.
- type
- optional
true
- Type
String
- Description
The type name used in the parameter placeholder.
- Returns Value
- Type
String
- Description
A SQL expression fragment.
# Wb.ServerDict
Dictionary data utility class.
## Class Information
- class name
Wb.ServerDict
- Icon
undefined
- cname
dict
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.ServerDict
## Static Methods
- findItem
- Description
Finds the dictionary item with the specified name under the given groups.
- Parameters
- groups
- Type
String[]|Boolean
- Description
List of group names, or `true` to search ungrouped entries only.
- name
- Type
String
- Description
Dictionary item name.
- Returns Value
- Type
Object
- Description
The dictionary item, or `null` if not found.
- getKV
- Description
Retrieves the value corresponding to a key for the specified dictionary entry.
- Parameters
- groups
- Type
String[]|Boolean
- Description
List of group names, or `true` to search ungrouped entries only.
- name
- Type
String
- Description
Dictionary item name.
- key
- Type
*
- Description
The key whose associated value is to be retrieved.
- Returns Value
- Type
*
- Description
The mapped value or `null` if not found.
- getKVList
- Description
Gets the key-value list data for the specified key name. Throws an error if the key name does not exist.
- Parameters
- keyName
- Type
String
- Description
Key name.
- Returns Value
- Type
Array[]
- Description
key-value list.
- getKeyNames
- Description
Get all key name list.
- Parameters
- search
- optional
true
- Type
String
- Description
Search Key name.
- Returns Value
- Type
String[]
- Description
Key name list.
- applyValues
- Description
Adds key-value values to the specified rows.
Example:
result = Wb.ServerDict.applyValues({gender: 0}, {gender: 'gender'});
result = Wb.ServerDict.applyValues([{gender: 0}, {gender: 1}], 'gender');
- Parameters
- rows
- Type
Object|Object[]
- Description
Data row or an array of rows.
- kv
- Type
String|String[]
- Description
Key-value setting.
- Returns Value
- Type
Object|Object[]
- Description
Rows parameter itself.
# Wb.Lock
Thread lock for concurrent access control of threads.
Example:
let lock = new Wb.Lock('my.file');
try{
...
}finally{
lock.unlock();
}
## Class Information
- class name
Wb.Lock
- Icon
undefined
- cname
lock
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.Closable -> Wb.Lock
## Instance Properties
- locked
- Flags
Private
- Type
Boolean
- Description
Whether the lock is locked.
## Instance Methods
- constructor
- Description
Constructs a lock and locks the current thread, preventing other threads from acquiring the same lock. The lock will
be automatically released when the execution context ends.
- Parameters
- name
- Type
String
- Description
Lock name. When other threads try to acquire a lock with the same name, they will be blocked
until the lock is unlocked.
- fair
- optional
true
- Type
Boolean
- Description
Whether it's a fair lock (defaults to non-fair). This parameter is invalid if the lock
already exists.
- unlock
- Description
Unlocks the lock.
- close
# Wb.MailSender
Email sender for sending emails.
Example:
let sender = new Wb.MailSender('smtp.xx.com', 'user@xxx.com', 'password', 'user@xxx.com', 'authPassword',
{ 'mail.smtp.auth': true, 'mail.smtp.sendpartial': true });
try {
sender.send('user@xxx.com', 'user@site1.com', 'title', 'Hello world '); // HTML content
sender.sendText('user@xxx.com', 'user@site2.com', 'title', 'Hello world'); // Plain text content
} finally {
sender.close();
}
## Class Information
- class name
Wb.MailSender
- Icon
undefined
- cname
mailSender
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.MailSender
## Instance Properties
- session
- Flags
Read-only
- Type
Session
- Description
The mail sender session.
- transport
- Flags
Read-only
- Type
Transport
- Description
The mail sender transport.
## Instance Methods
- constructor
- Description
Constructs a mail sender.
- Parameters
- smtp
- Type
String
- Description
SMTP server address.
- username
- Type
String
- Description
Email account username.
- password
- Type
String
- Description
Email account password.
- authUserName
- optional
true
- Type
String|Object
- Description
The username or configs object used to create the session instance. No
authentication by default.
- authPassword
- optional
true
- Type
String
- Description
The password used to create the session instance. No authentication by default.
- configs
- optional
true
- Type
Object
- Description
Configs object used to create the session instance. See
{#%https://javaee.github.io/javamail/docs/api/com/sun/mail/smtp/package-summary.html} for details.
- send
- Description
Sends an email to the specified recipient(s).
- Parameters
- fromAddr
- Type
String
- Description
Sender's email address.
- toAddr
- Type
String
- Description
Recipient's email address(es) (comma-separated if multiple).
- title
- optional
true
- Type
String
- Description
Email subject.
- content
- optional
true
- Type
String
- Description
Email body content.
- files
- optional
true
- Type
File|Wb.File|ByteArray|InputStream|String|Object|Array
- Description
Attachment(s). Each item can be:
-A `File` or `Wb.File` object,
-A byte array (`Uint8Array` or similar),
-An `InputStream`,
-A string (treated as raw content),
-An object `{name: filename, data: filedata}`.
If the filename is not provided, it defaults to "attach1", "attach2", etc., in order.
Example of valid `files` values:
[file, wbFile, bytes, inputStream, string, {name:'new.docx', data: file}, {name: 'file1.png', data: bytes}]
- cc
- optional
true
- Type
String
- Description
Carbon copy (CC) recipient(s).
- bcc
- optional
true
- Type
String
- Description
Blind carbon copy (BCC) recipient(s).
- plainText
- optional
true
- Type
Boolean
- Description
If `true`, `content` is treated as plain text; otherwise as HTML. Defaults to `false`.
- sendText
- Description
Sends a plain-text email. Equivalent to calling {#send} with `plainText = true`.
- close
- Description
Closes the underlying transport and releases associated resources. It is recommended to call this method explicitly
in a `finally` block to ensure timely cleanup.
# Wb.ExcelUtil
Excel Utility Class.
## Class Information
- class name
Wb.ExcelUtil
- Icon
undefined
- cname
excelUtil
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.ExcelUtil
## Static Methods
- toFile
- Flags
Private
- Description
Retrieves a File object based on the relative path, File object, or input stream of the Excel template file.
- Parameters
- excelFile
- Type
String|File|Wb.File|InputStream
- Description
Path, File, or InputStream of the Excel template. If it's a string,
it represents the relative path under "wb/system/resource/excel".
- Returns Value
- Type
java.io.File
- Description
The Excel template File.
- getRowsConfig
- Flags
Private
- Description
Converts and retrieves the configuration object for adding rows.
- Parameters
- configs
- Type
Array
- Description
Configuration objects.
- getExcelHtml
- Description
Writes data to an Excel template file and converts the file to an HTML script.
Example:
html = Wb.getExcelHtml('report.xlsx', data);
html = Wb.getExcelHtml('report.xlsx', data, [{ name: 'rows', x: 0, y: 8, mergeRows: ['F1', 'F3'],
mergeCols: [['F1', 'F2'], ['F5', 'F6']] }]);
html = Wb.getExcelHtml('report.xlsx', data, { name: 'rows', mergeRows: 'F1', mergeCols: ['F1', 'F2'] });
- Parameters
- excelFile
- Type
String|File|Wb.File|InputStream
- Description
Path, File, or InputStream of the Excel template. If it's a string,
it represents the relative path under "wb/system/resource/excel".
- data
- optional
true
- Type
Object
- Description
Data object to be written to the template.
- rowConfigs
- optional
true
- Type
Object|Array
- Description
Configuration object(s) for multi-row data written to the template.
- sheet
- optional
true
- Type
String
- Description
Name of the Sheet to use; defaults to the first sheet.
- align
- optional
true
- Type
String
- Description
Alignment method for the generated HTML. Defaults to 'center'.
-'left': Left alignment.
-'center': Center alignment.
-'right': Right alignment.
- Returns Value
- Type
String
- Description
The generated HTML script.
- getExcelFile
- Description
Writes data to an Excel template file and outputs it to the specified OutputStream.
Example:
Wb.getExcelFile('my-report.xlsx', 'report.xlsx', data, { name: 'rows', x: 0, y: 8 });
Wb.getExcelFile('my-report.xlsx', 'report.xlsx', data, [{ name: 'rows', x: 0, y: 8, sheet: 'Sheet2',
mergeRows: ['F1', 'F3'], mergeCols: [['F1', 'F2'], ['F5', 'F6']] }]);
- Parameters
- outputStream
- Type
OutputStream|String
- Description
OutputStream to write the generated Excel file to. If it's a string, it
represents the filename for download.
- excelFile
- Type
String|File|Wb.File|InputStream
- Description
Path, File, or InputStream of the Excel template. If it's a string,
it represents the relative path under "wb/system/resource/excel".
- data
- optional
true
- Type
Object
- Description
Data object to be written to the template.
- rowConfigs
- optional
true
- Type
Object|Array
- Description
Configuration object(s) for multi-row data written to the template.
-name: Property name.
-x: Column index.
-y: Row index.
-sheet: Sheet name.
-mergeRows: List of fields for row merging.
mergeCols: List of fields for column merging.
- sheet
- optional
true
- Type
String
- Description
Name of the Sheet in the template to use; defaults to all sheets.
# Wb.UserUtil
User and session related utility class.
## Class Information
- class name
Wb.UserUtil
- Icon
undefined
- cname
userUtil
- file
wb/ss/wb-server.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.UserUtil
## Static Properties
- protectedText
- Type
String
- Description
Password protected text.
- reservedName
- Type
String[]
- Description
System reserved user name.
## Static Methods
- getOnlineUsers
- Description
Get online user list.
- Parameters
- fromIndex
- Type
Number
- Description
Start index for paging.
- toIndex
- Type
Number
- Description
End index for paging.
- Returns Value
- Type
Object
- Description
Online users list.
- getSessions
- Description
Gets the session data under the specified user.
- Parameters
- userid
- Type
String
- Description
The userid.
- fromIndex
- Type
Number
- Description
Start index for paging.
- toIndex
- Type
Number
- Description
End index for paging.
- Returns Value
- Type
Object
- Description
Sessions list.
- encryptPassword
- Description
Encrypts passwords. For related configuration items, please refer to "sys.session.passwordMethod".
- Parameters
- password
- Type
String
- Description
The password.
- Returns Value
- Type
String
- Description
The encrypted password.
- login
- Description
Login to the system by the specified user.
- Parameters
- username
- Type
String
- Description
The username to login.
- password
- optional
true
- Type
String|Boolean
- Description
The password to login. `true` means login directly without verifying password.
- verifyCode
- optional
true
- Type
String
- Description
The verification code.
# Wb.Workflow
Workflow utility, used for creating, querying, and interacting with workflows.
## Class Information
- class name
Wb.Workflow
- Icon
undefined
- cname
workflow
- file
wb/ss/workflow.js
- run at
server side only
- hierarchy
Wb.Base -> Wb.Workflow
## Static Properties
- baseFolder
- Flags
Private
- Type
Wb.File
- Description
Workflow base folder.
- cells
- Flags
Private
- Type
Array
- Description
Workflow cells.
## Instance Properties
- flow
- Flags
Read-only
- Type
Object
- Description
Workflow template JSON data.
- flowId
- Flags
Read-only
- Type
String
- Description
Workflow instance id.
- data
- Flags
Read-only
- Type
Object
- Description
Workflow root node data.
- userid
- Flags
Read-only
- Type
String
- Description
The user id of initiates the workflow.
- isNew
- Flags
Read-only
- Type
Boolean
- Description
Whether the workflow instance is a new instance.
- title
- Flags
Read-only
- Type
String
- Description
Workflow title.
- startTime
- Flags
Read-only
- Type
Date
- Description
The date of initiates the workflow.
- handleTime
- Flags
Read-only
- Type
Date
- Description
The date of handle the workflow.
- users
- Flags
Read-only
- Type
Array
- Description
All users of current workflow. Only available in existing workflow.
- handleUser
- Flags
Read-only
- Type
String
- Description
Handle user id.
- activeNode
- Type
Object
- Description
The current active node.
- beforeNode
- Type
Object
- Description
The active node before performing any actions.
- status
- Flags
Read-only
- Type
Number
- Description
The status of current workflow.
- userStatus
- Flags
Read-only
- Type
Number
- Description
The status of current user.
- userType
- Flags
Read-only
- Type
Number
- Description
The type of current user.
- userNodeName
- Flags
Read-only
- Type
String
- Description
The node name of current user.
- extraParams
- Flags
Private
- Type
Object
- Description
Workflow extra params values.
- statusType
- Type
Object
- Description
User status values.
- afterUser
- Flags
Private
- Type
String
- Description
User to be handle after current user.
- isHandleUser
- Flags
Private
- Type
Boolean
- Description
Whether current handle user is a valid user of the current node.
- handleUserCt
- Flags
Private
- Type
Number
- Description
All handle users count of the current node.
- doneUserCt
- Flags
Private
- Type
Number
- Description
All done users count of the current node.
- params
- Flags
Private Read-only
- Description
Get all params data for pass to the next node.
- Getter
- Type
(inherited)
- Returns Value
- Type
Object
- Description
Params object.
- stateData
- Flags
Read-only
- Getter
- Type
Object
- Description
Current handle user state data.
- completed
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the workfow has been completed.
- starting
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the workflow is starting.
- restarting
- Flags
Read-only
- Getter
- Type
Boolean
- Description
Whether the workflow is restarting.
## Instance Methods
- constructor
- Description
Create a new workflow instance.
- Parameters
- configs
- Type
Object
- Description
Configs object.
- .file
- optional
true
- Type
String
- Description
Workflow template file. When initiate a new workflow, it is required.
- .userid
- optional
true
- Type
String
- Description
Handle user id. Defaults to current user id.
- .dispname
- optional
true
- Type
String
- Description
Handle user display name. Only available in initiate a new
workflow. Defaults to current user display name.
- .title
- optional
true
- Type
String
- Description
Workflow title.
- .flowId
- optional
true
- Type
String
- Description
Workflow id. When open an exists workflow, it is required.
- .params
- optional
true
- Type
Object
- Description
Workflow extra params.
- openFlow
- Flags
Private
- Description
Open workflow template file.
- loadUsers
- Flags
Private
- Description
Load users data of the current workflow.
- createUser
- Flags
Private
- Description
Create a new user record.
- checkHandleUser
- Flags
Private
- Description
Throw exception if current user is not avalid handle user.
- Parameters
- isPass
- optional
true
- Type
Boolean
- Description
Whether is pass action.
- getInitUser
- Description
Get the initiate user data.
- Returns Value
- Type
Object
- Description
Consists of userid, username, displayName and text.
- start
- Description
Start a new workflow.
- Returns Value
- Type
Object
- Description
The updated flow data.
- pass
- Description
Pass to the next first node.
- Parameters
- isStart
- optional
true
- Type
Boolean
- Description
Whether is start a workflow.
- Returns Value
- Type
Object
- Description
The updated flow data.
- addNodeUsers
- Flags
Private
- Description
Add current node users to the database.
- addNewUser
- Flags
Private
- Description
Add new handle user to the database.
- Parameters
- data
- Type
Object
- Description
User data.
- updateUser
- Flags
Private
- Description
Update the status of current handle user.
- Parameters
- status
- Type
Number
- Description
User status.
- updateFlow
- Flags
Private
- Description
Update the data of current workflow.
- canPass
- Description
Get whether current node can pass to the next node.
- Returns Value
- Type
Boolean
- Description
Returns true means it can pass to the next node, else not.
- getNodeLabel
- Description
Get node display label.
- Parameters
- Node
- Type
Object
- Description
The workflow node.
- Returns Value
- Type
String
- Description
Node display label.
- findTargetNode
- Flags
Private
- Description
Find the target node associated with the source node.
- Parameters
- source
- Type
Object
- Description
The source node.
- Returns Value
- Type
Object
- Description
The Target node. Returns null if not found.
- findNode
- Description
Find the node by it's id.
- Parameters
- id
- Type
String
- Description
Node id.
- Returns Value
- Type
Object
- Description
Found node. Returns null if not found.
- findNodeByName
- Description
Find the node by it's name.
- Parameters
- name
- Type
String
- Description
Node name.
- Returns Value
- Type
Object
- Description
Found node. Returns null if not found.
- getProperty
- Description
Get the specified property value.
- Parameters
- name
- Type
String
- Description
Property name.
- Returns Value
- Type
String
- Description
Property value.
- getApprovers
- Flags
Private
- Description
Get all approval user ids of the current node.
- Parameters
- isCC
- optional
true
- Type
Boolean
- Description
Whether is cc users.
- node
- optional
true
- Type
Object
- Description
The node. Default to current node.
- Returns Value
- Type
Array
- Description
All approval user ids.
- reject
- Description
Refuse to pass and terminate the process.
- Returns Value
- Type
Object
- Description
The updated flow data.
- transfer
- Description
Transfer current user to another user.
- Parameters
- userid
- Type
String
- Description
Transferred to user id.
- Returns Value
- Type
Object
- Description
The updated flow data.
- addSign
- Flags
Private
- Description
Add new handle user to current user.
- Parameters
- userid
- Type
String
- Description
New user id.
- after
- optional
true
- Type
Boolean
- Description
Whether add user after current user. Default false means add user before current user.
- Returns Value
- Type
Object
- Description
The updated flow data.
- signBefore
- Flags
Private
- Description
Add a new user before the current user.
- Parameters
- userid
- Type
String
- Description
New user id.
- Returns Value
- Type
Object
- Description
The updated flow data.
- signAfter
- Flags
Private
- Description
Add a new user after the current user.
- Parameters
- userid
- Type
String
- Description
New user id.
- Returns Value
- Type
Object
- Description
The updated flow data.
- back
- Description
Back to the specified node.
- Parameters
- nodeName
- Type
String
- Description
Node name.
- Returns Value
- Type
Object
- Description
The updated flow data.
- setBacked
- Flags
Private
- Description
Set the handle user status of the specified node and all subsequent to backed.
- Parameters
- node
- Type
Object
- Description
Node object.
# Wb.ide.Generator
WebBuilder module generator.
## Class Information
- class name
Wb.ide.Generator
- Icon
undefined
- cname
ideGenerator
- file
wb/modules/dev/ide/ide-ss.js
- hierarchy
Wb.Base -> Wb.ide.Generator
## Static Properties
- dbe
- Type
Object
- Description
DBE util module.
- controlsLib
- Type
Object
- Description
Controls library.
## Instance Properties
- folder
- Type
Wb.File
- Description
The Folder where the created module is located.
- subPath
- Type
String
- Description
Module sub folder path.
- conn
- Type
Wb.Connection
- Description
Database connection.
- dict
- Type
String[]/Boolean
- Description
Dict array names or true means ungrouped dict.
## Instance Methods
- constructor
- Description
Create a module generator.
- Parameters
- configs
- Type
Object
- Description
generator configs object.
- filename
- Type
String
- Description
Module file name.
- path
- Type
String
- Description
The path where the created module is located.
- db
- Type
String
- Description
Database name.
- schem
- optional
true
- Type
String
- Description
Database schem. For creating query module only.
- tableName
- optional
true
- Type
String
- Description
Table name. For creating query module only.
- viewName
- optional
true
- Type
String
- Description
View name. For creating query module only.
- procName
- optional
true
- Type
String
- Description
Store procedure name. For creating query module only.
- sql
- optional
true
- Type
String
- Description
Query sql. For creating query module only.
- crudTable
- optional
true
- Type
String
- Description
CRUD Table name. For creating CRUD module only.
- dict
- optional
true
- Type
String
- Description
Dict names. Separate multiple names with commas. "true" means ungrouped dict.
- title
- optional
true
- Type
String
- Description
Module title.
- icon
- optional
true
- Type
String
- Description
Module icon.
- useWbSql
- optional
true
- Type
String
- Description
Whether to use wb.sql.
- buildQuery
- Description
Build query module files.
- Parameters
- crud
- optional
true
- Type
Boolean
- Description
Table crud mode.
- dataOnly
- optional
true
- Type
Boolean
- Description
Return query result data only.
- Returns Value
- Type
Object
- Description
Returns result data if dataOnly is true, otherwise returns undefined.
- buildCRUD
- Flags
Private
- Description
Build crud module files.
- getSourceData
- Flags
Private
- Description
Return source data.
- addCRUDItems
- Flags
Private
- Description
Add crud items to main xwl module.
- Parameters
- Xwl
- Type
Object
- Description
Xwl module object.
- items
- Type
Array
- Description
Form items.
- getProcParams
- Flags
Private
- Description
Get params from store procedure.
- Returns Value
- Type
Object
- Description
Params data.
-retParam: Return params.
-params: In/out params.
-editors: Params input editors.
- createEditor
- Flags
Private
- Description
create editor from the specified meta data.
- Parameters
- fieldName
- Type
String
- Description
Field name.
- dataType
- Type
Number
- Description
Field data type.
- size
- Type
Number
- Description
Field size.
- scale
- Type
Number
- Description
Field scale.
- text
- Type
String
- Description
Field text.
- column
- optional
true
- Type
Object
- Description
Column object, only for CRUD.
- Returns Value
- Type
Object
- Description
Editor Wrapped editor node.
- toStrText
- Description
Convert to Str.xxx text.
- getCompClass
- Flags
Private
- Description
Get component class name.
- createQuerySelectFile
- Flags
Private
- Description
Create query select file.
- Parameters
- sql
- optional
true
- Type
String
- Description
Query sql script.
- useWbSql
- optional
true
- Type
Boolean
- Description
Whether to use Wb.sql for querying.
- paramList
- optional
true
- Type
Array
- Description
SQL params list.
- sortable
- optional
true
- Type
Boolean
- Description
Columns sortable.
- sqlMode
- optional
true
- Type
Boolean
- Description
Whether it is a custom SQL.
- createCRUDFiles
- Flags
Private
- Description
Create crud files.
- Parameters
- fullTable
- optional
true
- Type
String
- Description
Full table name.
- paramList
- optional
true
- Type
Array
- Description
SQL params list.
- saveXwl
- Flags
Private
- Description
Save xwl to file.
- Parameters
- file
- Type
Wb.File
- Description
Module file.
- xwl
- Type
Object
- Description
Module object.
- wrapComp
- Flags
Private
- Description
Create wrapped node from component.
- Returns Value
- Type
Object
- Description
wrapped node.
- addToIndex
- Flags
Private
- Description
Add file to index file.
- Parameters
- file
- Type
Wb.File
- Description
File to be added.
- createIndex
- Flags
Private
- Description
Create a new index file if it does not exist.
- Parameters
- folder
- Type
Wb.File
- Description
Folder for index file.
- title
- optional
true
- Type
String
- Description
Folder title.
- createModule
- Flags
Private
- Description
Create module framework object.
- Parameters
- title
- optional
true
- Type
String
- Description
Module title.
- icon
- optional
true
- Type
String
- Description
Module icon.
- Returns Value
- Type
Object
- Description
Module object.
# Wb.ide.FileSearcher
File content searcher
## Class Information
- class name
Wb.ide.FileSearcher
- Icon
undefined
- cname
ideFileSearcher
- file
wb/modules/dev/ide/ide-ss.js
- hierarchy
Wb.Base -> Wb.ide.FileSearcher
## Instance Properties
- paths
- Flags
Private
- Type
String[]
- Description
List of searched paths
- searchText
- Flags
Private
- Type
String
- Description
Search text content
- fileTypes
- Flags
Private
- Type
String[]
- Description
File types
- options
- Flags
Private
- Type
Object
- Description
Search options
- count
- Flags
Private
- Type
Number
- Description
Max count of search items
- rows
- Flags
Private
- Type
Array
- Description
Search result
## Instance Methods
- constructor
- Description
The constructor
- Parameters
- paths
- Type
String[]
- Description
List of searched paths
- searchText
- Type
String
- Description
Search text content
- fileTypes
- Type
String
- Description
File types
- options
- Type
Object
- Description
Search options
- count
- optional
true
- Type
Number
- Description
count Max count of search items. Default is 1000
- replaceTo
- optional
true
- Type
String
- Description
Replace to it
- searchReplace
- Description
Performs a search-replace operation on all files at the specified path.
- Returns Value
- Type
Array
- Description
Search result
- doSearch
- Flags
Private
- Description
Performs a search operation on the specified file
- Parameters
- file
- Type
Wb.File
- Description
search file
- Returns Value
- Type
Boolean
- Description
true means done, false means search aborted
- addMatchs
- Flags
Private
- Description
Adds the searched results to the result set
- Parameters
- matchs
- Type
Object
- Description
The match
- path
- Type
String
- Description
File path
- compPath
- optional
true
- Type
String
- Description
Node sub path
- propName
- optional
true
- Type
String
- Description
Property name
- propType
- optional
true
- Type
String
- Description
Property type
- valueText
- optional
true
- Type
String
- Description
Value part text, means a property name.
- Returns Value
- Type
Boolean
- Description
true means done, false means search aborted
# Wb.ide.DocsCreator
WebBuilder documents creator.
## Class Information
- class name
Wb.ide.DocsCreator
- Icon
undefined
- cname
ideDocsCreator
- file
wb/modules/dev/ide/ide-ss.js
- hierarchy
Wb.Base -> Wb.ide.DocsCreator
## Static Properties
- clsExp
- Flags
Private
- Type
RegExp
- Description
Regexp of class name without extensions
- clsExpExtends
- Flags
Private
- Type
RegExp
- Description
Regexp of class name with extensions
- clsMixin
- Flags
Private
- Type
RegExp
- Description
Regexp of class name with mixin
- reservedNames
- Flags
Private
- Type
Array
- Description
Reserved key names
## Instance Methods
- constructor
- Description
Constructor function
- addScript
- Description
Add the script document to be compiled.
- Parameters
- script
- Type
String
- Description
Compiled script
- path
- Type
String
- Description
Path of script
- addDoc
- Description
Add WebBuilder documentation to be compiled.
- Parameters
- doc
- Type
Object
- Description
Compiled docs
- findClass
- Flags
Private
- Description
Gets the class name after the specified location
- Parameters
- script
- Type
String
- Description
Scan Script
- start
- Type
Number
- Description
Start pos
- Returns Value
- Type
String
- Description
Class name
- getFunctionName
- Flags
Private
- Description
Gets the function name after the specified location.
- Parameters
- script
- Type
String
- Description
Scan script
- start
- Type
Number
- Description
Start pos
- Returns Value
- Type
String
- Description
Function name
- getSections
- Flags
Private
- Description
Gets a fragment of a specific space split in a document.
- Parameters
- content
- Type
String
- Description
Scan content
- longSection
- Type
Boolean
- Description
true means consists of 3 sections and false means consists of 2 sections.
- Returns Value
- Type
Array
- Description
All sections
- getKeyword
- Flags
Private
- Description
Gets the content inside the parentheses.
- Parameters
- content
- Type
String
- Description
Scan content.
- Returns Value
- Type
String
- Description
Remove the contents of the preceding and following parentheses.
- compileScript
- Flags
Private
- Description
Compiles the specified script and generates the document.
- createControlsMeta
- Flags
Private
- Description
Create a control metadata file for server control resolution
- Returns Value
- Type
Objet
- Description
Control metadata file. Key is the cls name, and Value is an object composed of all attributes.
- getAllMembers
- Description
Gets all the members of the specified class and their types.
- Returns Value
- Type
Object
- Description
Data object.
- build
- Description
Compiles the specified script document and WebBuilder document.
# Wb.ide.Util
IDE util.
## Class Information
- class name
Wb.ide.Util
- Icon
undefined
- cname
ideUtil
- file
wb/modules/dev/ide/ide-ss.js
- hierarchy
Wb.Base -> Wb.ide.Util
## Static Methods
- getImgs
- Description
Get image icon list
- Returns Value
- Type
String[]
- Description
Image icon list.
- getIcons
- Description
Get icon list
- Returns Value
- Type
String[]
- Description
icon list.
- getGlobalsList
- Description
Get global variables list
- Returns Value
- Type
Array
- Description
Variables list.
# Wb.ide.ClassSearcher
Class searcher.
## Class Information
- class name
Wb.ide.ClassSearcher
- Icon
undefined
- cname
ideClassSearcher
- file
wb/modules/dev/ide/ide-ss.js
- hierarchy
Wb.Base -> Wb.ide.ClassSearcher
## Instance Properties
- findCls
- Flags
Private
- Type
String
- Description
Find class name.
- result
- Flags
Private
- Type
String[]
- Description
Found names result.
## Instance Methods
- getJavaMembers
- Description
Get Java class public members.
- Returns Value
- Type
Array
- Description
Members list.
- getMethodParams
- Flags
Private
- Description
Get params of the specified method.
- Parameters
- method
- Type
Method
- Description
Java method.
- Returns Value
- Type
Array
- Description
Param names.
- getSimpleTypeName
- Flags
Private
- Description
Get simple type name of the specified cls.
- Parameters
- cls
- Type
Class
- Description
Java type.
- index
- Type
Number
- Description
Param index.
- Returns Value
- Type
String
- Description
Class type name
- getReturnTypeSimpleName
- Flags
Private
- Description
Get simple return type name.
- Parameters
- cls
- Type
Class
- Description
Java type.
- Returns Value
- Type
string
- Description
Method return type name.
- getJSMembers
- Description
Get JS class public members.
- Returns Value
- Type
Array
- Description
Members list.
- getClassMembers
- Description
Get class package and class members.
- Returns Value
- Type
Array
- Description
Members list.
- getServerLibPath
- Flags
Private
- Description
Get server lib path.
- Returns Value
- Type
String
- Description
Server lib path.
- scanDirectory
- Flags
Private
- Description
Scan classes in directory.
- Parameters
- dir
- Type
File
- Description
directory.
- packagePrefix
- Type
String
- Description
Package prefix.
- scanJarFile
- Flags
Private
- Description
Scan classes in jar file.
- Parameters
- file
- Type
File
- Description
jar file.
- scanJmodFile
- Flags
Private
- Description
Scan classes in jmod file.
- Parameters
- file
- Type
File
- Description
Jmod file.
# WbDocsData
WebBuilder Docs data.
## Class Information
- class name
WbDocsData
- Icon
undefined
- file
wb/docs/wb-docs.js
- hierarchy
WbDocsData
# Wb.docs.App
WebBuilder Docs.
## Class Information
- class name
Wb.docs.App
- Icon
undefined
- cname
docsApp
- file
wb/docs/wb-docs.js
- hierarchy
Wb.Base -> Wb.App -> Wb.docs.App
## Static Properties
- resourceLinks
- Type
Object
- Description
External resource links.
- prefixLinks
- Type
Object
- Description
External resource link prefix.
## Static Methods
- initDocs
- Description
Init docs app.
- Parameters
- app
- Type
Object
- Description
App scope.
## Instance Methods
- main
- Description
The application main function.
- ready
- getResourceLink
- Description
Obtain the link address of the resource.
- Parameters
- name
- Type
String
- Description
Resource name.
- Returns Value
- Type
String
- Description
Resource link. Return null if not found.
- search
- Flags
Private
- Description
Perform a global search to find documents with specified keywords.
- Parameters
- value
- Type
String
- Description
Search keywords.
- Returns Value
- Type
Array
- Description
Search results.
- openSource
- Description
Open source code and locate to the specified line.
- Parameters
- path
- Type
String
- Description
Source file path.
- line
- optional
true
- Type
Number
- Description
Source code line.
- openDoc
- Description
Open the document containing the specified class or class method name.
- Parameters
- name
- Type
String
- Description
Class or class method name.
- key
- optional
true
- Type
String
- Description
Highlight key.
- optWbCls
- Flags
Private
- Description
Automatically select the correct class from the wb, wb client and wb server classes based on the member name.
- Parameters
- member
- Type
String
- Description
member name.
- Returns Value
- Type
String
- Description
Class name.
- getDocsFolder
- Flags
Private
- Description
Get the directory structure of the document. All unordered documents are added to the API document node.
- Parameters
- folderName
- Type
String
- Description
The directory name of the parent, null represents the root directory.
- Returns Value
- Type
Array
- Description
Folder data.
# Wb.docs.Detail
Docs detail page.
## Class Information
- class name
Wb.docs.Detail
- Icon
undefined
- cname
docsDetail
- file
wb/docs/wb-docs.js
- hierarchy
Wb.Base -> Wb.Configurable -> Wb.Component -> Wb.Container -> Wb.Card -> Wb.docs.Detail
## Instance Properties
- continueLineRegexp
- Flags
Private
- Type
RegExp
- Description
Continuation regular.
- expanded
- Getter
- Type
Boolean
- Setter
- Type
Boolean
- Description
Whether the item is expanded.
- data
- Getter
- Type
Object
- Description
Docs data.
- Setter
- Type
Object
- Description
Docs data.
## Instance Methods
- setExpanded
- Description
Set whether the specified item node is expanded.
- Parameters
- node
- Type
Element
- Description
Item node.
- expanded
- optional
true
- Type
Boolean
- Description
Whether to expand. Null indicates the toggle expanded status.
- createMenuTip
- Flags
Private
- Description
Create property/event item menu tip.
- Returns Value
- Type
Wb.Tip
- Description
Tip Component.
- reloadDetail
- Description
Reload docs detail page.
- getMembers
- Flags
Private
- Description
Traverse the parent class to obtain all attribute members.
- Parameters
- type
- Type
String
- Description
Member type.
- mergeAccessor
- Flags
Private
- Description
Merge the attributes in the accessor.
- Returns Value
- Type
String
- Description
Merged values.
- appendMembers
- Flags
Private
- Description
Add a document that displays members as a list to the current document.
- Parameters
- members
- Type
Array
- Description
List data.
- typeName
- Type
String
- Description
Type name.
- title
- Type
String
- Description
Title.
- logo
- Type
String
- Description
Logo name.
- cate
- Type
String
- Description
Category.
- line
- Type
Number
- Description
Source line.
- Returns Value
- Type
String
- Description
HTML Script.
- createParamsDoc
- Flags
Private
- Description
Create params docs.
- Parameters
- title
- Type
String
- Description
Title.
- el
- Type
Element
- Description
Bind element.
- params
- Type
Object
- Description
Parameters object.
- replaceLink
- Flags
Private
- Description
Replace link tags.
- Parameters
- text
- Type
String
- Description
Docs text.
- Returns Value
- Type
String
- Description
Replaced html.
- replaceImage
- Flags
Private
- Description
Replace image tags.
- Parameters
- text
- Type
String
- Description
Docs text.
- Returns Value
- Type
String
- Description
Replaced html.
- typesToHtml
- Flags
Private
- Description
Convert types to HTML script.
- Parameters
- types
- Type
String
- Description
Types text.
- Returns Value
- Type
String
- Description
HTML script.
- lineToRow
- Flags
Private
- Description
Convert rows separated by '|' to table rows.
- Parameters
- line
- Type
String
- Description
Line text.
- Returns Value
- Type
String
- Description
Converted HTML.
- docToHtml
- Flags
Private
- Description
Convert docs text to HTML.
- Parameters
- text
- Type
String
- Description
Docs text.
- Returns Value
- Type
String
- Description
Converted HTML.