Integrating ZK with Other Frameworks

ZK Developer's Guide

March 2008


Developing responsive user interfaces for web applications using Ajax, XUL, and the open source ZK rich web client development framework

Integration with the Spring Framework

Spring is one of the most complete lightweight containers, which provides centralized, automated configuration, and wiring of your application objects. It improves your application's testability and scalability by allowing software components to be first developed and tested in isolation, then scaled up for deployment in any environment. This approach is called the POJO (Plain Old Java Object) approach and is gaining popularity because of its flexibility.

So, with all these advantages, it's no wonder that Spring is one of the most used frameworks. Spring provides many nice features: however, it works mainly in the back end. Here ZK may provide support in the view layer. The benefit from this pairing is the flexible and maturity of Spring together with the easy and speed of ZK. Specify a Java class in the use attribute of a window ZUL page and the world of Spring will be yours. A sample ZUL looks like:

<?xml version="1.0" encoding="UTF-8"?>
<p:window xmlns:p=""
xsi:schemaLocation=" "
border="normal" title="Hello!"

Thank you for using our Hello World Application.

The HelloController points directly to a Java class where you can use Spring features easily.

Normally, if a Java Controller is used for a ZUL page it becomes necessary sooner or later to call a Spring bean. Usually in Spring you would use the applicationContext like:

ctx = new ClassPathXmlApplicationContext("applicationContext.xml");
UserDAO userDAO = (UserDAO) ctx.getBean("userDAO");

Then the userDAO is usable for any further access. In ZK there is a helper class SpringUtil. It wrapps the applicationContext and simplifies the code to:

UserDAO userDAO = (UserDAO) SpringUtil.getBean("userDAO");

Pretty easy, isn't it? Let us examine an example.

Assume we have a small web application that gets flight data from a flight table. The web.xml file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"


<!-- Default to 30 minute session timeouts -->


<![CDATA[The servlet loads the DSP pages.]]>

<!-- ZK -->
Used to cleanup when a session is destroyed
<display-name>ZK Session Cleaner</display-name>
<description>ZK loader for ZUML pages</description>
<!-- Must. Specifies URI of the update engine
It must be the same as <url-pattern> for the update
<description>The asynchronous update engine for ZK

<welcome-file-list id="WelcomeFileList">


Furthermore let's have a small ZUL page that has the interface to retrieve and show flight data:

<?xml version="1.0" encoding="UTF-8"?>
<p:window xmlns:p=""
xsi:schemaLocation=" "
id="query" use="com.myfoo.controller.SampleController">

Airline Code:
<p:textbox id="airlinecode"/>
<p:textbox id="flightnumber"/>
<p:datebox id="flightdate"/>
<p:button label="Search" id="search"/>
<p:separator width="5px"/>

<p:listbox width="100%" id="resultlist" mold="paging" rows="21"
style="font-size: x-small;">
<p:listhead sizable="true">
<p:listheader label="Airline Code" sort="auto"
style="font-size: x-small;"/>
<p:listheader label="Flightnumber" sort="auto"
style="font-size: x-small;"/>
<p:listheader label="Flightdate" sort="auto"
style="font-size: x-small;"/>
<p:listheader label="Destination" sort="auto"
style="font-size: x-small;"/>

As you can see, the use attribute of the ZUL page is the link to the SampleController. The SampleController handles and controls the objects. Let's have a short look at the SampleController sample code:

