On-demand Evaluation"

From Documentation
m
m (replace tt with code (via JWB))
(29 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
__TOC__
 
__TOC__
  
By default, ZK creates components based on what are defined in a ZUML document, when loading the document. However, we can defer the creation of some sections of components, until necessary, such as becoming visible. This technique is called load-on-demand or render-on-demand.  
+
By default, ZK creates components based on what are defined in a ZUML document when loading the document. However, we can defer the creation of some sections of components, until necessary, such as becoming visible. This technique is called load-on-demand or render-on-demand.  
  
For example, you could split a ZUML document into multiple, and then load the required ones when necessary. Please refer to the [[ZK Developer's Reference/UI Composing/ZUML/Load ZUML in Java|Load ZUML in Java]] section for how to load a ZUML document dynamically.
+
For example, you could split a ZUML document into multiple pages, and then load the required ones when necessary. Please refer to the [[ZK Developer's Reference/UI Composing/ZUML/Load ZUML in Java|Load ZUML in Java]] section for how to load a ZUML document dynamically.
  
It improves the performance in both the server and client sides. It is suggested to apply this technique when appropriate. In additions, ZK Loader provides a standard on-demand evaluation called ''fulfill'' to simplify the implementation as described in the following section.
+
It improves the performance both at the server and client sides. It is suggested to apply this technique whenever appropriate. In addition, ZK Loader provides a standard on-demand evaluation called ''fulfill'' to simplify the implementation as described in the following section.
  
=Load-on-Demand with the fulfill attribute=
+
=Load-on-Demand with the fulfill Attribute=
  
The simplest way to defer the creation of the child components is to use [[ZUML Reference/ZUML/Attributes/fulfill|the fulfill attribute]]. For example, [[ZK Component Reference/Input/Comboitem|comboitem]] in the following code snippet will not be created, until [[ZK Component Reference/Input/Combobox|combobox]] receives the <tt>onOpen</tt> event, indicating comboitem is becoming visible.
+
The simplest way to defer the creation of the child components is to use [[ZUML Reference/ZUML/Attributes/fulfill|the fulfill attribute]]. For example, the [[ZK Component Reference/Input/Comboitem|comboitem]] in the following code snippet will not be created, until the [[ZK Component Reference/Input/Combobox|combobox]] receives the <code>onOpen</code> event, indicating that comboitem is becoming visible.
  
 
<source lang="xml">
 
<source lang="xml">
Line 19: Line 19:
 
</source>
 
</source>
  
In other words, if a XML element is specified with the fulfill attribute, all of its child elements won't be processed until the event specified as the value of the fulfill attribute is received.
+
In other words, if a XML element is specified with the fulfill attribute, all of its child elements will not be processed until the event specified as the value of the fulfill attribute is received.
  
==Specify Target with its ID==
+
==Specify Target with ID or Implicit Variable==
If the event to trigger the creation of children is targeted to another component, you can specify the target component's identifier in front of the event name as depicted below.
+
If the event to trigger the creation of children is targeted at another component, you can specify the target component's identifier in front of the event name as depicted below.
  
 
<source lang="xml">
 
<source lang="xml">
Line 29: Line 29:
 
     Any content created automatically when btn is clicked     
 
     Any content created automatically when btn is clicked     
 
</div>
 
</div>
 +
</source>
 +
 +
 +
=== Create a Tabpanel after Its Tab is Selected ===
 +
<source lang='xml' highlight='10'>
 +
    <tabbox>
 +
        <tabs>
 +
            <tab selected="true">tab 1</tab>
 +
            <tab>tab 2</tab>
 +
        </tabs>
 +
        <tabpanels>
 +
            <tabpanel>
 +
                ..
 +
            </tabpanel>
 +
            <tabpanel fulfill="self.linkedTab.onSelect">
 +
                ...
 +
            </tabpanel>
 +
        </tabpanels>
 +
    </tabbox>
 
</source>
 
</source>
  
 
==Specify Target with its Path==
 
==Specify Target with its Path==
If the components belong to different ID space, you can specify a path before the event name as follows.
+
If the components belong to a different ID space, you can specify a path before the event name as follows:
  
 
<source lang="xml">
 
<source lang="xml">
Line 45: Line 64:
  
 
<source lang="xml">
 
<source lang="xml">
<div fulfill="${foo}.onClick">
+
    <button id="foo" label="click me to show"/>
...
+
    <div fulfill="${foo}.onClick">
</div>
+
        created on demand
 +
    </div>
 
</source>
 
</source>
  
Line 56: Line 76:
 
<div fulfill="b1.onClick, ${another}.onOpen">
 
<div fulfill="b1.onClick, ${another}.onOpen">
 
...
 
...
 +
</div>
 +
</source>
 +
 +
= Load Another ZUML on Demand with the fulfill Attribute =
 +
 +
You could specify an URI in the fulfill attribute when the fulfill condition is satisfied (i.e. if a specified event has been received). The ZUML document of the URI will be loaded and rendered as the children of the associated component. To specify an URI, just append it to the condition and separate with an equal sign (=). For example,
 +
 +
<source lang="xml">
 +
<zk>
 +
    <button id="btn" label="Click to Load"/>
 +
    <div fulfill="btn.onClick=another.zul"/>
 +
</zk>
 +
</source>
 +
 +
Then, <code>another.zul</code> will be loaded when the button is clicked.
 +
 +
Notice that even though you could specify multiple conditions, you could specify at most one URI. The ZUML document of the URI will be loaded no matter which condition is satisfied.
 +
 +
<source lang="xml">
 +
<div fulfill="btn.onClick, foo.onOpen=another.zul"/>
 +
</source>
 +
 +
If you specify an URI without any conditions, the ZUML document of the URI will be loaded from the very beginning. In other words, it has the same effect of using [[ZK Developer's Reference/UI Composing/ZUML/Include|include]].
 +
 +
<source lang="xml">
 +
<div fulfill="=another.zul"/>
 +
</source>
 +
 +
= The onFulfill Event =
 +
After ZK applies the fulfill condition, i.e., creates all descendant components, it fires the <code>onFulfill</code> event with an instance of <javadoc>org.zkoss.zk.ui.event.FulfillEvent</javadoc> to notify the component for further processing if any.
 +
 +
For example, if you use the <code>wireVariables</code> method of the <javadoc>org.zkoss.zk.ui.Components</javadoc> class, you might have to call <code>wireVariables</code> again to wire the new components in the <code>onFulfill</code> event.
 +
 +
<source lang="xml" >
 +
<div fulfill="b1.onClick, b2.onOpen" onFulfill="Components.wireVariables(self, controller)">
 +
...
 
</div>
 
</div>
 
</source>
 
</source>
Line 61: Line 117:
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Revision as of 14:15, 12 January 2022


On-demand Evaluation


By default, ZK creates components based on what are defined in a ZUML document when loading the document. However, we can defer the creation of some sections of components, until necessary, such as becoming visible. This technique is called load-on-demand or render-on-demand.

For example, you could split a ZUML document into multiple pages, and then load the required ones when necessary. Please refer to the Load ZUML in Java section for how to load a ZUML document dynamically.

It improves the performance both at the server and client sides. It is suggested to apply this technique whenever appropriate. In addition, ZK Loader provides a standard on-demand evaluation called fulfill to simplify the implementation as described in the following section.

Load-on-Demand with the fulfill Attribute

The simplest way to defer the creation of the child components is to use the fulfill attribute. For example, the comboitem in the following code snippet will not be created, until the combobox receives the onOpen event, indicating that comboitem is becoming visible.

<combobox fulfill="onOpen">
    <comboitem label="First Option"/>    
</combobox>

In other words, if a XML element is specified with the fulfill attribute, all of its child elements will not be processed until the event specified as the value of the fulfill attribute is received.

Specify Target with ID or Implicit Variable

If the event to trigger the creation of children is targeted at another component, you can specify the target component's identifier in front of the event name as depicted below.

<button id="btn" label="show" onClick="content.visible = true"/>
<div id="content" fulfill="btn.onClick">
    Any content created automatically when btn is clicked    
</div>


Create a Tabpanel after Its Tab is Selected

    <tabbox>
        <tabs>
            <tab selected="true">tab 1</tab>
            <tab>tab 2</tab>
        </tabs>
        <tabpanels>
            <tabpanel>
                ..
            </tabpanel>
            <tabpanel fulfill="self.linkedTab.onSelect">
                ...
            </tabpanel>
        </tabpanels>
    </tabbox>

Specify Target with its Path

If the components belong to a different ID space, you can specify a path before the event name as follows:

<button id="btn" label="show" onClick="content.visible = true"/>
<window id="content" fulfill="../btn.onClick">
    Any content created automatically when btn is clicked    
</window>

Specify Target with EL Expressions

EL expressions are allowed to specify the target, and it must return a component, an identifier or a path.

    <button id="foo" label="click me to show"/>
    <div fulfill="${foo}.onClick">
        created on demand
    </div>

Specify Multiple Fulfill Conditions

If there are multiple conditions to fulfill, you could specify all of them in the fulfill attribute by separating them with a comma, such as

<div fulfill="b1.onClick, ${another}.onOpen">
...
</div>

Load Another ZUML on Demand with the fulfill Attribute

You could specify an URI in the fulfill attribute when the fulfill condition is satisfied (i.e. if a specified event has been received). The ZUML document of the URI will be loaded and rendered as the children of the associated component. To specify an URI, just append it to the condition and separate with an equal sign (=). For example,

<zk>
    <button id="btn" label="Click to Load"/>
    <div fulfill="btn.onClick=another.zul"/>
</zk>

Then, another.zul will be loaded when the button is clicked.

Notice that even though you could specify multiple conditions, you could specify at most one URI. The ZUML document of the URI will be loaded no matter which condition is satisfied.

<div fulfill="btn.onClick, foo.onOpen=another.zul"/>

If you specify an URI without any conditions, the ZUML document of the URI will be loaded from the very beginning. In other words, it has the same effect of using include.

<div fulfill="=another.zul"/>

The onFulfill Event

After ZK applies the fulfill condition, i.e., creates all descendant components, it fires the onFulfill event with an instance of FulfillEvent to notify the component for further processing if any.

For example, if you use the wireVariables method of the Components class, you might have to call wireVariables again to wire the new components in the onFulfill event.

<div fulfill="b1.onClick, b2.onOpen" onFulfill="Components.wireVariables(self, controller)">
	...
</div>

Version History

Last Update : 2022/01/12


Version Date Content
     



Last Update : 2022/01/12

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