Implementing Ajax with ZK

Rahul Sah

With the advent of Web 2.0, the Web browser has become a platform for delivering business applications to the users and we have ably matched the functionalities that only thick client software could exhibit. The benefits of delivering applications over the Web rather than distributing them as stand-alone desktop applications are aplenty, but for that we need to write complex client-side JavaScripts.

Ajax technology, as part of Web 2.0, came as a boon to the developers to create dynamic and responsive interfaces, but writing JavaScripts was still an overhead. The answer to this problem comes as ZK, which is an Open Source Ajax framework that allows Java Web developers to create rich Web applications, quite easily.

ZK framework

ZK's Ajax engine consists of both client and server side components that communicate with each other. The framework uses JavaScript but the complexity to implement an Ajax framework has been concealed from the Web developers. ZK has two sets of interface components, one is based on XUL (XML User interface Language) and other is based on XUML (XML User interface Markup Language).

The framework has been explained earlier in the March '07 issue of PCQuest. In this article, we will see how to develop a Web application, using ZK framework and how they can be integrated with business logic.

ZK in action

In this month's PCQ Extreme DVD, we have provided the RC 3 of the ZK framework. We will be using Eclipse as IDE and Tomcat 5.5 as the Web server. Create a new Web project, using Eclipse and name it as ZKdemo. Extract the zk-bin-3.0.0-RC.zip archive at ZK_DIR. Now, copy the "z*" jar files from ZK_DIR/dist/lib folder to your application's WEB-INF/lib folder. You would also be required to import bsh.jar from ZK_DIR/dist/lib/ext folder to your application's WEB-INF/lob folder. You can also import commons-io.jar, if your application would be using them to upload files.

We now have to register the ZK framework engine with our Web application. The ZK engine has servlets for ZK-based pages and also to handle client-server communications. By inserting following code snippet into the web.xml file, we can register the loader that evaluates ZK-based pages and also do the mapping of .zul and .zhtml pages to the servlet.

zkLoader

org.zkoss.zk.ui.http.DhtmlLayoutServlet

As Ajax does asynchronous communication between client and server, we need to register the asynchronous update engine for ZK also, by inserting following code snippet into web.xml of our Web application.

auEngine

org.zkoss.zk.au.http.DhtmlUpdateServlet







auEngine

/zkau/*

Now, we can head start with creating our ZUML pages for the application. Create a new file in the ZKdemo folder and name it as hello.zul. Adding the following code snippet will make our first page. The first line sets the title for the browser window, while the code after that creates a window titled 'Hello' within the HTML page.

Hello ZK Demo Page!!!

To test our application, build and place the war file in Tomcat's webapps directory. Start the Tomcat server (considering you have set your server's listening port as 8080) and go to http://localhost:8080/ZKdemo/hello.zul. If all is well, that is if we have successfully registered the ZK Ajax engine in web.xml and imported all necessary jar files required by the framework, then we see the Hello message on our browser.

Business logic integration

Let's move ahead and bring some interaction between our interface and the backend. Say, we have to display a list of cities to our users for selection and we populate that through a database. We will create a Java Bean named City.java to represent the city name.

public class City

{

private String _cityName;

public City(String cityName)

{_cityName = cityName;}

public String getCityName()

{ return _cityName; }

public void setCityName(String name) { _cityName = name; }

}

Now, we will create a manager for City that will do Add and List operations for the City instance and name it as CityManager.java.

public class CityManager

{

private List _cities = new LinkedList();

public List listCities() { return _cities; }

public void addCity(City city) { _cities.add(city); }

}

In this script, we will use a POJO retrieved by a "Manager" object, which will fetch and display the list. If we were suppose to use JavaScript, that process would have been a bit complex to fetch the list as Java Collection object and iterating on that to produce the list. But with ZK, we have a 'forEach' attribute to do the iterations on the Cities and display that list. The following code snippet does this task, here we have hard-coded the city names into the City object by using the addCity() method of the manager, but in real application scenario the object would be returning the cities list from a database table.

import City;

import CityManager;

manager=new CityManager();

manager.addCity(new City("Calcutta"));

manager.addCity(new City("Mumbai"));

manager.addCity(new City("New Delhi"));

manager.addCity(new City("Raipur"));

cities = manager.listCities();



Select a City:

The script for ZK is enclosed between tags. In the DVD, along with the ZK binary, you will see that we have placed this script in a tabbed window. The final page layout has some examples displayed up from the demo code that ZK provides. Also it is advisable to download the developers guide from the site as a handy reference to ZK framework.

Thus we can see how easily with ZK framework we can implement a rich user interface for our Web applications.