Defer the Rendering of Client Widgets"

From Documentation
Line 33: Line 33:
  
 
=Things you need to take care about=
 
=Things you need to take care about=
[http://tracker.zkoss.org/browse/ZK-2336]When you use this function on the sub tag, it's necessary to consider what the final style may be shown after finishing "renderdefer". For example,  
+
[http://tracker.zkoss.org/browse/ZK-2336]When you use this function on the children, it's necessary to consider what the final style may be shown after finishing "renderdefer". For example,  
  
 
<syntax lang="xml">
 
<syntax lang="xml">

Revision as of 08:29, 2 July 2014


DocumentationZK Developer's ReferencePerformance TipsDefer the Rendering of Client Widgets
Defer the Rendering of Client Widgets


[since 5.0.2]

In addition to Defer the Creation of Child Components, you can defer the rendering of the widgets at the client by the use of the renderdefer attribute. It is a technique to make a sophisticated page to appear earlier.

For example, we can defer the rendering of the inner window for 100 milliseconds as shown below

<syntax lang="xml"> <window title="Render Defer" border="normal"> The following is rendered after 100 milliseconds. <window title="inner" width="300px" height="200px" border="normal" renderdefer="100"> Enter something <datebox onChange='i.value = self.value + ""'/> <separator/> <label id="i"/> <separator bar="true"/> <button label="say hi" onClick='alert("Hi")'/> </window> </window> </syntax>

Unlike the fulfill attribute, the components on the server and the widgets at the client are created no matter renderdefer is specified. It only defers and the rendering of the widgets into DOM elements.

Here is another example to use it with pure Java.

<syntax lang="java"> Tabpanel tp = new Tabpanel(); tp.setRenderdefer(0); </syntax>

The render-defer technique is useful to improve the response time of showing a sophisticated page in a slow client. The total time required to render is not reduced (since all widgets have to render later), but it allow the page to show up sooner and it makes the user feel more responsive.

Things you need to take care about

[1]When you use this function on the children, it's necessary to consider what the final style may be shown after finishing "renderdefer". For example,

<syntax lang="xml"> <zk xmlns:w="client"> <style> .always-scroll .z-grid-body { overflow-y: scroll !important; } </style> <grid sclass="always-scroll" width="400px" height="200px" > <columns> <column label="renderdefer (scrollbar col / odd row style missing) hflex col" hflex="1"></column> </columns> <rows> <row renderdefer="200"><cell height="50px">CELL 1</cell></row> <row renderdefer="400"><cell height="50px">CELL 2</cell></row> <row renderdefer="600"><cell height="50px">CELL 3</cell></row> <row renderdefer="800"><cell height="50px">CELL 4</cell></row> <row renderdefer="1000"><cell height="50px">CELL 4</cell></row> </rows> </grid> </syntax> When you put "renderdefer" into the row or rows without pre-define force y-scrollbar shown, ZK treats it as "zero" rows at first and the hflex will use total width of grid without subtracting the width of scrollbar. After the "renderdefer" finished, we found the horizontal scroll bar shown. Actually, it shouldn't appear in this case. The solution is to force scrollbar shown through CSS and the final result will be correct.

We recommend that you should defer the component by putting the "renderdefer" property right on the component tag instead of putting it on children (e.g. columns, rows, row).

Version History

Last Update : 2014/07/02


Version Date Content
     



Last Update : 2014/07/02

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