Custom Mold"
(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...") |
|||
| (10 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
= Overview = | = Overview = | ||
| + | You can customize a widget's appearance with CSS. But if its DOM structure doesn't fulfill your requirements, for example, you want to: | ||
| + | * render one more element, <code><i/></code>, to show an icon | ||
| + | * render some elements in a different position | ||
| + | Then you need to create a custom [[ZK_Developer%27s_Reference/Theming_and_Styling/Molds| mold]] to render different DOM elements. | ||
= 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 18: | ||
* <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 = | ||
| + | With a mold js, you still need to register this custom mold on the component. So you need to create a [[ZK_Client-side_Reference/Language_Definition#Language_Addon | lang-addon.xml]] and [[ZK_Client-side_Reference/Language_Definition/component#Custom_Mold | register the custom mold]]. | ||
| + | |||
| + | = Apply Custom Mold= | ||
| + | Specify the mold name you register in <code>lang-addon.xml</code> on target component's <code>mold</code> attribute. | ||
| + | <syntaxhighlight lang='xml'> | ||
| + | <paging mold="tooltip"/> | ||
| + | </syntaxhighlight> | ||
{{ZKClient-sideReferencePageFooter}} | {{ZKClient-sideReferencePageFooter}} | ||
Latest revision as of 02:33, 18 September 2023
Overview
You can customize a widget's appearance with CSS. But if its DOM structure doesn't fulfill your requirements, for example, you want to:
- render one more element,
<i/>, to show an icon - render some elements in a different position
Then you need to create a custom mold to render different DOM elements.
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 bezul.jar, zkex.jar, zkmax.jar[WIDGET_PACKAGE]: a widget's package folder like java package e.g. the mold js ofzul.messh.pagingis atzul/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
With a mold js, you still need to register this custom mold on the component. So you need to create a lang-addon.xml and register the custom mold.
Apply Custom Mold
Specify the mold name you register in lang-addon.xml on target component's mold attribute.
<paging mold="tooltip"/>