New Features of ZK 3.0.4

Robbie Cheng, Engineer, Potix Corporation
March 25, 2008

ZK 3.0.4 focuses mainly on fixing bugs and improving performance. In addition to over 97 bug fixes, there are 26 new features.

In this release, more components are introduced and enhanced. Grid/Listbox/Tree support fixed layout concept. Jython interpreter is supported. Moreover, an easier way to debug using uncompressed javascript is introduced.

The most important of all is that the performance of Grid/Listbox/Tree is much improved if fixedLayout is adopted.

In the following paragraphs, I'll introduce the most exciting new additions to ZK 3.0.4.

Performance Improvement

Performace of Grid/Listbox/Tree is much improved

Since ZK 3.0.4, the concept of fixedLayout is introduced which speeds up the performance of loading and updating page. As you can see in Table 1, among five browsers, the performance of ZK 3.0.4 with fixedLayout enabled is the best except Opera of 2.4.1 while loading page. The reason of the improvement is that ZK won't adjust the width of components according to the width of its content which saves a lot of time if fixedLayout is enabled. If performance is an issue for you, fixedLayout is the best option for you!

Table 1. Performance Test


Fail means more than 30 seconds
Test Case: Listbox with LiveData (3000), 6 columns, 50 rows

Ease of Use

An easy way to prompt users while including a long-awaiting page

If you want to remind users when it might take a long time to load another page, simply sets processing attribute as true. Then, a message will be popup at the browser before the included content is available.


<include src="/another.zul" progressing="true"/>

A way to pass Object to the included page

Currently, the only way to pass data to the included page is the query string. 

<include src="/WEB-INF/mypage?arg=something"/>

It is better to pass non-String objects to the included page as follows,


<include src="/WEB-INF/mypage" some="${expr}" another="${expr2}"/>

A way to specify whether an included page is a complete HTML page or not

If a zul/zhtml page is included, ZK assumes that the includer is responsible for generate the complete HTML page. That is, the includer has to generate the HTML, HEAD and BODY tags. Thus, ZK will consider the included page as a fragment of the incuder page, and it will enclose the HTML tags generated by the included page with <div> tags.

However, this assumption is broke by the following case. If the includer is nothing but including another zhtml page, and the zhtml page is a complete HTML page. For example,

 
//includer.jsp
<jsp:include page="/includee.zhtml"/>



 
//includee.zhtml
<html>
<head></head>
<body></body>
</html>

Since ZK assumes the zhtml page is only a fragment of the includer page, ZK will enclose the HTML tags generated by the zhtml page with <div> tags. To avoid this problem, you have to specify the attribute complete as true to tell ZK not to enclose the included page with <div> tags.

 
<?page complete="true"?>

An option to use uncompress Javascript codes for debug

Currently, JavaScript codes sent to the browser are compressed. It is hard to debug. If you want to see uncompress Javascript codes please specify the following config in zk.xml as follows,


<client-config>
  <debug-js>true</debug-js>
</client-config>

Component Reloaded

New Components

Jython Interpreter

Jython is an implementation of the high-level, dynamic, object-oriented language Python written in 100% Pure Java. You could use it with zscript as follows,


<zscript language="jython">
    print "Hello World!"
    ......
</zscript>

Note: Thank Ludovic Drolez for his contribution of the original Jython interpreter.

New Features

Grid/Listbox/Tree support fixed layout concept

If you want the width of columns of Grid/Listbox/Tree to be fixed which won't grow wider if the width of its content exceeds its width, you simply specify fixedLayout as true. In other words, the width of columns of the above three components will be exactly the same with your specified number.

Note:

  • by default, fixedLayout is turned off for better backward compatibility.
  • If none of the columns' widths is specified, the width of these components will be evenly distributed to their columns.


<listbox id="listbox" width="240px" fixedLayout="true">
 <listhead sizable="true">
  <listheader width="80px" label="name" sort="auto" />
  <listheader width="80px" label="gender" sort="auto" />
  <listheader width="80px" label="gender" sort="auto" />
 </listhead>
 <listitem >
  <listcell label="MaryLonggggggggggggggggggggggggggggg" />
  <listcell label="FEMALE" />
  <listcell label="FEMALE1" />
 </listitem>
 <listitem>
  <listcell label="John" />
  <listcell label="MALE" />
  <listcell label="MALE1" />
 </listitem>
</listbox>

However, if you prefer that the width columns of the above components depend on the width of its content, please specify fixedLayout as false.


<listbox id="listbox" width="240px" fixedLayout="false">
 <listhead sizable="true">
  <listheader width="80px" label="name" sort="auto" />
  <listheader width="80px" label="gender" sort="auto" />
  <listheader width="80px" label="gender" sort="auto" />
 </listhead>
 <listitem >
  <listcell label="MaryLonggggggggggggggggggggggggggggg" />
  <listcell label="FEMALE" />
  <listcell label="FEMALE1" />
 </listitem>
 ........

Component support word-wrap class

Word-wrap is always an headache for developers while displaying long text. To avoid this problem, you could specify the sclass as "word-wrap" for those components with long content.


<listbox width="250px">
 <listitem>
  <listcell sclass="word-wrap"
   label="Start....................................................................End">
   <label style="background:pink"
    value="Start....................................................................End">
   </label>
  </listcell>
 </listitem> 
</listbox>

A way to specify the positionof paging component with Grid/Listbox

From now on, you could put the paging component on top/bottom of Grid/Listbox, or both of them.


<listbox mold="paging" pagingPosition="both">
...
</listbox>

Grid/Listbox support fixed Paging component while scrolling

