ZK/操作指南/外觀
列表單元格的預設樣式如下
div.listbox-body td {
...
}
因此，要使用類來自定義外觀，您需要指定如下內容
div.listbox-body td.mine {
...
}
然後，您可以在 ZUML 頁面中指定 sclass。
<listcell sclass="mine"/>
您可以建立新的自定義元件來以您想要的方式顯示自身，而不是僅僅修改內建元件的 .dsp 檔案。有關說明，請參閱 zkoss.org 網站上的 DevGuide PDF。請注意，演示頁面上的“Dojo 魚眼”示例以及 zkforge 上的程式碼是建立自定義元件的示例。
以下是繪製自定義微調器 xhtml 的 zk-progress-prompt.js 檔案
/*
* Contributed by MaryGrace http://sourceforge.net/users/marygrace/
*/
function Boot_progressbox(id, msg, x, y) {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
x = (myWidth-180) / 2;
y = (myHeight-70) / 2;
var html = '<div id="'+id+'" style="left:'+x+'px;top:'+y+'px;'
+'position:absolute;z-index:79000;background-color:white;'
+'white-space:nowrap;border:4px solid #77a;padding:15px; font-weight:bold;">'
+'<img alt="." src="'+zk.getUpdateURI('/web/zk/img/progress.gif')+'"/> '
+" Attendere prego..."+'</div>';
document.body.insertAdjacentHTML("afterbegin", html);
return $e(id);
}
以下是當 zscript 中丟擲異常時使用的 zk-zscript-error-message.js 檔案。注意：錯誤訊息是一個笑話，您的使用者可能覺得它不好笑，因此您需要編輯它...
zkau.cmd0.alert = function (msg) {
if (!zk._errcnt) zk._errcnt = 1;
var id = "zk_err_" + zk._errcnt++;
var box = document.createElement("DIV");
document.body.appendChild(box);
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
x = (myWidth-180) / 2;
y = (myHeight-70) / 2;
var html = '<div id="'+id+'" style="left:'+x+'px;top:'+y+'px;'
+'position:absolute;z-index:79000;background-color:white;'
+'white-space:nowrap;border:4px solid #77a;padding:15px; font-weight:bold;">'
+'<img alt="." src="'+zk.getUpdateURI('/web/zul/img/error.gif')+'"/> '
+" Hum. The zscript threw and exception. Most likely a coding problem. Sack the developer!<br/>"
+" The exception message was: "
+zk.encodeXML(msg, true)+'</div>';
zk._setOuterHTML(box, html);
box = $e(id); //we have to retrieve back
try {
new Draggable(box, {
handle: box, zindex: box.style.zIndex,
starteffect: zk.voidf, starteffect: zk.voidf, endeffect: zk.voidf});
} catch (e) {
}
};
以下是當 AJAX 連線失敗（例如伺服器停止執行或使用者網路連線斷開）時繪製自定義框的 zk-ajax-error-message.js 檔案
<nowiki>
zk.error = function (msg) {
if (!zk._errcnt) zk._errcnt = 1;
var id = "zk_err_" + zk._errcnt++;
var box = document.createElement("DIV");
document.body.appendChild(box);
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
x = (myWidth-180) / 2;
y = (myHeight-70) / 2;
var html = '<div id="'+id+'" style="left:'+x+'px;top:'+y+'px;'
+'position:absolute;z-index:79000;background-color:white;'
+'white-space:nowrap;border:4px solid #77a;padding:15px; font-weight:bold;">'
+'<img alt="." src="'+zk.getUpdateURI('/web/zul/img/error.gif')+'"/> '
+" Oops! AJAX Issues! Has the server been switched off?<br/>"
+" The technical error message to report to IT is the following:<br/>"
+zk.encodeXML(msg, true)+'</div>';
zk._setOuterHTML(box, html);
box = $e(id); //we have to retrieve back
try {
new Draggable(box, {
handle: box, zindex: box.style.zIndex,
starteffect: zk.voidf, starteffect: zk.voidf, endeffect: zk.voidf});
} catch (e) {
}
};
function errorImg(){
// this is just to ensure that the error images is loaded but off screen
// as this image will only be shown if you kill the server when it will
// no longer be able to loaded
return "<div style='position:absolute;left:-1000px;right:100px'><img src='"+zk.getUpdateURI("/web/zul/img/error.gif")+"'/></div>";
}
</nowki>
以下是一些 zul，當您單擊“長時間處理！”按鈕時將顯示此微調器，當您單擊“丟擲異常！”按鈕時將顯示 zscript 異常訊息。注意：只有在停止伺服器或斷開電腦與網路的連線，然後按任一按鈕時，您才會看到 AJAX 異常訊息。
/*
* Originally contributed by MaryGrace http://sourceforge.net/users/marygrace/
*/
<zk>
<window>
<zscript>
<![CDATA[
public void go() {
Thread.sleep(5000);
}
public void exception(){
throw new java.lang.RuntimeException("deliberate exception");
}
]]>
</zscript>
<button label="Long Processing!" onClick="go()"/>
<button label="Throws Exception!" onClick="exception()"/>
</window>
<script type="text/javascript" src="/examples/zk-progress-prompt.js" />
<script type="text/javascript" src="/examples/zk-ajax-error-message.js" />
<script type="text/javascript" src="/examples/zk-zscript-error-message.js" />
<script type="text/javascript">
// here we load the image into be page else it wont render for the AJAX error
// message if the server goes down and the browser has not cached the image yet
document.write(errorImg());
</script>
</zk>
例如，
<zk><style>
.z-button .z-button-tl, .z-button .z-button-tr, .z-button .z-button-bl, .z-button .z-button-br,
.z-button .z-button-tm, .z-button .z-button-bm, .z-button .z-button-cl, .z-button .z-button-cr, .z-button .z-button-cm {
background-image:none;
}
</style>
<button tooltiptext="Here is a button" image="http://www.freebuttons.com/freebuttons/Alien/AlienDd5.gif"/>
</zk>
視窗是 ZK 中一個複雜的元件。要更改其樣式，有時開發人員必須覆蓋預設 CSS 檔案中的樣式定義才能使其起作用。例如，如果我們要更改視窗的標題樣式。以下程式碼將不起作用，因為 style 屬性適用於視窗本身，而不是標題。
<window id="win1" title="1st window" border="normal" width="200px" style="background-color: lightyellow"> Window 1 </window>
更改視窗標題樣式的正確方法如下
<window id="win1" title="1st window" border="normal" width="200px" style="background-color: lightyellow">
<style>.title td {background-color:red; color: white;}</style>
Window 1
</window>
style 元件會將 CSS 選擇器 <style> .title td {...} </style> 生成到最終的 html 頁面中，並由瀏覽器解釋以使用此新樣式。
很好，現在我們可以毫無問題地更改視窗的標題樣式...等等，如果我在同一個頁面上有不止一個視窗，所有視窗的標題都會更改為新樣式，因為它是定義為 CSS “類”選擇器。如果我只想更改一個視窗的標題，而保持其他視窗不變，該怎麼辦？您必須定義 CSS “id” 選擇器。問題是，眾所周知，最終生成的 html 標籤 id 是由 ZK 引擎自動生成的 uuid。我們事先不知道 uuid 值，並且在生成後它是不可變的。如何定義 CSS “id” 選擇器？別擔心，使用 EL 表示式來為您完成這項工作。以下程式碼將只更改 win1 的樣式，而 win2 將保持不變
<zk>
<window id="win1" title="1st window" border="normal" width="200px" style="background-color:lightyellow">
<style>
#${win1.uuid} td {background-color:red; color: white;}
</style>
Window 1
</window>
<window id="win2" title="2nd window" border="normal" width="200px" style="background-color: lightyellow">
Window 2
</window>
</zk>
請注意，這在 IE6 中不起作用。請嘗試使用 #${win1.uuid} #\${win1.uuid} 替換，這在 IE6 和 FF1 中有效
您可以使用 winzip 或 jar.exe 將 web 應用程式的 WEB-INF/lib 資料夾中的 zul jar 檔案解壓縮到 WEB-INF/classes 資料夾中。然後從 lib 中刪除 jar 檔案，以便您的 servlet 容器從檔案系統中拾取所有類檔案、影像和 dsp 檔案。搜尋 dsp 檔案和影像，您會找到 zk 用作 gif 影像的一組 dsp 檔案，這些檔案的名字與 xul 元素匹配，例如 /web/zul/html/tabbox.dsp。如果您開啟此檔案，您會看到它是將 ZK 元件轉換為瀏覽器 html 的模板，它輸出 html 表格標記。您可以編輯這些檔案中的 html 標記，然後重啟伺服器或重新載入應用程式以檢視效果。
3.0RC
- 以下是一個標題 CSS。
div.tree-head th, div.listbox-head th, div.grid-head th, div.listbox-paging th, div.grid-paging th {
overflow: hidden; border: 1px solid;
border-color: #DAE7F6 #7F9DB9 #7F9DB9 #DAE7F6;
white-space: nowrap; padding: 2px;
font-size: small; font-weight: normal;
}
div.tree-body td, div.listbox-body td, div.listbox-paging td {
cursor: pointer; padding: 0 2px;
font-size: small; font-weight: normal;
}
3.0
- 以下是一個標題 CSS。
div.head-cell-inner {
font-size: small; font-weight: normal;
}
div.cell-inner {
font-size: small; font-weight: normal;
}
透過樣式修改樹圖示
tree-root-open The icon used to represent the open state for tree items at the root level. tree-root-close The icon used to represent the close state for tree items at the root level. tree-tee-open The icon used to represent the open state for tree items that have next siblings. tree-tee-close The icon used to represent the close state for tree items at have next siblings. tree-last-open The icon used to represent the open state for tree items that don't have next siblings. tree-last-close The icon used to represent the close state for tree items at don't have next siblings. tree-tee The icon used to represent the T-shape icon. tree-vbar The icon used to represent the |-shape (vertical bar) icon. tree-last The icon used to represent the L-shape icon -- no next sibling. tree-spacer The icon used to represent the blank icon.
以下是一個對應的影像：https://archive.is/20130707075935/img512.imageshack.us/img512/8242/treeicondesut8.png
以下是一些 css 類
span.tree-root-open, span.tree-tee-open, span.tree-last-open {
width: 18px; min-height: 18px; height: 100%;
background-image: url(${c:encodeURL('~./zul/img/tree/open.png')});
background-repeat: no-repeat;
display:-moz-inline-box; vertical-align:top;
display:inline-block;
}
span.tree-root-close, span.tree-tee-close, span.tree-last-close {
width: 18px; min-height: 18px; height: 100%;
background-image: url(${c:encodeURL('~./zul/img/tree/close.png')});
background-repeat: no-repeat;
display:-moz-inline-box; vertical-align:top;
display:inline-block;
}
span.tree-tee, span.tree-vbar, span.tree-last, span.tree-spacer {
width: 18px; min-height: 18px; height: 100%;
display:-moz-inline-box; vertical-align:top;
display:inline-block;
}
- 左邊
td.lwt-MOLDE_NAME
td.mwt-MOLDE_NAME
td.rwt-MOLDE_NAME
EX
td.lwt-embedded{...};
td.mwt-embedded{...};
td.rwt-embedded{...};