New Features of ZK 3.6.1 CN

From Documentation

Jump to: navigation, search
  • Author
    Robbie Cheng, Evangelist, Potix Corporation
  • Date
    April 28, 2009
  • Version
    3.6.1

ZK这次释出的最新版本3.6.1主要重点为除错，除了修正了47个以上的臭虫外，ZK在最新版本也新增了约20个新功能，其中包括为单元测试设计的除错模式及MVC模式的更新等等。

我们将在以下的段落为您介绍ZK 3.6.1的最新功能，全新功能全新感受，跟着我们一起往下看吧!


Contents

轻松上手的最新功能

更直觉的MVC模式

在ZK最新版本3.6.1里，开发者将可以利用一般的可变参数呼叫($composer)代替过去的Java Class name(eg.$MyComposer)来完成MVC模式

范例如下： 

<window id="win" apply="MyComposer">
    <grid model="${win$composer.model}"/>
</window>
<grid model="${win$MyComposer.model}"/>

未来开发者可在Composer内定义所需的资源，这将让MVC的实作更加直接，且方便快速。

轻易到达特定位置

ZK 3.6.1提供了一个简便的方式将卷轴滚动到一个特定的使用介面元件。只需透过以下的函数设定:Clients.scrollIntoView()即可

在以下的范例中，您将可发现在使用者点击该按钮后vbox将自动滚动到T1 label: 

<div height="100px" width="50px" style="overflow:auto">
	<vbox>
		<label value="A"/>
		<label value="B"/>
		<label value="C"/>
		<label value="D"/>
		<label value="E"/>
		<label value="F"/>
		<label value="G"/>
		<label value="H"/>
		<label id="T1" value="I"/>
	</vbox>
</div>
<button label="scrollToT1" onClick="Clients.scrollIntoView(T1)"/>

Before, Image:beforescroll.png After, Image:afterscroll.png

元件重载

日历(datebox)功能提升

自ZK 3.6.1开始，日历(datebox )除了支援日期(月、日)，也开始支援时间(时、分)。除此之外，也将会有更多java格式的支援，包括yyyy/MM/dd-HH:mm、yyyy/MM/dd-kk:mm、 yyyy/MM/dd-K:mm a等。 

<datebox format="yyyy/MM/dd HH:mm a" cols="25" />

Image:dateboxformat.png

指定 Popup 元件位置

在ZK 3.6.1里，使用者只需设定popup.open(componentid, relative position)，即可指定Popup元件出的特定位置。此项功能的第二个参数是以相对位置来决定，11个可能的位置如下图所示：

以下为使用时的简单说明： 

<popup id="pp">
	Here is popup
</popup>
<button label="before_start" onClick='pp.open(self, "before_start");' />

按下按钮后，Popup元件将出现在指定的相对位置。而在范例中我们可以看到，相对位置即在按钮上方。

Image:beforestart.png

Native命名空间(Native namespace)支援zkhead

ZK 3.6.1现已支援zkhead，使用者将可指定ZK JS和CSS预设档案的产生位置。如果你希望JS和CSS档案能有次序地被载入的话，这项功能将让您的设定更加简便且更兼具实用性。

范例如下： 

<html xmlns="http://www.zkoss.org/2005/zk/native"
xmlns:u="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:zk="http://www.zkoss.org/2005/zk">
<head>
<title>Native Complete Page</title>
<meta http-equiv="xxx" content="yyy"/>
<zkhead/>
</head>

数据绑定

利用load-after延迟载入动作

一般来说数据绑定(databinding)当使用load-when的时候，数据绑定会先执行将资料载入到UI上，再呼叫事件监听 (event listener processes)的程序。但是更实际的做法会是，先呼叫事件监听程序，再将资料载入。现在ZK3.6.1已经可以利用load- after达到这项效果： 

<vbox>
	<label id="lb1" value="@{tar.value, load-after=btn.onClick}"/>
        <label id="tar" value="john"/>
	<button id="btn" label="try" onClick='tar.setValue("mary")'/>
</vbox>

使用者点击该按钮后，会出现的处理程序如下：

  1. 执行在事件监听里所定义的程序(tar.setValue("mary"))
  2. 执行数据绑定的载入动作(lbl.value = tar.value)

利用save-after延迟储存动作

资料连结(databinding)的存取动作通常在事件监听程序(event listener processes)之前发生。当使用save-when来启动资料连结(databinding)的存取动作。

在大部分的情况下，我们通常只需要在监听程序前撷取使用者的输入资料，所以这其实已满足了大多数开发者的需求；然而，如果开发者想要在事件监听触发后再做资料存取， 他们就可以利用save-after这项功能来代替save-when。

进阶功能

让元件ID序号一致-元件ID即为UUID

为了在客户端除错，开发者必须产生一个可预期的元件ID允许客户端单元测试函式库更容易存取UI元件。 ZK 3.6.1现已将此项功能简化，ZK现在已经可根据元件ID自动生成UUID(Universal Unique Identifiers)而不像过去随机产生一组UUID。

只要在zk.xml定义以下配置即可: 

<desktop-config>
	<id-to-uuid-prefix>_zid_</id-to-uuid-prefix>
</desktop-config>

如此一来，UUID元件就会是 _zid_foo。 

<textbox id="foo"/>

如需更多相关资讯,请参考下列网址: How to Test ZK Application with Selenium

利用FullComposer监测子元件

在过去的版本，在Composer和ComposerExt中定义的方法只在相关元件生成时被呼叫。如果这些方法在子元件生成时也同时被呼叫，使用起来将会更加方便。 而在ZK最新版本3.6.1中，只需执行FullComposer即可达到此效果。另外，如果同时执行Composer和ComposerExt ，Composer将同时被最高层级元件及子元件呼叫。

例如，在下面的列表，在Composer1中定义的方法不仅将在产生div component时被呼叫，在生成lb1 and lb2元件时也有相同效果。 

<window border="normal">
	<zscript><![CDATA[
	info = "";
	import org.zkoss.zk.ui.metainfo.*;
	import org.zkoss.zk.ui.util.*;
	class Composer1 implements Composer, ComposerExt, FullComposer {
		public void doAfterCompose(Component comp) throws Exception {			
		}
		public ComponentInfo doBeforeCompose(Page page, Component parent,
		ComponentInfo compInfo) throws Exception {			
		}
		public void doBeforeComposeChildren(Component comp) throws Exception {
		}
		public boolean doCatch(Throwable ex) throws Exception {
		}
		public void doFinally() throws Exception {
		}
	}
	]]>
        </zscript>	
	<div id="div" apply="Composer1">
		<label id="lb1" value="b_2_1"/>
		<label id="lb2" value="b_2_2"/>
	</div>
</window>
Retrieved from "http://docs.zkoss.org/wiki/New_Features_of_ZK_3.6.1_CN"