Defer the Rendering of Client Widgets"
| Line 32: | Line 32: | ||
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. | 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= | + | =Things you need to take care about= |
[http://tracker.zkoss.org/browse/ZK-2336]When you use this function on a child component, it's necessary to consider how the final style is shown after finishing "renderdefer". For example, | [http://tracker.zkoss.org/browse/ZK-2336]When you use this function on a child component, it's necessary to consider how the final style is shown after finishing "renderdefer". For example, | ||
| Line 55: | Line 55: | ||
</grid> | </grid> | ||
</syntax> | </syntax> | ||
| − | When you put "renderdefer" into | + | When you put "renderdefer" into row or rows without pre-defining to force the y-scrollbar to show, ZK treats it as the "zeroth" rows at first while hflex will use the total width of the grid without subtracting the width of the scrollbar. After the "renderdefer" finishes, we will find that the horizontal scroll bar has appeared. However, this shouldn't be the case, only y-scrollbar should appear. The solution is to force the y-scrollbar to show through CSS so that this won't happen. |
| − | We recommend that you should defer the component by putting the "renderdefer" property | + | We recommend that you should defer the component by putting the "renderdefer" property on the component tag instead of putting it on children components (e.g. columns, rows, row). |
=Version History= | =Version History= | ||
Revision as of 04:46, 3 July 2014
[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 a child component, it's necessary to consider how the final style is 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 row or rows without pre-defining to force the y-scrollbar to show, ZK treats it as the "zeroth" rows at first while hflex will use the total width of the grid without subtracting the width of the scrollbar. After the "renderdefer" finishes, we will find that the horizontal scroll bar has appeared. However, this shouldn't be the case, only y-scrollbar should appear. The solution is to force the y-scrollbar to show through CSS so that this won't happen.
We recommend that you should defer the component by putting the "renderdefer" property on the component tag instead of putting it on children components (e.g. columns, rows, row).
Version History
| Version | Date | Content |
|---|---|---|