Custom Mold"

From Documentation
(Created page with "{{ZKClient-sideReferencePageHeader}} = Overview = = Create Mold js = == Get Built-in Mold js== All widgets' mold js are bundled with ZK jar files under the path: [ZK_JAR...")
 
Line 7: Line 7:
 
= Create Mold js =
 
= Create Mold js =
 
== Get Built-in Mold js==
 
== Get Built-in Mold js==
All widgets' mold js are bundled with ZK jar files under the path:
+
It's better to customize a mold based on the built-in mold js. All widgets' mold js are bundled with ZK jar files under the path:
  
 
  [ZK_JAR] / web / js / [WIDGET_PACKAGE] / mold / *.js
 
  [ZK_JAR] / web / js / [WIDGET_PACKAGE] / mold / *.js
Line 14: Line 14:
 
* <code>[WIDGET_PACKAGE]</code>: a widget's package folder like java package e.g. the mold js of <code>zul.messh.paging</code> is at <code>zul/mesh</code>
 
* <code>[WIDGET_PACKAGE]</code>: a widget's package folder like java package e.g. the mold js of <code>zul.messh.paging</code> is at <code>zul/mesh</code>
 
* <code>*.js</code>: file name is the widget name e.g. <code>paging.js</code>
 
* <code>*.js</code>: file name is the widget name e.g. <code>paging.js</code>
 +
 +
Copy the built-in mold js to your project's same path and rename to a readable name, e.g. in a maven project, you need to put <code>paging.js</code>  under:
 +
src/main/resources/web/js/zul/mesh/mold/paging-tooltip.js
  
 
== Modify Mold ==
 
== Modify Mold ==
 +
After mold js is ready, you can start to modify it. You can use [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Template literals] to improve the readability (IE not supported).
  
 
= Register Custom Mold =
 
= Register Custom Mold =
  
 
{{ZKClient-sideReferencePageFooter}}
 
{{ZKClient-sideReferencePageFooter}}

Revision as of 11:41, 25 July 2022


Overview

Create Mold js

Get Built-in Mold js

It's better to customize a mold based on the built-in mold js. All widgets' mold js are bundled with ZK jar files under the path:

[ZK_JAR] / web / js / [WIDGET_PACKAGE] / mold / *.js
  • [ZK_JAR]: could be zul.jar, zkex.jar, zkmax.jar
  • [WIDGET_PACKAGE]: a widget's package folder like java package e.g. the mold js of zul.messh.paging is at zul/mesh
  • *.js: file name is the widget name e.g. paging.js

Copy the built-in mold js to your project's same path and rename to a readable name, e.g. in a maven project, you need to put paging.js under:

src/main/resources/web/js/zul/mesh/mold/paging-tooltip.js

Modify Mold

After mold js is ready, you can start to modify it. You can use Template literals to improve the readability (IE not supported).

Register Custom Mold


Last Update : 2022/07/25

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.