Simon has posted 6 posts at DZone. View Full User Profile

Using Desktop MVC Patterns with ZK, Spring & JPA

  • submit to reddit

In this article I will discuss the "ZkToDo2" sample application that demonstrates desktop MVC patterns using the ZK RIA AJAX framework, Spring and JPA. The Spring and JPA configuration used in this article are adapted from the persistence add-on of the Loom framework. My thanks go to Ignacio Coloma and his collaborators on Loom for their well documented and discussed JPA code.

ZK is a mature, opensource, pure Java Rich Internet Application (RAI/AJAX) framework hosted on SourceForge. The unique feature of ZK is that you use XML (ZUL/XHTML) to describe a Java desktop that is translated into browser specific AJAX enabled DHTML. All UI events triggered in the web browser DOM are sent via AJAX to the server where Java event handlers are executed. Within the AJAX event handers any changes that you make to the Java desktop are sent back to the browser where the DOM is updated. As the user interface logic is programmed as Java event handlers the developer is free from the distractions of cross browser DHTML JavaScript programming. Instead the ZK framework provides the cross browser DHTML and JavaScript. The developer is free from having to write code to bridge the browser-to-server divide and can focus on what is unique to their application rather than having to write a large amount of "boiler plate" code. A pure Java approach also means that you can debug your user interface code within your favourite IDE.

Obtaining & Building The Sample Code

Typically setting up an environment to try out J2EE sample code can be an in-depth and time consuming experience. The ZkToDo2 sample code hosted on SourceForge under the ZKForge project aims to be self installing to make it easy to debug and explore the running code. All you need is the Maven build system (a powerful successor to Ant) or a Maven plug-in for your chosen IDE. Maven will download all of the dependant jars, compile the code, test the code and will run an embedded Servlet container with an embedded database with a single command. The steps to checkout, build, run and debug the application using Eclipse with the m2eclipse Maven plug-in are here. Alternatively if you would like to build and run the application on the command-line using only a stock Maven distribution and attached a remote debugger then follow the instructions here.

Domain Object & Database Bindings

Here is an extract of the domain class and it's mapping into the database:

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Table(name = "REMINDER")
public class Reminder {
@Id @GeneratedValue
@Column(name = "EVENT_ID")
private Long id;

@Column(name = "NAME")
private String name;

@Column(name = "PRIORITY")
private int priority;

@Column(name = "DATE")
private Date date;

The database binding annotations used within the class are from the javax.persistence package. This means that they will work with any JPA implementation such as EclipseLink, Hibernate, OpenJPA or TopLink to name just a few. The state held in each domain object will be persisted to the database by the BasicDao class detailed below. First we will look at the user interface and its controller class that displays and updates the reminder objects stored within the database.

The User Interface

The user interface of ZkToDo2 is defined in a single file zktodo_b.zul. Here is a screenshot of the fully AJAX enabled web page defined in this file:

The entire user interface is the following XML markup:

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="">
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<window title="To do list" width="640px" border="normal" apply="${toDoControllerV2}">
<listbox id="list" multiple="true" rows="4" model="@{toDoModel.reminders}" selectedItem="@{toDoModel.selectedReminder}">
<listheader label="Item" />
<listheader label="Priority" width="80px" />
<listheader label="Opened" width="90px" />
<listitem self="@{each=reminder}">
<listcell label="@{}"/>
<listcell label="@{reminder.priority}"/>
<listcell label="@{, converter='org.zkforge.zktodo2.DateFormatConverter'}"/>
Item:<textbox id="name" cols="40" constraint="no empty" value="@{}"/>
Priority:<intbox id="priority" cols="1" constraint="no empty" value="@{toDoModel.selectedReminder.priority}"/>
Date:<datebox id="date" cols="14" constraint="no empty" value="@{}"/>
<button id="add" label="Add" width="36px" height="24px"/>
<button id="update" label="Update" width="46px" height="24px"/>
<button id="delete" label="Delete" width="46px" height="24px"/>

The XML dialect is ZUML the ZK User Interface Markup Language. ZUML can be a mixture of XHTML, ZUL (the ZK XUL dialect) and arbitrary XML. The ZK framework supports 170+ off-the-shelf state-of-art XUL or HTML compliant Ajax components and numerous third party widgets: JFreeChart, JasperReports, Google Maps, FCKeditor, Timeline, Timeplot, ExtJS, Dojo to name a few. The screenshot above uses the default ZK look-and-feel but you can define your own CSS-based skin or HTML template-based look-and-feel. You can even just use your corporate XHTML web pages and simply add a few Java enabled XUL textboxes, dateboxes and intboxes that render as plain old HTML form elements. The ZK demo shows many of the components on offer. You can even edit the ZUML on the "View Source" tabs then click the "Try Me!" button below the source to render your changes.

Within the markup a special declarative databindings syntax ("@{binding}") is used to bind the UI to our Java code. Within the application the JPA Annotations provide a declarative binding between our POJOs and the database tables. The ZK databindings feature provides a similar capability to declaratively bind our POJOs to the UI Components. This feature will be discussed later on in this article.

Published at DZone with permission of its author, Simon Massey.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


zodix Moore replied on Thu, 2009/03/12 - 6:46am

Wow, really impressed how little programming is required!

ZK is the best Ajax framework I eve used. It re-defines the ease of use and the integration of Java!

Simon Massey replied on Thu, 2009/03/12 - 6:21pm


ZK was SourceForge project of the month for Feb 2009 with a write up here




David H. Ruwet replied on Thu, 2009/03/12 - 9:56pm

Great! it's an elegant way to realize MVC pattern. applaud for ZK framework.

Marcos de Sousa replied on Fri, 2009/03/13 - 8:26am


Always doing great posts.

To those who use Java 5, your code really is very good.

But, it is always good show load on demand (sql paging) for performance purpose.

Now i am waiting for another great post from you.



Simon Massey replied on Tue, 2009/03/17 - 12:24pm

Here is a link to a flash recording of the databinding working:

Sandeep Musale replied on Tue, 2009/08/11 - 6:42am in response to: jame jack

Simon, ZK looks pretty good.... with a little programming ... Thanks for the post with right example... Cheers !!!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.