ZK/操作指南/元件開發
首先設定包含要擴充套件的網格的頁面
<?page id="main-page"?>
<window title="Expanding Grid" border="normal" width="360px" id="food-to-go-delegate">
<zscript>
String[][] values = {
{"one", "1"}
,{"two","2"}
};
</zscript>
<grid>
<columns>
<column label="Menu Item" sortAscending="${asc}" sortDescending="${dsc}"/>
<column label="Price"/>
</columns>
<rows id="rows" use="org.zkforge.ftg.ExpandingMenuItemRows">
<row forEach="${values}">
<label value="${each[0]}"/>
<hbox>$<textbox value="${each[1]}"/></hbox>
</row>
</rows>
</grid>
<button label="Add More">
<attribute name="onClick"><![CDATA[
Window win = (Window) Executions.createComponents(
"menu-items-popup.zul", null, null);
win.doModal();
]]></attribute>
</button>
</window>
這裡有很多內容。首先，有一個名為“values”的靜態陣列。這只是一個簡單的演示，我們可以使用 forEach="${values}" 來輸出行列表。實際上，這些資料應該從資料庫中獲取。接下來要注意的是，id 為“rows”的 <rows> 標籤有一個“use”屬性，它指定使用 org.zkoss.zul.Rows 的子類來實現該 xul 元素。在這個自定義子類中，我們可以新增一個自定義方法來將新行插入網格中
package org.zkforge.ftg;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Label;
import org.zkoss.zul.Row;
import org.zkoss.zul.Rows;
import org.zkoss.zul.Textbox;
public class ExpandingMenuItemRows extends Rows {
/*
* This is just an arbitrary custom method that we can call from a zscript.
* In it we programmatically create all of the elements that appear in the other
* rows. The code below simply creates:
* <row><label value=""/><hbox>$<textbox value=""/></hbox></row>
* and sets the two value attributes whatever was passed into the method.
*/
public void addRow(String name, String price){
Label label = new Label();
label.setValue(name);
Label dollar = new Label();
dollar.setValue("$");
Textbox textbox = new Textbox();
textbox.setValue(price);
Hbox hbox = new Hbox();
hbox.appendChild(dollar);
hbox.appendChild(textbox);
Row row = new Row();
row.appendChild(label);
row.appendChild(hbox);
this.appendChild(row);
}
}
因此，如果我們可以獲得一個 zscript 函式來呼叫該方法，那麼新的行將被追加到網格中。這種邏輯位於彈出視窗中的 menu-items-popup.zul 檔案中
<window id="win" title="Add Menu Item" border="normal" width="200px" closable="true">
<zscript>
doAdd(String name, String price){
rows = Path.getComponent("//main-page/food-to-go-delegate/rows");
rows.addRow(name, price);
}
</zscript>
<vbox>Name:<textbox id="name" value=""/> Price:<textbox id="price" value=""/></vbox>
<button label="Add" onClick="doAdd(name.value,price.value);win.detach()"/> <button label="Cancel" onClick="win.detach()"/>
</window>
在這個模式對話方塊中，我們有兩個文字框，一個用於名稱，一個用於價格。如果使用者點選“新增”，按鈕將呼叫一個 zscript 函式 doAdd，並將這兩個文字框的值傳遞給它。doAdd() 然後對主頁面中的 <rows> 元素執行 IDSpace 查詢。<rows> 在頁面 “main-page” 上，id 為 “food-to-go-delegate” 的視窗的 IDSpace 中有一個 id 為“rows”。我們可以使用語法“//page/window/id” 來寫出來。一旦我們獲得了自定義子類元素的引用，我們就可以呼叫我們的自定義方法“addRow”。
如果你想開發一個可以透過 zk.xml 配置的元件，那麼你需要
1) 定義一個部署者可以在 WEB-INF/zk.xml 中使用的偏好名稱。例如，
<!-- zk.xml --> <preference> <name>org.zkoss.zul.Window.defaultActionOnShow</name> <value>moveDown</value> </preference>
2) 使用 org.zkoss.zk.ui.util.Configuration 類的 getPreference 方法訪問它。
然而，每個 Web 應用程式只有一個 Configuration 例項，如果多個 Web 應用程式共享 ZK 庫（例如，zk.jar），那麼元件可能屬於任何 Web 應用程式。因此，只有在元件附加到頁面時才能訪問偏好設定。一個好的時機是在元件被渲染時。例如，
//Window.java
//getOuterAttrs is called when redraw() is called
public String getOuterAttrs() {
StringBuffer sb = new StringBuffer().append(super.getOuterAttrs());
HTMLs.appendAttribute(sb, "z.aos",
getDesktop().getWebApp().getConfiguration()
.getPreference("org.zkoss.zul.Window.defaultActionOnShow"));
return sb.toString();
}
如果你想提供一個靜態方法來設定預設值（覆蓋偏好設定）
public String getOuterAttrs() {
StringBuffer sb = new StringBuffer().append(super.getOuterAttrs());
String aos = getDefaultActionOnShow();
if (aos == null)
aos = getDesktop().getWebApp().getConfiguration()
.getPreference("org.zkoss.zul.Window.defaultActionOnShow");
HTMLs.appendAttribute(sb, "z.aos", aos);
return sb.toString();
}
public static String getDefaultActionOnShow() {
return _daos;
}