New Features of ZK 3.6.1 TW

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_TW"