Client Render on Demand"
m (remove empty version history (via JWB)) |
|||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 4: | Line 4: | ||
{{ZK EE}} | {{ZK EE}} | ||
| − | + | {{versionSince|5.0.0}} | |
| − | With Enterprise Edition, widgets<ref>A widget is the (JavaScript) object running at the client to represent a component</ref> will delay the rendering of DOM elements until really required. For example, the DOM elements of < | + | With Enterprise Edition, widgets<ref>A widget is the (JavaScript) object running at the client to represent a component</ref> will delay the rendering of DOM elements until really required. For example, the DOM elements of <code>comboitem</code> won't be created until the drop down is shown. It improves the performance a lot for a sophisticated user interface. |
This feature is transparent to the application developers. All widgets are still instantiated (though DOM elements might not), so they can be accessed without knowing if this feature is turned on. | This feature is transparent to the application developers. All widgets are still instantiated (though DOM elements might not), so they can be accessed without knowing if this feature is turned on. | ||
| Line 18: | Line 18: | ||
= Client ROD: Tree = | = Client ROD: Tree = | ||
| − | A tree node only renders its children node's DOM elements when it's open. If you close the node, it will remove | + | A tree node only renders its children node's DOM elements when it's open. If you close the node, it will remove those DOM elements. Thus, to have the best performance (particularly for a huge tree), it is better to make all tree item closed initially. You can observe this behavior with developer tool. |
| − | < | + | <syntaxhighlight line lang="xml"> |
<treeitem forEach="${data}" open="false"> | <treeitem forEach="${data}" open="false"> | ||
<treerow> | <treerow> | ||
| Line 43: | Line 43: | ||
</treechildren> | </treechildren> | ||
</treeitem> | </treeitem> | ||
| − | </ | + | </syntaxhighlight> |
= Client ROD: Groupbox = | = Client ROD: Groupbox = | ||
| Line 51: | Line 51: | ||
= Client ROD: Panel = | = Client ROD: Panel = | ||
| − | Client ROD is enabled only if a panel is closed. Thus, to have the best performance (particularly | + | Client ROD is enabled only if a panel is closed. Thus, to have the best performance (particularly with sophisticated content), it is better to make the panel closed initially if proper. |
= Client ROD: Tabbox = | = Client ROD: Tabbox = | ||
| Line 63: | Line 63: | ||
= Enable or Disable Client ROD = | = Enable or Disable Client ROD = | ||
| − | If you want to disable Client ROD for the whole application, you can specify a library property called [https://www.zkoss.org/wiki/ZK_Configuration_Reference/zk.xml/The_Library_Properties/org.zkoss.zul.client.rod < | + | If you want to disable Client ROD for the whole application, you can specify a library property called [https://www.zkoss.org/wiki/ZK_Configuration_Reference/zk.xml/The_Library_Properties/org.zkoss.zul.client.rod <code>org.zkoss.zul.client.rod</code>] with false. For example, specify the following in zk.xml: |
| − | < | + | <syntaxhighlight line lang="xml"> |
<library-property> | <library-property> | ||
<name>org.zkoss.zul.client.rod</name> | <name>org.zkoss.zul.client.rod</name> | ||
<value>false</value> | <value>false</value> | ||
</library-property> | </library-property> | ||
| − | </ | + | </syntaxhighlight> |
| − | Or, if you prefer to disable it for a particular page, then specify false to a page's attribute called < | + | Or, if you prefer to disable it for a particular page, then specify false to a page's attribute called <code>org.zkoss.zul.client.rod</code>, such as |
| − | < | + | <syntaxhighlight line lang="xml"> |
<custom-attributes org.zkoss.zul.client.rod="false" scope="page"/> | <custom-attributes org.zkoss.zul.client.rod="false" scope="page"/> | ||
| − | </ | + | </syntaxhighlight> |
Or, if you prefer to disable it for all descendants of a particular component, then specify false to a component's attribute. And, you can enable it for a subset of the descendants. For example, | Or, if you prefer to disable it for all descendants of a particular component, then specify false to a component's attribute. And, you can enable it for a subset of the descendants. For example, | ||
| − | < | + | <syntaxhighlight line lang="xml"> |
<window> | <window> | ||
<custom-attributes org.zkoss.zul.client.rod="false"/> <!-- disable it for descendants of window --> | <custom-attributes org.zkoss.zul.client.rod="false"/> <!-- disable it for descendants of window --> | ||
| Line 88: | Line 88: | ||
</div> | </div> | ||
</window> | </window> | ||
| − | </ | + | </syntaxhighlight> |
| + | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{{ ZKDevelopersReferencePageFooter}} | {{ ZKDevelopersReferencePageFooter}} | ||
Latest revision as of 10:23, 5 February 2024
- Available for ZK:
-
Since 5.0.0
With Enterprise Edition, widgets[1] will delay the rendering of DOM elements until really required. For example, the DOM elements of comboitem won't be created until the drop down is shown. It improves the performance a lot for a sophisticated user interface.
This feature is transparent to the application developers. All widgets are still instantiated (though DOM elements might not), so they can be accessed without knowing if this feature is turned on.
- ↑ A widget is the (JavaScript) object running at the client to represent a component
Client ROD: Tree
A tree node only renders its children node's DOM elements when it's open. If you close the node, it will remove those DOM elements. Thus, to have the best performance (particularly for a huge tree), it is better to make all tree item closed initially. You can observe this behavior with developer tool.
1 <treeitem forEach="${data}" open="false">
2 <treerow>
3 <treecell label="${each.name}"/>
4 <treecell label="${each.description}"/>
5 </treerow>
6 <treechildren>
7 <treeitem forEach="${each.detail}" open="false">
8 <treerow>
9 <treecell label="${each.name}"/>
10 <treecell label="${each.description}"/>
11 </treerow>
12 <treechildren>
13 <treeitem forEach="${each.fine}" open="false">
14 <treerow>
15 <treecell label="${each.name}"/>
16 <treecell label="${each.description}"/>
17 </treerow>
18 </treeitem>
19 </treechildren>
20 </treeitem>
21 </treechildren>
22 </treeitem>
Client ROD: Groupbox
Client ROD is enabled only if a groupbox is closed. Thus, to have the best performance (particularly with sophisticated content), it is better to make the groupbox closed initially if proper.
Client ROD: Panel
Client ROD is enabled only if a panel is closed. Thus, to have the best performance (particularly with sophisticated content), it is better to make the panel closed initially if proper.
Client ROD: Tabbox
Client ROD is enabled for the invisible tabpanels. After the tabpanel becomes active, its content will be rendered and attached to the DOM tree.
Client ROD: Organigram
Client ROD is enabled only if an orgitem is closed. Thus, to have the best performance (particularly with sophisticated content), it is better to make the orgitem closed initially if proper.
Enable or Disable Client ROD
If you want to disable Client ROD for the whole application, you can specify a library property called org.zkoss.zul.client.rod with false. For example, specify the following in zk.xml:
1 <library-property>
2 <name>org.zkoss.zul.client.rod</name>
3 <value>false</value>
4 </library-property>
Or, if you prefer to disable it for a particular page, then specify false to a page's attribute called org.zkoss.zul.client.rod, such as
1 <custom-attributes org.zkoss.zul.client.rod="false" scope="page"/>
Or, if you prefer to disable it for all descendants of a particular component, then specify false to a component's attribute. And, you can enable it for a subset of the descendants. For example,
1 <window>
2 <custom-attributes org.zkoss.zul.client.rod="false"/> <!-- disable it for descendants of window -->
3 <div>
4 <custom-attributes org.zkoss.zul.client.rod="true"/> <!-- enable it for descendants of div -->
5 ..
6 </div>
7 </window>