New Features of ZK 3.6.3 TW

{{Template:Smalltalk_Author|
|author=Timothy Clare, Technology Evangelist, Potix Corporation
|date=November 3, 2009
|version=3.6.3
}}

ZK 最新版本3.6.3 主要重點為效能的提升, 不論是在記憶體消耗或是應用程式展現的效能上都有大幅改善。 除了在效能方面的進步之外，我們也在此最新版本新增了許多新功能，同時修正了70個以上的臭蟲。現在就跟著我們一起來看3.6.3 與原先的版本之差異、及新增了哪些功能吧！ 


= 效能提昇 =

== 記憶體用量 ==

ZK 3.6.3 的內存記憶體消耗已得到優化, 所以記憶體消耗將會比ZK 3.6.2來的少. 該問題的起因源自 Internet Explorer 一直以來的缺陷, 隨之而來的是在執行模式對話框(modal dialog)和控制網格(grid control)時的記憶體大量消耗. 在 ZK 3.6.3 裡, 這些問題都已得到解決, 因此在 Internet Explorer 上的記憶體消耗問題也已大大改善.

== ZK的靜態資源緩存 ==

位於ZK JAR檔裡的ZK靜態資源現在將在瀏覽器緩存，一直到升級到另一個ZK版本。這意味著瀏覽器不需要重載這些項目，效能也相對地提高許多。 

在開發一個主題或元件時，我們可能不希望啟用高速緩存，所以我們可以在zk.xml 檔案裡指定一個資料庫屬性(library-property), 再將其關閉。此範例程式碼如下: 

<source lang="xml">
<library-property>
  <name>org.zkoss.web.classWebResource.cache</name>
  <value>false</value>
 </library-property></source>

= 目錄(Menus)和目錄欄(Menubar)=

== 新增橫項捲動功能 ==

目錄欄.(<Javadoc>org.zkoss.zul.Menubar</Javadoc>) 現已支援橫項捲動功能, 有了這項功能, 開發者將可輕鬆地在應用程式內加入便於使用者的直覺式的設計.

[[Image:menu_side_scrolling_zk3.6.3.PNG]]

以下的程式碼將為您示範, 目錄欄.(<Javadoc>org.zkoss.zul.Menubar</Javadoc>) 橫項捲動這項功能其實很簡單就可以辦到!

<source lang="xml">
<menubar width="150px" scrollable="true">
 <menu label="Menu1">
  <menupopup>
    <menuitem label="Submenu"/>
  </menupopup>
 </menu>
 <menu label="Menu2">
  <menupopup>
    <menuitem label="Submenu"/>
  </menupopup>
 </menu>
 <menu label="Menu3">
  <menupopup>
    <menuitem label="Submenu"/>
  </menupopup>
 </menu>
</menubar></source>

==支援 onClick 功能==

目錄元件(<Javadoc>org.zkoss.zul.Menu</Javadoc>) 現已支援 onClick 事件. 從以下目錄元件(<Javadoc>org.zkoss.zul.Menu</Javadoc>)的截圖中以紅框標記的部分來看, 我們可以發現點擊右手邊的箭頭, 下方會顯示功能列表, 而點擊主按鈕後, 即會執行onClick 事件. 
其中圖示內的紅色框線是為了突顯目錄元件(<Javadoc>org.zkoss.zul.Menu</Javadoc>)可點擊的區域範圍. 如圖示:

[[Image:menu_onclick_zk3.6.3.PNG]]

欲執行onClick 事件的程式碼如下:

<source lang="xml">
<menu label="Topmost" onClick='alert(1);'></source>

=Tabbox 支援 Tabbar 裡的其他控制項=

<Javadoc>org.zkoss.zul.Tabbox</Javadoc> 現已支援 Tabbar 裡的其他控制項, 而這將帶給開發者更大自由和選擇. 以下的截圖為<Javadoc>org.zkoss.zul.Tabbox</Javadoc> 的範例圖 - 目錄系統, 其中包括許多Tabbar 的其他控制項, 附圖如下:

[[Image:tabs_zk3.6.3.png]]

以下的程式碼將為您示範如何在Tab bar中嵌入控制項:

