ZK Dictionary"

From Documentation
 
(2 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
==  [http://books.zkoss.org/zk-mvvm-book/8.0/syntax/databindinginit.html @init] ==
 
==  [http://books.zkoss.org/zk-mvvm-book/8.0/syntax/databindinginit.html @init] ==
 
@init is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @init will only trigger once when the component is created. It will read the value from the ViewModel and set that value on the component's property.
 
@init is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @init will only trigger once when the component is created. It will read the value from the ViewModel and set that value on the component's property.
<tt><textbox disabled="@init(vm.disabled)"</tt> will fire once when the textbox is created. It will read the value of 'vm' (the viewModel) 'disabled' property, and call textbox.setDisabled(disabled) using this value as argument.
+
<code><textbox disabled="@init(vm.disabled)"</code> will fire once when the textbox is created. It will read the value of 'vm' (the viewModel) 'disabled' property, and call <code>textbox.setDisabled(disabled)</code> using this value as an argument.
  
 
==  [http://books.zkoss.org/zk-mvvm-book/8.0/syntax/load.html @load] ==
 
==  [http://books.zkoss.org/zk-mvvm-book/8.0/syntax/load.html @load] ==
 
@load is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @load will only trigger when the component is created and every time the ViewModel triggers a "NotifyChange" on the property. It will read the value from the ViewModel and set that value on the component's property.
 
@load is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @load will only trigger when the component is created and every time the ViewModel triggers a "NotifyChange" on the property. It will read the value from the ViewModel and set that value on the component's property.
<tt><textbox disabled="@load(vm.disabled)"</tt> will fire once when the textbox is created. It will read the value of 'vm' (the ViewModel) 'disabled' property, and call <tt>textbox.setDisabled(disabled)</tt> using this value as argument. Later, if the ViewModel's property changes, and the ViewModel triggers "NotifyChange", the value will be updated again.
+
<code><textbox disabled="@load(vm.disabled)"</code> will fire once when the textbox is created. It will read the value of 'vm' (the ViewModel) 'disabled' property, and call <code>textbox.setDisabled(disabled)</code> using this value as argument. Later, if the ViewModel's property changes, and the ViewModel triggers "NotifyChange", the value will be updated again.
  
 
==  [http://books.zkoss.org/zk-mvvm-book/8.0/syntax/save.html @save] ==
 
==  [http://books.zkoss.org/zk-mvvm-book/8.0/syntax/save.html @save] ==
 
@save is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @save will trigger when the user changes the state of the component's property. It will read the new value from the component after the user's action, and set that value to the ViewModel.
 
@save is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @save will trigger when the user changes the state of the component's property. It will read the new value from the component after the user's action, and set that value to the ViewModel.
<tt><textbox value="@save(vm.textValue)"</tt> will fire when the user changes the value of the textbox. It will call <tt>viewModel.setTextValue(textValue)</tt> using this value as argument.
+
<code><textbox value="@save(vm.textValue)"</code> will fire when the user changes the value of the textbox. It will call <code>viewModel.setTextValue(textValue)</code> using this value as argument.
  
 
==  [[ZK_Client-side_Reference/Communication | AU request]] ==
 
==  [[ZK_Client-side_Reference/Communication | AU request]] ==
AU requests are commands sent from the client to the server. They each contains an event generated from the client-side, such as a user click or a change in the UI state.
+
AU requests are commands sent from the client to the server. They each contain an event generated from the client-side, such as a user click or a change in the UI state.
Multiple AU Requests can be sent at the same time, and processed during the same execution.
+
Multiple AU Requests can be sent at the same time and processed during the same execution.
A single AU Request can cause multiple AU Responses, or even no response at all.
+
A single AU Request can cause multiple AU Responses or even no response at all.
  
 
==  [[ZK_Client-side_Reference/Communication | AU response]] ==
 
==  [[ZK_Client-side_Reference/Communication | AU response]] ==
AU responses are commands sent from the server to the client. They each contains an action to be performed at client-side.
+
AU responses are commands sent from the server to the client. They each contains an action to be performed at the client-side.
 
Multiple AU Requests can be sent back at the same time at the end of the same execution.
 
Multiple AU Requests can be sent back at the same time at the end of the same execution.
  
Line 33: Line 33:
  
 
== [[ZK_Developer's_Reference/UI_Composing/Component-based_UI | Component tree]] ==
 
== [[ZK_Developer's_Reference/UI_Composing/Component-based_UI | Component tree]] ==
The component tree is a group of component organized in a tree structure. A component may have children, and these children can have their own descendants. A component has a single parent.
+
The component tree is a group of components organized in a tree structure. A component may have children, and these children can have their own descendants. A component has a single parent.
For example, a window contain a div, and the div contain two buttons.
+
For example, a window contains a div, and the div contains two buttons.
  
 
== [[ZK_Developer's_Reference/MVC/Controller/Composer | Composer]] ==
 
== [[ZK_Developer's_Reference/MVC/Controller/Composer | Composer]] ==
Line 43: Line 43:
  
 
==  [[ZK_Developer's_Reference/Architecture_Overview | Execution]] ==
 
==  [[ZK_Developer's_Reference/Architecture_Overview | Execution]] ==
A ZK <javadoc>org.zkoss.zk.ui.Execution</javadoc> is a transaction between the client and the server. An execution begins when the client browser sends an HTTP request to the server, and ends when the server sends back a response containing the result of the transaction.
+
A ZK <javadoc>org.zkoss.zk.ui.Execution</javadoc> is a transaction between the client and the server. An execution begins when the client browser sends an HTTP request to the server and ends when the server sends back a response containing the result of the transaction.
 
An execution can contain multiple AU requests (sent from the client to the server) and reply with multiple AU responses (from the server to the client)
 
An execution can contain multiple AU requests (sent from the client to the server) and reply with multiple AU responses (from the server to the client)
  
 
==  [[ZK_Client-side_Reference/Language_Definition | Lang-addon.xml]] ==
 
==  [[ZK_Client-side_Reference/Language_Definition | Lang-addon.xml]] ==
A language definition defines a component set (aka., a language) such as the zul language used for .zul files. A language addon is used to extend a language definition in order to modify its default content, or to add new content to it.
+
A language definition defines a component set (aka., a language) such as the zul language used for .zul files. A language addon is used to extend a language definition in order to modify its default content or to add new content to it.
  
 
==  [[ZK_Configuration_Reference/zk.xml/The_Library_Properties | Library property]] ==
 
==  [[ZK_Configuration_Reference/zk.xml/The_Library_Properties | Library property]] ==
 
A library property is a configuration that affects how ZK behaves. A library property can be set globally, for a page, or for a limited number of ZK components.
 
A library property is a configuration that affects how ZK behaves. A library property can be set globally, for a page, or for a limited number of ZK components.
The full list of library property can be found [[ZK_Configuration_Reference/zk.xml/The_Library_Properties | here]].
+
The full list of library properties can be found [[ZK_Configuration_Reference/zk.xml/The_Library_Properties | here]].
  
 
==  [[ZK_Developer%27s_Reference/MVC/Model/List_Model | ListModel]] ==
 
==  [[ZK_Developer%27s_Reference/MVC/Model/List_Model | ListModel]] ==
A ListModel is a ZK utility class that wraps a collection. It provides convenient APIs when binding a collection to a ZK component. For example, it handle selection, automatic updates and collection events.
+
A ListModel is a ZK utility class that wraps a collection. It provides convenient APIs when binding a collection to a ZK component. For example, it handles the selection, automatic updates, and collection events.
 
You can implement your own version for manual control, or simply use the existing classes for standard collections such as  <javadoc>org.zkoss.zul.ListModelList</javadoc>, <javadoc>org.zkoss.zul.ListModelArray</javadoc>, <javadoc>org.zkoss.zul.ListModelSet</javadoc>, <javadoc>org.zkoss.zul.ListModelMap</javadoc>
 
You can implement your own version for manual control, or simply use the existing classes for standard collections such as  <javadoc>org.zkoss.zul.ListModelList</javadoc>, <javadoc>org.zkoss.zul.ListModelArray</javadoc>, <javadoc>org.zkoss.zul.ListModelSet</javadoc>, <javadoc>org.zkoss.zul.ListModelMap</javadoc>
  
 
== [[ZK_Developer's_Reference/UI_Composing/Macro_Component | Macro Component]] ==
 
== [[ZK_Developer's_Reference/UI_Composing/Macro_Component | Macro Component]] ==
 
A Macro Component is a component defined by the developer by combining existing ZK components and extending their Java logic.
 
A Macro Component is a component defined by the developer by combining existing ZK components and extending their Java logic.
It acts as a more powerful version of a template. A template is just a list of component to create and add to a page. A Macro Component will also add a controller class, output events that other controllers can listen to, and manage the "children" that it creates.
+
It acts as a more powerful version of a template. A template is just a list of components to create and add to a page. A Macro Component will also add a controller class, output events that other controllers can listen to, and manage the "children" that it creates.
This allow a developer to create a reusable complex component, without creating it from the ground up.
+
This allows a developer to create a reusable complex component, without creating it from the ground up.
  
 
== [[ZK_Developer's_Reference/Theming_and_Styling/Molds | Mold]] ==
 
== [[ZK_Developer's_Reference/Theming_and_Styling/Molds | Mold]] ==
A mold is an appearance applied to a component. ZK provide different apparences for some components, if they have different mode of operation.
+
A mold is an appearance applied to a component. ZK provides different appearances for some components if they have different modes of operation.
  
 
== [[ZK_Developer's_Reference/MVC | MVC]] ==
 
== [[ZK_Developer's_Reference/MVC | MVC]] ==
Model-View-Controller. A design pattern in which a "Controller" Java class acts as the bridge between the model (the raw data) and the view (the page / the ZK components). In this pattern, the controller access the components directly, listen to events, and modify the component with actions such as <tt>component.setVisible(true);</tt>. In this pattern, the controller is dependent on the view. This allow easy access to the component and their properties.
+
Model-View-Controller. A design pattern in which a "Controller" Java class acts as the bridge between the model (the raw data) and the view (the page / the ZK components). In this pattern, the controller access the components directly, listen to events, and modify the component with actions such as <code>component.setVisible(true);</code>. In this pattern, the controller is dependent on the view. This allows easy access to the component and their properties.
  
 
== [https://books.zkoss.org/zk-mvvm-book/8.0/introduction_of_mvvm.html MVVM] ==
 
== [https://books.zkoss.org/zk-mvvm-book/8.0/introduction_of_mvvm.html MVVM] ==
Line 80: Line 80:
 
A ZK Session object is a wrapper for the WebServer's own session object.
 
A ZK Session object is a wrapper for the WebServer's own session object.
 
In a Java EE environment, an application server creates a javax.servlet.http.HttpSession object to track client's session. ZK's <javadoc>org.zkoss.zk.ui.Session</javadoc>  is a wrapper of HttpSession.
 
In a Java EE environment, an application server creates a javax.servlet.http.HttpSession object to track client's session. ZK's <javadoc>org.zkoss.zk.ui.Session</javadoc>  is a wrapper of HttpSession.
 +
 +
* Get current ZK session: [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/Sessions.html#getCurrent-boolean- Sessions.getCurrent()].
 +
 +
* Get current HttpSession: [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/Session.html#getNativeSession-- Sessions.getCurrent().getNativeSession()]
  
 
==  [https://books.zkoss.org/zkessentials-book/master/shadow_components/index.html Shadow Component] ==
 
==  [https://books.zkoss.org/zkessentials-book/master/shadow_components/index.html Shadow Component] ==
A Shadow Component is a utility component which does not create any DOM node at client-side. Instead, they provide features such as applying a template based on a variable, iterating over a collection and instantiating a template for each entry, or acting as "conditional statements" to control when their content should be added to the page or not.
+
A Shadow Component is a utility component that does not create any DOM node at the client-side. Instead, they provide features such as applying a template based on a variable, iterating over a collection and instantiating a template for each entry, or acting as "conditional statements" to control when their content should be added to the page or not.
  
 
== [[ZK_Developer's_Reference/Architecture_Overview | Widget]] ==
 
== [[ZK_Developer's_Reference/Architecture_Overview | Widget]] ==
Line 92: Line 96:
  
 
==  [[Zscript,_java,_EL | zscript]] ==
 
==  [[Zscript,_java,_EL | zscript]] ==
a <tt><zscript></tt> component provide runtime code execution in ZUL files.
+
a <code><zscript></code> component provide runtime code execution in ZUL files.
 
By default, zscript will be evaluated as Java by the BeanShell interpreter, and act in similar ways as the java snippets from JSP files.
 
By default, zscript will be evaluated as Java by the BeanShell interpreter, and act in similar ways as the java snippets from JSP files.
While it is more flexible, java code is better implement in a Controller or a ViewModel in most scenarios. zscript exceptions are difficult to debug since it doesn't allow breakpoints due to being interpreted at runtime. It also generally have lower performance, since it is not compiled during application build.
+
While it is more flexible, java code is better implemented in a Controller or a ViewModel in most scenarios. The exceptions in zscript are difficult to debug since it doesn't allow breakpoints due to being interpreted at runtime. It also generally has lower performance, since it is not compiled during application build.
  
 
==  [[ZUML_Reference/ZUML | zul file]] ==
 
==  [[ZUML_Reference/ZUML | zul file]] ==
 
A zul file contains ZUML (ZK User Interface Markup Language) describing a collection of ZK components. Conceptually, a zul page is similar to a JSP page. Zul files are parsed by the ZK framework when the end-user request the corresponding URL to generate the page content.
 
A zul file contains ZUML (ZK User Interface Markup Language) describing a collection of ZK components. Conceptually, a zul page is similar to a JSP page. Zul files are parsed by the ZK framework when the end-user request the corresponding URL to generate the page content.

Latest revision as of 06:43, 9 February 2022

Introduction

ZK Framework uses a number of keywords to refer to specific concepts. These words may have a "general use" in English different than their use in the context of ZK.

You will find a short description of these concept below, as well as a link to a full documentation page explaining it in details. This list is meant to be used as a reference page. If you are new to ZK, we encourage you to refer to it while you explore the rest of our documentation.

@bind

@bind is the same as declaring both @load and @save (see below).

@init

@init is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @init will only trigger once when the component is created. It will read the value from the ViewModel and set that value on the component's property. <textbox disabled="@init(vm.disabled)" will fire once when the textbox is created. It will read the value of 'vm' (the viewModel) 'disabled' property, and call textbox.setDisabled(disabled) using this value as an argument.

@load

@load is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @load will only trigger when the component is created and every time the ViewModel triggers a "NotifyChange" on the property. It will read the value from the ViewModel and set that value on the component's property. <textbox disabled="@load(vm.disabled)" will fire once when the textbox is created. It will read the value of 'vm' (the ViewModel) 'disabled' property, and call textbox.setDisabled(disabled) using this value as argument. Later, if the ViewModel's property changes, and the ViewModel triggers "NotifyChange", the value will be updated again.

@save

@save is a data binding expression. It is used in the MVVM pattern. It is declared on a component's property in the View, to target a ViewModel's property and bind them together. @save will trigger when the user changes the state of the component's property. It will read the new value from the component after the user's action, and set that value to the ViewModel. <textbox value="@save(vm.textValue)" will fire when the user changes the value of the textbox. It will call viewModel.setTextValue(textValue) using this value as argument.

AU request

AU requests are commands sent from the client to the server. They each contain an event generated from the client-side, such as a user click or a change in the UI state. Multiple AU Requests can be sent at the same time and processed during the same execution. A single AU Request can cause multiple AU Responses or even no response at all.

AU response

AU responses are commands sent from the server to the client. They each contains an action to be performed at the client-side. Multiple AU Requests can be sent back at the same time at the end of the same execution.

Component

A component is a Java object existing at server-side representing a UI element. A component can be a simple control like a Button, or a complex control like a Grid.

Component tree

The component tree is a group of components organized in a tree structure. A component may have children, and these children can have their own descendants. A component has a single parent. For example, a window contains a div, and the div contains two buttons.

Composer

A composer is a Java class that controls part or all of a ZK page. A composer can access components, update their properties and listen to user actions.

Desktop

A ZK desktop is a collection of pages served through the same URL. In 90% of cases, a desktop represents the content of one single browser tab. (Note: if a browser tab contains content loaded from multiple URLs, such as using iframes, there may be more than 1 desktop per browser tab.)

Execution

A ZK Execution is a transaction between the client and the server. An execution begins when the client browser sends an HTTP request to the server and ends when the server sends back a response containing the result of the transaction. An execution can contain multiple AU requests (sent from the client to the server) and reply with multiple AU responses (from the server to the client)

Lang-addon.xml

A language definition defines a component set (aka., a language) such as the zul language used for .zul files. A language addon is used to extend a language definition in order to modify its default content or to add new content to it.

Library property

A library property is a configuration that affects how ZK behaves. A library property can be set globally, for a page, or for a limited number of ZK components. The full list of library properties can be found here.

ListModel

A ListModel is a ZK utility class that wraps a collection. It provides convenient APIs when binding a collection to a ZK component. For example, it handles the selection, automatic updates, and collection events. You can implement your own version for manual control, or simply use the existing classes for standard collections such as ListModelList, ListModelArray, ListModelSet, ListModelMap

Macro Component

A Macro Component is a component defined by the developer by combining existing ZK components and extending their Java logic. It acts as a more powerful version of a template. A template is just a list of components to create and add to a page. A Macro Component will also add a controller class, output events that other controllers can listen to, and manage the "children" that it creates. This allows a developer to create a reusable complex component, without creating it from the ground up.

Mold

A mold is an appearance applied to a component. ZK provides different appearances for some components if they have different modes of operation.

MVC

Model-View-Controller. A design pattern in which a "Controller" Java class acts as the bridge between the model (the raw data) and the view (the page / the ZK components). In this pattern, the controller access the components directly, listen to events, and modify the component with actions such as component.setVisible(true);. In this pattern, the controller is dependent on the view. This allows easy access to the component and their properties.

MVVM

Model-View-ViewModel. A design pattern in which a "ViewModel" Java class acts as the bridge between the model (the raw data) and the view (the page / the components). The ViewModel in MVVM acts like a special Controller for the View. It exposes data from the Model to the View provides updates and logic when the user trigger and command from the view. In this pattern, the ViewModel should be separated from the View and shouldn't access the components directly. This layer of abstraction allow multiple views to use the same ViewModel, as long as their use that ViewModel properties and commands to interact with it.

Page

A Page object represents the collection of components loaded from a zul file. It also acts as the root of the component tree.

Sclass

The sclass="customclass" attribute can be used by a developer to add a class="customclass" attribute on the DOM node created by the component. Its purpose it to easily add CSS styles to a ZK component.

Session

A ZK Session object is a wrapper for the WebServer's own session object. In a Java EE environment, an application server creates a javax.servlet.http.HttpSession object to track client's session. ZK's Session is a wrapper of HttpSession.

Shadow Component

A Shadow Component is a utility component that does not create any DOM node at the client-side. Instead, they provide features such as applying a template based on a variable, iterating over a collection and instantiating a template for each entry, or acting as "conditional statements" to control when their content should be added to the page or not.

Widget

A widget is a JavaScript object existing at client-side. It is the client-side representation of a server-side Component. The widget role is to pilot the DOM tree (the actual browser content) and to act as a communication relay between user actions and server updates.

zk.xml

WEB-INF/zk.xml is the configuration descriptor of ZK. If you want ZK to follow default behaviors, this file is optional. You can create it and add configuration elements to customize how ZK behaves.

zscript

a <zscript> component provide runtime code execution in ZUL files. By default, zscript will be evaluated as Java by the BeanShell interpreter, and act in similar ways as the java snippets from JSP files. While it is more flexible, java code is better implemented in a Controller or a ViewModel in most scenarios. The exceptions in zscript are difficult to debug since it doesn't allow breakpoints due to being interpreted at runtime. It also generally has lower performance, since it is not compiled during application build.

zul file

A zul file contains ZUML (ZK User Interface Markup Language) describing a collection of ZK components. Conceptually, a zul page is similar to a JSP page. Zul files are parsed by the ZK framework when the end-user request the corresponding URL to generate the page content.