public class SampleController extends Window {

private Listbox resultlist;
private Textbox airlinecode;
private Textbox flightnumber;
private Datebox flightdate;
private Button search;
* Initialize the page
public void onCreate() {
// Components
resultlist = (Listbox)
airlinecode = (Textbox)
flightnumber = (Textbox)
flightdate = (Datebox)
search = (Button)
search.addEventListener("onClick", new EventListener() {

public void onEvent(Event event) throws Exception {
* Execute the search and fill the list
private void performSearch() {
//(1) List<Flight> flightlist = ((FlightService)
for (Flight aFlightlist : flightlist) {
// add flights to list
/* (1)-shows the integration of the Spring Bean*/

Just for completion the context file for Spring is listed here with the bean that is called.

<?xml version="1.0" encoding="UTF-8"?>


<bean id="txProxyTemplate" abstract="true"
<property name="transactionManager">
<ref bean="transactionManager"/>
<property name="transactionAttributes">
<prop key="save*">PROPAGATION_REQUIRED</prop>
<prop key="add*">PROPAGATION_REQUIRED</prop>
<prop key="remove*">PROPAGATION_REQUIRED</prop>

<bean id="flightService" parent="txProxyTemplate">
<property name="target">
<bean class="">
<property name="flightDAO">
<ref bean="flightDao"/>


In short we have learned how to use Spring with ZK and about the configurations. We have seen that the integration is quite smooth and also powerful.


Well, Hibernate has really nothing to do with a view layer so why are we talking here about this issue?

Normally, Hibernate is used along with Spring to take care of the database transactions. In the Spring sample the section above in we have also shown the integration of Hibernate to do the mapping and DAO handling. However, unfortunately there is a downer. Hibernate has a different session management. Unlike the ZK multi-threaded environment, Hibernate handles all data accessing operations in one session. To solve this problem the creators of ZK developed their own ZK listener for Hibernate.

This listener has to be configured in the zk.xml:

<description>Hibernate thread session context

The <listener> copies the sessionMap to the event thread's ThreadLocal variable whenever a new event thread is initiated. So whenever you call getCurrentSession() in Hibernate the same sessionMap is referenced.

Pay attention of this issue and then Hibernate can be used as described in the Hibernate documentation.


JasperReport is an open-source reporting engine. It can generate print-quality output like PDF, HTML, and RTF. Because there is no communication between the ZK layer and the JasperReport module the integration is quite easy. Just generate the reports (or graphs or PDFs) with JasperReport and show them with ZK tools. A graphic may be loaded dynamically or a PDF can be shown by opening the link.

To use JasperReport use the Java Controller for a ZUL page and use statements like:

jasperReport = JasperCompileManager.compileReport(
jasperPrint = JasperFillManager.fillReport(
jasperReport, new HashMap(), new JREmptyDataSource());
jasperPrint, "reports/zkbook.pdf");

There is nothing more to configure.

ZK Mobile

Mobile devices have become more and more popular. There are some tools in the market to create mobile websites. ZK also supports the mobile device market with a special ZK Mobile solution. This ZK Mobile client has to be installed into the mobile device and should be made to run as a thin client to interact with a ZK server. However, the solution isn't perfect because the user has to install software on his or her device even if he or she wishes to access only a single website. But the installation process on mobile devices can be automated so it's not that big an issue.

ZK Mobile features 10 out-of-the-box components:

  • listbox
  • listitem
  • textbox
  • image
  • label
  • command
  • datebox
  • decimalbox
  • intbox
  • frame

Also, the way of developing ZK applications is similar in ZK Mobile. After the installation of the ZK Mobile client (easy with zkmob.jad) any URL pointing to a ZK application may be called. See the following sample picture:

ZK Developer’s Guide

Instead of using the extension *.zul the extension *.mil is used for pages. MIL stands for Mobile Interactive Language. We need a Loader to interpret the ZUL pages and one will also be needed for MIL pages.

The web.xml modifications are:




To use ZK Mobile it is necessary to use at least version 3.0.0 of the ZK framework.

ZK JSP Tags Library

ZK as an AJAX framework has its own interpreting and rendering technology. In some cases, however, the developer would like to use JSP pages and add some ZK features. Maybe there is a large application with hundreds of JSP pages that can't migrate so easily. For this purpose ZK provides the ZK JSP tags library.

Actually the ZK JSP tags library consists of two files:

  • zuljsp.jar
  • zuljsp.tld

Declare the namespace in the JSP files and start using ZK via tags. Check this sample.jsp:

<%@ taglib uri="" prefix="j" %>
<j:page zscriptLanguage="java">
<h3>JSP Tag Demo</h3>
<j:window title="jsp demo" border="normal" width="650px">
<j:button label="Click Me">
<j:attribute name="onClick">{"It works.", "Information",
Messagebox.OK, Messagebox.INFORMATION);
<j:vbox id="demo"/>

ZK JSF Components

To enable features from JSF like Validator and ValueBinding the ZK JSF Components wrap ZK components.

Similarly to with the JSP components, just declare the name space and start using the components, that is:

<%@ taglib uri="" prefix="z"%>

The sample code from the JSP section will look like:

<title>JSF Component Demo</title>
<%@ taglib uri="" prefix="h"%>
<%@ taglib uri="" prefix="f"%>
<%@ taglib uri="" prefix="z"%>
<z:window title="jsf demo" border="normal">
<z:button label="Click Me">
<z:attribute name="onClick">{"It works.", "Information", Messagebox.OK, Messagebox.INFORMATION);
<z:vbox id="demo"/>

Binding to a Backing Bean

With the EditableValueHolder implementation a component can bind values to and from a backing bean. The input ZK components implement the EditableValueHolder interface and the following table shows the list of components with the, class of binding target and the attribute of the ZK component that will be set in wrapping.

ZK JSF Component

Class of Binding

Attribute of ZK Component


























StringString[] (multiple selection)

Binding on selection



Binding on selection











StringString[] (multiple selection)

Binding on selection

ValueBinding of a component

The binding follows typical JSF style. See the following code snippet:

<z:window z:title="ValueBinding Demo" width="650px" >
<z:textbox id="demotextbox"
f:value="#{ValueBindingBean.text}" /><br/>
<z:intbox id="demointbox"
f:value="#{ValueBindingBean.number}" /><br/>
<z:datebox id="demodatebox" format="dd/MM/yyyy"
f:value="#{}" />
<z:listbox id="demolistbox"
<z:listitem value="2" label="Text 2" />
<z:listitem value="3" label="Text 3" />
<z:listitem value="4" label="Text 4" />
<z:listitem value="5" label="Text 5" />
<z:listitem value="6" label="Text 6" />
<h:commandButton id="submit" action="#{ValueBindingBean.doSubmit}"
value="Submit" />


We started this article with advantages and disadvantages. Then we saw how to integrate ZK with the Spring Framework and also why it is useful to do so. We then moved on to Hibernate and JasperReport. Then we had a quick brush with ZK Mobile, ZK JSP tags library, and ZK JSF components.

Books to Consider

comments powered by Disqus

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free