ZK/How-Tos/Look-and-Feel
Customize Look and Feel
[edit | edit source]Components
[edit | edit source]Listcell
[edit | edit source]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
[edit | edit source]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?
[edit | edit source]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
[edit | edit source]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
[edit | edit source]Use CSS "id" Selector To Style A Specified Window Component
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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;
}
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;
}
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
[edit | edit source]- Left
td.lwt-MOLDE_NAME
td.mwt-MOLDE_NAME
td.rwt-MOLDE_NAME
EX:
td.lwt-embedded{...};
td.mwt-embedded{...};
td.rwt-embedded{...};