ZK/How-Tos/Look-and-Feel

Customize Look and Feel

Components

Listcell

The default style for a listcell is as follow

div.listbox-body td {
...
}

Thus, to customize the look and feel with a class, you have to specify as follows

div.listbox-body td.mine {
...
}

Then, you can specify the sclass in your ZUML page.

<listcell sclass="mine"/>

Create Custom Components

Rather than just hacking the .dsp files for the built-in components you can create new custom components that display themselves anyway that you want. See the DevGuide PDF on the zkoss.org site for instructions. Note that the "Dojo Fish Eye" example on the demo page and with the code at zkforge is an example of creating a custom component.

How do I change the "Processing.." Spinner and other system messages for something nicer?

Here is the zk-progress-prompt.js file that that draws a custom spinner xhtml

/*
* 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); 
} 

Hers is a zk-zscript-error-message.js file for when an exception is thrown in a zscript. N.B. The error message is a joke and your users might not find it funny so you need to edit this one...

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) {
}
}; 

Here is the zk-ajax-error-message.js file that that draws a custom box when the AJAX connection fails (such as the server goes down or the users network connection gets dropped):

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

Here is some zul that will show this spinner when you click the 'Long Processing!' button and will show the zscript exception message when you click the 'Throws Exception!' button. N.B. You will only see the AJAX exception message if you stop your server or disconnect your PC from the network then press either button.

/*
* 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> 

How to customize my image for ZK Button in ZK 3.5.x version

For example,

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

CSS

Use CSS "id" Selector To Style A Specified Window Component

Window is a sophisticated component in ZK. To change its style, sometimes a developer must override the style definition in the default CSS file to make it work. For example, if we want to change the Window's title style. The following code will not work, because the style attribute applies to the window itself, not the title.

<window id="win1" title="1st window" border="normal" width="200px" style="background-color: lightyellow"> 
  Window 1
</window> 

The correct way to change the style of the window's title is as follows:

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

The style component will generate the CSS selector <style> .title td {...} </style> into the final html page and interpreted by the browser to use this new style.

Great, now we change the window's title style without problem... Wait a minute, if I have more than one window on the same page, all windows' title will be changed to the new style because it is defined as a CSS "class" selector. What if I just want to change one window's title and leave others as is? You have to define a CSS "id" selector. The question is, as we all know that the finally generated html tag id is the uuid generated by the ZK engine automatically. We don't know the uuid value beforehand and it is immutable after it is generated. How do I difine an CSS "id" selector? Don't worry, use the EL expression to do the job for you. The following code would change win1's style only, the win2 is leave as is:

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

Please note that this does not work in IE6. Try instead of #${win1.uuid} #\${win1.uuid} This works in IE6 and FF1

Edit The .dsp Files For The Components

You can use winzip or jar.exe to extract the zul jar file in the WEB-INF/lib folder of your web application into your WEB-INF/classes folder. Then remove the jar file from the lib so that your servlet container picks up the all of the class files, images and dsp files from the file system. Search for the dsp files and images and you will find the gif images that zk uses as well as a set of dsp files who's names match the xul elements such as /web/zul/html/tabbox.dsp. If you open this file you will see that it is the template used to convert the ZK Component into html for the browser and it outputs html table markup. You can edit the html markup in these files and bounce the server or reload the application to see the effect.

CSS Font in Grid, Tree, and Listbox

3.0RC

• Here is a header 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;
}

Here is a body CSS.

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

• Here is a header CSS.

div.head-cell-inner {
	font-size: small; font-weight: normal;
}

Here is a body CSS.

div.cell-inner {
	font-size: small; font-weight: normal;
}

To modify tree icon by style

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.  
 

Here is a corresponding image: https://archive.is/20130707075935/img512.imageshack.us/img512/8242/treeicondesut8.png

Here are the css classes:

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; 
}

CSS in Window

• Left

td.lwt-MOLDE_NAME

Middle

td.mwt-MOLDE_NAME

Right

td.rwt-MOLDE_NAME

EX:

td.lwt-embedded{...};
td.mwt-embedded{...};
td.rwt-embedded{...};