Implementing Ajax with ZK

With the advent of Web 2.0, the Web browser has become a platform for

delivering business applications to 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 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 it can be integrated with business logic.

ZK in action



On this month's PCQ Extreme DVD, we have provided the RC 3 release 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 the 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.

ZK jars required by application are placed in WEB-INF/lib folder

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 , by inserting following code

snippet into web.xml of our Web app.

auEngine


org.zkoss.zk.au.http.DhtmlUpdateServlet











auEngine


/zkau/*

Now, we can head start with creating our ZUML pages for our app. 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 that your server's listening

port is 8080) and go to http:// localhost:8080/ ZKdemo/hello. zul.

If all is well, that is if we've successfully registered the ZK Ajax engine

in web.xml and imported all necessary jar files required by the framework, then

we will 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 supposed 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 scenarios, 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:

Tab1 shows the city list as a result of the script code we created

The script for ZK is enclosed between tags. In the DVD, along with

the ZK binary, you'll see that we've 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.