<source lang="xml">
<zk>
<tabbox width="250px">
	<tabs>
		<tab label="Tab 1" closable="true" />
		<tab label="Tab 2" closable="true" />
		<tab label="Tab 3" closable="true" />
		<tab label="Tab 4" closable="true" />
		<tab label="Tab 5" closable="true" />
	</tabs>
	<toolbar>
		<toolbarbutton image="/img/live.gif" onClick='alert("Live")' />
		<toolbarbutton image="/img/defender.gif"
			onClick='alert("Defender")' />
		<toolbarbutton image="/img/battery.gif"
			onClick='alert("Battery")' />
	</toolbar>
	<tabpanels>
		<tabpanel>This is panel 1</tabpanel>
		<tabpanel>This is panel 2 The second panel</tabpanel>
		<tabpanel>This is panel 3</tabpanel>
		<tabpanel>This is panel 4</tabpanel>
		<tabpanel>This is panel 5</tabpanel>
	</tabpanels>
</tabbox>
</zk>
</source>

=改善圖表元件(chart) =

==新增儀表板元件(dial) ==

我們在此新版本新增了一項新的圖表元件 - 儀表板元件(dial) . 利用此圖表, 你可以自由定義縮放比率, 並針對不同區塊設定不同顏色. 同時你也可以進一步將此功能運用在風險管理的呈現上.

以下即為此新增元件的圖示和程式碼:

[[Image:dial_chart_zk3.6.3.PNG]]

<source lang="java">
<window onOK="doOK()" width="350px">
<zscript>
<![CDATA[
    import org.zkoss.zul.DialModel;
    import org.zkoss.zul.DialModelScale;

    int val= 40;

	DialModel dialmodel = new DialModel();
	DialModelScale scale = dialmodel.newScale(0.0, 100.0, -120.0, -300.0, 10.0, 4);//scale's configuration data
	scale.setText("Temperature (F)");
	scale.newRange(80, 100, "#FF0000", 0.83, 0.89);
	scale.newRange(60, 80, "#FFC426", 0.83, 0.89);
	scale.setValue(val);

	doOK() {
		val = dbx.getValue();
		if (val > 100) {
			val = 100;
		} else if (val < 0) {
			val = 0;
		}
		dbx.value = val;
		slx.curpos = val;
		scale.setValue(val);
		if (val > 80) {
			scale.setNeedleColor(scale.getRange(0).getRangeColor());
		} else if (val > 60) {
			scale.setNeedleColor(scale.getRange(1).getRangeColor());
		} else {
			scale.setNeedleColor(dialmodel.getFrameFgColor());
		}
    }
]]>
</zscript>
<chart id="dial" title="Dial Plot" width="300" height="300" type="dial" threeD="false" fgAlpha="128"/>
<zscript>
  dial.setModel(dialmodel);
</zscript>
	<hbox>
		<slider id="slx" curpos="${val}" onScroll="dbx.value=self.curpos; doOK()"/>
		<intbox id="dbx" value="${val}" onChange="doOK()"/>
	</hbox>
</window></source>

==圖表(Charts) 支援字型設定==

我們現在已經可以在圖表中設定我們想要的字型, 如果您希望在圖表中使用外語, 那這項新功能的出現將會特別有幫助. 以下的範例將以中文為例為您示範字型的設定:

<source lang="java">
<vbox>
<zscript>
  import java.awt.Font;
  String fontname = "Dialog";
  Font tfont = new Font(fontname, Font.BOLD, 16); //for title
  Font lfont = new Font(fontname, Font.PLAIN, 10); //for legend
  Font lbfont = new Font(fontname, Font.PLAIN, 12); //for label

  //create and set the model of the bar chart here
</zscript>

<chart id="barchart" title="長條圖  Bar Chart" width="500" height="250" type="bar" threeD="false" fgAlpha="128" 
titleFont="${tfont}" legendFont="${lfont}" xAxisFont="${lbfont}" xAxisTickFont="${lbfont}" />
</vbox>
</source>

[[Image:bar_chart_font_zk3.6.3.PNG]]

=彈出視窗(POPUP), 提示工具(Tooltip)和文字位置=

彈出視窗(POPUP), 提示工具(Tooltip)和文字位置元件功能都已增強. 以下即是新增的的文字位置設定:

[[Image:zk3.6.3_positions2.jpg]]

您可以利用以下這段程式碼指定這些位置

<source lang="javascript">
<button id="btn" label="overlap" width="300px" height="300px" popup="component_id, position=overlap_end"/></source>

