Defer the Creation of Child Components"
From Documentation
m (remove empty version history (via JWB)) |
|||
| (11 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | {{ | + | {{ZKDevelopersReferencePageHeader}} |
| − | For sophisticated pages, the performance can be improved if we defer the creation of child components until they | + | For sophisticated pages, the performance can be improved if we defer the creation of child components until they become visible. The simplest way to do this is by the use of the <code>fulfill</code> attribute. In the following example, the children of the second tab panel are created only if it becomes visible. |
| − | < | + | <syntaxhighlight line lang="xml" > |
<tabbox> | <tabbox> | ||
<tabs> | <tabs> | ||
| Line 13: | Line 13: | ||
This panel is pre-loaded since no fulfill specified | This panel is pre-loaded since no fulfill specified | ||
</tabpanel> | </tabpanel> | ||
| − | <tabpanel fulfill=" | + | <tabpanel fulfill="self.linkedTab.onSelect"> |
| − | This panel is loaded only tab2 receives the onSelect event | + | This panel is loaded only if tab2 receives the onSelect event |
</tabpanel> | </tabpanel> | ||
</tabpanels> | </tabpanels> | ||
</tabbox> | </tabbox> | ||
| − | </ | + | </syntaxhighlight> |
| + | For more information, please refer to the [[ZK Developer's Reference/UI Composing/ZUML/On-demand Evaluation|On-demand Evaluation]] section. | ||
| − | {{ | + | |
| + | |||
| + | {{ ZKDevelopersReferencePageFooter}} | ||
Latest revision as of 10:23, 5 February 2024
For sophisticated pages, the performance can be improved if we defer the creation of child components until they become visible. The simplest way to do this is by the use of the fulfill attribute. In the following example, the children of the second tab panel are created only if it becomes visible.
1 <tabbox>
2 <tabs>
3 <tab label="Preload" selected="true"/>
4 <tab id="tab2" label="OnDemand"/>
5 </tabs>
6 <tabpanels>
7 <tabpanel>
8 This panel is pre-loaded since no fulfill specified
9 </tabpanel>
10 <tabpanel fulfill="self.linkedTab.onSelect">
11 This panel is loaded only if tab2 receives the onSelect event
12 </tabpanel>
13 </tabpanels>
14 </tabbox>
For more information, please refer to the On-demand Evaluation section.