Friday, February 1, 2008

Using ZK with Ofbiz/Opentaps

  1. Download ZK from, unzip and copy the lib directory and its subdirectories anywhere inside your Ofbiz component. e.g. you could put it under OFBIZ_HOME/applications/yourapp/webapp/yourapp/WEB-INF/lib. ZK directories for 3.0.2 are lib, lib/ext.
  2. Add classpath entries for these libraries in ofbiz-component.xml
  3. Add appropriate entries for ZK in web.xml of your component. See ( for details
  4. Create Hello World zul/zhtml page and put it in your webapp directory
  5. Change web.xml for your component, if it has ContextFilter entry, add /zkau to the allowed path variable otherwise both javascript and css wont be loaded when you view the page
Key things to note:

Disclaimer: All the statements here are to the best of my knowledge, there may be other bigger and better ways to do things so do your own readings and research.

  • How to add custom stylesheets to zk pages?There are 3 ways to add stylesheets
1. If you writing your own tags in the zhtml or zul page, put tag with reference to the stylesheet
2. In ZUL pages only, you can add PI
3. If you want to add site wide stylesheet (theme), you can add it in APPROOT/WEB-INF/zk.xml file containing the following tags
  • How to add meta tags to zk pages
Meta tags are important from SEO and other perspective. Meta tags can be added using the PI in ZUL pages

  • Included zhml pages at runtime complain about undefined standard entities like nbsp, copyright etc.

To fix this, add to each of the included pages.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">