Currently, while using paging mold for Grid or Listbox, it becomes inconvenient for users to use the paging component since the paging component is scrollable if there appears scrollbar. Since ZK 3.0.4, the position of paging component with Grid/Listbox become fixed, in other words, it won't be scrolled with the content of Grid/Listbox.


 <window>
 <zscript>
 List items = new org.zkoss.zkdemo.userguide.BigList(1000); //a big list of Integer
 </zscript>
 <listbox mold="paging" pagingPosition="both" height="150px" width="200px">
  <listitem forEach="${items}">
  <listcell label="${each}-1"/>
  <listcell label="${each}-2"/>
  </listitem>
 </listbox>
</window>

Datebox supports more date formats

More date formats are supported by Datebox, for example, M d y E D d W w G.

 
<zk>
 <zscript>
 String[] formats = {"MM/dd/yy G", "MM.dd.yy D", "MMM dd, yy d",
  "w dd/MM/yy", "W dd-MM-yy", "F MM.dd.yyyy"};
 </zscript>
 <hbox forEach="${formats}">
 <datebox format="${each}"/>
 ${each}
 </hbox> 
</zk>

Another way to listen which button is clicked of Messagebox.

Currently, Messagebox.show will return which button is clicked if the event thread was enabled. However, it is useless if the event processing thread is disabled since it always returns OK immediately. Thus, you have to register an event listener such that Messagebox will call back when a button is clicked.


Messagebox.show("Are you ready?", "Ready", Messagebox.YES|Messagebox.NO,Messagebox.QUESTION, 
 new EventListener() {
 public void onEvent(Event evt) {}
});
Comments
 
ehols
2008-03-10

I look forward to 304....
有个问题，在我的项目中，我更改了listbox的样式，让其列表的里面有分割线，但，郁闷的是，列的标题和内容经常会错位！不知道为何。。。希望这个版本能够改进！
Tommaso Fin
2008-03-11

Great job!
Werner
2008-03-11

Great to see Jython support in ZK 3.0.4. I'm definitely going to give it a spin to try out this great new feature.
seaman
2008-03-12

I am looking forward to have ZK 3.0.4. Well done guys!
Marcos de Sousa
2008-03-12

+1

Where should we found your
Test Case: Listbox with LiveData (3000), 6 columns, 50 rows ?

I want to test the performance of it without LiveData.

Marcos de Sousa
Jumper Chen
2008-03-14

Hi Marcos de Sousa,

Here you go.

	<window title="Live Data Demo" border="normal">
		<zscript>
			List items = new org.zkoss.zkdemo.userguide.BigList(3000);
			ListModel strset = new ListModelList(items);
			ListitemRenderer render = new ListitemRenderer() { 
				public void render(Listitem item, Object data) {
					new Listcell("col - " + item.getIndex()).setParent(item);
					new Listcell("col - " +	item.getIndex()).setParent(item);
					new Listcell("col - " + item.getIndex()).setParent(item);
					new Listcell("col - " + item.getIndex()).setParent(item);
					new Listcell("col - " +	item.getIndex()).setParent(item);
					new Listcell("col - " +	item.getIndex()).setParent(item);
				}
			};
		</zscript>
		<listbox id="list" width="100%" rows="50" model="${strset}"
			itemRenderer="${render}" fixedLayout="true">
			<listhead sizable="true">
				<listheader label="Col 1"/>
				<listheader label="Col 2"/>
				<listheader label="Col 3"/>
				<listheader label="Col 4"/>
				<listheader label="Col 5"/>
				<listheader label="Col 6"/>
			</listhead>
		</listbox>
	</window>

/Jumper
唐卫红
2008-03-21

我使用zk已经半年多了。遇到许多问题：
1. Textbox之类的输入控件，都可以使用onChange事件，我在该事件中添加自己的业务逻辑处理，处理结果可能需要抛出WrongValueException， 问题来了，下在再次进入该域，如果不做任何修改而离开该域的话，则会自动清除WrongValueException, 不符合常理
2. 做出来的画面在firefox中显示正常，但在ie浏览器中显示有问题
3. zul脚本出错时，没有报出出错的脚本文件名和行号，有时无法查错
jacob
2008-03-26

JspTags1.0 can not support forward property,why?
henrichen
2008-03-28

@jacob,

ZK JSP Tags 1.2 is going to be released next week which will support forward property.
Ian Tsai
2008-04-01

Now you can use JspTags 1.2, but forward was already implemented in 1.1.
Sud
2008-04-01

ZK does not work for many java applications that needs session context information for each call. ZK's event mechanism looses all these information and the event based method calls don't work. Sure they have done some trick for Spring using listener and forwarding named variables to event threads but it is not applicable to most java apps and even if it is, there is no way to figure out all these variables. There has to be better implementation of this.
henrichen
2008-04-03

Hi Sud,

Since version 2.4, ZK has supported "Use the Servlet Thread to Process Events" (For details please see New Features of ZK 2.4).

Basically, configure in WEB-INF/zk.xml following lines.

<system-config>
  <disable-event-thread/>
</system-config>

ehols
2008-04-06

The Fckeditor does not work normally...please check it..Thanx...
jacob
2008-04-18

public abstract interface org.zkoss.zk.ui.ext.AfterCompose {

public abstract void afterCompose();

}
I proposed that throws Exception or Throwable should be made about afterCompose method .
jacob
2008-04-18

public abstract interface org.zkoss.zk.ui.ext.AfterCompose {

public abstract void afterCompose();

}
I proposed that throws Exception or Throwable should be made about afterCompose method .
 
 
Leave a Reply
 
Name (required)
Mail (will not be published) (required)
Website
(Case Insensitive)
Bold textItalic textUnderLine textSource CodeHorizontal rulerExternal Link