Ajax without JavaScript

Tutorial - Introducing ZK


ZK is a highly productive open source Java framework for building amazing enterprise web and mobile applications. This article introduces the reader to using ZK for development of dynamic and robust Java web applications. The author explores mainstay ZK features, which are employed for ZK development, and touched upon more complex patterns. 

ZK: History & Architecture

ZK has been renowned for its “Ajax without JavaScript” approach since 2005, enabling developers to build rich internet applications transparently, without any knowledge of Ajax and JavaScript. The client engine and update engine in ZK play the roles of pitcher and catcher, rendering Ajax communication transparent to developers. Events triggered by users are encapsulated and marshaled to event listeners running at the server.

In 2010, ZK introduced Server+client Fusion architecture which combines the server-centric approach with optional client-side control. The server-centric solution to Ajax brings a productivity boost, robustness, and security to Web application development; while client side solutions endow Web applications with greater controllability, and the ability to leverage client side resources. Throughout the years, ZK has provided developers which a highly productive way of building Java based web applications. The best way to show ZK's power is to introduce a non-trivial example of working with ZK. The next section introduces an example application in digestible chunks.

Implementing a ZK Application

This example application follows the MVC architectural pattern, separating business logic from the user interface, enabling the separation of user interfaces (contained in zul files) from java business logic. This separation of concerns leads to cleaner and more maintainable code. The attached example contains numerous files. The table below categorizes these files with respect to the MVC pattern:

  • Model: Employee.java, EmployeeService.java
  • View: index.zul
  • Controller: EmployeeController.java


This section introduces the implementation of the model using ZK. The model contains two files, Employee.java and EmployeeService.java. These files are a simplified version of the model and therefore do not include any database functionality. As ZK is predominantly server-side, database functionality is trivial to add. Server-side resources can be accessed directly without any need for connectors. In this example application the model's implementation is kept simple using a synchronized list. The following code outlines the service.


package org.zkoss.jtjexample.service;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import org.zkoss.jtjexample.bean.Employee;
import org.zkoss.zul.ListModelList;

public enum EmployeeService {
  private List<Employee> _employees = Collections.synchronizedList(new ArrayList<Employee>());
  private EmployeeService() {
    _employees.add(new Employee("Roger", "Charles", 21));
    _employees.add(new Employee("Gary", "Peters", 27));
    _employees.add(new Employee("Edward", "Daniels", 35));
  public ListModelList getModel() {
    return new ListModelList(_employees, true);


The service is basic Java except for the method getModel(). This method returns a class of type ListModelList which is used to provide ZK with a representation of data. The ListModelList is an intermediary between raw data in Java and ZK's representation of the raw data. When constructing the model, a List is passed along with a boolean. This indicates whether ZK's model will copy the available data into its own internal list or use the provided list. In this case, as the application is simple the model is instructed to use the _employees list directly. If this application was more complex it would be beneficial to add another layer between ZK's representative model and the application's model layer. A good example of this can be found in the ZK Essentials documentation.


In this section, we discuss the planning and implementation of the GUI using the vast array of Ajax controls provided by ZK.

Designing the interface: The ZK framework uses ZUML markup to describe GUIs; storing markup within *.zul files. ZUML is a powerful concept enabling developers to rapidly implement complex GUIs. In the following sections we will demonstrate using ZUML to implement powerful interfaces.

Using ZK components: Nowadays, most people are familiar with markup languages due to the extensive use of both HTML and XML, hence ZKs ZUML should instantly have a familiar feel. Firstly, a simple div is defined. As shown in Figure 1, attribute id is used to set certain properties of the window. id is ZKs reference to the control. One of the most powerful concepts in ZK is its component model; the model affords developers the ability to place components inside each other. In general terms the majority of components in ZK can be children of any other components. This is called the nesting of components”.

Figure 1: Simple zul file
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="./employeediv"?>

<?page title="Employee manager" contentType="text/html;charset=UTF-8"?>

<div id="employeediv">


Nesting ZK components

In this example it is better to split the functionality between departments and employees and not have the two areas overlap. Therefore an easy method of separation is needed while enabling one to switch back and forth quickly. Luckily ZK has hundreds of components to choose from. In this instance it would seem like a tabbox would work best. Therefore the tabbox is nested inside the window as demonstrated in Figure 2.

Figure 2: Nesting ZK Components


<?page title="Employee manager" contentType="text/html;charset=UTF-8"?>

<div id="employeediv"

        <auxheader label="Employees" colspan="4" />
        <listheader label="ID" hflex="2" />
        <listheader label="First Name" hflex="3" />
        <listheader label="Last Name" hflex="3" />
        <listheader label="Age" hflex="1" />


    <groupbox hflex="true">
      <caption label="Employee" />
      First Name:
      <textbox id="txtFirstName" cols="20" constraint="no empty" />
      Last Name:
      <textbox id="txtLastName" cols="20"  constraint="no empty" />
      <intbox id="intAge" cols="3"  constraint="no empty, no zero" />
      <button id="btnAddEmployee" label="Add" width="60px"
        height="24px" />
      <button id="btnUpdateEmployee" label="Update" width="60px"
        height="24px" />
      <button id="btnDeleteEmployee" label="Delete" width="60px"
        height="24px" />


Main.zul output

A couple of concepts needs to be highlighted here, first an observer will notice the apply and hflex attribute on the div.

An apply attribute is used when one wants to link the ZK UI to a GenericForwardComposer. The GenericForwardComposer will be discussed in detail in the next section. For now, all one needs to know is that it acts as the controller in the MVC paradigm for ZK.

The hflex attribute is used to layout components horizontally. This is complimented by vflex which enables vertical layout control. Both hflex and vflex inform ZK how the components parent should distribute the space among its children. In this case, the author used true as the tabbox is the only child of the window. Setting hflex to true indicates that the component should fill the entire space available. Using hflex and vflex one can create complicated layouts efficiently. Looking into hflex and vflex in more detail is beyond the scope of this article, for more information please refer to the ZK Developers Reference guide. Defining a UI as demonstrated is a simple affair when using ZK. This tutorial uses the XML option, however, it is also possible to define a UI entirely using Java. Havng introduced the basic view it is time to move on to discuss the controller and databinder.



Timothy Clare
Timothy Clare

What do you think?

JAX Magazine - 2014 - 06 Exclucively for iPad users JAX Magazine on Android


Latest opinions