除此之外, 你也可以利用x 和 y 的屬性設定來達到欲調整效果, 程式碼如下:

<source lang="javascript">
<button id="btn" label="overlap" width="300px" height="300px" popup="component_id, x=50,y=50"/></source>

== 提示工具(Tooltip)的延遲時間設定==

提示工具(Tooltip) 屬性設定現已支援延遲時間設定, 只需加入下面的程式碼即可達到效果.
 
<source lang="xml">
<label label="Tooltip" tootlip="id, position=before_start, delay=500"/></source>

=新增客戶端自動逾時(Timeout)功能=
	
當ZK應用程式連線逾時發生時，通常需要使用者的交互動作使它重新導向到逾時頁面。在ZK 3.6.3 則不需要使用者的交互動作，客戶端會自動被通知逾時，進而採取適當的行動。 

自動逾時(automatic-timeout)可在zk.xml session-config 內做設定。以下即為範例，如果自動逾時(automatic-timeout) 元件被設置為真(true)，那麼客戶端將立即被導向至適當頁面。如果它被設置為否(false)，那麼應用程式將等待用戶交互引導向前。

<source lang="xml">
<session-config>
	<device-type>ajax</device-type>
	<automatic-timeout/> <!-- the same as <automatic-timeout>true</automatic-timeout> -->
	<timeout-uri>/timeout.zul</timeout-uri>
</session-config></source>

=藉伺服端傳送錯誤報告=

錯誤報告的傳送設定是藉由client-config裡的錯誤重載元件(error-reload element) 來執行的, 這些元件都在 zk.xml 檔案裡設定. 以下程式碼即為讀取到錯誤報告時的範例:

<source lang="xml">
<error-reload>
     <device-type>ajax</device-type>
     <error-code>410</error-code>
     <reload-uri>/login.zul</reload-uri>
 </error-reload></source>

以410錯誤報告為例, 錯誤報告出現時, 頁面會被導到 login.zul. 然而, 當 <reload-url> 為空白時, 頁面將重新被載入一次. 在ZK 3.6.3 裡, 您將有另一個選擇, 我們可以將 <connection-type> 設定如下:

<source lang="xml">
<connection-type>server-push</connection-type></source>

<connection-type> 代表的是錯誤報告被傳送的路徑. 系統預設值是藉 AU channel 傳送, 而這部分的請求會藉widgets 傳送並在客戶端執行。
如果您想藉伺服端傳送錯誤報告,  那你就必須將<connection-type> 設定為server-push.

如需更多相關資訊, 請查看[[ZK_Configuration_Reference/zk.xml/The_client-config_Element| 此連結]]

=日曆元件 (Datebox) 支援時區設定=

從以下圖示您可以發現在最新版本裡, 日曆元件( <Javadoc>org.zkoss.zul.Datebox</Javadoc>) 新增了時區設定這項功能, 使用者可以依自己的需求從預設的時區內設定適合的時區. 而開發者可自由指定這些選項並限制可用的時區選項. 在以下的圖片中我們可以看到現在設定的時區是 "GMT+12, GMT+8". 

[[Image:datebox_timezone_zk3.6.3.png]]

<source lang="xml">
<datebox id="datebox1" format="M/d/yy KK:mm:ss a" width="150px" displayedTimeZones="GMT+12,GMT+8" timeZone="GMT+8" timeZonesReadonly="false"/></source>

=訊息視窗 (Messagebox) 維持單字完整性=

訊息視窗(<Javadoc>org.zkoss.zul.Messagebox</Javadoc>) 現已有單字斷行設定, 即使是再長的單字也都能完整的呈現.

<source lang="java">
Messagebox.show("Would you like to save a longerrrrrrrrrrrrrrrrrrr word? Would you like to save a longerrrrrrrrrrrrrrrrrrr word? Would you like to save a longerrrrrrrrrrrrrrrrrrr word?", "The long word can be broken correctly", Messagebox.OK, Messagebox.EXCLAMATION);</source>

[[Image:messagebox_wrap_zk3.6.3.PNG]]

[[Category:Release]]
[[Category:ZK]]
[[Category:New Features]]
{{Template:Smalltalk_Footer|
|name=Potix Corporation
}}


<comment>http://docs.zkoss.org/wiki/New_Features_of_ZK_3.6.3</comment>